Хотите создать слайдер-аккордеон Divi отзывчивый?
Слайдер-аккордеон — это веселый и привлекательный способ продемонстрировать содержание в небольшом пространстве.
Слайдеры-гармошки обычно состоят из нескольких элементов (или панелей), сложенных горизонтально, как складки занавески. А когда вы наводите курсор на одну из панелей, она расширяется, показывая содержание в то время как другие панели аккордеона сжимаются. Здесь мы получаем эффект расширения и сжатия типа аккордеона.
В этом уроке мы покажем вам, как создать адаптивный слайдер-аккордеон в Divi используя только CSS. Для этого мы будем использовать несколько модулей Divi служить аккордеонными панелями.
обследование
Вот краткий обзор того, чего мы достигнем в этом уроке.
Скачайте DIVI прямо сейчас!!!
Создание новой страницы с помощью Divi Builder
Для начала вам нужно будет сделать следующее:
- В панели управления WordPress перейдите к Страницы> Добавить новый для создания новой страницы.
- Дайте ему название, которое имеет смысл для вас, и нажмите Используйте Диви Строитель
- Затем нажмите Начать строительство (Построить с нуля)
После этого у вас будет чистый холст, чтобы начать проектирование в Divi.
Создание адаптивного слайдера-аккордеона в Divi
Создание линии
Для начала добавьте в обычный раздел строку из одного столбца.
Затем откройте настройки линии и обновите следующее:
- Использовать пользовательскую ширину желоба: ДА
- Ширина желоба: 1
- Ширина: 100%
- Максимальная ширина: 800 пикселей
- Высота: 400 пикселей (для рабочего стола); 700px (планшет и телефон)
Значения ширины и максимальной ширины можно изменить в соответствии с вашими потребностями. Аккордеон подходит и работает с любой шириной линии.
Параметры столбца
Теперь, когда у нас определена высота для строки, откройте настройки столбца и добавьте следующий CSS к основному элементу:
Для ПК
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
таблетка
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
Создание аккордеонной панели с модулями Blurb
Слайдер-аккордеон может быть построен с использованием модулей любого типа. Если бы мы захотели, мы могли бы использовать комбинацию различных модулей, чтобы действовать как панель-аккордеон. Но для этого дизайна мы будем использовать модули Blurb.
Начните с добавления модуля Blurb в строку.
Рекламный дизайн мода
Откройте настройки модуля презентации и обновите следующее:
Сохраните вымышленное название и содержание от тела. Мы всегда можем изменить это позже.
Затем обновите значок презентации следующим образом:
- Значок (рабочий стол): значок горизонтальной стрелки (см. скриншот)
- Иконка (Hover): (см. скриншот)
- Значок (Планшет и телефон): (см. скриншот)
Задний план
Затем дайте аннотации фоновое изображение и наложение градиента при наведении следующим образом:
- Добавьте фоновое изображение шириной не менее 1000 пикселей.
- Положение фонового изображения: по центру слева
Затем добавьте наложение градиентного фона.
Зависать
- Фоновый градиент слева (при наведении): #3e215b
- Градиент фона справа (при наведении): rgba(0,0,0,0)
- Направление градиента: 90 градусов
- Квадратный градиент над фоновым изображением: ДА
значок
- Цвет значка: #ffffff
- Расположение изображения/значка: справа
Затем перейдите на вкладку «Дизайн» и обновите следующее:
Заголовок и тело текста
- Шрифт заголовка: Поппинс
- Вес шрифта: полужирный
- Цвет текста заголовка: прозрачный (рабочий стол), #ffffff (при наведении)
- Размер текста заголовка: 22px
- Цвет основного текста: прозрачный (рабочий стол), #ffffff (при наведении)
Высота коробки и тень
После того, как текст настроен, задайте модулю высоту 100% и тень блока следующим образом:
- Высота: 100%
- Коробчатая тень: см. снимок экрана.
- Горизонтальное положение: -12px
- Вертикальное положение: 0px
Пользовательский CSS
Чтобы наши панели аккордеона (или модуль Blurb) росли и сжимались с остальными модулями, нам нужно добавить пользовательский CSS для изменения размера модуля с помощью flex-grow.
Поскольку у нас будет в общей сложности 5 модулей, составляющих аккордеон, мы добавим «flex: 1» для состояния по умолчанию, а затем изменим его на «flex: 5» в состоянии наведения.
На вкладке «Дополнительно» добавьте следующий пользовательский CSS к основному элементу Blurb:
офис
flex:1;
position: relative !important;
transition: flex 800ms !important;
При наведении
flex:5;
position: relative !important;
transition: flex 800ms !important;
Затем добавьте следующий пользовательский CSS в CSS содержимого Blurb:
офис
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
таблетка
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
Переполнение и переход
- Горизонтальное переполнение: скрыто
- Вертикальное переполнение: скрыто
- Продолжительность перехода: 400 мс
- Кривая скорости перехода: линейная
Очень хорошо! Это была серьезная настройка модуля Blurb. Но хорошая новость заключается в том, что все, что нам нужно сделать, это продублировать их, чтобы создать оставшиеся панели аккордеона.
Дублирование макетов для большего количества панелей-аккордеонов
Наведите указатель мыши на модуль презентации и щелкните значок дубликата четыре раза, чтобы создать в общей сложности пять панелей-аккордеонов (или модулей).
Затем обновите фоновые изображения для каждой из новых продублированных вами аннотаций.
Конечный результат
Теперь, когда мы прошли все этапы, давайте посмотрим на конечный результат.
Скачайте DIVI прямо сейчас!!!
Заключение
Этот отзывчивый слайдер-аккордеон действительно имеет несколько уникальных элементов, которые делают его забавным в использовании. Аккордеонные панели плавно расширяются и сжимаются при наведении курсора мыши без каких-либо неожиданных сбоев.
А значки презентаций меняются при наведении курсора мыши и на мобильных устройствах, чтобы улучшить UX. Мы надеемся, что этот урок вдохновит вас на ваши следующие проекты Divi. Если у вас есть какие-либо вопросы или предложения, найдите нас в раздел комментариев обсудить это.
Вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
