Особенности плагина Divi: простое решение для наложения

Simple Overlay Solution - это сторонний плагин для Divi, который упрощает создание полноэкранных оверлеев, всплывающих окон и мегаменю с помощью Divi Builder. Добавьте несколько оверлеев на любую страницу. Выберите между щелчком или триггером автоматической задержки по времени, светлым или темным загрузчиком, а также светлым или темным фоном. Создайте стиль для кнопки закрытия или создайте свой собственный фон и кнопки с помощью Divi Builder. У каждого оверлея есть 30-дневный файл cookie.

Простое решение для наложения

Загрузите и активируйте плагин как обычно. Затем вам необходимо активировать лицензию. В меню панели инструментов выберите « Настройки» > « Активация Divi SOS» и введите свой ключ API и адрес электронной почты.

Импортировать образцы SOS

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

В меню панели инструментов перейдите в Divi > SOS . Выберите Импорт и экспорт.

Импортируйте файл JSON как любой макет.

Теперь у вас есть 5 демонстраций в библиотеке SOS. Вы можете увидеть демоверсии на сайте разработчика.

Создание макетов SOS

Макеты SOS также создаются в библиотеке SOS. Зайдите в библиотеку и нажмите « Добавить» .

Назовите макет как-нибудь, что вам кажется понятным. Выберите Макет в качестве Типа макета.

Выберите макеты SOS для категории.

Я выбрал готовый макет, а затем выбрал страницу «Контакты» из пакета макетов курорта. Справа (или внизу, если вы просматриваете в визуальном режиме) находятся настройки макета. Это дает вам код HREF для макета, поэтому вы можете запускать его на любой странице (в любом месте, где разрешен URL-адрес). Это ссылка, которую вы будете использовать для кнопок, текста и т. Д., Чтобы вызвать наложение.

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

Загрузчик может быть светлым или темным. Вот темный загрузчик на светлом фоне.

Пример наложений SOS

Я создаю оверлей, который будет показывать информацию о бронировании, когда посетитель нажимает кнопку « Забронировать» . Добавьте ссылку к URL-адресу вашей кнопки, чтобы активировать оверлей.

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

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

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

Я добавил ссылку на кнопку на той же странице, что и первый оверлей (вы можете добавить сколько угодно). Этот открывает контактную форму, когда они нажимают кнопку « Написать нам» .

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

Здесь используется раздел из макета «Инвестиционная компания». Я хочу создать всплывающее окно с призывом к действию. Я установил автоматическое отображение с задержкой в ​​1000 миллисекунд. При автоматическом показе ссылку нигде добавлять не нужно. Он автоматически отображается на каждой странице. Я также установил cookie, чтобы показывать всплывающее окно только раз в 30 дней.

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

Я перемещаю параметр закрытия с кнопки в правом верхнем углу на кнопку, созданную с помощью Divi Builder. Я клонировал кнопку из макета, изменил текст и добавил ссылку закрытия в URL-адрес.

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

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

Для этого я создал всплывающее окно с новостной рассылкой на основе макета Esports. Я установил автоматическое открытие всплывающего окна через 30 секунд. Фон будет темным, а загрузчик - светлым. Я также добавлю кнопку закрытия, используя цвета из макета.

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

Мега-меню

Вы также можете создавать мегаменю с помощью SOS. Создайте настраиваемую ссылку как элемент меню, а затем добавьте ссылку наложения в URL-адрес элемента меню.

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

Цена простого оверлейного решения

Есть две лицензии на SOS. Оба имеют единовременную плату и включают пожизненные обновления.

• 1 сайт и 1 сайт для разработчиков - 25 долларов
• Безлимитные сайты - 45 долларов

Вы можете приобрести SOS на сайте разработчика.

Конечные мысли

Simple Overlay Solution прост в использовании. Управление простое и интуитивно понятное. Создание наложений почти такое же, как создание страницы с помощью Divi. Если вы можете использовать Divi Builder, вы можете использовать SOS. Страницы Divi загружаются быстро, потому что оверлеи не загружаются предварительно. Оверлеи и всплывающие окна также загружаются быстро.

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

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

SOS - простой плагин, который можно порекомендовать. Если вас интересует простой способ создания наложений, всплывающих окон и мегаменю с помощью Divi Builder, вам может понадобиться плагин Simple Overlay Solution (SOS).

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

Избранные изображения через Бахтияр Зейн / shutterstock.com