Выделение плагина Divi - слайдер Anything

Стандартный модуль слайдера Divi - мощный слайдер. Возможности включают заголовок, кнопку, текст, мультимедиа, ссылку, фон, наложение и многое другое. Что, если вы хотите создать макеты с помощью Divi Builder и разместить их на слайде? Это именно то, что делает Anything Slider.

Anything Slider - это сторонний плагин от CakeWP, который позволяет использовать макеты Divi внутри слайдов. Вы можете сделать с ним гораздо больше, чем просто ползунки. Он также включает модуль AS Menu, который можно использовать вместе с модулем слайдера для создания:

• Вкладки
• Карусели
• Интерактивные разделы
• Ценообразование Переключатели
• Фильтруемые галереи
• Интерактивные призывы к действию
• Фильтруемые продукты
• Веб-страница

Anything Slider работает с Divi, Extra и плагином Divi Builder. В этом выделении плагина мы рассмотрим, что умеет Anything Slider. Изображения взяты с Unsplash.com.

• Посетите CakeWP.com для получения информации о покупке.

Установка Anything Slider

Загрузите и активируйте плагин, как любой плагин премиум-класса. После его активации наведите курсор на меню плагинов на панели инструментов и выберите Anything Slider License. Введите свой лицензионный ключ и выберите Активировать лицензию. Затем выберите Сохранить изменения.

В Divi Builder добавлены два новых модуля: Anything Slider и AS Menu. Вместе они могут создать несколько интересных дизайнов.

Настройки модуля Anything Slider

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

Настройки слайдера Anything Slider

Щелкните Добавить новый слайд. Здесь вы увидите раскрывающийся список под названием «Макет слайда», в котором вы сможете выбрать макеты для слайдов. Это могут быть готовые макеты, макеты, которые вы создали и сохранили в библиотеке, или макеты, которые вы загрузили.

Настройки модуля слайдера меню AS

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

Стартовые наборы для слайдера Anything

Anything Slider использует макеты для создания слайдов. Чтобы помочь вам начать работу, существует множество бесплатных стартовых наборов и пакетов макетов, которые вы можете загрузить с веб-сайта разработчика. Импортируйте их в библиотеку Divi, чтобы использовать.

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

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

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

Анимации

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

Кнопки навигации

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

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

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

Модуль меню AS

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

Модуль AS Menu создает меню, чтобы посетители могли перемещаться по слайдам. Сами слайды включают тег навигации в конце URL-адреса (в адресной строке вашего браузера). Используйте этот тег для каждого пункта меню. В этом примере тег URL первого слайда - # s_1.

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

Я добавил несколько пользовательских отступов и скорректировал цвета наведения и фона.

Я также удалил кнопки навигации со слайдера и поместил модуль AS Menu вверху. Меню отображается в горизонтальной ориентации. Отступы с фоновыми цветами создают вокруг текста рамки. Используя отступы, вы можете сделать кнопки сколь угодно большими.

Я настроил макет на 2 столбца (3/4 + 1/4) и установил ориентацию меню по вертикали.

Боковое меню создает некоторые интересные возможности, особенно если учесть особенности изображения и значков модуля. Посмотрим, что мы можем с этим сделать.

Создание уникальной страницы

Вы можете создавать полные страницы с помощью ползунка, а затем автоматически перемещаться между ними, с помощью кнопки и точечной навигации или с помощью модуля меню. В этом примере я создал новую полноразмерную страницу с модулем AS Menu в 1/4 слева и ползунком Anything Slider в 3/4 справа. Я добавил фоновое изображение в раздел с наложением, чтобы помочь визуально описать веб-сайт с первого взгляда.

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

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

Модуль AS Slider покажет все макеты блога в виде отдельных слайдов. Я отключил элементы управления «следующий / предыдущий» и «точка».

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

Документация по любому слайдеру

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

Лицензия, поддержка и обновления

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

• 1 сайт - $ 30.00
• 5 сайтов - $ 50.00
• Безлимитные сайты - 120,00 $

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

• Посетите CakeWP.com для получения информации о покупке.

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

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

Если вы заинтересованы в расширении своих ползунков за пределы стандартного слайдера Divi, плагин Anything Slider может быть тем плагином, который вам нужен.

Мы хотели бы получить известие от вас. Вы использовали Anything Slider? Расскажите нам о своем опыте в комментариях.

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