Создание адаптивных баннеров с новыми опциями фона Divi

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

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

HTML-баннеры и графические баннеры

Использование html-баннеров (баннеров, построенных с использованием элементов html) дает много преимуществ по сравнению с баннерами-изображениями (баннеры, построенные как единое изображение без каких-либо элементов html). Для html-баннеров текст распознается веб-браузерами (важно для переводчиков страниц и программ чтения с экрана). Они масштабируются в соответствии с размером окон браузера, поэтому всегда выглядят четкими, в отличие от изображений, которые могут быть искаженными или неразборчивыми. И, возможно, мой любимый аспект использования HTML-баннеров вместо графических баннеров - это то, что HTML действительно легко изменить. Я могу изменить текст несколькими нажатиями клавиш вместо того, чтобы искать на глубине моего жесткого диска исходный файл, который мне нужно будет отредактировать в редакторе фотографий. И я могу быстро сделать еще одну версию баннера, чтобы провести сплит-тест с помощью Divi Leads.

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

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

Sneak Peek

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

Реализация дизайна с Divi

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

Пример №1: Баннер с логотипом

Используя Visual Builder, добавьте обычный раздел с одним столбцом и одной строкой.

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

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

Параметры содержимого

Текст кнопки: [введите текст, который вы хотите использовать для сообщения баннера]
URL кнопки: [введите URL]

Варианты дизайна

Выравнивание кнопок: по центру
Цвет текста: светлый
Использовать собственные стили для кнопки: ДА
Размер текста кнопки: 32 пикселя
Ширина границы кнопки: 0 пикселей
Шрифт кнопки: Arvo
Значок кнопки: [добавить значок. Я использую значок курсора]
Показывать только значок при наведении курсора на кнопку: НЕТ

Расширенные настройки

Нам нужно установить ширину кнопки на 100%, чтобы заполнить ширину столбца. Нам также нужно увеличить высоту нашей кнопки, чтобы обеспечить достаточно места для содержимого нашего баннера. Для этого введите следующий настраиваемый CSS в поле «Главный элемент»:

 Width: 100%;
padding: 20px 0 200px; 

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

Сохранить настройки

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

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

Параметры содержимого

На вкладке фонового изображения

Фоновое изображение: [вставить изображение]
Положение фонового изображения: [используйте эту опцию, чтобы настроить изображение для вашего баннера. Я хотел, чтобы была видна нижняя часть моего изображения, поэтому я выбрал «Внизу по центру».]

Теперь прокрутите немного вниз, чтобы обновить параметры фона столбца 1.

Выберите вкладку «Градиент фона столбца 1» и нажмите серую круглую кнопку с белым символом «плюс».

Обновите следующее:

Цвета градиента фона: rgba (131,0,233,0.92), rgba (0,0,0,0.69)
Направление градиента столбца: 180 градусов
Начальная позиция столбца: 50%
Конечное положение столбца: 0%

Сохранить настройки

Далее мы собираемся добавить логотип к баннеру. Щелкните вкладку Фоновое изображение и обновите следующее:

Столбец 1 Размер фонового изображения: Фактический размер (мой логотип - 120 x 120 png)

Столбец 1 Расположение фонового изображения: по центру

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

Приведем еще один пример.

Пример # 2: простой текстовый баннер

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

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

Параметры содержимого

Фоновое изображение: [введите новое изображение]
Положение фонового изображения: по центру
Столбец 1 Цвета градиента фона: rgba (0,0,0,0.41), rgba (12,113,195,0.66)
Направление градиента столбца: 270 градусов

Затем щелкните вкладку фонового изображения столбца 1 и удалите изображение / логотип.

Сохранить настройки

Перейдите в Настройки модуля кнопок и обновите следующее:

Параметры содержимого

Текст кнопки: [введите текст для вашего баннера]
URL-адрес кнопки: [введите URL-адрес баннера]

Варианты дизайна

Размер текста кнопки: 42 пикселей
Ширина границы кнопки: 19 пикселей
Цвет границы кнопки: rgba (0,0,0,0.17)
Расстояние между буквами кнопки: 8 пикселей
Шрифт кнопки: Montserrat, жирный (B)
Значок кнопки добавления: НЕТ
Цвет границы при наведении курсора: rgba (0,0,0,0.46)
Радиус границы наведения кнопки: 0 пикселей
Расстояние между буквами при наведении курсора: 12 пикселей

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

Как сделать ваш баннер полноразмерным

Чтобы сделать этот баннер полноразмерным, все, что вам нужно сделать, это обновить параметры раздела на вкладке «Дизайн» следующим образом:

Пользовательские отступы: 0 пикселей сверху, 0 пикселей справа, 0 пикселей снизу, 0 пикселей слева

Сохранить настройки

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

Сделать эту строку полной шириной: ДА
Использовать нестандартную ширину желоба: ДА
Ширина желоба: 1

Теперь баннер растягивается на всю ширину экрана на всех устройствах.

Как сделать липкий баннер

Если вы хотите, вы можете легко сделать этот баннер фиксированным (липким) и закрепить его в верхней части окна браузера. Я бы посоветовал уменьшить отступ, чтобы сделать его намного короче, чтобы не блокировать слишком большую часть окна.

Чтобы уменьшить высоту, перейдите к настройкам модуля кнопок на вкладке « Дополнительно » и добавьте следующий CSS-код в поле « Главный элемент» :

padding: 0px 0px !important;

Теперь , чтобы сделать весь раздел липким, перейдите в раздел Настройки раздела и обновление дополнительных параметров вкладки со следующим пользовательским CSS в поле Main Element:

position: fixed;
top: 0;
width: 100%;
z-index: 9999;

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

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

Добавление баннеров в несколько макетов столбцов

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

Давайте попробуем.

Добавьте еще один обычный раздел со структурой строки 1/2 1/2 столбца.

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

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

Параметры содержимого

На вкладке фонового изображения

Столбец 1 Фон: [введите фоновое изображение]
Столбец 1 Положение фонового изображения: [отрегулируйте положение изображения по своему вкусу]
Столбец 1 "Наложение фонового изображения": "Умножить".

На вкладке "Градиент фона"

Цвета градиента столбца 1: rgba (255,255,255,0), # e02b20
Столбец 1 Направление градиента: 180 градусов
Столбец 1 Начальная позиция: 70%
Конечное положение столбца 1: 0%

Последний шаг - обновить настройки модуля кнопок :

Параметры содержимого

Текст кнопки: серия путешествий

Варианты дизайна

Размер текста кнопки: 32 пикселя
Ширина границы кнопки: 2 пикселя
Расстояние между буквами кнопки: 0 пикселей
Цвет границы при наведении курсора: # edf000
Расстояние между буквами при наведении курсора: 0 пикселей

Расширенные настройки

Пользовательский CSS в поле "Главный элемент":

padding: 350px 0px 50px;
width: 100%;

Этот настраиваемый CSS регулирует отступ модуля Button так, чтобы текст находился внизу сразу за градиентом фона.

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

Посмотрите результат.

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

Отзывчивый?

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

Вот пример того, как они выглядят при уменьшении экрана до меньшего размера:

Совместимость с браузером

В настоящее время свойство CSS background-blend-mode не поддерживается Internet Explorer или Edge, а Safari имеет ограниченные возможности наложения. Однако, по моему опыту, в большинстве случаев откат не является значительным.

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

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

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

Ваше здоровье!