Как создать анимированную промо-панель для шаблонов страниц в Divi

Опубликовано: 2019-11-23

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

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

Sneak Peek

Вот краткий обзор промо-бара, который мы создадим в этом уроке.

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

Загрузите шаблон страницы промо-бара БЕСПЛАТНО

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

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

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

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

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

Чтобы импортировать макет на свою страницу, просто извлеките zip-файл и добавьте один из json-файлов в Divi Theme Builder, используя опцию «Переносимость Theme Builder».

Давайте перейдем к руководству, ладно?

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

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

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

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

После этого все готово.

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

Создание нового шаблона

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

Назначьте шаблон страницам, на которых должна отображаться промо-панель.

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

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

Затем выберите вариант «Построить с нуля».

Добавление промо-бара в шаблон

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

Начните с добавления строки из одного столбца к обычному разделу.

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

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

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

Это касается цвета фона и ширины создаваемой промо-панели.

Настройки столбца

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

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

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

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

Добавление модуля Blurb

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

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

Для содержания рекламного объявления введите следующее:

  • Заголовок: [введите промо-текст]
  • Значок использования: ДА
  • Значок: значок подарка (см. Снимок экрана)

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

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

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

Затем добавьте модуль кнопок под модулем рекламных сообщений. Благодаря свойству flex модуль будет отображаться справа от рекламного объявления, а не под ним.

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

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

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

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

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

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

Добавление модуля содержимого сообщений полной ширины

Теперь промо-бар готов к работе. Но поскольку это шаблон, нам нужно убедиться и добавить модуль содержимого сообщения для отображения содержимого страниц с использованием этого шаблона.

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

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

Добавить секцию полной ширины

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

Добавить модуль содержимого сообщений с полной шириной страницы

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

Это о нем. Теперь убедитесь и сохраните макет перед выходом из редактора.

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

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

До

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

После

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

Вот он на мобильном телефоне.

Вот анимация промо-бара при загрузке страницы.

Делаем промо-бар липким

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

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

position: fixed;
width: 100%;

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

position: relative;

А теперь посмотрите на результат.

Не забывайте ссылки

Как только вы создадите промо-бар, вы захотите добавить URL-адрес ссылки на рекламное предложение или страницу. Вы можете добавить URL-адрес ссылки кнопки на вкладке содержимого настроек кнопки.

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

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

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

Надеюсь, это вдохновит вас на создание нескольких собственных промо-баров.

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

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