Загрузите 5 ярких стилей фона для ваших сообщений в блоге Divi

Мы здесь с еще одной бесплатной загрузкой Divi! На этот раз мы предлагаем вам попробовать 5 различных ярких стилей фона, которые вы можете использовать для сообщений в блогах на своем веб-сайте. Вы можете легко комбинировать эти стили фона на одном и том же веб-сайте, чтобы придать различный вид различным сообщениям в блогах, которые вы публикуете. Помимо бесплатного предложения всех этих ярких стилей фона, мы также собираемся помочь вам создать шаблон сообщения в блоге, который вы можете повторно использовать для любого сообщения в блоге, которое вы создаете и публикуете на своем веб-сайте.

Давайте приступим к делу!

Предварительный просмотр

Давайте начнем с рассмотрения 5 различных результатов и представлений на экранах разных размеров.

Скачайте БЕСПЛАТНО яркие стили фона

Чтобы получить доступ к ярким стилям фона, вам сначала нужно загрузить их, используя кнопку ниже. Чтобы получить доступ к загрузке, вам необходимо подписаться на наш список рассылки Divi Daily, используя форму ниже. Как новый подписчик, вы будете получать еще больше добра Divi и бесплатный пакет Divi Layout каждый понедельник! Если вы уже есть в списке, просто введите ниже свой адрес электронной почты и нажмите «Загрузить». Вы не будете «повторно подписаны» или будете получать дополнительные электронные письма.

Скачать файлы

Скачать бесплатно

Подпишитесь на рассылку новостей Divi, и мы отправим вам по электронной почте копию окончательного пакета макетов целевой страницы Divi, а также множество других удивительных и бесплатных ресурсов, советов и приемов Divi. Следуйте за ним, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Загрузить», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Цветовые палитры

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

Палитра # 1

• Цвет # 1: # 886DFC
• Цвет # 2: # 7C56BD
• Цвет # 3: # 372C66.

Палитра # 2

• Цвет # 1: # 42bcb2
• Цвет # 2: # 9CFEF0
• Цвет # 3: # a8baf7

Палитра # 3

• Цвет # 1: # 96b2ff
• Цвет # 2: # d999ff
• Цвет # 3: # 357ff4

Палитра # 4

• Цвет # 1: # B981FF
• Цвет # 2: # 24EEFA
• Цвет # 3: # be7bf2

Палитра # 5

• Цвет # 1: # e02b20
• Цвет # 2: # f6ff56
• Цвет # 3: # db241e

Создать новое сообщение

Добавить детали и включить Divi Builder

Начнем с самого начала! Добавьте новую страницу на свой веб-сайт WordPress, добавьте заголовок страницы, загрузите избранное изображение и включите Divi Builder.

Настройки страницы Divi

Перед переключением на Visual Builder внесите некоторые изменения в поле «Настройки страницы Divi» в правом верхнем углу страницы, на которой вы находитесь. Это гарантирует, что вы полностью работаете с Divi над созданием макета сообщения в блоге. Если вы планируете повторно использовать шаблон на своем веб-сайте, вам придется не забывать изменять эти настройки каждый раз, когда вы создаете новую запись в блоге.

• Макет страницы: полная ширина
• Заголовок сообщения: Скрыть

Перейти на Visual Builder

Теперь вы можете переключиться на Visual Builder.

Как только вы это сделаете, на вашем экране появятся три варианта. Нажмите синюю кнопку, чтобы начать строительство с нуля.

Создать дизайн поста в блоге

Добавить раздел # 1

Фоновая картинка

Приступим к созданию шаблона! Начните с пустого раздела вверху. Откройте настройки раздела, перейдите к настройкам фона и загрузите нужный стиль фона. Вы можете найти все 5 вариантов, перейдя в загруженную папку> Hero .

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

Интервал

Чтобы фоновое изображение отображалось полностью, поиграйте с верхним отступом раздела.

• Верхний отступ: 660 пикселей

Добавить раздел # 2

Интервал

Прямо под только что добавленным разделом добавьте еще один. Откройте настройки, перейдите к настройкам интервалов и удалите все пользовательские отступы по умолчанию.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить новую строку

Структура столбца

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

Интервал

Удалите все отступы по умолчанию в нижней части следующего раздела.

• Нижний отступ: 0 пикселей

Добавить модуль заголовка сообщения

Элементы

Пора начинать добавлять модули! В этой строке нам понадобится только модуль заголовка сообщения. После того, как вы добавили один, выберите элементы, которые вы хотите отобразить.

Настройки текста заголовка

Затем перейдите к настройкам текста заголовка и внесите некоторые изменения.

• Шрифт заголовка: Abril Fatface
• Выравнивание текста заголовка: по центру
• Размер текста заголовка: 73 пикселей (рабочий стол), 50 пикселей (планшет), 40 пикселей (телефон)

Настройки метатекста

Также необходимо изменить настройки метатекста.

• Выравнивание метатекста: по центру
• Цвет метатекста: цвет # 1 (найти в палитре)
• Размер метатекста: 18 пикселей
• Высота мета-линии: 3em

Добавить раздел # 3

Фоновая картинка

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

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

Интервал

Удалите все верхнее заполнение по умолчанию этого раздела, чтобы избавиться от всех пробелов между этим разделом и предыдущим.

• Верхний отступ: 0 пикселей

Добавить строку №1

Структура столбца

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

Фоновый цвет

Добавьте слегка прозрачный цвет фона в следующую строку.

• Цвет фона: rgba (255,255,255,0.86)

Интервал

Здесь также удалите настраиваемый отступ по умолчанию.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

Добавить содержимое

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

Настройки текста

Зайдите в настройки текста и внесите там некоторые изменения.

• Размер текста: 21 пикселей (рабочий стол), 18 пикселей (планшет), 15 пикселей (телефон)
• Высота текстовой строки: 2em

Настройки заголовка

Также необходимо изменить настройки текста заголовка.

• Шрифт заголовка: Abril Fatface
• Размер текста заголовка: 46 пикселей (рабочий стол), 40 пикселей (планшет), 30 пикселей (телефон)
• Высота строки заголовка: 1,5 м

Интервал

Затем добавьте несколько пользовательских значений заполнения.

• Верхний отступ: 80 пикселей
• Нижний отступ: 80 пикселей
• Отступ слева: 80 пикселей (рабочий стол), 40 пикселей (планшет), 30 пикселей (телефон)
• Отступ справа: 80 пикселей (рабочий стол), 40 пикселей (планшет), 30 пикселей (телефон)

Коробка Тень

В завершение добавьте к текстовому модулю тонкую тень блока. Это придаст глубину шаблону сообщения в блоге.

• Сила размытия тени коробки: 80 пикселей
• Сила распространения тени коробки: -14 пикселей

Добавить строку №2

Структура столбца

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

Интервал

Удалите также все пользовательские отступы по умолчанию для этой строки.

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

Добавить модуль подписки на электронную почту

Добавить содержимое

Затем добавьте свой CTA. Мы используем модуль электронной почты. После добавления измените содержимое.

Поля

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

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

Продолжите, добавив градиентный фон в модуль Email Optin.

• Цвет 1: Цвет № 2 (Найти в палитре)
• Цвет 2: Цвет № 3 (Найти в палитре)
• Направление градиента: 144 град.

Макет

Затем измените макет модуля.

• Макет: тело сверху, форма снизу

Настройки текста

Также измените настройки текста.

• Ориентация текста: по центру
• Цвет текста: светлый

Настройки текста заголовка

Затем откройте настройки текста заголовка и внесите некоторые изменения.

• Шрифт заголовка: Abril Fatface
• Размер текста заголовка: 54 пикселей (рабочий стол), 40 пикселей (планшет), 35 пикселей (телефон)

Настройки кнопок

Также измените внешний вид кнопки.

• Ширина границы кнопки: 0 пикселей
• Радиус границы кнопки: 0 пикселей
• Стиль шрифта: подчеркивание
• Стиль подчеркивания: двойной

Интервал

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

• Верхний отступ: 100 пикселей
• Нижний отступ: 100 пикселей
• Отступ слева: 300 пикселей (рабочий стол), 50 пикселей (планшет и телефон)
• Отступ справа: 300 пикселей (рабочий стол), 50 пикселей (планшет и телефон)

Сохраните макет в библиотеке Divi для повторного использования

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

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз взглянем на полученный результат.

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

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