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