Как создать красивые границы изображений с помощью новых параметров Divi

В сегодняшнем руководстве по Divi мы покажем вам, как создавать красивые границы изображений на следующем веб-сайте, который вы создадите. Цель этого поста - продемонстрировать, как вы можете создавать прекрасные результаты, соответствующие изображениям, которые вы используете (а также остальной части вашего веб-сайта).

С новыми опциями Divi добиться потрясающих результатов стало проще, чем когда-либо. Вам нужно будет только внести некоторые изменения, которые мы покажем вам, как это сделать, и вы будете готовы вывести свой веб-дизайн на новый уровень. Все 8 примеров, которыми мы поделимся с вами, не будут использовать ничего, кроме встроенных опций, которые предлагают Divi Builder и Image Module.

Подглядывать

Давайте посмотрим на результаты, которых вы можете ожидать от этого поста:

Как создать красивые границы изображений с помощью новых параметров Divi

Подпишитесь на наш канал Youtube

Градиентный фон

Первая возможность добиться красивых границ изображения - использовать только градиентный фон. Экспериментируя с различными настройками градиентного фона, вы можете добиться простых, но элегантных результатов. Мы покажем вам три примера границ изображений, которые состоят исключительно из градиентного фона.

Стандарт

Первый пример, который мы рассмотрим, самый простой и самый скромный из всех; стандартная граница градиентного изображения. В результате мы покажем вам, как выглядит вот так create:

Вкладка Content

Начните с выбора градиентного фона на вкладке «Содержимое». В этом примере мы использовали следующие настройки:

• Первый цвет: # 081e8c
• Второй цвет: # 764f9b
• Тип градиента: линейный
• Направление градиента: 269 градусов
• Стартовая позиция: 40%
• Конечная позиция: 60%

Вкладка "Дизайн"

Следующее и последнее, что вам нужно сделать, это добавить к изображению отступ. Все просто. Перейдите на вкладку «Дизайн» и добавьте «10 пикселей» к верхнему, нижнему, правому и левому отступу.

Стороны

Далее у нас есть граница изображения, которая отображается только с левой и правой стороны изображения. Использование такой границы изображения придает приятный дополнительный штрих изображению, не уделяя слишком много внимания самой границе.

Вкладка Content

Чтобы добиться этого типа границы изображения, начните с добавления к изображению следующего градиентного фона:

• Первый цвет: rgba (255,255,255,0)
• Второй цвет: # 0a8da8
• Тип градиента: линейный
• Направление градиента: 166 градусов
• Стартовая позиция: 29%
• Конечная позиция: 52%

Вкладка "Дизайн"

На вкладке «Дизайн» единственное, что вам понадобится, - это отступы 10 пикселей для правой и левой стороны.

Один угол

Двигаясь дальше, вы также можете создать угловой фон для изображений на своем веб-сайте. Этот тип границы удобно использовать, если вы хотите подчеркнуть цвет, используемый в изображении.

Вкладка Content

Для третьего примера изображения используйте следующий градиентный фон:

• Первый цвет: rgba (58,8,1,0.58)
• Второй цвет: rgba (41,196,169,0)
• Направление градиента: 152 град.
• Стартовая позиция: 34%
• Конечная позиция: 28%

Вкладка "Дизайн"

Затем добавьте «20 пикселей» к каждому отступу.

Граница изображения и градиентный фон

Еще одна возможность - комбинировать градиентный фон с рамкой изображения. Это тоже может дать потрясающие результаты, о чем вы сможете убедиться в следующих четырех примерах.

Тонкий градиент

Первая комбинация градиентного фона и границы изображения простая, но красивая. Используя одни и те же цвета для градиентного фона и границы, создается ощущение, что граница изображения заполняется цветом.

Вкладка Content

Начните с добавления следующих настроек градиентного фона к вашему изображению:

• Первый цвет: rgba (255,255,255,0)
• Второй цвет: # 777777
• Тип градиента: линейный
• Направление градиента: 180 градусов
• Стартовая позиция: 65%
• Конечная позиция: 78%

Вкладка "Дизайн"

Перейдите на вкладку Дизайн и используйте следующие настройки в подкатегории Граница:

• Использовать границу: Да
• Цвет границы: # 777777
• Ширина границы: 3 пикселя
• Стиль границы: сплошной

Наконец, добавьте отступ в 7 пикселей ко всем параметрам заполнения.

Сформированный

Далее у нас есть пример, который отлично привлекает внимание посетителей. Само изображение в этом случае содержит в основном более светлые цвета, что создает хороший баланс с более темной границей.

Вкладка Content

Для этой границы изображения вам понадобятся следующие настройки градиентного фона:

• Первый цвет: rgba (53,0,188,0.1)
• Второй цвет: # 680061
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 80%
• Конечная позиция: 80%

Вкладка "Дизайн"

Перейдите на вкладку Дизайн и используйте следующую рамку:

• Использовать границу: Да
• Цвет границы: # 9a00bc
• Ширина границы: 1 пикс.
• Стиль границы: сплошной

Прокрутите вниз и добавьте к изображению следующий отступ:

• Сверху: 7 пикселей
• Справа: 5 пикселей
• Внизу: 7 пикселей
• Слева: 5 пикселей

Двойная граница

Использование двойной границы в сочетании с градиентным фоном также может дать потрясающие результаты. Взглянем:

Вкладка Content

Цвет фона градиента, который мы использовали в этом примере, следующий:

• Первый цвет: rgba (224,43,32,0,61)
• Второй цвет: rgba (12,113,195,0,87)
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 71%
• Конечная позиция: 93%

Вкладка "Дизайн"

Двигаясь дальше, используйте следующие настройки для подкатегории Border:

• Использовать границу: Да
• Цвет границы: # f4f4f4 (соответствует цвету фона вашего раздела)
• Ширина границы: 8 пикселей
• Стиль границы: Двойной

И добавьте '10px' к верхнему, нижнему, правому и левому отступу изображения.

Углы треугольника

Двигаясь дальше, вы также можете создать несколько небольших углов на границе, используя параметр градиентного фона в сочетании с пунктирной границей.

Вкладка Content

Чтобы добиться границы изображения, которую мы показали выше, используйте следующие настройки градиентного фона:

• Первый цвет: rgba (163,103,6,0)
• Второй цвет: # e09900
• Тип градиента: радиальный
• Радиальное направление: центр
• Стартовая позиция: 97%
• Конечная позиция: 97%

Вкладка "Дизайн"

На вкладке «Дизайн» нам также понадобятся следующие настройки границы:

• Использовать границу: Да
• Цвет границы: # e09900
• Ширина границы: 2 пикселя
• Стиль границы: пунктирная

Наконец, нам понадобится отступ 8 пикселей для верхнего, нижнего, левого и правого отступов.

Узор и градиентный фон

Последняя возможность, которую мы хотим привлечь в центр внимания, - это одновременное использование узора и градиентного фона. Это позволяет вам поэкспериментировать с внешним видом ваших изображений.

Игривый

Эта граница содержит двухцветный градиентный фон, который также используется в самом изображении. Добавив также фоновый узор, изображение придаст вашему сайту немного больше атмосферы.

Вкладка Content

В последнем примере мы будем использовать следующие настройки градиентного фона:

• Первый цвет: rgba (4,49,96,0,51)
• Второй цвет: rgba (119,74,15,0,51)
• Тип градиента: линейный
• Направление градиента: 180 градусов
• Стартовая позиция: 0%
• Конечное положение: 100%

Вкладка "Дизайн"

Затем мы также добавляем узор фона. Шаблон, который мы использовали в этом примере, взят из Toptal. Вы можете использовать их шаблоны для любых целей, просто убедитесь, что вы указали их в своем коде, как указано в их часто задаваемых вопросах. После того, как вы добавили узор фона, используйте также следующие настройки:

• Размер фонового изображения: обложка
• Положение фонового изображения: по центру
• Повтор фонового изображения: без повтора
• Смешивание фонового изображения: умножение

Последнее, что вам нужно сделать, это добавить отступ размером 12 пикселей к верхнему, нижнему, правому и левому отступу вашего изображения.

Последние мысли

В этом посте мы показали вам несколько различных способов создания красивых границ изображения. Эти параметры дают вам представление о том, что вы можете делать с новыми параметрами Divi без использования какого-либо дополнительного CSS. Если у вас есть вопросы или предложения; обязательно оставьте комментарий в разделе комментариев ниже!

Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!

Изображение от Mr Aesthetics / shutterstock.com