Пропустить

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

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

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

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

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

Создайте анимированную полосу продвижения вверху шаблона страницы

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

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

Добавить новую модель divi

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

Домашняя страница Divi

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

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

Добавить модель тела

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

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

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

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

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

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

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

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

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

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

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

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

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

Настройка кода css

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

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

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

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

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

Добавить второй раздел модуля сводки

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

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

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

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

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

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

Модуль кнопок Divi

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

  • Использовать пользовательские стили для кнопки: ДА
  • Размер текста кнопки: 15px (рабочий стол), 13px (телефон)
  • Цвет текста кнопки: #ffffff
  • Ширина границы кнопки: 0px
  • Радиус границы кнопки: 20px
  • Вес шрифта: полужирный
Настройте модуль кнопки divi
  • Поля (рабочий стол): 20px слева
  • Маржа (телефон): 10px слева
  • Обивка (офис): 0px вверху, 0px внизу
  • Заполнение (телефон): 2px вверху, 2px внизу, 8px слева, 8px справа
  • Стиль анимации: отскок
  • Задержка анимации: 1000 мс
Настройка расстояния между модулями кнопок divi

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

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

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

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

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

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

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

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

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

Создайте полноразмерный раздел конструктора divi

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

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

Divi для содержания статьи в полную ширину

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

Сохранить макет divi

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

Конструктор тем divi

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

Avant

Теперь вот страница перед назначением модели с полосой продвижения.

После

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

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

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

position: fixed;width: 100%;

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

Войдите в фиксированный раздел

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

position: relative;

Добавьте код css в раздел divi

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

Анимированный результат divi

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

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

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

Эта статья содержит 1 комментарий

  1. Здравствуйте,

    Превосходная статья и руководство, действительно ТОП !!!

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

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

    Есть идеи по этому маршруту?

    Юсеф

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
2 акции
доля2
чирикать
Регистрация