Создать бар продвижение анимация для вашего шаблона страницы в 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 мс

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

Затем добавьте модуль кнопок под модулем Blurb. Благодаря свойству 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 Theme Builder. Рекламная панель дополнена несколькими анимациями и дизайнами, чтобы сделать ее действительно заметной для посетителей. Вы даже можете исправить промо-бар, когда прокручиваете страницу вниз, чтобы сделать его еще более заметным. А с возможностью контролировать, где на вашем сайте размещается полоса продвижения, приложение чрезвычайно удобно.