Vill du skapa en helskärmsreglage med Divi ?
En helskärmsreglage kan fungera mycket bra som huvudet på din hemsida. webbplats.
Helskärmsaspekten upprätthåller systematiskt innehåll viktigt ovanför vecket. Och skjutreglagets funktion låter användarna se innehåll ytterligare utan att behöva rulla på sidan.
Skapa en helskärmsreglage med Divi är förvånansvärt lätt att göra. Nyckeln är att ge din skjutreglage en höjd i förhållande till höjden på webbläsaren, och sedan ta bort eventuella ytterligare marginal- och breddbegränsningar på den överordnade raden eller sektionen.
På bara några minuter kan du skapa ett helskärmsreglage som expanderar för att fylla hela skärmen vid sidladdning och ser bra ut på alla enheter.
Låt oss börja.
undersökningen
Här är en kort översikt över skjutreglaget vi kommer att skapa i den här handledningen.
Skapa en ny sida med Divi Builder
Gå till i WordPress-instrumentpanelen Sidor> Lägg till nytt
Ge en titel som är relevant för dig och klicka på 'Använda Divi Builder'
Klicka till slut "Börja bygga"
Efter det kommer du att ha en tom sida för att börja designa i Divi.
Skapa en helskärmsreglage i Divi
Avsnitt och radkonfiguration
För att komma igång lägger du till en rad med en kolumn i avsnittet.
sektionsmarginal
Innan du lägger till en modul, öppna avsnittsinställningarna, gå till fliken Designa, dra ned alternativet Förband och ändra inställningarna enligt följande:
- Utfyllnad (topp och botten): 0px
Linjeinställningar
Öppna sedan linjeinställningar och uppdatera följande på fliken Designa :
- Bredd: 100 %
- Max bredd: 100 %
- Utfyllnad (topp och botten): 0px
Med alla dessa inställningar på plats kan vi nu gå vidare till att skapa själva skjutreglaget.
Skapande av helskärmsreglaget
För att skapa helskärmsskjutaren, lägg till en ny skjutreglagemodul på raden.
Lägg till bilder till varje bild
Innan du uppdaterar de allmänna bildinställningarna, öppna standardinställningarna för första bildspelet
Lägg till en bild och en bakgrundsbild på bilden. I det här exemplet använder vi samma bild för diabilden och bakgrundsbilden (ca 1920px x 1500px).
Öppna sedan inställningarna för den andra bilden
Lägg till en annan bild och bakgrundsbild från den föregående till bilden.
Observera att du kan lägga till så många bilder du vill.
Uppdatera skjutreglageinställningar
Nu när varje enskild bild har en unik bild och bakgrundsbild är vi redo att uppdatera skjutreglageinställningarna i allmänhet.
Gå tillbaka till reglageinställningarna och uppdatera följande under fliken Designa :
Täcka över
- Använd bakgrundsöverlägg: JA
- Bakgrundsöverlagringsfärg: rgba(27,18,38,0.74)
Box skugga
- Box Shadow Style: Se Capture (1)
- Box Shadow (horisontell och vertikal) Position: -8vw
- Box Shadow Spridningsstyrka: -6,5 vw
- Skuggfärg: #cf1259
Titeltext
Redigera titelinställningar
- Titel Teckensnitt: Montserrat
- Titel Teckensnittsvikt: Ultra fet
- Textstorlek: 5vw (dator), 40px (surfplatta och telefon)
kropp text
Redigera beskrivningstextinställningarna enligt följande:
- Kroppstypsnittsvikt: Halvfet
- Brödtextstorlek: 16px
- Linjehöjd: 1.8 em
Knappstilar
- Använd anpassade stilar för knapp: JA
- Knapptextstorlek: 16px
- Bakgrund: #cf1259
- Kantbredd: 0px
- Kantradie: 0px
- Teckensnittsvikt: Fet
- Typsnittsstil: TT
- Utfyllnad (topp och botten): 15px
- Utfyllnad (vänster och höger): 30px
Reglagets höjd och innehållsbredd
- Innehåll Max bredd: 90 %
- Min höjd: 100vh
Genom att ge skjutreglaget en minsta höjd på 100vh säkerställs att skjutreglaget spänner över hela höjden av webbläsarfönstret. Detta är nyckeln till att skapa en helskärmsskjutare.
Skjutreglaget kommer redan att sträcka sig över hela bredden av webbläsarfönstret, eftersom linjebredden är 100 %.
Skjutreglage pilar
Under fliken Avancerat uppdaterar du storleken och positionen för skjutpilarna genom att lägga till följande anpassade CSS i CSS-området Skjut pilar :
font-size: 8vw !important;
margin-top: -4vw;
Detta kommer att förstora Slider-pilarna på stora skärmstorlekar och förminska dem till en mindre storlek på mobilen.
Subtrahera rubrikhöjd från reglagehöjd
Om du har en rubrik på sidan kommer helskärmsreglaget faktiskt att sträcka sig en bit under webbläsarfönstret.
Detta beror på att rubrikhöjden sänker Slider som för närvarande har en höjd på 100vh (100% av fönstrets/webbläsarens höjd). För att förhindra att skjutreglaget trycks in under webbläsarens vyport kan du lägga till en CSS-funktion calc () för att subtrahera höjden på rubriken från höjden på reglaget.
Du måste veta höjden på rubriken (dator och mobil) för att detta ska fungera. Om du använder standard Divi-huvudet, blir rubrikens höjd 80px. Således måste skjutreglagets höjd vara 100vh – 80px.
För att lägga till den anpassade höjden, öppna Slider-inställningarna och lägg till följande anpassade CSS till huvud Slider-elementet och även för varje bild:
min-height: calc(100vh - 80px)!important;
Slutresultat
Här är det slutliga resultatet.
Ladda ner DIVI nu!!!
Och så här ser designen ut på surfplatta och telefon.
Slutsats
De viktigaste stegen för att skapa en helskärmsreglage i Divi är att konfigurera sektionen och raden så att den sträcker sig över hela webbläsarens bredd, och sedan ge reglaget en minimihöjd på 100vh.
Om du använder en rubrik kan du lägga till ett anpassat CSS-kodavsnitt som subtraherar höjden på rubriken för att säkerställa att helskärmsreglaget inte sträcker sig förbi botten av webbläsaren.
Med dessa nyckelsteg på plats kan du ytterligare anpassa skjutreglaget (och bilderna) hur du vill med alla kraftfulla funktioner som ingår i Divi Builder.
Använd den för att skapa vackra och effektiva reglage som fyller vilken skärm som helst på vilken enhet som helst.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta 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.
.
