Слайдерът тип „акордеон“ е забавен и ангажиращ начин за показване на съдържание в малко пространство. Слайдерите тип „акордеон“ обикновено се състоят от множество елементи (или панели), подредени хоризонтално, като гънките на завеса. И когато задържите курсора на мишката върху един от панелите, той се разширява, за да разкрие съдържанието, докато останалите панели тип „акордеон“ се свиват. Тук се постига ефектът на „акордеон“ от разширяване и свиване.

В този урок ще ви покажа как да създадете адаптивен слайдер тип акордеон в Divi, използвайки само CSS. За да направим това, ще използваме няколко Divi модула, които да действат като акордеонни панели. Може да се използва всеки модул, но за този пример ще използваме blurb модули по много креативен начин, за да създадем красив плъзгач тип акордеон, който изглежда (и работи) страхотно както на десктоп, така и на мобилни устройства.

Проверете го!

изследване

Ето преглед на това, което ще изградим в този урок.

Нека започнем урока

Какво трябва да започнете

За да започнете, ще трябва да направите следното:

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

След това ще имате празно платно, за да започнете да проектирате в Divi.

Създайте плъзгач с отзивчив акордеон на Divi

Създаване на линията

За начало добавете ред от колона към обикновения раздел.

След това отворете настройките за реда и актуализирайте следното:

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

Стойностите на ширината и максималната ширина могат да се променят според вашите нужди. Акордеонът ще бъде мащабиран и ще работи във всяка ширина на реда. Също така, определянето на фиксирана височина е много важно за дизайна да работи. Дочерните елементи (колона и модули) ще имат височина 100%. Следователно, ако не зададете фиксираната височина на реда, дъщерните елементи няма да имат височина.

Параметри на колоната

След като височината на реда е зададена, отворете настройките на колоната и добавете следния CSS код към основния елемент:
бюро

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

таблетирана

flex-direction: column;

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

Създаване на панела за акордеон с модулите Резюме

Плъзгачът за акордеон може да бъде изграден с помощта на всякакъв тип модул. Ако искахме, бихме могли да използваме комбинация от различни модули, които да служат като панел за акордеон. Но за този дизайн ще използваме Blurb Mods.

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

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

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

Запазете заглавието и съдържанието на основната част измислени. Винаги можем да променим това по-късно.

След това актуализирайте иконата на презентацията, както следва:

• Икона (работен плот): икона, представляваща хоризонтална линия със стрелка (вижте екранната снимка)

• Икона (задръжте курсора): проверете иконата (вижте екранната снимка)

• Икона (таблет и телефон): икона, представляваща вертикална линия със стрелка (вижте екранна снимка)

Contexte

След това дайте на размазването фоново изображение и градиентно наслагване, както следва:

• Добавете фоново изображение с ширина най-малко 1000 пиксела
• Позиция на фоновото изображение: вляво в центъра

След това добавете градиентно фоново наслагване.

поплавък

• Фон на левия градиент (задръжте курсора): # 3e215b
• Градиент на фона надясно Цвят (задържане на курсора): rgba (0,0,0,0)
• Посока на градиента: 90deg
• Поставете градиента над фоновото изображение: ДА

икона

• Цвят на иконата: #ffffff
• Изображение / местоположение на иконите: отляво

След това отидете в раздела Дизайн и актуализирайте следното:

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

• Шрифт на заглавието: Poppins
• Заглавие на шрифта: Полусмело
• Цвят на заглавието на текста: прозрачен (десктоп), #ffffff (задържане на курсора)
• Размер на заглавието на текста: 23px
• Цвят на текста на тялото: прозрачен (десктоп), #ffffff (задържане на курсора)

Височина и сянка на кутията

След като текстът е стилен, задайте на модула височина от 100% и поле за сянка, както следва:

• Височина: 100%
• Box Shadow: Вижте екранната снимка
• Сянка на кутията Хоризонтална позиция: -12px
• Сянка на кутията Вертикално положение: 0px

Blurb персонализиран CSS

За да могат нашите панели за акордеон (или презентационен модул) да се разширяват и свиват с останалите модули, трябва да добавим персонализиран CSS, за да променим размера на модула с flex-grow. Тъй като ще имаме общо 5 модула, които съставят акордеона, добавяме "flex: 1" за състоянието по подразбиране, след което го променяме на "flex: 5" в състояние на задържане.

Под раздела Разширени добавете следния персонализиран 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. Надявам се, че този дизайн ще бъде полезен за следващия ви проект.