Все, что вам нужно знать о модуле Carousel's Divi 5

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

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

Что такое модуль группы?

Модуль группы Carousel в Divi 5 позволяет создавать динамические, привлекательные карусели и ползунки, которые могут добавить немного движения и интерактивности к вашему веб-сайту. Независимо от того, демонстрируете ли вы портфолио, члены команды или продукты, этот универсальный модуль позволяет вам создавать практически любой тип карусели, включая на основе пост, которые динамически тянут контент.

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

Ключевые функции

Модуль группы карусель построен на оптимизированном фундаменте Divi 5, обеспечивая быстрое время нагрузки и плавные переходы. Интерфейс Divi 5 Drag-and-Drop позволяет легко добавлять модули в ползунки, с отзывчивыми элементами управления для тонкой настройки для рабочего стола, планшета и мобильных устройств, сохраняя при этом быстрые характеристики.

Настраиваемые слайды

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

Динамический контент с помощью контурирования петли

Интегрированный с конструктором Divi 5, модуль поддерживает динамические карусели на основе постов, терминов или пользовательских данных. Например, вы можете создать отзывчивую карусель, используя пользовательские типы публикаций и расширенные пользовательские поля (ACF), автоматически втягивая обзоры клиентов или тематические исследования без необходимости ручных обновлений.

Гибкость дизайна

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

Как использовать модуль группы карусель

Настройка группы в Divi 5 интуитивно понятна и гибкая. Начните с добавления ряда с одной колонкой на страницу. Затем выберите групповой модуль карусели в визуальном строителе и добавьте его на свою страницу.

На вкладке Content нажмите, чтобы развернуть выпадающее меню настроек карусели .

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

Включить показатель Dot Navigation в раскрывающемся меню «Элементы». Вы можете оставить выставочные стрелки включенными или отключить их.

Назначьте стиль первой группе

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

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

Затем перейдите на вкладку Design . Разверните выпадающее меню макета и установите оправдание контента в конце .

Затем расширяйте раскрывающееся меню расстояния и добавьте 5% маржи слева и справа от нашей группы. Это добавит немного передышки между группами в карусели.

Установите верхнюю прокладку на 100%. Примените 25 % -пикселей влево и вправо.

Добавить контент в первую группу

Мы можем обратить наше внимание на добавление контента в нашу группу. Нажмите на значок Black + и добавьте модуль разделителя .

Перейдите к вкладке дизайна . Разверните выпадающее меню линии и измените цвет на #ffffff .

Далее, расширите вкладку размеров. Установите вес разделителя до 4px и ширину до 15% .

Затем добавьте модуль заголовка в группу. Дайте заголовок заголовок.

Переключитесь на вкладку Design . Под заголовком текста установите уровень заголовка на H2 (или любой другой заголовок, который вы хотите) , выберите «Интер» для заголовка шрифта , выберите свет для веса шрифта, #ffffff для цвета текста заголовка и 2EM для размера текста заголовка .

Прежде чем дублировать нашу группу, давайте вернемся на вкладку «Дизайн» и отрегулируем вертикальный разрыв до 10px. Это устранит любое ненужное вертикальное пространство между модулями.

Добавление дополнительных групп

Теперь, когда наша первая группа разработана, мы можем скопировать стилизованную группу и просто поменять наш контент (фоновое изображение и заголовок) на карусель. Дублируйте группу восемь раз, и у нас будет девять слайдов.

После дублирования группы ваша группа карусель должна выглядеть так.

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

Нажмите на 2 -ю группу в карусели. Разверните фон и замените изображение новым.

Находясь на вкладке Content , не забудьте добавить имя в поле метки администратора . Затем измените заголовок модуля заголовка на Мэн .

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

Как видите, текст на некоторых из наших слайдов несколько сложно прочитать. Мы можем исправить это на вкладке «Дизайн» на уровне карусели без необходимости редактировать каждую группу элемент индивидуально.

Настройка групп и активных групп

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

Теперь, когда мы создали групповую карусель, отправляйтесь на вкладку «Дизайн» в настройках главной карусель.

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

Расширить вкладку фона . Мы применим градиент света на неактивные вкладки, чтобы убедиться, что текст является разборчивым. Установите первую остановку градиента на #000000 с непрозрачностью 0% . Немного отрегулируйте ползунок вправо. Включите градиент места над фоновым изображением .

Установите 2 -ю остановку градиента на № 000000 с 40% непрозрачностью .

Включите градиент места над фоновым изображением .

Затем найдите вкладку «Фильтры» . Мы уменьшим насыщение в неактивных группах, чтобы дать фоновым изображениям черно -белый эффект. Найдите насыщенный ползунок и установите его на 0 .

Далее, разверните выпадающее меню Active Groups и нажмите на вкладку «Фоны» . Примените те же настройки градиента, что и выше.

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

Разверните раскрывающееся меню фильтров в активных группах и отрегулируйте ползунок насыщения до 75% . Это раскрасит только активный элемент карусели, что позволит пользователям идентифицировать активное слайд в карусели.

Настройте отзывчивый макет

Теперь, когда наша группа Carousel готова к настольным компьютерам, мы будем использовать настраиваемые отзывчивые точки остановки Divi 5, чтобы уладить мобильную версию нашей карусели. По умолчанию Divi 5 включает три точки останова. Вы можете использовать все семь доступных точек отдыха, если вы хотите большего контроля над различными размерами устройства. Нажмите на меню Ellipsis в середине верхней панели в визуальном строителе.

Включите точки останова, которые вы хотите, и нажмите «Сохранить» , чтобы продолжить.

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

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

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

Вот и все! Создание групповой карусели в Divi 5 является простым и дает невероятные результаты.

Интеграция с строителем петли Divi 5

Builder Divi 5 - это мощная функция, которая может превратить групповой модуль в динамический дисплей содержимого. Эта функция позволяет дизайнерам создавать динамические, автоматизированные карусели, которые вытягивают контент непосредственно из WordPress, превращая статический контент в дисплеи продуктов, архивы категорий или карусели членов команды с несколькими кликами.

Интегрируя строитель петли с группой Carousel, Divi 5 дает пользователям создавать сложные, управляемые контентом карусели с минимальной ручной работой, что делает его выдающейся функцией для динамического веб-дизайна.

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

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

Реальные примеры модуля группы каруселей

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

Пользовательская полная ширина / ползунок полного экрана

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

Витрина члена команды

Если вы хотите представить членов команды на своем веб -сайте, использование модуля Group Carousel - отличный способ сделать это. В этом примере мы настроили 3-столбчатый макет в нашу карусель. Каждый слайд включает в себя выстрел в голову, название, роль и ссылки на социальные сети с использованием модуля Divi Social Foll. Установите карусель, чтобы прокрутить по одному слайду за раз для чистого, профессионального вида.

Категория демонстрирует

Модуль группы Divi 5 Carousel работает безупречно с Builder. Это позволяет вам создавать привлекательные ползунки, которые показывают категории продуктов вашего сайта. Каждый слайд динамически втягивает название категории и изображенное изображение, что делает его отличным способом продемонстрировать ваши продукты. В этом примере мы используем эффекты фильтра для

Отзывы

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

Загрузите файлы

Скачать бесплатно

Присоединяйтесь к информационному бюллетеню Divi, и мы отправим вам копию «Копия Ultimate Divi Landing Layout Page», а также множество других удивительных и бесплатных ресурсов Divi, советов и хитростей. Следуйте, и вы станете мастером Divi в кратчайшие сроки. Если вы уже подписаны, просто введите свой адрес электронной почты ниже и нажмите «Скачать», чтобы получить доступ к пакету макетов.

СКАЧАТЬ

Вы успешно подписались. Пожалуйста, проверьте свой адрес электронной почты, чтобы подтвердить свою подписку и получить доступ к бесплатным еженедельным пакетам макетов Divi!

Разблокируйте творческие возможности с модулем каруселей Divi 5

Модуль группы Divi 5 Carousel - это мощное дополнение, которое открывает новые возможности для создания динамических сайтов Divi. От создания привлекательных ползунков продукта до отзывов этот модуль облегчает добавление интерактивного контента на ваши сайты Divi.

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