Как создать дизайн границ фонового изображения в Divi
Опубликовано: 2019-08-18Границы и фоновые изображения продолжают оставаться популярными элементами дизайна при создании веб-сайтов. Использование правильных фоновых изображений может добавить индивидуальности и стиля вашему сайту, не тратя время и деньги на настраиваемую графику. А границы полезны для добавления структуры вашему контенту.
Сегодня мы собираемся объединить эти два актива, создав фоновые изображения в качестве границ. Divi имеет полезный набор параметров для настройки фоновых изображений, что упрощает создание фоновых изображений для уникального дизайна границ. Это позволяет нам комбинировать цвета, градиенты, тени и режимы наложения всевозможными творческими способами.
Давайте начнем.
Sneak Peek
Вот дизайн границ фонового изображения, который мы создадим вместе.
Скачайте макет БЕСПЛАТНО
Чтобы получить доступ к дизайну из этого урока, вам сначала нужно загрузить его, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.
Скачать бесплатно
Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.
Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!
Подпишитесь на наш канал Youtube
Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и перетащите файл json в Divi Builder.
Давайте перейдем к руководству, ладно?
Что вам нужно для начала
Для начала вам понадобится следующее:
- Тема Divi установлена и активна
- Новая страница, созданная для создания с нуля в интерфейсе пользователя (визуальный конструктор)
- Изображения, которые будут использоваться для фиктивного содержания
После этого у вас будет чистый холст, чтобы начать проектировать в Divi.
Общие советы по созданию дизайна границ фонового изображения
Прежде чем мы начнем строить, вот несколько общих советов, которые следует учитывать при создании дизайна границ фонового изображения.
# 1 Выбирайте изображения с большим количеством текстур
В большинстве случаев вам нужно, чтобы границы были более узкими. Это означает, что вы не сможете увидеть большую часть изображения. Так что это помогает использовать изображения с большим количеством текстур. Например, вы можете использовать фотографию пейзажа, букета цветов или городской многоэтажки. Вот несколько изображений, которые я использую для этого урока.
# 2 Используйте градиенты и прозрачность с границами фонового изображения
Фоновые изображения иногда могут служить отличной рамкой для вашего контента. Но в большинстве случаев вам нужно будет добавить к фоновому изображению несколько наложений для определенного цвета или сделать фон темнее или светлее. Фоновые градиенты - отличный способ добавить наложение к фоновым изображениям и создать уникальный дизайн границ.
# 3 Используйте режимы наложения
Использование режимов наложения на фоновых изображениях позволяет придать дизайну границ уникальные цвета и текстуры. Все, что вам нужно сделать, это добавить цвет фона или градиент вместе с фоновым изображением, а затем выбрать режим наложения для фонового изображения. Некоторые отличные режимы наложения для границ фонового изображения: цвет, яркость, умножение и экран.
Используйте параметры закругленных углов для уникальных форм
Не все границы должны иметь прямые края. Немного перемешай! Варианты закругленных углов Divi позволяют творчески формировать эти углы.
Использование фоновых изображений параллакса в качестве границ
Параллакс хорош тем, что он оживляет дизайн движением. Кроме того, если вы используете фоновые изображения с параллаксом для дизайна границ, вы можете создать легкое движение, которое выделяется и делает ваш контент заметным.
Создание границ фонового изображения в Divi
Теперь, когда мы понимаем общую идею создания рамок фоновых изображений, давайте вместе разработаем несколько. Мы собираемся построить 4 разных дизайна. У каждого будет базовый модуль аннотации, служащий имитацией содержания. И мы будем использовать настройки столбца, чтобы добавить границу фонового изображения для модуля.
Начнем с нашего первого дизайна.
Дизайн границы фонового изображения # 1
Этот первый дизайн имеет узкую рамку фонового изображения с тенью блока, чтобы он больше походил на рамку для контента.
Вот как это сделать.
Сначала добавьте строку из двух столбцов в обычный раздел.
Добавить модуль Blurb
Затем добавьте модуль рекламного сообщения в левый столбец.
Как только рекламное объявление будет на месте, откройте настройки рекламного сообщения и удалите изображение по умолчанию, чтобы были видны только заголовок и основной текст.
Затем придайте рекламному объявлению белый цвет фона.
Затем обновите настройки дизайна рекламного объявления следующим образом:
- Шрифт заголовка: Oswald
- Шрифт тела: Lato
- Маржа 5% сверху, 5% снизу, 5% слева, 5% справа
- Заполнение: 7% сверху, 7% снизу, 10% слева, 10% справа
- Закругленные углы: 20 пикселей вверху справа, 20 пикселей внизу слева.
- Box Shadow: см. Снимок экрана
Добавьте фоновое изображение в столбец
Это позаботится о нашем модуле аннотации. Теперь давайте добавим границу фонового изображения. Для этого мы добавим фоновое изображение в столбец, содержащий модуль blurb. Откройте настройки строки, а затем откройте настройки для столбца 1 и добавьте следующий фон:
- Фоновое изображение: [загрузите изображение по вашему выбору]
- Цвет фона: # 303a7a
- Смешивание фонового изображения: яркость
Затем обновите закругленные углы и тень блока следующим образом:
- Закругленные углы: 20 пикселей вверху справа, 20 пикселей внизу слева.
- Box Shadow: см. Снимок экрана
Конечный результат
Теперь посмотрим на окончательный дизайн.
Дизайн границы фонового изображения # 2
Этот следующий дизайн подчеркивает, как использование изображений с большим количеством текстур может действительно создавать красивые границы, особенно когда вы комбинируете их с режимами наложения изображений.
Вот как это сделать.
Добавить модуль Blurb
Чтобы создать дизайн, мы собираемся добавить аннотацию в столбец 2 той же строки, которая содержит дизайн №1. Скопируйте модуль рекламного сообщения из дизайна №1 и вставьте его в столбец 2. Затем обновите настройки модуля рекламного сообщения следующим образом:
- Закругленные углы: восстановить по умолчанию
- Маржа: 10% сверху, 10% снизу, 10% слева, 10% справа
- Заполнение: 15% сверху, 15% снизу, 10% слева, 10% справа
- Ширина границы: 1 пикс.
- Цвет границы: #ffffff
Добавьте фоновое изображение в столбец
Установив наш модуль на место, откройте настройки строки и добавьте фоновый градиент в столбец 2.
- Цвет фонового градиента слева: # f7e0a5
- Цвет фона градиента справа: rgba (237,240,0,0,79)
- Направление градиента: 90 градусов
- Стартовая позиция: 50%
- Конечная позиция: 0%
Затем добавьте фоновое изображение с красивым эффектом смешивания цветов.
- Фоновое изображение: [загрузить изображение]
- Смешивание фонового изображения: цвет
Как видите, режим наложения цветов сохраняет яркость двух градиентных цветов позади изображения, чтобы создать красивый дизайн границы изображения с мягкими цветами.
Конечный результат
Оцените окончательный результат дизайна.
Дизайн границы фонового изображения # 3
Этот следующий дизайн подчеркивает использование изображений параллакса в дизайне границ. Мы также будем использовать трюк с тенью блока, чтобы создать наложение цвета для параллаксного изображения.
Вот как это сделать.
Для начала добавьте новую строку из двух столбцов под первой строкой и скопируйте модуль рекламного объявления из рекламного объявления в столбце 1 верхней строки и вставьте его в столбец 1 новой строки.
Затем обновите модуль рекламного сообщения следующим образом.
- Цвет фона: # 333344
- Цвет текста: светлый
- Маржа: 10% сверху, 10% снизу, 10% слева, 10% справа
- Набивка: 10% верх, 10% низ
- Закругленные углы: 20 пикселей
- Тень коробки: нет
Когда рекламное объявление будет на месте, откройте настройки строки и обновите настройки для столбца 1 следующим образом:
- Фоновое изображение: [загрузить изображение]
- Использовать эффект параллакса: ДА
- Метод параллакса: истинный параллакс
- Закругленные углы: 20 пикселей
- Box Shadow: см. Снимок экрана
Прямо сейчас граница фонового изображения с параллаксом по умолчанию немного отвлекает и может отвлекать от контента.
Чтобы сделать фоновое изображение с параллаксом светлее, мы можем добавить тень блока к рекламному объявлению, которая будет служить световым наложением.
Снова откройте настройки рекламного сообщения и добавьте следующее:
- Box Shadow: см. Снимок экрана
- Сила размытия тени коробки: 0 пикселей
- Сила распространения тени коробки: 200 пикселей
- Цвет тени: #ffffff
Окончательный дизайн
Теперь посмотрим на окончательный дизайн.
Дизайн границы фонового изображения # 4
Для этого следующего дизайна мы собираемся объединить фоновое изображение с градиентами, чтобы они служили верхней и нижней границей для содержимого рекламного объявления.
Добавить модуль Blurb
Для начала скопируйте модуль рекламного объявления в столбец 2 верхней строки и вставьте его в столбец 2 второй строки.
Когда закончите, обновите настройки модуля аннотации следующим образом:
- Граница: [Удалите границу, восстановив границы по умолчанию]
- Тень коробки: нет
- Маржа: 5% сверху, 5% снизу, 0% слева, 0% справа
Добавить границу фонового изображения
Чтобы добавить границу фонового изображения для этого дизайна, откройте настройки строки и обновите настройки для столбца 2 следующим образом:
- Фоновое изображение: [загрузить изображение]
- Цвет фонового градиента слева: # 141777
- Правый градиент фона: # ffb7eb
- Направление градиента: 90 градусов
- Стартовая позиция: 50%
- Конечная позиция: 0%
- Фоновое изображение: [загрузить изображение]
- Смешивание фонового изображения: яркость
Окончательный дизайн
Ознакомьтесь с окончательным дизайном.
Последние мысли
Создание границ фонового изображения с помощью Divi - это простой способ добавить красоту и индивидуальность вашему дизайну. Дизайны, представленные в этом руководстве, предназначены для демонстрации основных параметров, доступных в Divi для создания уникальных дизайнов границ. Однако, учитывая все доступные цветовые комбинации и режимы наложения, ваше единственное ограничение - ваше воображение. Итак, возьмите несколько собственных изображений и исследуйте новые захватывающие дизайны границ для своего следующего проекта.
Я с нетерпением жду вашего ответа в комментариях.
Ваше здоровье!