Как построить пользовательский полноэкранный слайдер с Divi 5 (скачать бесплатно)

Один из последних выпусков Divi 5 представляет модуль Group Carousel, функцию создания пользовательских, привлекательных ползунков и каруселей для вашего сайта WordPress. Вы можете легко продемонстрировать свое портфолио, продукты, захватывающий герой или полноэкранный слайдер и перенести дизайн вашего сайта на новые высоты.

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

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

Модуль Group Carousel является универсальным дополнением к Divi 5, что позволяет вам создавать динамические ползунки и карусели.

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

Ключевые особенности модуля группы каруселей

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

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

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

Как построить полноэкранный слайдер с групповым модулем Carousel's Divi 5

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

Шаг 1: Настройка новой страницы

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

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

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

Перейдите к вкладке дизайна . Нажмите на выпадающее меню макета . Под оправданием контента выберите Центр . В поле Align Items выберите центр . Это позволит контенту нашего секции быть центрированным по горизонтали и вертикально.

Далее мы отрегулируем настройки расстояния для раздела. Расширить раскрывающееся меню расстояния . Установите маржу на 0px , сверху и снизу. Под прокладкой установите верхнюю и снизу на 0px .

С настройками раздела на месте, нажмите на значок Green +, чтобы добавить новую строку.

Выберите одну колонну строку под равными столбцами .

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

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

Шаг 2: Настройте настройки строки

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

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

Кроме того, установите выравнивать элементы в центр строки.

Установите ширину и максимальную ширину на вкладке размера на 100%.

На вкладке расстояния установите верхнюю и нижнюю запас и прокладку до 0px .

Шаг 3: Настройте настройки группы каруселей

Далее мы настроим настройки группы каруселей. Разверните выпадающее меню настройки каруселей на вкладке Content. Вы можете включить автоматическое вращение , выберите скорость автоматического поворота при настройке по умолчанию 2000 мс и включите паузу на Hover .

На вкладке «Элементы» отключите Show Dot Navigation и оставьте Show Arrows включенными. Вы также можете выбрать пользовательский значок для стрелок левого и правого.

Нажмите, чтобы развернуть вкладку «Стрелки» на вкладке «Дизайн». Назначьте #ffffff в качестве цвета стрелки , оставьте размер стрелки по умолчанию 48px и оставьте положение стрелки, установленное внутри .

Разверните фон и назначить № 000000 как цвет фона .

Шаг 4: Стиль первой группы

Мы можем добавить контент в первый слайд с настройками секции, строки и групповой карусели на месте. Нажмите на вкладку Content в модуле Group Carousel и нажмите значок «Настройки» для группы.

Разверните выпадающее место с фона и выберите вкладку Градиента .

Нажмите на первый ползунок градиента , чтобы назначить новый цвет. Введите #efb648 в цветовое поле .

Затем нажмите на 2 -й градиент -слайдер и назначьте #F28F52 в качестве цвета.

В поле типа градиента выберите Circular .

Затем перейдите на вкладку Design . Разверните вкладку расстояния и назначьте 5% накладку на верхнюю и нижнюю часть группы.

Шаг 5: Добавьте контент в первую группу

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

Когда появляется диалоговое окно модуля вставки или строки, нажмите на вкладку «Новая строка» . В разделе «Равные столбцы» выберите строку одного столбца .

Добавить модуль заголовка

Выберите и вставьте модуль заголовка .

Разверните раскрывающееся меню текста и введите апельсиновый сок в качестве заголовка .

Перейдите к вкладке дизайна . Расширить выпадающее меню текста заголовка . Выберите H1 в качестве уровня заголовка , используйте Bebas neue в качестве шрифта заголовка , установите стиль шрифта заголовка в верхний регистр , выравнивание текста заголовка в центр , цвет текста заголовка на #ffffff и размер текста заголовка до 20EM .

Используйте адаптивные элементы управления Divi 5, чтобы отрегулировать размер текста заголовка на 15 EM на планшете и 8EM на мобильных устройствах.

Добавить новый ряд

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

Щелкните новую вкладку «Роуд» . Под столбцами смещения выберите опцию 1/4 + 1/2 + 1/4.

На вкладке «Дизайн» разверните вкладку размеров и введите 70% для ширины и максимальной ширины . Установите выравнивание в центр .

Добавить модуль заголовка

Выберите модуль заголовка и добавьте его в первый столбец .

Дайте заголовок заголовок и отправляйтесь на вкладку «Дизайн» . Расширить выпадающее меню текста заголовка . Выберите H2 для уровня заголовка , Bebas neue в качестве шрифта заголовка , в качестве заголовка стиля шрифта , #ffffff в качестве цвета текста заголовка и 6EM в качестве размера текста заголовка .

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

Добавить текстовый модуль

Добавьте текстовый модуль под заголовком в первом столбце. Введите немного текста тела и переключитесь на вкладку Design . Выберите Poppins в качестве текстового шрифта , установите цвет текста в #ffffff и размер текста на 16px .

Добавить модуль кнопки

Добавьте модуль кнопки под текстовым модулем в первом столбце. Назначьте текст на кнопку на вкладке Content и замените вкладку Design. Разверните выпадающее меню кнопки и включите использовать пользовательские стили для кнопки . Затем разверните фоновое меню кнопки . На вкладке «Цвет фона» добавьте #528bf2 в качестве цвета кнопки.

Используйте элементы управления Hover от Divi 5, чтобы назначить #6A7C9D в качестве цвета наживания для кнопки.

Переключитесь на вид на рабочем столе. Разверните вкладку раскрытия границы кнопки . Добавьте 100px под радиус границы кнопки и установите ширину границы кнопки до 0px .

Разверните выпадающее меню текста кнопки . Назначьте Poppins в качестве шрифта кнопки , #ffffff в качестве цвета кнопки текста и 16px в качестве размера текста кнопки .

Разверните настройки значка кнопки и отключите переключатель значения кнопки «Показать» .

Наконец, разверните раскрывающееся меню расстояния . Добавьте накладку 15 % в верхней и нижней части и 35px влево и вправо.

Добавить модуль изображения

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

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

Выберите Mouse Enter , когда появятся параметры.

Введите наклон изображения в поле Admin Label , выберите Mouse Enter как событие триггера, зеркальное движение мыши в качестве действия эффекта, выберите изображение в качестве целевого модуля, наклона как тип движения и 15 для чувствительности. Наконец, нажмите кнопку «Сохранить взаимодействие» , чтобы включить взаимодействие.

Добавить модуль стержней

Нажмите, чтобы добавить модуль стержня в 3 -м столбце. На вкладке Content. На вкладке «Элементы» отключите процент шоу .

Далее, разверните фон. Добавьте #ffffff в качестве цвета фона.

Поменять на вкладку «Дизайн» и развернуть выпадающее меню бара . В цветовом поле стержня добавьте #528bf2 в качестве цвета.

Расширить выпадающее меню текста заголовка . В поле «Шрифт» выберите Bebas Neue . Выберите #ffffff в качестве цвета текста заголовка и 22px в качестве размера текста заголовка .

Обратите внимание на вкладку Содержания. На этот раз щелкните значок «Настройки» для первого элемента счетчика.

Введите текст в поле заголовка и установите поле процента на 75 .

Нажмите, чтобы вернуться на вкладку «Основной контент» для модуля Bar Counters.

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

Дублируйте элемент стока и измените заголовок и процент на желаемые настройки.

Шаг 6: Добавьте анимации

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

Далее нажмите, чтобы расширить 2-й ряд (ряд с тремя столбцами). Нажмите на настройки первого столбца.

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

Нажмите на вкладку «Основной контент» для строки. На этот раз выберите 3 -й столбец. Перейдите на вкладку «Дизайн», разверните вкладку «Анимация» и выберите Slide> Left для анимации. Оставьте другие настройки по умолчанию.

Шаг 7: перекрывающиеся ряды

Чтобы добавить немного дополнительного таланта в макет, мы отрегулируем маржу на 2 -м ряду, чтобы создать эффект перекрытия. Это подтолкнет ряд вверх, что позволит ему перекрывать основной заголовок для хорошего эффекта. Выберите 2 -ю строку в макете и перейдите на вкладку Design. Разверните вкладку расстояния, чтобы показать настройки. В верхнем поле установите значение на -8%.

Далее мы применим значение индекса z, чтобы разместить 2 -ю строку выше 1 -го. Перейдите на вкладку «Дополнительно», разверните настройки позиции и примените 999999 в поле z Index.

Когда вы предварительно просмотрите слайдер, вы увидите, что 2 -й ряд был поднят, чтобы немного перекрывать 1 -й ряд, создавая хороший эффект перекрытия.

Шаг 8: Отзывчивость теста

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

В Divi 5 сейчас есть 7 точек останова вместо Divi 4. Перед тем, как скопировать первую группу, перейдите по точкам останова и сделайте необходимые настройки.

Одной из лучших новых функций в Divi 5 является возможность изменить порядок столбцов для мобильных устройств. Это отличный способ поддерживать функциональную и эффективную дизайн на всех размерах экрана. Находясь в мобильном представлении, выберите 2-й столбец 2-й строки в нашем макете (3-колоколовый ряд).

На вкладке Content разверните вкладку «Заказ» . Оттуда установите порядок отображения на -1 . Это поместит столбец с изображением вверху, что позволит изображению наложение заголовка, как это происходит на рабочем столе и представлениях планшета.

Шаг 9: Дублирующиеся группы

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

Перед копированием назначьте этикетку администратора группе, чтобы упростить его идентифицировать.

Оттуда измените заголовок, поменяйте изображение и назначьте новый фона градиента группе. Используйте #FC6A3C для первого ползунка градиента и #C52F00 для второго.

Вы также захотите изменить цвета кнопки и стойки стержня на #3DFCCA и #C52F00 на Hover.

Нам также нужно отрегулировать время анимации для 2 -й группы. Это гарантирует, что анимация не загружается для других слайдов, пока слайдер не достигнет. В основном модуле заголовка перейдите на вкладку «Дизайн» , разверните меню анимации и установите задержку анимации на 2000 мс .

Сделайте то же самое для 3-Column Row. В первом и третьем столбцах установите задержку анимации на 2000 мс .

Изменения в третьей группе

Для 3 -й группы используйте #71B953 и #617A56 для фонового градиента .

Для модулей кнопки и столовых стойков используйте #BA54B3 и #654F64 для цвета наживания.

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

Изменения в четвертой группе

Для фонового градиента используйте #AD52B7 и #AD52B7 .

Используйте #83B853 и #83B853 для модулей стержня и кнопок.

Наконец, установите задержку анимации на 6000 мс на главном заголовке в группе, а также первые и третьи столбцы 3-колонного ряда.

Шаг 10: Предварительный просмотр и сохранить слайдер

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

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

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

Вот и все! Модуль Group Carousel является универсальным новым дополнением к Divi 5. Он позволяет создавать ползунки и карусели для любого проекта и предлагает неограниченные параметры настройки.

Скачать полноэкранную компоновку каруселей

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

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

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

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

СКАЧАТЬ

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

Постройте свой первый карусель в Divi 5 сегодня

Создание пользовательского полноэкранного слайдера с групповым модулем Carousel's Divi 5 открывает мир возможностей для создания привлекательного опыта на ваших веб -сайтах. После шагов в этом посте вы узнали, как использовать функции модуля, из расширенных параметров настройки, таких как анимация, отзывчивые точки останова и интерактивные эффекты. Гибкость модуля Group Carousel позволяет вам создавать слайды для всего, что вы можете себе представить, при этом сохраняя бесшовный, профессиональный вид во всех размерах экрана.

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