Ett dragspelsreglage är ett roligt och attraktivt sätt att visa innehåll i ett begränsat utrymme. Dragspelsreglage är vanligtvis gjorda 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 dragspelseffekten av expansion och sammandragning uppnås.

I den här handledningen kommer jag 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. Vilken modul som helst kan användas, men för det här exemplet kommer vi att använda blurb-moduler på ett väldigt kreativt sätt för att skapa ett vackert dragspelsreglage som ser (och fungerar) bra både på skrivbordet och på mobilen.

Check it out!

undersökningen

Här är en översikt över vad vi kommer att bygga i den här tutorialen.

Skapa en skjutreglage med dragspel på divi

Låt oss börja handledning

Vad du behöver för att komma igång

För att börja måste du göra följande:

  1. Om du inte redan har gjort det, installera och aktivera Divi-tema installerat (eller plugin Divi Builder om du inte använder Divi-tema).
  2. Skapa en ny sida i WordPress och använd Divi Builder för att redigera sidan i front-enden (visuell konstruktör).
  3. Ladda ner cirka 5 olika bilder i biblioteket för att använda som bakgrundsbilder som behövs för handledning.

Efter det har du en tom duk för att börja designa i Divi.

Skapa en skjutreglage med ett lyhörd dragspel på Divi

Skapandet av linjen

För att börja lägger du till en rad i en kolumn i det vanliga avsnittet.

Välj en divi-layout

Öppna sedan inställningarna för raden och uppdatera följande:

  • Rännbredd: 1
  • Bredd: 100%
  • Maximal bredd: 800px
  • Höjd: 400 pixlar (skrivbord); 700 pixlar (surfplatta och telefon)

Värdena för bredd och maxbredd kan ändras efter dina behov. Dragspel kommer att skalas och fungerar i valfri radbredd. Att ställa in en fast höjd är också mycket viktigt för att designen ska fungera. Underordnade element (kolumn och moduler) har en höjd på 100%. Därför, om du inte ställer in den fasta höjden på raden, kommer de underordnade elementen inte att ha en höjd.

Kolumnparametrar

Nu när radhöjden är inställd öppnar du kolumninställningarna och lägger till följande CSS-kod i huvudelementet:
office

display:flex;flex-direction: row;align-items:center;height: 100%;

Lägg till en divi css-kod

tablett

flex-direction: column;

Flex-egenskapen kommer att rikta dragspelspaneler horisontellt på skrivbordet och vertikalt på surfplatta och telefon. Höjden på 100% gör att modulerna som vi ska lägga till också kan använda höjdvärdet på 100%.

Skapa dragspelpanelen med modulerna Sammanfattning

Dragspelsreglaget kan byggas med vilken typ av modul som helst. Om vi ​​ville skulle vi kunna använda en kombination av olika moduler för att fungera som dragspelspanel. Men för den här designen kommer vi att använda Blurb Mods.

Börja med att lägga till en presentationsmodul till raden.

Lägg till en divi-sammanfattningsmodul

Abstrakt moduldesign

Öppna inställningarna för översiktsmodulen och uppdatera följande:

Håll titeln fiktiv och innehåll från kroppen. Vi kan alltid ändra detta senare.

Uppdatera sedan presentationsikonen enligt följande:

  • Ikon (skrivbord): ikon som representerar en horisontell pilrad (se skärmdump)
Konfigurationsikoner divi
  • Ikon (sväva): kryssikon (se skärmdump)
Använd ikoner när du svävar divi
  • Ikon (surfplatta och telefon): ikon som representerar en vertikal pillinje (se skärmdump)
reglaget dragspel divi lyhörda

sammanhang

Ge sedan suddret en bakgrundsbild och en lutningsöverlägg enligt följande:

  • Lägg till en bakgrundsbild som är minst 1000 pixlar bred
  • Bakgrundsbildens position: mitt till vänster
Abstrakt konfiguration för divibakgrund

Lägg sedan till en övertäckning över bakgrundsbilden.

float

  • Vänster gradientbakgrund (muspekare): # 3e215b
  • Bakgrundsgradient till höger Färg (muspekare): rgba (0,0,0,0)
  • Lutningsriktning: 90deg
  • Placera övertoningen ovanför bakgrundsbilden: YES
reglaget dragspel divi lyhörda

icon

  • Ikonfärg: #ffffff
  • Bild / plats för ikoner: vänster
Ändra divi-ikonmodulen

Gå sedan till fliken Design och uppdatera följande:

Textens titel och kropp

  • Titelstilsort: Poppins
  • Teckensnittstitel: Semi Bold
  • Text Titelfärg: transparent (desktop), #ffffff (hover)
  • Textstitelstorlek: 23px
  • Kroppstextfärg: transparent (skrivbord), #ffffff (hover)
Konfiguration av teckensnittsmodul för Divi-sammanfattning

Höjd och rutskugga

När texten är snygg tilldelar du modulen en höjd på 100% och en skuggbox som följer:

  • Höjd: 100%
  • Box Shadow: Se skärmdump
  • Boxens skugga Horisontell position: -12px
  • Boxens skugga Vertikal position: 0px
Ändra divis sammanfattningsmodulstorlek

Blurb anpassad CSS

För att våra dragspelspaneler (eller presentationsmodulen) ska kunna expandera och komma i kontakt med resten av modulerna måste vi lägga till anpassad CSS för att ändra modulens storlek med flex-grow. Eftersom vi kommer att ha totalt 5 moduler som utgör dragspel, lägger vi till "flex: 1" för standardläget, sedan ändrar vi det till "flex: 5" i svävarläget.

Under fliken Avancerat lägger du till följande anpassade CSS, det viktigaste Blurb-elementet:

office

flex:1;position: relative !important;transition: flex 800ms !important;

tablett

flex:5;

Parameteröversikt divi

Lägg sedan till följande anpassade css till CSS Blurb Content:

office

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

Ändra stilen för divi-textmodulen

tablett

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

CSS-kod för sammanfattande modulinnehåll

Överflöde och övergång

  • Horisontellt överflöde: dold
  • Vertikalt överflöde: dold
  • Övergångsperiod: 400ms
  • Övergångshastighetskurva: linjär
Konfiguration av översvämningsmodul för Divi

Väl! Det var en seriös anpassning av en presentationsmodul. 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 Blurbs för fler dragspelspaneler

Håll muspekaren över presentationsmodulen och klicka på duplikatikonen fyra gånger för att skapa totalt fem dragspelspaneler (eller moduler).

Uppdatera sedan bakgrundsbilderna för var och en av de nya oskärningarna du duplicerade.

Slutresultat

Skapa en skjutreglage med dragspel på divi

Avslutande tankar

Den här lyhörda dragspelsreglaget har verkligen några unika element som gör det roligt att använda. Dragspelspaneler expanderar och dras samman medan de svävar utan oväntade problem. Och presentationsikoner ändras i svävar och mobil för att öka UX. Hoppas att den här designen kommer att vara användbar för ditt nästa projekt.