Gå till innehållet

Hur man skapar en lyhörig dragspelreglage i Divi

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

En dragspelreglage är ett roligt och engagerande sätt att visa innehåll i ett litet utrymme. Dragspelsreglage består vanligtvis av flera element (eller paneler) staplade vågrätt, som veck på en gardin. Och när du svävar över en av panelerna expanderar den för att avslöja innehållet när de andra dragspelspanelerna dras samman. Det är här dragspeleffekten av att expandera och kontraktar uppnås.

I denna handledning kommer jag att visa dig hur du skapar en responsiv dragspelspekare i Divi med endast CSS. För att göra detta kommer vi att använda flera Divi-moduler för att fungera som dragspelspaneler. Alla mod kan användas, men för det här exemplet ska vi använda blurb mods på ett mycket kreativt sätt för att skapa en vacker dragspelsreglage som ser bra ut (och fungerar) både på skrivbordet och skrivbordet. 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 har gjort det ännu, installera och aktivera det installerade Divi-temat (eller Divi Builder-plugin-programmet om du inte använder Divi-temat).
  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

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

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:

Behåll den fiktiva titeln och kroppsinnehållet. Vi kan alltid ändra det 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

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

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

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

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.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
1 aktier
del1
tweet
Enregistrer