Vill du skapa ett dragspelsreglage Divi mottaglig?
Ett dragspelsreglage är ett roligt och attraktivt sätt att visa innehåll på ett litet utrymme.
Dragspelsreglage består i allmänhet av flera element (eller paneler) staplade horisontellt som vecken av en gardin. Och när du håller muspekaren över en av panelerna expanderar den för att avslöja innehåll medan de andra dragspelspanelerna drar ihop sig. Det är här vi får effekten av dragspelstyp av expansion och kontraktion.
I den här handledningen kommer vi att visa dig hur du skapar ett responsivt dragspelsreglage Divi använder endast CSS. För att göra detta kommer vi att använda flera moduler Divi att fungera som dragspelspaneler.
undersökningen
Här är en snabb översikt över vad vi kommer att uppnå i den här handledningen.
Ladda ner DIVI nu!!!
Skapa en ny sida med Divi Builder
För att komma igång måste du göra följande:
- Från WordPress-instrumentpanelen, gå till Sidor> Lägg till nytt för att skapa en ny sida.
- Ge den en titel som är vettig för dig och klicka Använd Divi Builder
- klicka sedan på Börja bygga (Bygg från grunden)
Efter det har du en tom duk för att börja designa i Divi.
Skapande av det responsiva dragspelsreglaget i Divi
Skapandet av linjen
För att börja, lägg till en rad med en kolumn i det vanliga avsnittet.
Öppna sedan linjeinställningar och uppdatera följande:
- Använd anpassad rännbredd: JA
- Rännans bredd: 1
- Bredd: 100 %
- Max bredd: 800px
- Höjd: 400px (Skrivbord); 700px (surfplatta och telefon)
Värdena för bredd och maximal bredd kan ändras för att passa dina behov. Dragspelet kommer att passa och fungera i valfri linjebredd.
Kolumnparametrar
Nu när vi har en höjd definierad för raden, öppna kolumninställningarna och lägg till följande CSS till huvudelementet:
Desktop
display:flex;
flex-direction: row;
align-items:center;
height: 100%;
tablett
display:flex;
flex-direction: column;
align-items:center;
height: 100%;
Skapa dragspelspanelen med Blurb-moduler
Dragspelsreglaget kan byggas med vilken typ av moduler som helst. Om vi ville kunde vi använda en kombination av olika moduler för att fungera som en dragspelspanel. Men för den här designen kommer vi att använda Blurb-moduler.
Börja med att lägga till en Blurb-modul till raden.
Blurb Mod Design
Öppna presentationsmodulens inställningar och uppdatera följande:
Behåll den fiktiva titeln och innehåll från kroppen. Vi kan alltid ändra detta senare.
Uppdatera sedan presentationsikonen enligt följande:
- Ikon (Skrivbord): horisontell pillinjeikon (se skärmdump)
- Ikon (Hover): (se skärmdump)
- Ikon (surfplatta och telefon): (se skärmdump)
Bakgrund
Ge sedan blurben en bakgrundsbild och en gradientöverlagring när du håller muspekaren på följande sätt:
- Lägg till en bakgrundsbild som är minst 1000px bred
- Bakgrundsbild Position: Mitten vänster
Lägg sedan till en övertäckning över bakgrundsbilden.
Hovra
- Bakgrundsgradient vänster (sväva): #3e215b
- Höger (hovra) bakgrundsgradient: rgba(0,0,0,0)
- Lutningsriktning: 90 grader
- Fyrkantig gradient ovanför bakgrundsbild : JA
icon
- Ikonfärg: #ffffff
- Bild/ikonplacering: Höger
Växla sedan till fliken Design och uppdatera följande:
Textens titel och kropp
- Title Font: Poppins
- Teckensnittsvikt: halvfet
- Titel Textfärg: transparent (Skrivbord), #ffffff (Hover)
- Titel Textstorlek: 22px
- Brödtextfärg: transparent (Skrivbord), #ffffff (Hover)
Boxhöjd och skugga
När texten har anpassats, ge modulen en höjd på 100 % och en boxskugga enligt följande:
- Höjd: 100%
- Box Shadow: Se skärmdump
- Horisontell position: -12px
- Vertikal position: 0px
Anpassad CSS
För att våra dragspelspaneler (eller Blurb-modul) ska växa och dra ihop sig med resten av modulerna måste vi lägga till anpassad CSS för att ändra storleken på modulen med flex-grow.
Eftersom vi kommer att ha totalt 5 moduler som utgör dragspelet, lägger vi till "flex:1" för standardtillståndet och ändrar det sedan till "flex:5" i hovläget.
Under fliken Avancerat lägger du till följande anpassade CSS till huvudelementet Blurb:
office
flex:1;
position: relative !important;
transition: flex 800ms !important;
På svävare
flex:5;
position: relative !important;
transition: flex 800ms !important;
Lägg sedan till följande anpassade CSS till Blurb-innehålls-CSS:
office
position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;
tablett
position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;
Överflöde och övergång
- Horisontellt överflöde: Dold
- Vertikalt överflöde: Dold
- Övergångslängd: 400ms
- Övergångshastighetskurva: linjär
Mycket bra! Det var en seriös anpassning av en Blurb-modul. Men den goda nyheten är att allt vi behöver göra är att duplicera dem för att skapa de återstående dragspelspanelerna.
Duplicera layouter för fler dragspelspaneler
Håll muspekaren över presentationsmodulen och klicka på dubblettikonen fyra gånger för att skapa totalt fem dragspelspaneler (eller moduler).
Uppdatera sedan bakgrundsbilderna för var och en av de nya blurbs du duplicerade.
Slutresultat
Nu när vi har gått igenom alla steg, låt oss se slutresultatet.
Ladda ner DIVI nu!!!
Slutsats
Detta lyhörda dragspelsreglage har verkligen några unika element som gör det roligt att använda. Dragspelspaneler expanderar och drar ihop sig sömlöst vid musöversikt utan några oväntade fel.
Och presentationsikoner ändras när du håller muspekaren och på mobilen för att öka användarupplevelsen. Vi hoppas att den här handledningen kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, hitta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
