Пропустить

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Название текста: Освальд
  • Тело полиции: Лато
  • Поля 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. [Рекомендуемые]

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

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

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

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

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

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

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

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

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

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

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