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

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

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

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

Sneak Peek

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

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

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

Скачать файлы

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

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

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

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

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

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

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

Создание раздела содержимого публикации

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

Добавить строку в одну колонку

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

Добавить модуль содержимого публикации

Затем добавьте в строку модуль содержимого сообщения.

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

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

• Ширина: 100%
• Максимальная ширина: 100%
• Padding: 0px сверху, 0px снизу

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

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

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

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

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

Добавить строку в одну колонку

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

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

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

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

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

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

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

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

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

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

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

• Использовать нестандартную ширину желоба: ДА
• Ширина желоба: 1
• Ширина: 100%
• Padding: 0px сверху, 0px снизу

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

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

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

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

Содержание

• Заголовок: [введите текст по выбору]
• Кнопка: [введите текст по выбору]
• Body: [введите текст по выбору]
• URL ссылки на кнопку: [введите фактический URL или #]

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

Настройки дизайна (текст, кнопка и отступ)

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

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

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

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

Настройки Blurb

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

Содержание

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

Дизайн

• Цвет значка: # 000000
• Использовать размер шрифта значка: ДА
• Размер шрифта значка: 40 пикселей
• Ширина: 40 пикселей
• Высота: 40 пикселей
• Закругленные углы: 50%
• Преобразование, поворот оси Z: 135 градусов

Расширенные настройки

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

• Класс CSS: slide-in_target

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

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

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

margin-bottom: 0px;

Результат

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

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

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

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

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

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

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

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

• поле: 320 пикселей справа
• направление анимации: слева

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

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

Обновить настройки модуля Blurb

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

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

Результат

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

Создание нижнего левого слайда с призывом к действию

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

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

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

Затем откройте раздел настроек и обновите основной элемент CSS, заменив «top: 80px» на «bottom: 0px». Вот последний фрагмент:

position: fixed;
bottom: 0px;
left: -320px;

Обновить настройки модуля Blurb

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

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

Результат

Теперь проверьте левый нижний выдвигающийся призыв к действию на действующей странице.

Создание нижнего правого слайда с призывом к действию

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

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

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

Откройте настройки раздела и обновите CSS основного элемента, заменив «top: 80px;» с «bottom: 0px;». Вот последний фрагмент:

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

Обновить настройки модуля Blurb

Затем откройте настройки модуля рекламного объявления и обновите CSS основного элемента, заменив «bottom: 0px;» с «top: 0px;». Вот последний фрагмент:

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

Результат

Теперь проверьте нижний правый выдвигающийся призыв к действию на действующей странице.

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

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

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

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

Вставить код

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

<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>

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

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

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

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