Een accordeonschuifregelaar is een leuke en aantrekkelijke manier om tentoon te stellen inhoud in een beperkte ruimte. Accordeonsliders zijn meestal gemaakt van verschillende elementen (of panelen) die horizontaal zijn gestapeld, zoals de plooien van een gordijn. En wanneer u over een van de panelen zweeft, wordt deze groter en wordt de inhoud terwijl de andere accordeonpanelen samentrekken. Dit is waar het accordeoneffect van uitzetting en samentrekking wordt bereikt.
In deze zelfstudie laat ik je zien hoe je een responsieve accordeonschuifregelaar maakt in Divi alleen CSS gebruiken. Om dit te doen, zullen we verschillende modules gebruiken Divi om als accordeonpanelen te dienen. Elke module kan worden gebruikt, maar voor dit voorbeeld gaan we blurb-modules op een zeer creatieve manier gebruiken om een prachtige accordeonschuifregelaar te maken die er zowel op de desktop als op mobiel geweldig uitziet (en werkt).
Check it out!
overzicht
Hier is een overzicht van wat we in deze tutorial zullen bouwen.
Laten we beginnen met de tutorial
Wat je nodig hebt om te beginnen
Om te beginnen, moet u het volgende doen:
- Installeer en activeer de . als u dat nog niet hebt gedaan Divi-thema geïnstalleerd (of de plug-in Divi Builder als u de Divi-thema).
- Maak een nieuwe pagina in WordPress en gebruik Divi Builder om de pagina aan de front-end te bewerken (visuele constructor).
- Download ongeveer 5 verschillende afbeeldingen in de bibliotheek om te gebruiken als achtergrondafbeeldingen die nodig zijn voor de zelfstudie.
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Maak een schuifregelaar met een responsieve accordeon op Divi
Creatie van de lijn
Voeg om te beginnen een rij met een kolom toe aan de normale sectie.
Open vervolgens de instellingen voor de regel en werk het volgende bij:
- Dakgootbreedte: 1
- Breedte: 100%
- Maximale breedte: 800px
- Hoogte: 400px (desktop); 700px (tablet en telefoon)
De waarden voor breedte en maximale breedte kunnen worden aangepast aan uw behoeften. De accordeon wordt geschaald en werkt in elke rijbreedte. Ook is het instellen van een vaste hoogte erg belangrijk om het ontwerp te laten werken. Onderliggende elementen (kolom en modules) hebben een hoogte van 100%. Daarom, als u de vaste hoogte van de rij niet instelt, hebben de onderliggende elementen geen hoogte.
Kolomparameters
Nu de rijhoogte is ingesteld, opent u de kolominstellingen en voegt u de volgende CSS-code toe aan het hoofdelement:
Bureau
display:flex;flex-direction: row;align-items:center;height: 100%;
tablet
flex-direction: column;
De flex-eigenschap zal accordeonpanelen horizontaal uitlijnen op het bureaublad en verticaal op tablet en telefoon. Door de hoogte van 100% kunnen de modules die we gaan toevoegen ook de hoogte van 100% gebruiken.
Het accordeonpaneel maken met de modules Samenvatting
De accordeonschuifregelaar kan met elk type module worden gebouwd. Als we wilden, konden we een combinatie van verschillende modules gebruiken om als accordeonpaneel te dienen. Maar voor dit ontwerp gebruiken we Blurb Mods.
Begin met het toevoegen van een presentatiemodule aan de regel.
Abstract moduleontwerp
Open de samenvattingsmodule-instellingen en update het volgende:
Houd de titel fictief en inhoud uit het lichaam. Wij kunnen dit later altijd nog wijzigen.
Werk vervolgens het presentatiepictogram als volgt bij:
- Pictogram (bureaublad): pictogram dat een horizontale pijllijn vertegenwoordigt (zie screenshot)
- Icoon (hover): vink icoon aan (zie screenshot)
- Pictogram (tablet en telefoon): pictogram dat een verticale pijllijn vertegenwoordigt (zie screenshot)
verband
Geef vervolgens de achtergrond een achtergrondafbeelding en een verloopoverlay als volgt:
- Voeg een achtergrondafbeelding toe die minimaal 1000 pixels breed is
- Positie achtergrondafbeelding: midden links
Voeg vervolgens een achtergrondovergang met kleurovergang toe.
vlotter
- Linker verloop achtergrond (hover): # 3e215b
- Achtergrondverloop naar rechts Kleur (zweven): rgba (0,0,0,0)
- Verlooprichting: 90deg
- Plaats het verloop boven de achtergrondafbeelding: JA
icon
- Pictogramkleur: #ffffff
- Afbeelding / locatie van pictogrammen: links
Ga vervolgens naar het tabblad Ontwerpen en werk het volgende bij:
Titel en inhoud van de tekst
- Titellettertype: Poppins
- Titel van het lettertype: Semi vet
- Teksttitel Kleur: transparant (bureaublad), #ffffff (zweven)
- Tekst Titel Grootte: 23px
- Tekstkleur hoofdtekst: transparant (bureaublad), #ffffff (zweven)
Hoogte en doosschaduw
Zodra de tekst stijlvol is, wijst u de module als volgt een hoogte van 100% en een schaduwvak toe:
- Hoogte: 100%
- Box Shadow: zie screenshot
- Schaduw van het vak Horizontale positie: -12px
- Schaduw van het vak Verticale positie: 0px
Aangepaste CSS vervagen
Om onze accordeonpanelen (of presentatiemodule) te laten uitbreiden en inkrimpen met de rest van de modules, moeten we aangepaste CSS toevoegen om de grootte van de module te wijzigen met flex-grow. Aangezien we in totaal 5 mods zullen hebben waaruit de accordeon bestaat, voegen we "flex: 1" toe voor de standaardstatus, en vervolgens veranderen we het in "flex: 5" in de zweeftoestand.
Voeg op het tabblad Geavanceerd de volgende aangepaste CSS toe, het belangrijkste Blurb-element:
Bureau
flex:1;position: relative !important;transition: flex 800ms !important;
tablet
flex:5;
Voeg vervolgens de volgende aangepaste CSS toe aan CSS Blurb Content:
Bureau
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tablet
width: 100%;height: 100%;position: relative !important;
Overloop en overgang
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
- Duur van de overgang: 400ms
- Overgangssnelheidscurve: lineair
Goed! Het was een serieuze aanpassing van een presentatiemodule. Maar het goede nieuws is dat we ze alleen hoeven te dupliceren om de resterende accordeonpanelen te maken.
Dupliceer de blurbs voor meer accordeonpanelen
Plaats de muisaanwijzer op de presentatiemodule en klik vier keer op het duplicaatpictogram om in totaal vijf accordeonpanelen (of modules) te maken.
Werk vervolgens de achtergrondafbeeldingen bij voor elk van de nieuwe blurbs die u hebt gedupliceerd.
Eindresultaat
Final gedachten
Deze responsieve accordeonschuifregelaar heeft echt een aantal unieke elementen die hem leuk maken om te gebruiken. Accordeonpanelen kunnen zonder onverwachte problemen uitzetten en inkrimpen tijdens het zweven. En presentatiepictogrammen veranderen tijdens het zweven en op mobiel om UX te stimuleren. Ik hoop dat dit ontwerp nuttig zal zijn voor je volgende project.