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.
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:
- Om du inte redan har gjort det, installera och aktivera Divi-tema installerat (eller plugin Divi Builder om du inte använder Divi-tema).
- Skapa en ny sida i WordPress och använd Divi Builder för att redigera sidan i front-enden (visuell konstruktör).
- 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.
Ö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%;
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.
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)
- Ikon (sväva): kryssikon (se skärmdump)
- Ikon (surfplatta och telefon): ikon som representerar en vertikal pillinje (se skärmdump)
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
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
icon
- Ikonfärg: #ffffff
- Bild / plats för ikoner: vänster
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)
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
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;
Lägg sedan till följande anpassade css till CSS Blurb Content:
office
position: absolute !important;width: 280px;padding: 20px;transition: color 400ms;
tablett
width: 100%;height: 100%;position: relative !important;
Överflöde och övergång
- Horisontellt överflöde: dold
- Vertikalt överflöde: dold
- Övergångsperiod: 400ms
- Övergångshastighetskurva: linjär
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
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.