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

Мы также покажем вам, как сделать панель продвижения фиксированной (или липкой).

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

Для начала вы должны установить и активировать тему Divi . Убедитесь, что у вас установлена ​​последняя версия Divi.

Вам также понадобится как минимум одна страница, созданная с помощью Divi Builder для тестирования, на которую будет влиять шаблон панели продвижения.

Создание анимированной рекламной панели в верхней части шаблона страницы

Создать новый шаблон

На панели управления WordPress перейдите в Divi> Theme generator. Затем щелкните поле «Добавить новый шаблон», чтобы создать новый шаблон.

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

В новом шаблоне нажмите на поле «Добавить собственное тело» и выберите «Создать собственное тело».

ПРИМЕЧАНИЕ: Мы добавляем рекламную панель в основную область шаблона (а не в заголовок), чтобы она работала как со стандартным заголовком Divi, так и с любыми пользовательскими заголовками, которые вы можете добавить позже.

Далее выберите опцию "Создать с нуля".

Добавление панели продвижения в модель

В редакторе макетов шаблонов мы можем начать создание рекламной панели с помощью Divi Builder.

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

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

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

• Левый градиент фона: # 4a42ec
• Правый фоновый градиент: # 521d91
• Направление градиента: 90deg
• Использовать произвольную ширину желоба: ДА
• Ширина желоба: 1
• Ширина: 100%
• Максимальная ширина: 100%
• Обивка: 0px вверху, 0px внизу

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

Параметры столбца

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

display: flex;align-items: center;justify-content: center;

В этом CSS-коде используется свойство `flex` для выравнивания содержимого (или модулей) внутри колонки таким образом, чтобы они располагались горизонтально (бок о бок). Также модули центрируются внутри колонки как по вертикали, так и по горизонтали. Это делается для того, чтобы избежать использования многоколоночных структур, которые будут располагаться друг над другом на мобильных устройствах. При такой конфигурации содержимое будет оставаться выровненным по горизонтали во всех браузерах.

Теперь мы готовы добавить контент на панель продвижения.

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

Для содержания этого примера продвижения мы включим модуль презентации с небольшим значком и текстовый блог с кнопкой справа (очень похоже на панель продвижения на Elegantthemes.com).

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

Для содержания текста презентации введите следующую информацию:

• Название: [введите текст акции]
• Используйте значок: ДА
• Значок: Значок подарка (см. скриншот)

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

• Цвет значка: #ff4a9e
• Изображение / расположение иконок: слева
• Использовать размер шрифта значка: ДА
• Размер шрифта иконки: 16px
• Размер текста заголовка: 16px (рабочий стол), 14px (телефон)
• Верхняя строка заголовка: 1.3em
• Максимальная ширина: 230px (только телефон)
• Обивка: Верх 10px
• Стиль анимации: Слайд
• Направление анимации: вправо
• Задержка анимации: 250 мс

Добавление кнопочного модуля

Далее добавьте модуль кнопки под модулем «Краткое описание». Благодаря свойству `flex`, модуль будет отображаться справа от вводного текста, а не под ним.

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

• Использовать пользовательские стили для кнопки: ДА
• Размер текста кнопки: 15px (рабочий стол), 13px (телефон)
• Цвет текста кнопки: #ffffff
• Ширина границы кнопки: 0px
• Радиус границы кнопки: 20px
• Вес шрифта: полужирный

• Поля (рабочий стол): 20px слева
• Маржа (телефон): 10px слева
• Обивка (офис): 0px вверху, 0px внизу
• Заполнение (телефон): 2px вверху, 2px внизу, 8px слева, 8px справа
• Стиль анимации: Прыжок
• Задержка анимации: 1000 мс

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

Чтобы завершить оформление панели продвижения, обновите раздел, содержащий панель продвижения, следующим образом:

• Обивка: 0px вверху, 0px внизу
• Стиль анимации: Прыжок
• Направление анимации: Вниз
• Длительность анимации: 500 мс
• Задержка анимации: 250 мс
• Начальная непрозрачность анимации: 100%
• Z-индекс: 999

Добавление модуля публикации контента полной ширины

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

Для страниц, созданных (или которые будут созданы) с помощью Divi Builder, вам потребуется использовать модуль контента для записей во всю ширину страницы, чтобы максимально увеличить область контента.

(ПРИМЕЧАНИЕ: Для страниц, использующих редактор по умолчанию, вам потребуется использовать стандартный модуль содержимого записи в обычном разделе, чтобы добиться аналогичной максимальной ширины в 1080 пикселей по умолчанию.)

Добавить раздел полной ширины

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

Добавить модуль содержимого в формате Fullwidth

Затем выберите модуль «Полнофункциональная публикация контента».

Вот и всё. Теперь убедитесь, что вы сохранили макет, прежде чем выйти из редактора.

Затем сохраните изменения для создателя темы.

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

Avant

А вот страница перед назначением шаблона с рекламной панелью.

После

А вот и та же страница с новым шаблоном с промо-баром.

Сделайте рекламный бар липким

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

position: fixed;width: 100%;

Откройте настройки раздела и добавьте следующий CSS-код к основному элементу "Рабочий стол":

Далее добавьте следующий CSS-код к основному элементу планшета:

position: relative;

Теперь проверьте результат.

Для предыдущих конверсий вы также можете добавить URL-адрес ссылки ко всей строке в разделе «Настройки строки».

Заключительные мысли

В этом уроке мы показали, как создать рекламную панель (с нуля) с помощью конструктора тем Divi. Рекламная панель поставляется с множеством анимаций и элементов дизайна, чтобы сделать её хорошо заметной для посетителей. Вы даже можете регулировать положение рекламной панели по мере прокрутки страницы вниз для ещё большей видимости. А благодаря возможности контролировать размещение рекламной панели на вашем сайте, это приложение чрезвычайно удобно.