Загрузите БЕСПЛАТНЫЙ дизайн многоцелевого рекламного баннера для Divi

Наличие многоцелевого баннера продаж определенно пригодится (и сэкономит ваше время) в те критические времена года, когда рекламные акции в моде. Вот почему мы предлагаем БЕСПЛАТНУЮ загрузку этого многоцелевого рекламного баннера для Divi! Этот рекламный баннер можно легко настроить в соответствии с вашими потребностями, просто изменив текст и фоновое изображение. Создать рекламный баннер в Divi достаточно просто, так что вам не придется довольствоваться графическими баннерами, которые часто выглядят немного зернистыми в Интернете. Итак, помимо бесплатной загрузки, я собираюсь показать вам, как создать рекламный баннер в Divi с нуля.

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

Что включено

Вот дизайн рекламного баннера, включенный в загрузку.

Загрузите дизайн рекламного баннера БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

Загрузка макета в библиотеку Divi

После скачивания файла разархивируйте его. Вы обнаружите, что он содержит файл с именем «sales-banner-design.json». Это то, что вы загрузите в свою библиотеку Divi. Теперь перейдите на панель управления WordPress и перейдите в Divi> Divi Library. Затем нажмите кнопку импорта вверху страницы. Во всплывающем окне переносимости выберите вкладку «Импорт» и выберите файл sales-banner-design.json. Затем нажмите кнопку «Импортировать макеты Divi Builder».

Теперь, чтобы импортировать макет на свою страницу, просто создайте новую страницу и разверните визуальный конструктор. Затем выберите «Выбрать готовый макет». Во всплывающем окне загрузки из библиотеки выберите вкладку «Ваши сохраненные макеты», а затем щелкните макет дизайна рекламного баннера из списка. Вот и все!

Как создать рекламный баннер с нуля в Divi

Добавление фона раздела

Для начала создайте новую страницу. После того, как вы дадите своей странице заголовок, разверните визуальный конструктор и выберите опцию «Создать с нуля». Затем добавьте новый раздел с строкой в ​​один столбец.

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

Настройка строк баннера продаж

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

Настраиваемая ширина: 700 пикселей
Ширина желоба: 1
Настраиваемое поле: 0 пикселей сверху, 0 пикселей, снизу.
Пользовательские отступы: 0 пикселей сверху, 0 пикселей снизу.

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

Добавление фрейма верхней границы с прилегающим текстом

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

Контент: «Только в Интернете»

Перейдите на вкладку дизайна и обновите следующее:

Толщина шрифта текста: полужирный
Стиль шрифта текста: TT
Цвет текста текста: rgba (255,255,255,0.9)
Размер текста текста: 15 пикселей
Расстояние между буквами текста: 2 пикселя
Высота текстовой строки: 1em
Ширина: 22% (компьютер), 25% (планшет), 40% (смартфон)
Выравнивание модуля: слева
Пользовательское поле: сверху 0 пикселей, снизу -15 пикселей
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

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

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

Цвет: rgba (255,255,255,0.9)
Положение разделителя: внизу
Вес разделителя: 15 пикселей
Высота: 15 пикселей
Ширина: 78% (компьютер), 75% (планшет), 60% (смартфон)
Выравнивание модуля: справа
Пользовательское поле: 0 пикселей сверху, 0 пикселей снизу
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

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

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

Для этого продублируйте модуль делителя и обновите следующее:

Ширина: 15 пикселей
Пользовательское поле: внизу -1 пиксель

Добавление нижней рамки с прилегающим текстом

Чтобы создать нижнюю рамку, мы можем использовать тот же элемент, который мы создали в верхней рамке нашей верхней строки. Только на этот раз мы начнем с модуля разделителя шириной 15 пикселей. Скопируйте модуль разделителя 15 пикселей и вставьте его в третью (нижнюю) строку. Затем обновите выравнивание модуля по левому краю, а не по правому.

Затем скопируйте более длинный модуль разделителя из верхнего ряда и вставьте его под разделителем 15 пикселей в нижнем ряду. Затем отрегулируйте следующее:

Ширина: 75% (рабочий стол), 70% (планшет), 50% (смартфон)
Выравнивание модуля: слева

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

Содержание: «Начало 1 ноября»
Ширина: 25% (рабочий стол), 30% (планшет), 50% (смартфон)
Выравнивание модуля: справа
Пользовательское поле: -15 пикселей сверху, 0 пикселей снизу
Пользовательский отступ: 15 пикселей слева

Добавление текстовых модулей в средний ряд

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

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

Содержание: «Все со скидкой 20%»
Цвет фона: rgba (255,255,255,0.9)

Толщина шрифта текста: полужирный
Стиль шрифта текста: TT
Цвет текста текста: # 000000
Размер текста: 34 пикселей (рабочий стол), 20 пикселей (смартфон)
Расстояние между буквами текста: 2 пикселя
Высота текстовой строки: 1em
Ориентация текста: по центру
Пользовательские отступы: 2vw сверху, 2vw снизу, 5vw слева, 5vw справа

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

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

<h2 style="border: 7px solid #000000;">Fall Sale</h2>

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

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

Толщина шрифта заголовка 2: полужирный
Стиль шрифта заголовка 2: TT
Цвет текста заголовка 2: # 000000
Размер текста заголовка 2: 100 пикселей (рабочий стол), 80 пикселей (планшет), 60 пикселей (смартфон).
Заголовок 2 Расстояние между буквами: 2 пикселя
Пользовательское поле: сверху 0 пикселей
Пользовательский отступ: 0 пикселей сверху, 0 пикселей снизу.

Для последнего текстового модуля продублируйте первый текстовый модуль в этой средней строке и вставьте его под второй текстовый модуль.

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

Содержание: «Купить сейчас»
Стиль шрифта текста: TT, U (подчеркнутый)
Пользовательское поле: сверху 0 пикселей
Пользовательские отступы: 1vw сверху, 2vw снизу

Укладка среднего ряда

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

Пользовательский отступ: 15 пикселей слева, 15 пикселей справа
Ширина правой границы: 15 пикселей
Цвет правой границы: rgba (255,255,255,0.9)
Ширина левой границы: 15 пикселей
Цвет левой границы: rgba (255,255,255,0.9)
Режим наложения: Экран

Режим наложения экрана позволяет тексту смешивать фоновое изображение, чтобы его можно было видеть сквозь текст для получения классного эффекта!

Проверьте окончательный результат.

Добавление ссылки на баннер продаж

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

Добавление различных фонов разделов для уникальных дизайнов

С этим новым дизайном рекламного баннера вы можете легко обновить фоновое изображение для создания уникального дизайна.

Вот несколько примеров.

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

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

Я с нетерпением жду вашего ответа в комментариях.

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