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

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

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

Проверьте это!

Sneak Peek

Вот краткий обзор приветственных ворот, которые мы построим в этом уроке.

Скачайте макет БЕСПЛАТНО

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

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

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

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

СКАЧАТЬ

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

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

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

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

Для начала вам необходимо сделать следующее:

1. Если вы еще этого не сделали, установите и активируйте тему Divi.
2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы во внешнем интерфейсе (визуальный конструктор).
3. Выберите вариант «Выбрать готовый макет».
   
4. Выберите пакет макетов бистро и во всплывающем окне «Загрузить из библиотеки» выберите макет целевой страницы бистро и нажмите кнопку «Использовать этот макет», чтобы импортировать макет на страницу.
   

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

Создание ворот приветствия

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

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

Дизайн раздела

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

Фон

Для начала добавьте фоновый градиент и изображение следующим образом:

• Цвет фона градиента слева: rgba (0,17,38,0.7)
• Цвет фонового градиента справа: # 001126
• Стартовая позиция: 68%
• Поместите градиент над фоновым изображением: ДА
• Фоновое изображение: [вставить изображение]

Отступы и анимация

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

• Прокладка (десктоп): 28vh сверху, 28vh снизу
• Прокладка (планшет): 18vh сверху, 18vh снизу
• Прокладка (телефон): 10vh сверху, 10vh снизу
• Стиль анимации: слайд
• Направление анимации: вниз
• Начальная непрозрачность анимации: 100%;

Разместите секцию ворот приветствия

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

Прежде чем мы добавим CSS для позиционирования, давайте добавим собственный CSS ID следующим образом:

• Идентификатор CSS: welcome-gate

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

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

height: 100vh;
position:fixed;
width: 100%;
top: 0px;
display:flex;
flex-direction: column;

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

• Индекс Z: 11

ПРИМЕЧАНИЕ: если вы хотите, чтобы ворота приветствия также скрывали заголовок, вы можете добавить более высокий индекс Z, например «99999».

Создание содержимого Welcome Gate

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

Текстовый модуль

Внутри строки с одним столбцом добавьте новый текстовый модуль со следующим содержимым:

<h2>Free Dessert for First Timers</h2>
Book a reservation today and get your choice of any dessert on us!

Текстовый Дизайн

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

• Шрифт текста: Кабина
• Цвет текста текста: #ffffff
• Размер текста: 24 пикселя (рабочий стол), 18 пикселей (телефон)
• Выравнивание текста: по центру
• Шрифт заголовка 2: Cabin
• Толщина шрифта заголовка 2: полужирный
• Цвет текста заголовка 2: #ffffff
• Размер текста заголовка 2: 66 пикселей (рабочий стол), 26 пикселей (планшет)

Добавить строку из двух столбцов

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

Добавить левую кнопку

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

• Текст кнопки: «Ням! Давай забронируем это »

• Расположение кнопок: по центру
• Цвет текста кнопки: #ffffff
• Цвет фона кнопки: # bd8f52
• Ширина границы кнопки: 0 пикселей
• Толщина шрифта кнопок: полужирный

Затем добавьте следующий настраиваемый CSS, чтобы кнопка занимала всю ширину столбца:

display: block !important;

Добавить правую кнопку «Нет, спасибо»

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

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

• Текст кнопки: нет, спасибо
• URL ссылки на кнопку: # (это важно, чтобы кнопка не обновляла страницу)

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

• Цвет текста кнопки: # 333333
• Цвет фона кнопки: rgba (255,255,255,0,4)

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

• Класс CSS: спасибо

Это будет наш селектор в jQuery, который закрывает окно приветствия при нажатии.

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

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

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

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

• Максимальная ширина: 600 пикселей

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

Вот как выглядит окончательный дизайн.

А вот как выглядят приветственные ворота при обновлении страницы.

А вот как выглядят приветственные врата на мобильном телефоне.

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

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

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

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