Особенности плагина Divi - оверлеи Divi

Divi Overlays - это плагин для Divi от DiviLife, сторонней компании-разработчика Divi, созданной членом сообщества Тимом Стрифлером. Он позволяет легко создавать всплывающие окна с помощью Divi Builder. Это не просто модальное окно. Вы можете создавать полноэкранные оверлеи и добавлять любой тип контента в оверлей, используя Divi Builder, а затем запускать его с чем угодно на странице, включая кнопки, ссылки, изображения и т. Д. Вы можете настроить цвета фона, шрифт цвета и выберите начальную анимацию.

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

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

Скачать: Divi Overlays Скачать

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

Установка

Загрузите, установите и активируйте плагин, как любой плагин премиум-класса. После активации вам потребуется ввести лицензионный ключ. Перейдите в « Настройки» и выберите « Активация оверлеев Divi» на панели управления.

Введите ключ API и адрес электронной почты (из вашей учетной записи на DiviLife) и выберите « Сохранить изменения» . Теперь вы готовы приступить к созданию наложений.

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

Наложения создаются отдельно от вашего контента, а затем открываются из вашего контента с помощью простых кодов.

Чтобы создать наложение, перейдите в Divi Overlays и выберите « Добавить новый» на панели управления. Отсюда вы можете выбрать использование Divi Builder. Это работает так же, как любая обычная страница или публикация с использованием Divi Builder, включая специальные плагины и модули Divi, и вы даже можете запускать A / B-тестирование с помощью Divi Leads. Они даже работают в глобальном модуле. Вы также можете импортировать и экспортировать свои наложения.

Выберите оверлейную анимацию и настройки в раскрывающемся списке в правом верхнем углу. В Divi Builder есть выбор цвета фона и шрифта.

С правой стороны добавлено несколько настроек. Поле под названием Divi Overlay Animation включает раскрывающееся окно, в котором вы можете выбрать одну из 11 анимаций. Это определяет, как наложение будет отображаться на экране.

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

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

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

Ссылки создаются с использованием идентификатора CSS. Скопируйте идентификатор CSS и добавьте открывающий теги <a id= и закрывающий </a> теги, как показано в примере.

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

Текстовая ссылка

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

Я хочу использовать текст ПОСМОТРЕТЬ ДЕМО в качестве ссылки, чтобы открыть видео. Для этого скопируйте идентификатор CSS из списка наложений на экране панели инструментов.

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

<a id="overlay_unique_id_211154">WATCH A DEMO</a>

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

Текст теперь синий, чтобы показать, что это ссылка.

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

Ссылка на изображение

Есть два способа добавить CSS ID к изображению. Метод, который вам следует использовать, будет зависеть от того, как изображение размещается в вашем контенте. Вот два примера:

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

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

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

Модуль изображения

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

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

В URL-адресе ссылки используйте # open-overlay (или аналогичный текст с символом #). Теперь я могу щелкнуть изображение и открыть наложение.

Кнопка Ссылка

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

Добавьте текст # в URL-адрес кнопки. Я использовал # open-overlay, как и раньше, потому что он описательный (я украл его у Тима Стрифлера, но не говори ему об этом).

Добавьте код CSS ID на вкладку Custom CSS .

Вот и все! Новая кнопка теперь открывает контактную форму.

Ссылка меню

Чтобы создать ссылку на меню, скопируйте идентификатор меню и перейдите в « Внешний вид» , « Меню» , выберите меню, в которое хотите добавить ссылку, и загрузите его. (Дополнительную информацию см. В статье «Как создавать собственные структуры меню в WordPress»).

Выберите Параметры экрана в правом верхнем углу и установите флажок Связь ссылок (XFN) .

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

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

Виджет

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

Это страница, которую я использую из многоцелевого набора каркасов vol. 1. Я хочу сделать кнопку интерактивной, чтобы видео открывалось с наложением. Я добавил свои шорткоды в область виджетов (поместив их в текстовый виджет) и добавил CSS ID к изображению на странице.

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

Закрытие оверлея

Наложения можно закрыть с помощью X в углу, щелкнув фон наложения или нажав клавишу ESC.

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

Класс close выглядит так:

class = «close-divi-overlay»> Нет, спасибо

Выходит в версии 2.0

Вот несколько функций, которых стоит ожидать:

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

Функция пикселей откроет оверлей в зависимости от количества прокрученных пикселей или процента прокрученной страницы.

Другой вариант откроет оверлей, когда читатель нажмет кнопку «Назад» или поместит курсор в адресную строку.

Документация

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

Ценообразование

Divi Overlays - это плагин премиум-класса. Он стоит 15 долларов за использование на одном сайте, 29 долларов за три сайта, 59 долларов за неограниченное количество сайтов и 129 долларов за пожизненную неограниченную лицензию. Каждая лицензия включает все основные функции и документацию. Первые три включают один год обновлений и поддержки, а последний - пожизненные обновления и поддержку.

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

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

Ждем вашего ответа! Вы пробовали Divi Overlays? Расскажите нам о своем опыте в комментариях.

Лучшее изображение через brickclay / shutterstock.com