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

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

В этом посте мы проведем вас через создание всплывающего окна, используя функцию взаимодействия Divi 5. Давайте погрузимся!

Что такое взаимодействие Divi 5?

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

Подписаться на наш канал на YouTube

Ключевые компоненты взаимодействий дивинг

Каждое взаимодействие в Divi 5 состоит из трех основных компонентов:

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

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

Почему вы должны использовать взаимодействия для создания всплывающих окон

Divi 5 Interactions предлагает несколько преимуществ для строительства всплывающих окон:

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

Пошаговое руководство по строительству всплывающего окна в Divi 5

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

1. Установите пакет макета

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

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

Щелкните миниатюр макетов онлайн -обучения , чтобы выделить доступные страницы.

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

Последний шаг в импорте пакета макета - выбирать, импортировать пресеты. После выбора нажмите кнопку «Импорт».

2. Создайте раздел для всплывающего окна

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

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

3. Проектируйте всплывающее окно

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

Введите «Хотите скидку 15%?» В поле заголовка под вкладкой Content.

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

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

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

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

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

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

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

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

Загрузите изображение и добавьте его в модуль изображения. К этому моменту ваш раздел должен выглядеть похоже на это:

4. Создать кнопку закрытия

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

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

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

Выберите значок Close из доступных параметров. Его можно легко найти, введя «закрытие» в поле поиска над списком значков.

Переключитесь на вкладку Design и введите следующие настройки дизайна:

• Цвет значков: #5344B9
• Размер значка: 36px
• Выравнивание: верно

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

5. Отрегулируйте настройки секции

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

В поле ширины введите 80% по ширине. Затем установите опцию выравнивания секции в центр .

Под границей установите радиус границы 10px.

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

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

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

С дизайном на месте мы можем установить наши взаимодействия. Мы установим наш всплывающий раздел для отображения через 5 секунд после того, как пользователь приземляется на странице. Перейдите к продвинутой вкладке раздела и найдите раскрывающееся меню взаимодействий . Нажмите + Добавить взаимодействие , чтобы запустить.

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

Когда появляется диалоговое окно «Редактировать взаимодействие» , введите следующие настройки и нажмите «Сохранить» :

• Метка администратора: всплывающее взаимодействие
• Триггер событие: загрузка
• Действие эффекта: шоу -элемент
• Целевой модуль: раздел (всплывающее окно)
• Задержка времени: 5 секунд

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

• Метка администратора: закрытие всплывающего окна
• Триггер событие: нажмите
• Действие эффекта: видимость переключения
• Целевой модуль: раздел (всплывающее окно)
• Задержка времени: 0

7. Проверьте и усовершенствуйте свое всплывающее окно с настраиваемыми отзывчивыми точками перерыва Divi 5

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

По умолчанию только три включены. Наличие 7 позволяет вам проверить всплывающее окно в большем количестве точек останова, обеспечивая беспрепятственный пользовательский опыт с любым размером экрана. Чтобы разрешить все 7, щелкните меню Ellipsis в верхней середине административной панели. Оттуда включите все точки останова, включив их.

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

8. Установите параметры отображения

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

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

Далее нажмите на раскрывающееся меню по позиции. Установите положение, чтобы исправить и выберите смещение происхождения. Наконец, добавьте Z-индекс 99999, чтобы убедиться, что всплывающее окно отображается над остальным содержанием страницы.

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

Расширенные варианты настройки всплывающего окна

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

Условия отображения

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

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

Объединить эффекты

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

Интеграция Divi AI

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

Лучшие практики для эффективных всплывающих окон

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

1. Держите это удобным для пользователя

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

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

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

2. Оптимизировать для производительности

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

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

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

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

4. Проверка на всех размерах экрана

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

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

Загрузите файлы

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

Присоединяйтесь к информационному бюллетеню Divi, и мы отправим вам копию «Копия Ultimate Divi Landing Layout Page», а также множество других удивительных и бесплатных ресурсов Divi, советов и хитростей. Следуйте, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Скачать», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

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

Создать всплывающие окна с взаимодействиями Divi 5

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

Готовы ли вы попробовать Divi 5? Загрузите последнюю публичную Alpha Divi 5, экспериментируйте с взаимодействиями и поделитесь своими мыслями в разделе комментариев ниже. Пожалуйста, поделитесь своими творениями с нами в наших каналах социальных сетей и посетите наш блог, чтобы получить дополнительные учебные пособия, используя инновационные функции Divi 5. Мы с нетерпением ждем возможности увидеть то, что вы создаете!