Vill du ge en annan dimension till din webbplats med en bakgrundsmask Divi Klibbig?
De klibbiga alternativen av Divi låter dig skapa massor av olika design för dina webbplatser. Dagens handledning lägger till en lista över saker du kan göra. Förhoppningsvis kommer detta att hjälpa till att väcka din kreativitet.
Vi visar dig hur du skapar en klibbig bakgrundsmask.
Denna handledning kombinerar de klibbiga alternativen för Divi med filterblandningslägen.
undersökningen
Innan vi dyker in i den här handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.
office
Mobil
Skapa en design i Divi
Lägg till en ny sektion
Bakgrundsbild
Börja med att lägga till ett nytt avsnitt på sidan du arbetar med.
- Ladda upp en valfri bakgrundsbild.
- Bakgrundsbildstorlek : Omslag
avstånd
Byt till fliken Sektionsdesign och ta bort standardavståndsinställningarna nedan:
- Utfyllnad (topp och botten): 0px
Svämmar över
Dölj sedan överflödena av avsnittet i fliken Advanced Open water.
- Horisontellt överflöde: Dold
- Vertikalt överflöde: Dold
Lägg till rad #1
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler, öppna linjeinställningarna och ändra storleksinställningarna därefter:
- Bredd: 100 %
- Max bredd: 100 %
avstånd
Ta också bort alla standardmarginaler.
- Utfyllnad (topp och botten): 0px
filter
Vi lägger också till ett blandningsläge till den här raden. Detta blandningsläge hjälper oss att skapa en mask senare i handledningen.
- Blandningsläge: Skärm
Z-index
För att se till att den här raden stannar under den andra raden lägger vi till i avsnittet, vi ändrar z-index på fliken Advanced Open water.
- Z-index: 9
Kolumnparametrar
Därefter kommer vi att öppna kolumninställningarna.
Bakgrundsfärg
Vi använder en helt vit bakgrundsfärg.
- Bakgrundsfärg: #ffffff
CSS huvudelement
Vi lägger också till ett höjdvärde till huvudelementet i fliken Advanced Open water.
height: 100vh;
Lägg till en "Text"-modul på raden
Lämna innehållet tomt
När du är klar med radinställningarna lägger du till en textmodul i dess kolumn.
Lämna området innehåll tömma. Istället använder vi den här modulen för att skapa en form som avslöjar en del av avsnittets bakgrundsbild.
Bakgrundsfärg
Vi kommer att använda en mörkare bakgrundsfärg för denna modul.
- Bakgrundsfärg: #0b3835
dimensionering
Därefter kommer vi åt fliken Designa och ändra storleksparametrarna enligt följande:
- Bredd :
- Desktop: 20vw
- Surfplatta och telefon: 70 vw
- Höjd:
- Desktop: 30vh
- Surfplatta och telefon: 10vh
avstånd
Vi lägger också till en toppmarginal.
- Marginal (Överst): 3vh
Gräns
Och vi kommer att ta med rundade hörn.
- Rundade hörn: 15px
Lägg till rad 2
Strukturen av kolonnen
Fortsätt genom att lägga till ytterligare en rad i avsnittet med hjälp av följande kolumnstruktur:
dimensionering
Öppna linjeinställningarna och gör följande ändringar i alternativen Storlek följande:
- Bredd: 100 %
- Max bredd: 100 %
Z-index
Öka även radens z-index. Detta kommer att bidra till att säkerställa att innehåll av raden förblir ovanför den föregående raden.
- Z-index: 12
Lägg till en "Text"-modul på raden
Lägg till H2-innehåll
Det är dags att lägga till moduler, börja med en första textmodul som innehåller innehåll H2 efter eget val.
H2 textinställningar
Anpassa H2-textinställningarna enligt följande:
- Typsnitt: Playfair Display
- Textjustering: Centrerad
- Textfärg: #0b3835
- Storlek:
- Desktop: 150px
- Surfplatta och telefon: 45px
- Linjehöjd: 1,2 em
dimensionering
Därefter navigerar du till storleksinställningar och tillämpar följande inställningar:
- Max bredd: 980px
- Justeringsmodul: Center
avstånd
Inkludera även en negativ toppmarginal.
Lägg till en "Button"-modul i raden
Lägg till innehåll på knappen
Nästa och sista modul vi behöver i den här raden är en knappmodul. Lägg till innehåll efter eget val.
Knappinriktning
Byt till flik Designa av modulen och ändra inriktningen av knappen.
- Knappinställning: Center
Knappinställningar
Gå sedan till knappinställningarna och använd följande stilar:
- Använd anpassade stilar för knappen: Ja
- Knapptextstorlek: 15px
- Knappens textfärg: #ffffff
- Knappens bakgrundsfärg: #000000
- Knappens kantbredd: 0 pixlar
- Knappkantradie: 100px
- Knapptypsnitt: Montserrat
- Knapptypsnittsvikt: halvfet
- Typsnittsstil: TT
avstånd
Vi lägger också till anpassade marginal- och utfyllnadsvärden till avståndsinställningarna.
- Marginal (botten): 60vh
- Utfyllnad (topp och botten): 15px
- Utfyllnad (vänster och höger): 40px
Applicera klibbiga effekter
Öppna rad #1
Nu när vi har byggt grunden för vår design är det dags att applicera de klibbiga stilarna. Öppna inställningarna för första raden.
Använd klibbiga alternativ
Gå till fliken Advanced Open water och tillämpa följande beständiga inställningar:
- Sticky Position: Stick To Top
- Nedre klibbgräns: sektion
- Offset från omgivande klibbiga element: JA
- Övergångsstandard och Sticky Styles: JA
Textmodul Sticky Options
Nu när raden är Sticky kan vi tillämpa stilar på textmodulen inuti raden. Öppna modulinställningarna.
Sticky Storlek
Gå sedan till storleksinställningar och tillämpa följande storleksvärden:
- Bredd (klibbig): 80 vw
- Höjd (klibbig): 90vh
Övergångstid
Slutligen, navigera till fliken Advanced Open water och öka varaktigheten av övergången.
- Övergångslängd: 500ms
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.
office
Ladda ner DIVI nu!!!
Mobil
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln har vi återigen visat dig hur du blir kreativ med Divis klibbiga alternativ.
Specifikt har vi visat dig hur du kombinerar Divis filterinställningar och klibbiga alternativ.
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.
.
