Wilt u een accordeonschuif maken? Divi snel reagerend?
Een accordeonschuifregelaar is een leuke en aantrekkelijke manier om tentoon te stellen inhoud in een kleine ruimte.
Accordeonschuifregelaars bestaan over het algemeen uit 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 we het accordeonachtige effect van uitzetting en samentrekking krijgen.
In deze zelfstudie laten we u zien hoe u een responsieve accordeonschuifregelaar maakt in Divi alleen CSS gebruiken. Om dit te doen, zullen we verschillende modules gebruiken Divi om als accordeonpanelen te dienen.
overzicht
Hier is een kort overzicht van wat we in deze tutorial zullen bereiken.
Download DIVI nu!!!
Een nieuwe pagina maken met Divi Builder
Om te beginnen, moet u het volgende doen:
- Ga vanuit het WordPress-dashboard naar Pagina's> Nieuwe toevoegen om een nieuwe pagina te maken.
- Geef het een titel die voor jou logisch is en klik op Gebruik Divi Builder
- klik vervolgens op Begin met bouwen (Bouw vanaf het begin)
Daarna heb je een leeg canvas om te beginnen met ontwerpen in Divi.
Creatie van de responsieve accordeonschuifregelaar in Divi
Creatie van de lijn
Voeg om te beginnen een rij met één kolom toe aan de reguliere sectie.
Open vervolgens de regelinstellingen en werk het volgende bij:
- Gebruik aangepaste gootbreedte: JA
- Gootbreedte: 1
- Breedte: 100%
- Maximale breedte: 800px
- Hoogte: 400px (bureaublad); 700px (tablet en telefoon)
De breedte- en maximale breedtewaarden kunnen worden aangepast aan uw behoeften. De accordeon past en werkt in elke lijnbreedte.
Kolomparameters
Nu we een hoogte hebben gedefinieerd voor de rij, open je de kolominstellingen en voeg je de volgende CSS toe aan het hoofdelement:
Desktop
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
tablet
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
Het accordeonpaneel maken met Blurb-modules
De accordeonschuif kan met elk type module(s) worden gebouwd. Als we wilden, zouden we een combinatie van verschillende modules kunnen gebruiken om als accordeonpaneel te fungeren. Maar voor dit ontwerp gaan we Blurb-modules gebruiken.
Begin met het toevoegen van een Blurb-module aan de regel.
Blurb Mod-ontwerp
Open de instellingen van de presentatiemodule en werk het volgende bij:
Behoud de fictieve titel en inhoud uit het lichaam. Wij kunnen dit later altijd nog wijzigen.
Werk vervolgens het presentatiepictogram als volgt bij:
- Icoon (desktop): Horizontaal pijllijnpictogram (zie screenshot)
- Icoon (Hover): (zie screenshot)
- Icoon (tablet en telefoon): (zie screenshot)
Achtergrond
Geef de blurb vervolgens als volgt een achtergrondafbeelding en een verloopoverlay bij de muisaanwijzer:
- Voeg een achtergrondafbeelding toe van minimaal 1000px breed
- Positie achtergrondafbeelding: midden links
Voeg vervolgens een achtergrondovergang met kleurovergang toe.
Zweven
- Achtergrondverloop links (zweven): #3e215b
- Rechts (hover) achtergrondverloop: rgba(0,0,0,0)
- Gradiëntrichting: 90 graden
- Vierkant verloop boven achtergrondafbeelding: JA
icon
- Pictogramkleur: #ffffff
- Plaatsing afbeelding/pictogram: rechts
Ga vervolgens naar het tabblad Ontwerpen en werk het volgende bij:
Titel en inhoud van de tekst
- Titel Lettertype: Poppins
- Lettergewicht: halfvet
- Titel Tekstkleur: transparant (Desktop), #ffffff (Hover)
- Titel tekstgrootte: 22px
- Kleur hoofdtekst: transparant (bureaublad), #ffffff (zweven)
Dooshoogte en schaduw
Nadat de tekst is aangepast, geeft u de module als volgt een hoogte van 100% en een kaderschaduw:
- Hoogte: 100%
- Box Shadow: Zie screenshot
- Horizontale positie: -12px
- Verticale positie: 0px
Aangepaste CSS
Om ervoor te zorgen dat onze accordeonpanelen (of Blurb-module) groeien en samentrekken met de rest van de modules, moeten we aangepaste CSS toevoegen om de grootte van de module met flex-grow te wijzigen.
Aangezien we in totaal 5 modules zullen hebben die deel uitmaken van de accordeon, voegen we "flex:1" toe voor de standaardstatus en veranderen dit in "flex:5" in de zweefstatus.
Voeg op het tabblad Geavanceerd de volgende aangepaste CSS toe aan het hoofdelement van Blurb:
Bureau
flex:1;
position: relative !important;
transition: flex 800ms !important;
Op zweven
flex:5;
position: relative !important;
transition: flex 800ms !important;
Voeg vervolgens de volgende aangepaste CSS toe aan de Blurb-content-CSS:
Bureau
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
tablet
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
Overloop en overgang
- Horizontale overloop: verborgen
- Verticale overloop: verborgen
- Overgangsduur: 400 ms
- Overgangssnelheidscurve: lineair
Erg goed! Het was een serieuze aanpassing van een Blurb-module. Maar het goede nieuws is dat we ze alleen maar hoeven te dupliceren om de resterende accordeonpanelen te maken.
Dubbele lay-outs 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
Nu we alle stappen hebben doorlopen, gaan we het eindresultaat bekijken.
Download DIVI nu!!!
Conclusie
Deze responsieve accordeon-schuifregelaar heeft echt een aantal unieke elementen die het leuk maken om te gebruiken. Accordeonpanelen zetten naadloos uit en krimpen naadloos in bij mouseover zonder onverwachte storingen.
En presentatiepictogrammen veranderen bij de muisaanwijzer en op mobiel om de UX te verbeteren. We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
