Искате ли да създадете плъзгач на акордеон Divi отзивчив?
Плъзгач на акордеон е забавен и атрактивен начин за показване съдържание в малко пространство.
Плъзгачите тип акордеон обикновено се състоят от няколко елемента (или панели), подредени хоризонтално като гънките на завеса. И когато задържите курсора на мишката върху един от панелите, той се разширява, за да разкрие съдържание докато другите акордеонни панели се свиват. Тук получаваме ефекта тип акордеон на разширяване и свиване.
В този урок ще ви покажем как да създадете отзивчив плъзгач на акордеон Divi използвайки само CSS. За целта ще използваме няколко модула Divi да служат като акордеон панели.
изследване
Ето кратък преглед на това, което ще постигнем в този урок.
Изтеглете DIVI сега!!!
Създаване на нова страница с Divi Builder
За да започнете, ще трябва да направите следното:
- От таблото за управление на WordPress отидете на Страници> Добавяне на ново за да създадете нова страница.
- Дайте му заглавие, което има смисъл за вас, и щракнете Използвайте Divi Builder
- След това кликнете Започнете да строите (Изграждане от нулата)
След това ще имате празно платно, за да започнете да проектирате в Divi.
Създаване на отзивчив плъзгач за акордеон в Divi
Създаване на линията
За да започнете, добавете ред с една колона към обикновения раздел.
След това отворете настройките на линията и актуализирайте следното:
- Използване на персонализирана ширина на улука: ДА
- Ширина на улука: 1
- Ширина: 100%
- Максимална ширина: 800px
- Височина: 400px (Desktop); 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 към линията.
Blurb Mod Design
Отворете настройките на презентационния модул и актуализирайте следното:
Запазете измисленото заглавие и съдържание от тялото. Винаги можем да променим това по-късно.
След това актуализирайте иконата на презентацията, както следва:
- Икона (Desktop): Хоризонтална икона със стрелка (вижте екранната снимка)
- Икона (Hover): (вижте екранната снимка)
- Икона (таблет и телефон): (вижте екранната снимка)
Заден план
След това дайте на рекламния текст фоново изображение и градиентно наслагване при задържане, както следва:
- Добавете фоново изображение с ширина поне 1000px
- Позиция на фоновото изображение: център вляво
След това добавете градиентно фоново наслагване.
мътя
- Градиент на фона вляво (задръжте курсора): #3e215b
- Градиент на фона надясно (задръжте курсора на мишката): rgba(0,0,0,0)
- Посока на градиента: 90 градуса
- Квадратен градиент над фоновото изображение: ДА
икона
- Цвят на иконата: #ffffff
- Разположение на изображение/икона: вдясно
След това превключете към раздела Дизайн и актуализирайте следното:
Заглавие и тяло на текста
- Шрифт на заглавието: Poppins
- Дебелина на шрифта: полу-удебелен
- Цвят на текста на заглавието: прозрачен (Desktop), #ffffff (Hover)
- Размер на текста на заглавието: 22px
- Цвят на основния текст: прозрачен (Desktop), #ffffff (Hover)
Височина на кутията и сянка
След като текстът е персонализиран, дайте на модула височина от 100% и сянка на кутия, както следва:
- Височина: 100%
- Box Shadow: Вижте екранната снимка
- Хоризонтална позиция: -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;
Преливане и преход
- Хоризонтално преливане: Скрито
- Вертикално преливане: Скрито
- Продължителност на прехода: 400ms
- Крива на скоростта на прехода: Линейна
Много добре! Това беше сериозна персонализация на модул Blurb. Но добрата новина е, че всичко, което трябва да направим, е да ги дублираме, за да създадем останалите акордеонни панели.
Дублирани оформления за повече акордеонни панели
Задръжте курсора на мишката върху презентационния модул и щракнете върху двойната икона четири пъти, за да създадете общо пет панела (или модула) на акордеон.
След това актуализирайте фоновите изображения за всяко от новите реклами, които сте дублирали.
Краен резултат
Сега, след като преминахме през всички стъпки, нека видим крайния резултат.
Изтеглете DIVI сега!!!
Заключение
Този чувствителен плъзгач на акордеон наистина има някои уникални елементи, които го правят забавен за използване. Акордеонните панели се разширяват и свиват безпроблемно при преместване на мишката без никакви неочаквани проблеми.
А иконите на презентациите се променят при задържане на мишката и на мобилно устройство, за да подобрят UX. Надяваме се, че този урок ще ви вдъхнови за следващите ви Divi проекти. Ако имате притеснения или предложения, намерете ни раздел коментари за да го обсъдим.
Можете също да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...