Особенности плагина Divi: Ultimate Divi Builder Addons

Divi Builder Addons - это сторонний плагин, который добавляет в Divi Builder множество скриптов jQuery, которые используются высокопроизводительными веб-сайтами. Просто переключите нужные скрипты и добавьте классы CSS в модули Divi Builder. Он прост в использовании и включает в себя множество функций и анимаций.

Меню дополнений Ultimate Divi Builder

Загрузите и активируйте плагин как обычно. В меню панели инструментов добавлен новый пункт под названием Ultimate Divi Builder Addons. При нажатии на нее в левом окне открывается экран с множеством функций. Щелчок по любому из них показывает переключатель и информацию в правом окне. Правое окно также включает классы CSS для некоторых эффектов и показывает, как их использовать. Другие включают несколько переключателей для дополнительных функций и параметров, таких как цвета, размеры изображения, продолжительность и т. Д. По умолчанию все они отключены.

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

Возможности включают:

• Пользовательская полоса прокрутки
• DoSlide по горизонтали
• Исчезать в поле зрения
• Перелистывание текста
• Скрыть заголовок темы Divi при прокрутке вниз
• jQuery Pageflipping Вертикальная прокрутка
• jQuery Pageflipping Горизонтальная прокрутка
• jQuery Scrollflow
• jQuery ScrollFX
• jQuery ScrollTrigger
• Окно конечной страницы jQuery
• Загрузка заголовка при прокрутке Effect1
• Загрузка заголовка при прокрутке Effect2
• Загрузка заголовка при прокрутке Effect3
• Загрузка заголовка при прокрутке Effect4
• Revealator Анимация
• ScrollMagic Responsive Duration
• Свиток
• StickyStack: эффект стекирования jQuery
• Прокрутка окон
• Супер простой ротатор текста / тикер
• Вау Анимация

Примеры надстроек Ultimate Divi Builder

Вот несколько примеров функций при использовании с макетами Divi.

Пользовательская полоса прокрутки

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

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

Это эффект 3. Он добавляет стрелки вверху и внизу слайда.

Эффект 5 изменяет маркер с линии на точку и меняет стиль стрелок.

Перелистывание текста

Перелистывание текста - это эффект набора текста, который создает тикающую вводную анимацию. Имеет 5 эффектов. В этом примере я добавил перелистывание текста в макет Paralegal. Это первый эффект набора текста с переворачивающимся текстом. Он набирает по одной букве за раз. Вы можете использовать несколько разных классов. Каждый печатает с разной скоростью.

jQuery ScrollFlow

jQuery Scroll Flow добавляет анимацию прокрутки к строкам или модулям. Имеет 5 анимаций. Я добавил это в строку макета Paralegal, чтобы он влиял на все модули вместе. Вы также можете добавить его только к одному из модулей в строке, чтобы он скользил на месте, чтобы соответствовать остальному содержимому, которое уже есть.

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

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

jQuery ScrollFX

jQuery ScrollFX масштабирует текст и изменяет непрозрачность фона. В раздел добавлен класс scrollfx. Модули в этом разделе обычно отображаются при прокрутке к ним и когда они находятся на экране.

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

Триггер прокрутки jQuery

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

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

И затем он успокаивается, когда все на месте.

Окно конечной страницы jQuery

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

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

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

Загрузка заголовка при прокрутке

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

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

Это эффект 2. Он отображает гораздо более широкую полосу.

Это эффект 3. Он увеличивается по вертикали при прокрутке, занимая высоту логотипа. Он не становится очень большим, но по-прежнему показывает эффект прокрутки.

Эффект 4 принимает ширину логотипа.

Revealator

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

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

Салфетки Scroll Magic Section

Scroll Magic Section Wipes создает анимацию, которая стирает содержимое на экране при прокрутке. Я думаю, что это мой любимый из всех эффектов. Он добавлен в раздел.

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

Свиток раскрыть

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

Это эффект 1f. Строка вращается на месте, когда вы прокручиваете ее.

StickyStack: эффект стекирования jQuery

StickyStack: jQuery Stacking Effect складывает панели по мере их достижения верхней частью области просмотра. Другими словами, каждый раздел на экране замирает при прокрутке, а следующий раздел прокручивается, перекрывая его. Результат выглядит потрясающе при прокрутке. Это макет управления рисками.

Вот еще один раздел той же страницы. Перекрывающиеся части работают отлично.

Супер простой ротатор текста / тикер

Super Simple Text Rotator / Ticker позволяет добавлять разметку к тексту и поворачивать несколько слов. Имеет 5 стилей анимации. Это чередование слов «Простой» и «Настраиваемый».

Здесь он повернут, чтобы отобразить второе слово. Оба слова появляются и исчезают.

Стоимость дополнений Ultimate Divi Builder

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

• Вы можете приобрести Ultimate Divi Builder Addons на сайте DiviBuilderAddons.com.

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

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

Некоторые из них сложнее показать, не заполнив эту статью большими GIF-файлами. Например, в Wow Animation есть 75 анимаций на выбор, и вы можете изменить задержку, продолжительность, расстояние и количество повторов.

Плагин требует, чтобы вам было удобно вставлять класс CSS в раздел, строку или модуль. К счастью, это легко сделать, и в документации Divi есть много информации о вставке в классы CSS.

Если вас интересует простой способ добавления множества функций и анимации в Divi, стоит попробовать Ultimate Divi Builder Addons.

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

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