Как настроить слайдер Divi для изменения определенных элементов с каждым слайдом

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

Давайте нырнем!

Подглядывание за слайдером Divi

Hear - это беглый взгляд на дизайн и функциональность слайдера Divi, который мы создадим в сегодняшнем руководстве.

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

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

Объяснение основной концепции

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

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

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

Начиная

Подпишитесь на наш канал Youtube

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

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

Теперь вы готовы приступить к дизайну.

Настройка содержимого слайдера Divi

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

Чтобы мы могли видеть изменения содержимого в нашем слайдере, давайте сначала временно добавим темный цвет фона в раздел полной ширины. Откройте настройки раздела и задайте ему черный цвет фона (# 222222).

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

Теперь давайте перейдем к настройкам полноразмерного слайдера и удалим один из слайдов по умолчанию, оставив только один. Затем откройте настройки слайда.

Обновите настройки слайда следующим образом:

Заголовок: «Сайты, которые дают вам больше…»
Текст кнопки: «Начать»

В разделе Content добавьте следующий html:

Business<span style="color: #EE164D;">.</span>

(Это добавляет пользовательский цвет к точке (или точке) после слова.)

Цвет фона: rgba (255,255,255,0)

Сохранить настройки.

Теперь продублируйте слайд дважды, чтобы у вас получилось три слайда.

Откройте настройки второго слайда. В разделе «Содержание» замените только слово «Бизнес» на «Деньги», оставив остальной HTML-код, заголовок и текст кнопки неизменными. Мы хотим изменить только одно слово на каждом слайде. Затем сохраните настройки.

Затем откройте настройки третьего слайда. В разделе «Содержание» замените слово «Бизнес» на «Успех» и сохраните настройки.

Все сделано! Это касается содержимого нашего слайдера.

Оптимизация анимации текста описания

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

animation-name: none;

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

Автоматическая анимация: ВКЛ.
Скорость автоматической анимации (в мс): 3000

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

Разработка слайдера

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

Откройте настройки ползунка полной ширины и обновите следующее:

Ориентация текста: слева
Шрифт заголовка: Lato
Толщина шрифта заголовка: легкий
Размер текста заголовка: 32 пикселя
Тень текста заголовка: см. Снимок экрана
Сила размытия тени текста заголовка: 0em (в основном это убирает тень текста по умолчанию)

Шрифт тела: Lato
Размер основного текста: 5vw (рабочий стол), 50px (планшет), 40px (смартфон)
Высота линии корпуса: 1.6em
Тень основного текста: см. Снимок экрана
Сила размытия тени основного текста: 0em (в основном это убирает тень текста по умолчанию)

Размер текста кнопки: 16 пикселей
Цвет фона кнопки: # ee164d
Ширина границы кнопки: 8 пикселей
Цвет границы кнопки: # ee164d
Радиус границы кнопки: 0 пикселей
Расстояние между буквами кнопки: 1 пиксель
Шрифт кнопки: Lato
Расположение кнопок: справа

Ширина: 70% (рабочий стол), 100% (планшет), 100% (смартфон)
Выравнивание модуля: по центру

Custom Padding (рабочий стол): 19vw сверху, 8vw снизу
Custom Padding (планшет): 19vw сверху, 4vw снизу. 0 пикселей слева, 0 пикселей справа
Custom Padding (смартфон): 30vw сверху, 4vw снизу, 0px слева, 0px справа

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: -190 пикселей
Положение прямоугольной тени по вертикали: 60 пикселей
Цвет тени коробки: rgba (0,16,17,0.7)

И в качестве последнего шага давайте отключим наши элементы слайдера, чтобы мы не видели стрелки или элементы управления слайдером.

Это позаботится о дизайне слайдера Divi!

Настройка стилей сечения

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

Откройте настройки раздела и обновите следующее:

Фоновое изображение: [вставьте изображение размером 1920 на 800 пикселей]
Цвет фона градиента слева: rgba (0,16,17,0.45)
Правый цвет градиента фона: rgba (0,16,17,0.92)
Стартовая позиция: 34%
Конечная позиция: 0%
Поместите градиент над фоновым изображением: ДА

Затем дайте вашему разделу правую границу следующим образом:

Ширина правой границы: 5vw
Цвет правой границы: # 001011

И, наконец, дайте разделу тень блока, чтобы сбалансировать структуру дизайна.

Box Shadow: см. Снимок экрана
Горизонтальное положение тени блока: -200 пикселей
Вертикальное положение тени блока: -150 пикселей
Цвет тени коробки: rgba (0,16,17,0.74)

Вот и все!

Окончательный дизайн слайдера Divi

Вот окончательный дизайн настраиваемого слайдера Divi.

А вот и функционал слайдов. Обратите внимание, как на каждом слайде меняется только одно слово.

Окончательный дизайн для мобильных устройств

Планшет

Смартфон

Поэкспериментируйте с изменением других элементов

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

Вот как бы это выглядело.

Вы даже можете изучить изменение цвета тени слайда или какого-либо другого элемента дизайна. Возможностей бесчисленное множество!

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

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

Дайте мне знать, что вы думаете, в комментариях ниже.

Ваше здоровье!