Особенности плагина Divi - Owl Carousel Pro

Вы когда-нибудь хотели отображать сообщения, проекты, пользовательские типы сообщений и изображения в карусели с помощью Divi Builder? Сообщения и изображения обычно отображаются в слайдере, который отображает по одному сообщению или изображению за раз, но что, если вам нужна настоящая карусель, отображающая несколько сообщений одновременно? Вы можете легко сделать это с помощью плагина под названием Owl Carousel Pro.

Owl Carousel Pro - это сторонний плагин, который добавляет два новых модуля в Divi Builder. Первый отображает типы сообщений, такие как проекты, сообщения и пользовательские типы сообщений. Во-вторых, карусель изображений конкурирует с визуальным редактором, чтобы добавить любой тип контента, который вы хотите.

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

• настраиваемые типы сообщений
• отображать настраиваемые поля
• индивидуальный запрос
• изменить размер эскиза
• изменить количество показанных изображений
• открыть изображение в лайтбоксе

Изображения для примеров взяты с Unsplash.com.

Установка Owl Carousel Pro

Загрузите и активируйте плагин как обычно. Затем вы увидите два новых модуля в Divi Builder: DP Owl Carousel и DP Owl Image Carousel. Модули окрашены иначе, чем стандартные модули Divi, что помогает им выделяться. Я предпочитаю сторонние модули, потому что так их легче найти.

DP Сова Карусель

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

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

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

Пользовательские запросы добавляются к вашей дочерней теме в коде PHP (всегда вносите изменения PHP в дочернюю тему, а не в родительскую тему, чтобы вы не потеряли свои изменения при обновлении темы). На сайте разработчика есть несколько примеров.

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

Примеры каруселей сов с двойным проникновением

Это стандартный дизайн (я добавил фон, чтобы он выделялся). Он отображает мои последние 10 сообщений во всех категориях. Я включил заголовок Divi и мета поста, чтобы показать, как он выглядит на странице. Щелкнув любое изображение, вы перейдете к публикации.

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

Это показывает заголовок и отрывок из сообщения, используя 270 символов по умолчанию.

В этом я установил отрывок из сообщения до 70 символов.

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

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

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

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

Карусель изображений совы DP

Карусель изображений совы DP отображает изображения внутри карусели. Он позволяет добавлять изображения и отображать стрелки и элементы управления. Настройки дизайна включают текст, текст заголовка изображения, текст содержимого изображения, интервал, стрелку, элементы управления и миниатюры. Вкладка Advanced аналогична модулю DP Owl Carousel.

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

Изображения отображаются красиво. Мне нравится, что вы можете ссылаться на URL-адреса или открывать их в лайтбоксе. Я бы хотел, чтобы к изображениям добавлялись оверлеи, так как это еще больше улучшит восприятие.

Примеры карусели изображений совы DP

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

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

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

Здесь используется темный фон с новыми цветами для шрифтов, элементов управления и стрелок.

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

Пользовательские типы сообщений

В модуле Owl Carousel Pro убедитесь, что Custom Query отключен (это используется только в том случае, если вы хотите создать свои собственные фильтры вместо выбора категорий из списка), и выберите свой тип сообщения в поле Custom Post Type Name. Я установил WooCommerce и теперь автоматически использую продукт в качестве опции.

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

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

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

Использование Owl Carousel Pro с Extra и плагином Divi Builder

Owl Carousel Pro также отлично работает с Extra. Это карусель изображений.

Посмотрите на плагин с плагином Divi Builder, установленным в теме Twenty Seventeen WordPress. Здесь отображаются мои продукты WooCommerce.

Лицензия

Плагин можно использовать на неограниченном количестве веб-сайтов для вас и ваших клиентов. Он включает в себя 1 год обновлений и поддержки.

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

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

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

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

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