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

Добавление всплывающего окна, запускаемого с помощью прокрутки, к сообщениям в блоге кажется действительно умным решением. Возможно, вы видели их раньше, читая другие блоги. Когда пользователь прокручивает страницу до определенного места (обычно до конца), внезапно появляется окно с призывом к действию. Вся цель всплывающего окна, запускаемого прокруткой, - представить посетителям целевой призыв к действию именно в тот момент, когда вы хотите, чтобы они увидели его на странице. Короче говоря, это отличный инструмент для увеличения конверсии или привлечения потенциальных клиентов. Из-за этого многие плагины для повышения конверсии (например, наш собственный Bloom или Optin Monster) позволяют делать то же самое.

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

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

Sneak Peek

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

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

И мы также покажем вам, как добавить подписку по электронной почте во всплывающее окно, как показано здесь.

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

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

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

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

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

СКАЧАТЬ

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

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

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

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

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

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

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

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

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

Импорт шаблона сообщения в блоге из четвертого пакета построителя тем

На панели управления WordPress перейдите в Divi> Theme Builder. В конструкторе тем щелкните значок переносимости в правом верхнем углу страницы. Во всплывающем окне переносимости выберите вкладку импорта, выберите файл theme-builder-pack-4-post-template.json и нажмите кнопку импорта. (Этот файл импорта будет внутри папки Fourth Theme Builder Pack)

Вы также можете выбрать вариант импорта глобального верхнего и нижнего колонтитула как статических макетов.

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

Это приведет вас к редактору макета шаблона тела, где мы добавим всплывающие окна, запускаемые при прокрутке.

Создание всплывающего окна, запускаемого с помощью прокрутки, со связанным сообщением по категориям

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

Вот как это сделать.

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

Сначала добавьте строку из одного столбца чуть ниже строки, содержащей модуль содержимого сообщения в макете шаблона сообщения.

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

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

• Цвет фона: #ffffff
• Ширина желоба: 1
• Ширина: 300 пикселей (рабочий стол), 200 пикселей (телефон)
• Отступ: 20 пикселей сверху, 0 пикселей снизу
• Box Shadow: см. Снимок экрана

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

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

Содержание

Обновите основной текст текстом «Связанное сообщение».

Дизайн

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

• Шрифт текста: Heebo
• Стиль шрифта текста: TT
• Цвет текста текста: # f94857
• Выравнивание текста: по центру

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

Под текстовым модулем добавьте модуль блога.

Содержание

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

Обновите следующее:

• Количество сообщений: 1
• Включенные категории: Текущая категория

Элементы

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

Дизайн

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

• Шрифт заголовка: Heebo
• Плотность шрифта заголовка: Ультра полужирный
• Размер текста заголовка: 16 пикселей
• Высота строки заголовка: 1,4 мкм
• Набивка: 5% сверху, 5% слева, 5% справа.

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

Класс CSS, Пользовательский CSS и Индекс Z

На расширенной вкладке нам нужно дать нашей строке класс CSS, немного настраиваемого CSS и обновить индекс z, чтобы всплывающее окно оставалось над другим содержимым на странице.

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

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

• Класс CSS: пост-строка

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

position: fixed;
bottom: 0%;
right: -300px;

И обновите индекс Z:

• Индекс Z: 999

Добавить разделители как триггерные точки прокрутки

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

Добавить точку запуска прокрутки # 1

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

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

• Класс CSS: пост-путевая точка

Это было просто.

Добавить точку запуска прокрутки # 2

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

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

Добавить собственный код с модулем кода

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

Идите вперед и добавьте модуль кода в шаблон сообщения.

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

<style>
  .post-row {
    transition: all .4s;
  }
  .post-row.show-post {
    right: 0px;
  }
</style>
<script>
  jQuery(document).ready(function($) {
    $('.post-waypoint').waypoint(function() {
        $('.post-row').toggleClass('show-post');
    }, {offset: '97%'});
  });
</script>

Результат

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

Добавление подписки по электронной почте во всплывающее окно, запускаемое при прокрутке

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

Сохранить подписку на сообщение электронной почты с нижним колонтитулом в библиотеке Divi

Сохраните свой макет и выйдите в конструктор тем. Затем щелкните, чтобы изменить макет настраиваемого шаблона нижнего колонтитула.

Найдите модуль подписки по электронной почте и сохраните его в библиотеке divi.

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

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

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

Настройки подписки на электронную почту

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

• Название: «Понравилась статья?»
• Body: «Присоединяйтесь к нашей рассылке!»

Затем добавьте следующий отступ:

• Отступ: 5% снизу, 20 пикселей справа

Результат

Теперь проверьте результат в живом посте.

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

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

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

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