Пропустить

Как создать границы с фоном на Divi

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 600.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

Сегодня мы объединим эти два объекта, создав фоновые изображения в качестве границ. Divi имеет набор полезных опций для настройки фоновых изображений, что позволяет легко создавать фоновые изображения для уникальных дизайнов границ. Это позволяет нам комбинировать цвета, градиенты, тени от ящиков и режимы наложения различными способами.

Давайте начнем.

Что нужно для начала

Для начала вам необходимо следующее:

  1. Тема Divi установлена ​​и активна
  2. Новая страница, созданная для создания с нуля внешнего интерфейса (визуальный конструктор)
  3. Изображения, используемые для вымышленного контента

После этого у вас будет чистый холст, чтобы начать проектирование в Divi.

Общие советы по созданию шаблонов границ фонового изображения

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

# 1 Выберите изображения с большим количеством текстур

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

# 2 Использовать градиенты и прозрачность с границами фонового изображения

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

# 3 Использовать режимы слияния

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

Используйте закругленные углы для уникальных форм

Все границы не должны иметь прямые края. Смешайте немного! Опции закругленных углов Divi позволяют вам творчески формировать эти углы.

Вы ищете лучшие темы и плагины WordPress?

Загрузите лучшие плагины и темы WordPress на Envato и легко создайте свой сайт. Уже больше, чем 49.720.000. [ЭКСКЛЮЗИВ]

Использовать фоновые изображения параллакса в качестве границ

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

Фоновое изображение границы дизайна в Divi

Теперь, когда мы понимаем общую идею, лежащую в основе создания шаблонов границ фонового изображения, давайте представим несколько вместе. Мы будем строить 2 разных моделей. У каждого будет базовый модуль презентации, который будет служить вымышленным контентом. И мы будем использовать параметры столбца, чтобы добавить границу фонового изображения модуля.

Давайте начнем с нашего первого дизайна.

#1 Фоновое изображение границы

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

Вот как это сделать.

Сначала добавьте строку из двух столбцов в обычный раздел.

Добавить сводный модуль

Затем добавьте модуль blurb в левой колонке.

Как только текст презентации будет создан, откройте настройки текста презентации и извлеките изображение по умолчанию, чтобы были видны только содержимое заголовка и основной текст.

Затем дайте вашему тексту белый фон.

Затем обновите параметры дизайна презентации следующим образом:

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

  • Название текста: Освальд
  • Тело полиции: Лато
  • Поля 5% вверху, 5% внизу, 5% слева, 5% справа
  • Обивка: 7% вверху, 7% внизу, 10% слева, 10% справа
  • Закругленные углы: 20px вверху справа, 20px внизу слева
  • Box Shadow: см. Скриншот

Добавить фоновое изображение в столбец

Это заботится о нашем модуле презентации. Теперь давайте добавим нашу рамку фонового изображения. Для этого мы добавим фоновое изображение в столбец, содержащий модуль Blurb. Откройте параметры строки, затем настройки в столбце 1 и добавьте следующий фон:

  • Фоновое изображение: [скачать изображение по вашему выбору]
  • Цвет фона: #303a7a
  • Смесь Фоновое изображение: Яркость

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

  • Закругленные углы: 20px вверху справа, 20px внизу слева
  • Box Shadow: см. Скриншот

Конечный результат

Теперь проверьте окончательный дизайн.

Фоновое изображение границы # 2

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

Вот как это сделать.

Добавьте модуль Blurb

Чтобы создать чертеж, мы добавим текст презентации в столбец 2 той же строки, содержащей чертеж # 1. Продолжите и скопируйте модуль презентации 1 Design и вставьте его в столбец 2. Затем обновите настройки модуля презентации следующим образом:

  • Закругленные углы: восстановить настройки по умолчанию
  • Маржа: 10% вверху, 10% внизу, 10% слева, 10% справа
  • Обивка: 15% вверху, 15% внизу, 10% слева, 10% справа
  • Ширина границы: 1px
  • Цвет границы: #ffffff

Добавить фоновое изображение в столбец

Установив наш модуль, откройте настройки линии и добавьте градиент фона в столбец 2.

  • Левый фоновый градиент: #f7e0a5
  • Правый градиент фона Цвет: rgba (237,240,0,0.79)
  • Направление градиента: 90deg
  • Начальная позиция: 50%
  • Конечная позиция: 0%

границы рисунков фоновое изображение divi

Затем добавьте фоновое изображение с хорошим эффектом градиента.

  • Фоновое изображение: [скачать изображение]
  • Фоновое изображение микс: цвет

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

Легко создайте свой интернет-магазин

Загрузите бесплатные WooCommerce, лучшие плагины для электронной коммерции, чтобы продавать свои физические и цифровые продукты в WordPress. [FREE]

Конечный результат

Откройте для себя конечный результат дизайна.

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

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

За ваше здоровье.

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
4 акции
доля4
чирикать
Регистрация