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.

Maak een schuifregelaar met een accordeon op divi

Laten we beginnen met de tutorial

Wat je nodig hebt om te beginnen

Om te beginnen, moet u het volgende doen:

  1. 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).
  2. Maak een nieuwe pagina in WordPress en gebruik Divi Builder om de pagina aan de front-end te bewerken (visuele constructor).
  3. 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.

Kies een divi-indeling

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%;

Voeg een divi css-code toe

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.

Voeg een divi-overzichtsmodule toe

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)
Configuratiepictogrammen divi
  • Icoon (hover): vink icoon aan (zie screenshot)
Gebruik pictogrammen wanneer u divi zweeft
  • Pictogram (tablet en telefoon): pictogram dat een verticale pijllijn vertegenwoordigt (zie screenshot)
schuifregelaar accordeon divi responsive

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
Abstracte divi achtergrondconfiguratie

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
schuifregelaar accordeon divi responsive

icon

  • Pictogramkleur: #ffffff
  • Afbeelding / locatie van pictogrammen: links
Wijzig de divi-pictogrammodule

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)
Divi samenvatting module lettertype configuratie

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
Wijzig de grootte van de divi-overzichtsmodule

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;

Parameter samenvatting divi

Voeg vervolgens de volgende aangepaste CSS toe aan CSS Blurb Content:

Bureau

position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;

Wijzig de stijl van de divi-tekstmodule

tablet

width: 100%;height: 100%;position: relative !important;

CSS-code voor samenvattende module-inhoud

Overloop en overgang

  • Horizontale overloop: verborgen
  • Verticale overloop: verborgen
  • Duur van de overgang: 400ms
  • Overgangssnelheidscurve: lineair
Overloopconfiguratie Divi-overzichtsmodule

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

Maak een schuifregelaar met een accordeon op divi

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.