Un glisor la acordeon este o modalitate distractivă și atractivă de afișare cuprins într-un spațiu restrâns. Glisoarele de acordeon sunt de obicei realizate din mai multe elemente (sau panouri) stivuite orizontal, precum pliurile unei perdele. Și când treceți cu mouse-ul peste unul dintre panouri, acesta se extinde pentru a dezvălui cuprins în timp ce celelalte panouri de acordeon se contractă. Aici se realizează efectul acordeonului de expansiune și contracție.
În acest tutorial, vă voi arăta cum să creați un glisor de acordeon receptiv Divi folosind doar CSS. Pentru a face acest lucru, vom folosi mai multe module Divi pentru a servi drept panouri de acordeon. Poate fi folosit orice modul, dar pentru acest exemplu vom folosi module blurb într-un mod foarte creativ pentru a crea un glisor frumos acordeon care arată (și funcționează) grozav atât pe desktop, cât și pe mobil.
Verifică-l!
studiu
Iată o prezentare generală a ceea ce vom construi în acest tutorial.
Să începem tutorialul
Ce ai nevoie pentru a începe
Pentru început, va trebui să faceți următoarele:
- Dacă nu ați făcut-o deja, instalați și activați Divi tema instalat (sau pluginul Divi Builder dacă nu utilizați Divi tema).
- Creați o pagină nouă în WordPress și folosiți Divi Builder pentru a edita pagina din partea frontală (constructor vizual).
- Descărcați despre 5 diferite imagini din bibliotecă pentru a le folosi ca imagini de fundal necesare pentru tutorial.
După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.
Creați un glisor cu un acordeon receptiv pe Divi
Crearea liniei
Pentru început, adăugați un rând al unei coloane la secțiunea obișnuită.
Apoi, deschideți setările pentru linie și actualizați următoarele:
- Lățimea jgheabului: 1
- Lățime: 100%
- Lățimea maximă: 800px
- Înălțime: 400 px (desktop); 700 px (tabletă și telefon)
Valorile lățimii și lățimii maxime pot fi modificate în funcție de nevoile dvs. Acordeonul va fi scalat și va funcționa în orice lățime de rând. De asemenea, setarea unei înălțimi fixe este foarte importantă pentru ca designul să funcționeze. Elementele copil (coloană și module) vor avea o înălțime de 100%. Prin urmare, dacă nu setați înălțimea fixă a rândului, elementele copil nu vor avea o înălțime.
Parametrii coloanei
Acum că înălțimea rândului este setată, deschideți setările coloanei și adăugați următorul cod CSS la elementul principal:
Birou
display:flex;flex-direction: row;align-items:center;height: 100%;
tabletă
flex-direction: column;
Proprietatea flex va alinia panourile acordeonului orizontal pe desktop și vertical pe tabletă și telefon. Înălțimea de 100% va permite modulelor pe care le vom adăuga să folosească și valoarea de înălțime de 100%.
Crearea panoului de acordeon cu rezumatul modulelor
Glisorul pentru acordeon poate fi construit folosind orice tip de modul. Dacă am dori, am putea folosi o combinație de module diferite pentru a servi ca panou de acordeon. Dar pentru acest design, vom folosi Blurb Mods.
Începeți prin a adăuga un modul de prezentare la linie.
Proiectarea modulului abstract
Deschideți setările modulului sumar și actualizați următoarele:
Păstrează titlul fictiv și cuprins din corp. Putem schimba asta oricând mai târziu.
Apoi actualizați pictograma de prezentare după cum urmează:
- Pictogramă (desktop): pictogramă reprezentând o linie săgeată orizontală (vezi captura de ecran)
- Pictogramă (hover): verificați pictograma (vedeți captura de ecran)
- Pictogramă (tabletă și telefon): pictogramă reprezentând o linie de săgeată verticală (vezi captura de ecran)
context
Apoi, oferiți blurbii o imagine de fundal și o suprapunere de gradient după cum urmează:
- Adăugați o imagine de fundal cu o lățime de cel puțin 1000 de pixeli
- Poziția imaginii de fundal: centrul stânga
Apoi adăugați o suprapunere de fundal gradient.
plutitor
- Fundal gradient stânga (trecere): # 3e215b
- Gradient de fundal spre dreapta Culoare (hover): rgba (0,0,0,0)
- Direcția gradientului: 90deg
- Plasați gradientul deasupra imaginii de fundal: DA
icoană
- Culoare pictogramă: #ffffff
- Imagine / locația pictogramelor: stânga
Apoi accesați fila Proiectare și actualizați următoarele:
Titlul și corpul textului
- Titlul fontului: Poppins
- Titlul fontului: Semi îndrăzneț
- Culoare titlu text: transparent (desktop), #ffffff (hover)
- Dimensiune text text: 23px
- Culoarea textului corpului: transparent (desktop), #ffffff (hover)
Înălțimea și umbra cutiei
Odată ce textul este elegant, alocați modulului o înălțime de 100% și o casetă umbre, după cum urmează:
- Înălțime: 100%
- Box Shadow: vezi captura de ecran
- Umbra cutiei Poziție orizontală: -12px
- Umbra cutiei Poziția verticală: 0px
Blurb CSS personalizate
Pentru ca panourile noastre de acordeon (sau modulul de prezentare) să se extindă și să se contracteze cu restul modulelor, trebuie să adăugăm CSS personalizate pentru a schimba dimensiunea modulului cu flex-grow. Deoarece vom avea un total de 5 module care alcătuiesc acordeonul, adăugăm „flex: 1” pentru starea implicită, apoi îl schimbăm în „flex: 5” în starea hover.
Sub fila Advanced, adăugați următorul CSS personalizat, elementul principal Blurb:
Birou
flex:1;position: relative !important;transition: flex 800ms !important;
tabletă
flex:5;
Apoi adăugați următorul css personalizat în CSS Blurb Content:
Birou
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tabletă
width: 100%;height: 100%;position: relative !important;
Depășire și tranziție
- Debord de orizontală: ascuns
- Debord vertical: ascuns
- Durata tranziției: 400ms
- Curba vitezei de tranziție: liniară
Bine! A fost o personalizare serioasă a unui modul de prezentare. Vestea bună este că tot ce trebuie să facem este să le duplicăm pentru a crea panourile de acordeon rămase.
Duplicați Blurbs pentru mai multe panouri de acordeon
Plasați cursorul peste modulul de prezentare și faceți clic pe pictograma duplicat de patru ori pentru a crea un total de cinci panouri de acordeon (sau module).
Apoi actualizați imaginile de fundal pentru fiecare dintre noile blurbs pe care le-ați duplicat.
Rezultat final
Ultimele gânduri
Acest glisor de acordeon receptiv are într-adevăr câteva elemente unice care îl fac să fie distractiv de utilizat. Panourile de acordeon se extind și se contractă în timp ce plutesc fără probleme neașteptate. Iar pictogramele de prezentare se schimbă în hover și mobil pentru a spori UX. Sper că acest design va fi util pentru următorul dvs. proiect.
