Пропустить

Как создать адаптивный слайдер аккордеона в Divi

Divi: самая простая тема WordPress для использования

Divi: Лучшая тема WordPress всех времен!

Более Загрузка 901.000, Divi - самая популярная тема WordPress в мире. Он является полным, простым в использовании и поставляется с более чем бесплатными шаблонами 62. [Рекомендуется]

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

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

Проверьте это!

обследование

Вот обзор того, что мы будем строить в этом уроке.

Создаем слайдер с гармошкой на divi

Давайте начнем учебник

Что нужно для начала

Для начала вам нужно будет сделать следующее:

  1. Если вы еще этого не сделали, установите и активируйте установленную тему Divi (или плагин Divi Builder, если вы не используете тему Divi).
  2. Создайте новую страницу в WordPress и используйте Divi Builder для редактирования страницы в интерфейсе (визуальный конструктор).
  3. Загрузите о различных изображениях 5 в библиотеку для использования в качестве фоновых изображений, необходимых для учебника.

После этого у вас будет чистый холст, чтобы начать проектирование в Divi.

Создайте слайдер с адаптивным аккордеоном на Divi

Создание линии

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

Выберите макет divi

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

  • Ширина желоба: 1
  • Ширина: 100%
  • Максимальная ширина: 800px
  • Высота: 400 пикселей (рабочий стол); 700 пикселей (планшет и телефон)

Значения ширины и максимальной ширины можно изменить в соответствии с вашими потребностями. Аккордеон будет масштабирован и будет работать с любой шириной ряда. Кроме того, установка фиксированной высоты очень важна для работы дизайна. Дочерние элементы (столбец и модули) будут иметь высоту 100%. Следовательно, если вы не установите фиксированную высоту строки, дочерние элементы не будут иметь высоты.

Параметры столбца

Теперь, когда высота строки установлена, откройте настройки столбца и добавьте следующий CSS-код к основному элементу:
офис

display:flex;flex-direction: row;align-items:center;height: 100%;

Добавить код divi css

таблетка

Легко создайте свой сайт с Elementor

Elementor позволяет легко создать любой дизайн сайта с профессиональным дизайном. Прекратите платить дорого за то, что вы можете сделать сами. [Free]

flex-direction: column;

Свойство flex выравнивает панели аккордеона по горизонтали на рабочем столе и по вертикали на планшете и телефоне. Высота 100% позволит модулям, которые мы собираемся добавить, также использовать значение высоты 100%.

Создание аккордеонной панели с модулями

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

Начните с добавления модуля презентации в строку.

Добавить модуль сводки divi

Абстрактный дизайн модуля

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

Сохраните вымышленный заголовок и основной текст. Мы всегда можем изменить это позже.

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

  • Значок (рабочий стол): значок, представляющий горизонтальную стрелку (см. Снимок экрана)
Иконки конфигурации divi
  • Значок (при наведении): значок галочки (см. Снимок экрана)
Используйте значки при наведении курсора на divi
  • Значок (планшет и телефон): значок, представляющий вертикальную стрелку (см. Снимок экрана)
слайдер гармошка диви отзывчивый

контекст

Затем добавьте фоновое изображение и наложение градиента следующим образом:

  • Добавьте фоновое изображение шириной не менее 1000 пикселей.
  • Положение фонового изображения: в центре слева
Конфигурация абстрактного divi фона

Затем добавьте наложение градиентного фона.

поплавок

  • Левый градиентный фон (при наведении): # 3e215b
  • Фоновый градиент вправо Цвет (при наведении): rgba (0,0,0,0)
  • Направление градиента: 90deg
  • Поместите градиент над фоновым изображением: ДА
слайдер гармошка диви отзывчивый

значок

  • Цвет значка: #ffffff
  • Изображение / расположение иконок: слева
Изменить модуль значка divi

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

Заголовок и тело текста

  • Название шрифта: Poppins
  • Название шрифта: Полужирный
  • Цвет текста заголовка: прозрачный (рабочий стол), #ffffff (зависание)
  • Размер текста заголовка: 23px
  • Цвет основного текста: прозрачный (рабочий стол), #ffffff (зависание)
Конфигурация шрифта модуля сводки Divi

Высота и тень от коробки

Как только текст станет стильным, присвойте модулю высоту 100% и теневую рамку следующим образом:

  • Высота: 100%
  • Box Shadow: см. Снимок экрана
  • Тень коробки Горизонтальное положение: -12px
  • Тень коробки Вертикальное положение: 0px
Изменить размер модуля сводки divi

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;

Сводка параметров divi

Затем добавьте следующий CSS-код в CSS Blurb Content:

офис

position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;

Измените стиль текстового модуля divi

таблетка

width: 100%;height: 100%;position: relative !important;

CSS-код для сводного содержимого модуля

Переполнение и переход

  • Горизонтальное переполнение: скрыто
  • Вертикальный перелив: скрытый
  • Продолжительность перехода: 400ms
  • Кривая скорости перехода: линейная
Конфигурация переполнения модуля сводки Divi

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

Продублируйте Blurbs для большего количества панелей аккордеона

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

Затем обновите фоновые изображения для каждого дублированного вами нового размытия.

Конечный результат

Создаем слайдер с гармошкой на divi

Заключительные мысли

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

Эта статья содержит комментарии 0

Оставить комментарий

Ваш электронный адрес не будет опубликован. Обязательные для заполнения поля помечены *

Этот сайт использует Akismet для уменьшения нежелательности. Узнайте больше о том, как используются ваши комментарии.

Вверх
1 акции
доля1
чирикать
Регистрация