Пропустить

Как добавить повторяющийся скользящий призыв к действию на Divi

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

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

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

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

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

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

обследование

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

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

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

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

Создание скользящего призыва к действию с шаблоном страницы в Divi

Создание новой модели

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

Создать шаблон страницы

Присвойте шаблон странице или страницам, на которых вы хотите отобразить рекламную панель.

Назначьте шаблон страницы страницам

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

Добавить собственное тело

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

Создание раздела контента публикации

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

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

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

Однострочный раздел

Добавить модуль публикации контента

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

Содержание предмета

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

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

  • Ширина: 100%
  • Максимальная ширина: 100%
  • Обивка: 0px высокий, 0px низкий
Конфигурация линии Divi

Создание призыва к действию вверху слева

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

Добавить раздел

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

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

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

Добавьте новый регулярный раздел в макет шаблона.

Выбор нового раздела divi

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

Затем дайте разделу строку столбца.

Выберите столбец divi

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

Перетащите (или переместите) раздел над разделом содержимого публикации и обновите параметры раздела следующим образом:

  • Левый цветовой градиент фона:
  • Правый градиент фона:
  • Отобразить градиент над изображением: ДА
  • Фоновое изображение: [вставить изображение]
  • Ширина: 320px
  • Маржа: осталось 320 пикселей
  • Обивка: 0px высокий, 0px низкий
  • Стиль анимации: слайд
  • Направление анимации: право
  • Задержка анимации: 2000 мс

Затем перейдите на вкладку «Дополнительно» и добавьте следующий класс CSS и индекс Z:

  • Класс CSS: слайд-ин-кта
  • Индекс Z: 999

И добавьте собственный фрагмент CSS после основного элемента:

position: fixed;top: 80px;left: -320px;

Класс CSS необходим для того, чтобы мы могли позже настроить таргетинг на раздел с кодом. Пользовательский CSS поместит верхний левый раздел шаблона страницы в фиксированное (или закрепленное) положение. Положение «влево: -320 пикселей» должно перемещать весь раздел (шириной 320 пикселей) за пределы окна браузера (таким образом, за пределы нашего поля зрения). Но у нас есть левое поле в 320 пикселей, чтобы вернуть его в поле зрения. Причина, по которой он построен таким образом, заключается в том, что мы можем включать или выключать значение маржи, когда вы щелкаете значок «x». Это заставит CTA скользить и исчезать из поля зрения.

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

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

  • Использовать произвольную ширину желоба: ДА
  • Ширина желоба: 1
  • Ширина: 100%
  • Обивка: 0px высокий, 0px низкий
Параметр линии Divi

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

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

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

Настройки призыва к действию

Затем обновите настройки призыва к действию.

Содержание
  • Название: [введите текст по вашему выбору]
  • Кнопка: [введите текст по вашему выбору]
  • Тело: [введите текст по вашему выбору]
  • URL ссылки кнопки: [введите фактический URL или #]
Настроить предложение модуля divi

Затем удалите цвет фона по умолчанию, чтобы открыть фон раздела, который мы добавили ранее.

Удалить цвет фона
Параметры дизайна (текст, кнопка и заливка)

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

  • Шрифт заголовка: Lato
  • Название шрифта Вес: Тяжелый
  • Высота строки заголовка: 1,3 em
  • Тело полиции: Лато
  • Вес основного шрифта: жирный
  • Использовать пользовательские стили для кнопки: ДА
  • Размер текста кнопки: 15px
  • Ширина границы кнопки: 0 пикселей
  • Интервал между кнопками: 1px
  • Шрифт кнопки: Lato
  • Вес шрифта кнопки: тяжелый
  • Стиль шрифта кнопки: TT
  • Кнопки: 12 пикселей сверху, 12 пикселей снизу, 32 пикселя слева, 32 пикселя справа
  • отступ: 40 пикселей вверху, 40 пикселей внизу, 40 пикселей слева, 40 пикселей справа

Добавьте значок открытия и закрытия с помощью модуля Blurb

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

Информационный модуль Divi Bubble

Настройки текста презентации

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

Содержание
  • удалить заголовок по умолчанию и основной текст
  • Используйте значок: ДА
  • Значок: подробнее (см. Снимок экрана)
Добавить значок divi
Дизайн
  • Цвет значка: # 000000
  • Использовать размер шрифта значка: ДА
  • Размер шрифта иконки: 40 пикселей
  • Ширина: 40px
  • Высота: 40px
  • Закругленные углы: 50%
  • Преобразование вращения оси Z: 135 градусов
Настройте значок divi
Расширенные настройки

На расширенной вкладке добавьте следующий класс CSS:

  • Класс CSS: slide-in_target

Затем добавьте этот собственный CSS к основному элементу.

position: absolute;bottom: 0px;right: -40px;

Добавьте следующий настраиваемый CSS к изображению Blurb.

margin-bottom: 0px;

Настроить стиль модуля css divi

Результат

Вот результат.

Результат достигнут сейчас

Имейте в виду, что нам все еще нужно добавить код для добавления функций закрытия и открытия, когда вы щелкаете значок «x». Мы добавим код после создания призыва к действию в каждом из четырех углов модели.

Создание призыва к действию вверху справа

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

Дубликат раздела

Разверните каркасный режим отображения, затем продублируйте раздел с призывом к действию вверху слева.

Обновить настройки раздела

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

  • маржа: 320px справа
  • направление анимации: слева

Затем обновите собственный CSS в основном элементе, заменив «левый» на «правый». Вот полный отрывок:

position: fixed;top: 80px;right: -320px;

Изменить выравнивание раздела divi

Обновите параметры модуля Blurb

Затем откройте настройки модуля Blurb и обновите настраиваемый фрагмент CSS в основном элементе, заменив «справа» на «слева». Вот полный отрывок:

position: absolute;bottom: 0px;left: -40px;

Добавить код divi

Результат

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

Ползунок вверху справа

Выполните те же операции для остальных разделов «Нижний правый» и «Нижний левый». Вам также потребуется настроить код CSS для каждого из модулей, чтобы получить результат, подобный следующему.

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

Добавление пользовательских фрагментов jQuery и CSS с помощью модуля кода

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

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

Добавьте модуль кода в один из разделов презентации.

Добавить код js divi

Вставьте код

Затем откройте настройки кода и вставьте следующий код в область кода.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

Добавить код jquery

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

С Divi создать призыв к действию совсем не сложно. А поскольку вы можете использовать конструктор тем для добавления призыва к действию в шаблон страницы, у вас будет больше контроля над тем, на каких страницах отображаются эти CTA. 

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

  1. Отличная статья! Это именно то, что я ищу!
    Merci Ьеаисоир.

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

    Bonne journée!

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

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

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

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