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

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

На этой неделе, в рамках нашей постоянной инициативы по дизайну Divi, мы собираемся показать вам, как создавать всплывающие окна с заблокированным содержимым с помощью Divi и Resort Layout Pack. Концепция формы подписки на заблокированный контент проста. Люди должны ввести свой адрес электронной почты, и как только они это сделают, откроется скрытый контент. Вы можете использовать этот скрытый контент, например, чтобы поделиться кодом скидки. Чтобы все это произошло, мы собираемся использовать плагин Bloom и добавить шорткод формы подписки на заблокированный контент в текстовый модуль, который мы стилизуем как всплывающее окно. Текстовый модуль также будет включать анимацию с задержкой анимации, чтобы текстовый модуль выглядел как всплывающее окно.

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

Предварительный просмотр

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

Рабочий стол

Мобильный

Установите плагин Bloom

Скачать Bloom

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

Загрузить и установить Bloom

После того, как вы скачали Bloom, вы можете продолжить и загрузить его на свой веб-сайт WordPress, выбрав « Плагины»> «Добавить новый» и нажав «Загрузить плагин» вверху страницы.

Затем загрузите заархивированный файл и нажмите «Установить сейчас».

Не забудьте также активировать плагин после того, как он будет загружен.

Настроить форму Bloom Optin

Добавить новую форму заблокированного содержимого

Теперь мы можем начать создавать заблокированную форму контента, которую мы позже в этом посте будем использовать в нашем дизайне Divi! Перейдите в панель управления WordPress> Bloom> Optin Forms и создайте новую форму подписки.

Продолжите, выбрав тип подписки «Заблокированный контент» и перейдите к настройкам.

Установочные параметры

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

Настройки дизайна

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

• Ориентация изображения: нет изображения

Прокрутите страницу вниз и внесите дополнительные изменения в стиль подписки и настройку формы.

• Цвет фона: #ffffff
• Ориентация формы: форма снизу

Мы также меняем настройки стиля формы.

• Ориентация поля формы: составные поля формы
• Цвет фона формы: # f4f4f4
• Цвет кнопки: #ffffff
• Цвет текста кнопки: Темный
• Выберите стиль кромки формы: второй вариант

Создавайте дизайн с Divi

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

Структура столбца

Теперь мы можем переключиться на Divi Builder! Идите вперед и создайте новую страницу, используя домашнюю страницу Resort Layout Pack. После загрузки макета продолжите, добавив новую строку вверху второго раздела, используя следующую структуру столбцов:

Размеры

Еще не добавляя никаких модулей, откройте настройки строки и внесите некоторые изменения в настройки размеров.

• Сделать эту строку полной шириной: Да
• Использовать нестандартную ширину желоба: Да
• Ширина желоба: 1

Интервал

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

• Верхний отступ: 0 пикселей
• Нижний отступ: 0 пикселей

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

Добавить контент H3

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

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

Затем вернитесь к плагину Bloom и скопируйте шорткод формы подписки, которую вы создали в предыдущей части этого руководства.

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

Фоновый цвет

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

• Цвет фона: #ffffff

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

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

• Шрифт текста: Open Sans
• Цвет текста: # 0f87ff
• Размер текста: 15 пикселей

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

Измените также шрифт, который используется для вашей копии H3.

• Шрифт заголовка 3: Gilda Display

Интервал

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

• Верхняя маржа: -17vw
• Левое поле: 65vw (рабочий стол), 37vw (планшет), 3vw (телефон)
• Правое поле: 0 пикселей
• Верхняя прокладка: 5vw (рабочий стол), 11vw (планшет), 13vw (телефон)
• Нижняя обивка: 5vw, 11vw (планшет), 13vw (телефон)
• Левая прокладка: 6vw (рабочий стол), 11vw (планшет), 16vw (телефон)
• Правая прокладка: 6vw (рабочий стол), 11vw (планшет), 16vw (телефон)

Граница

Продолжите, перейдя к настройкам границы текстового модуля и добавьте «500vw» к каждому из углов, кроме правого нижнего.

Коробка Тень

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

• Сила размытия тени коробки: 150 пикселей
• Цвет тени: rgba (0,0,0,0.3)

Анимация

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

• Повтор анимации: один раз
• Направление анимации: влево
• Продолжительность анимации: 500 мс
• Задержка анимации: 1000 мс
• Интенсивность анимации: 16%

Clone Row

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

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

Удалить нижнюю прокладку секции

Удалите нижнее заполнение раздела, в котором вы разместили строку.

• Нижний отступ: 0 пикселей

Изменить настройки интервала текстового модуля

Затем откройте настройки текстового модуля и измените значения пользовательских полей.

• Левое поле: 0vw
• Правое поле: 65vw (рабочий стол), 37vw (планшет), 3vw (телефон)

Изменить закругленные углы текстового модуля

Не забудьте также изменить закругленные углы. Мы используем «500vw» для каждого из углов, кроме левого нижнего.

Изменить настройки анимации текстового модуля

И последнее, но не менее важное: измените направление анимации вправо, и все готово!

• Направление анимации: вправо

Предварительный просмотр

Теперь, когда мы прошли все этапы, давайте в последний раз посмотрим на результат для разных размеров экрана!

Рабочий стол

Мобильный

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

В этом посте мы показали вам, как создавать всплывающие окна с заблокированным содержимым с помощью Divi, плагина Bloom и Resort Layout Pack. Вы можете использовать эту технику, чтобы убедить людей стать частью вашего списка рассылки, предлагая код купона, который появляется после того, как они заполнили форму. Это руководство является частью нашей текущей инициативы по дизайну Divi, в рамках которой мы каждую неделю стараемся добавлять что-то дополнительное в ваш набор инструментов для дизайна. Если у вас есть какие-либо вопросы или предложения, обязательно оставьте комментарий в разделе комментариев ниже!