Особенности плагина Divi: простые слайды

Easy Slide-Ins - это сторонний плагин для Divi и Extra, который позволяет создавать слайды (и всплывающие окна) с помощью конструктора Divi. Слайды могут отображать все, что можно построить с помощью Divi Builder. Запускайте слайдеры с помощью процента прокрутки, намерения выхода, кнопки с несколькими местоположениями и класса CSS. Он включает в себя пожизненные обновления и демонстрации.

В этой статье мы рассмотрим Easy Slide-Ins и узнаем, на что она способна и на что она проста в использовании. Мы также рассмотрим несколько демонстраций, которые включены в плагин. Плагин доступен на сайте разработчика.

Установка Easy Slide-Ins

Сначала разархивируйте файл. Внутри папки вы найдете демонстрации, файл со ссылкой на документацию и плагин Easy Slide-Ins.

Загрузите и активируйте плагин как обычно.

На панель управления добавлено новое меню под названием Easy Slide-Ins. Щелкните это меню и введите свой лицензионный ключ.

Активация лицензии добавляет два пункта меню (Все элементы и Добавить новый), где вы можете видеть свои слайды и создавать новые слайды.

Создание нового слайда

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

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

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

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

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

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

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

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

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

Я включил метку в настройках и установил черный фон и белый текст. Я сохранил текст по умолчанию (Свяжитесь с нами). Я установил отображение в правом верхнем углу. Используется высота по умолчанию, но ее можно легко изменить.

При нажатии на ярлык открывается слайд, который отображается на экране с контактной формой из пакета макетов управления рисками. При повторном нажатии кнопки «Связаться с нами» слайд закрывается. У меня ширина вставки установлена ​​на 500 пикселей, высота метки - 150, а ширина метки - 60.

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

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

Он открывается в полноэкранном режиме и включает кнопку закрытия.

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

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

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

Скопируйте класс и вставьте его в поле CSS Class кнопки.

Теперь нажатие на кнопку открывает слайд. Никаких надписей нигде не должно быть, но они будут выдвигаться с того направления, в котором вы поместили выдвижной элемент. Этот был помещен слева, поэтому он идет слева. Я установил ширину 1000 пикселей.

Демоверсии Easy Slide-Ins

Загружаемый файл включает 12 демоверсий. Это готовые макеты (файлы JSON), которые вы можете загрузить в библиотеку Divi. Импортируйте их в библиотеку Divi как обычные макеты. Они включают стилизованные модули, но вам нужно будет настроить параметры дизайна. Вот некоторые из них.

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

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

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

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

Это руководство для посетителей. Он включает модуль кода (для Google Maps), несколько объявлений, текст и контактную форму.

Вот как это выглядит на странице с настройками по умолчанию.

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

Вот как это выглядит на экране. Я установил его на 800 пикселей, чтобы он отображал всю ширину, если сдвинуть слайд. Я удалил ярлык и установил его отображение, когда прокрутка страницы достигает 60%.

Вот тот же макет при просмотре с помощью Extra. Я рад видеть, что он отлично работает как с Divi, так и с Extra.

Цена и документация для удобных слайдов

Easy Slide-Ins доступен на сайте разработчика. Есть два варианта покупки:

• Одиночный сайт - 27 $
• Безлимитные сайты - 97 $

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

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

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

Easy Slide-Ins позволяет легко создавать слайды и всплывающие окна для Divi и Extra. Мне было легко пользоваться. Мне никогда не была нужна документация, но она есть, если понадобится. Это интересный способ добавить скрытые элементы страницы. Поскольку в слайд-ине можно использовать все, что угодно, вы можете показывать контактные формы, подписку на рассылку новостей, призывы к действию, видео, модули магазинов и т. Д. Это может быть отдельный модуль или макет всей страницы.

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

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

Если вы ищете простой и интуитивно понятный способ создания слайдов с помощью Divi Builder, стоит взглянуть на Easy Slide-Ins.

Ждем вашего ответа. Вы пробовали Easy Slide-Ins для Divi? Дайте нам знать, что вы думаете об этом в комментариях.

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