Kunne du tænke dig at give en anden dimension til din websted med en baggrundsmaske Divi Klæbrig?
De klæbrige muligheder for Divi giver dig mulighed for at skabe et væld af forskellige designs til dine hjemmesider. Dagens selvstudie tilføjer listen over ting, du kan gøre. Forhåbentlig vil dette være med til at sætte gang i din kreativitet.
Vi viser dig, hvordan du opretter en klæbrig baggrundsmaske.
Denne tutorial kombinerer de klæbrige muligheder for Divi med filterblandingstilstande.
undersøgelse
Før vi dykker ned i denne tutorial, lad os tage et hurtigt kig på resultatet på forskellige skærmstørrelser.
kontor
Mobil
Lav et design i Divi
Tilføj en ny sektion
Baggrundsbillede
Start med at tilføje et nyt afsnit til den side, du arbejder på.
- Upload et baggrundsbillede efter eget valg.
- Baggrundsbillede Størrelse: Cover
afstand
Skift til fanen Sektionsdesign, og fjern standardafstandsindstillingerne nedenfor:
- Polstring (top og bund): 0px
Overløb
Skjul derefter sektionens overløb i fanen Avanceret.
- Vandret overløb: Skjult
- Lodret overløb: Skjult
Tilføj linje #1
Struktur af søjlen
Fortsæt ved at tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje nogen moduler skal du åbne linjeindstillingerne og ændre størrelsesindstillingerne i overensstemmelse hermed:
- Bredde: 100 %
- Maks. bredde: 100 %
afstand
Fjern også alle standardmargener.
- Polstring (top og bund): 0px
Filtre
Vi tilføjer også en blandingstilstand til denne linje. Denne blandingstilstand hjælper os med at oprette en maske senere i selvstudiet.
- Blandingstilstand: Skærm
Z-indeks
For at sikre, at denne række forbliver under den anden række, tilføjer vi til sektionen, vi ændrer z-indekset i fanen Avanceret.
- Z-indeks: 9
Kolonneparametre
Dernæst åbner vi kolonneindstillingerne.
Baggrundsfarve
Vi bruger en helt hvid baggrundsfarve.
- Baggrundsfarve: #ffffff
CSS hovedelement
Vi tilføjer også en højdeværdi til hovedelementet i fanen Avanceret.
height: 100vh;
Tilføj et "Tekst"-modul til linjen
Lad indholdsområdet være tomt
Når du er færdig med rækkeindstillinger, skal du tilføje et tekstmodul til dets kolonne.
Forlad området indhold tom. I stedet bruger vi dette modul til at skabe en form, der afslører en del af sektionens baggrundsbillede.
Baggrundsfarve
Vi vil bruge en mørkere baggrundsfarve til dette modul.
- Baggrundsfarve: #0b3835
dimensionering
Dernæst får vi adgang til fanen Design og ændre størrelsesparametrene som følger:
- bredde:
- Desktop: 20vw
- Tablet og telefon: 70 vw
- Højde :
- Desktop: 30vh
- Tablet og telefon: 10vh
afstand
Vi tilføjer også en øverste margen.
- Margin (øverst): 3vh
Grænse
Og vi vil inkludere afrundede hjørner.
- Afrundede hjørner: 15px
Tilføj linje 2
Struktur af søjlen
Fortsæt ved at tilføje endnu en række til sektionen ved hjælp af følgende kolonnestruktur:
dimensionering
Åbn linjeindstillingerne og foretag følgende ændringer i indstillingerne dimensionering følge:
- Bredde: 100 %
- Maks. bredde: 100 %
Z-indeks
Forøg også rækkens z-indeks. Dette vil være med til at sikre, at indhold af linjen forbliver over den forrige linje.
- Z-indeks: 12
Tilføj et "Tekst"-modul til linjen
Tilføj H2 indhold
Det er tid til at tilføje moduler, begyndende med et første tekstmodul, der indeholder indhold H2 efter eget valg.
H2 tekstindstillinger
Tilpas H2-tekstindstillingerne som følger:
- Skrifttype: Playfair Display
- Tekstjustering: Centreret
- Tekstfarve: #0b3835
- Størrelse:
- Desktop: 150px
- Tablet og telefon: 45px
- Linjehøjde: 1,2 em
dimensionering
Derefter skal du navigere til størrelsesindstillinger og anvende følgende indstillinger:
- Maks. bredde: 980px
- Justeringsmodul: Center
afstand
Inkluder også en negativ topmargin.
Tilføj et "Knap"-modul til rækken
Tilføj indhold til knappen
Det næste og sidste modul, vi skal bruge i denne række, er et knapmodul. Tilføj indhold efter eget valg.
Knapjustering
Skift til fanen Design af modulet og ændre justeringen af knappen.
- Knapjustering: Center
Knapindstillinger
Gå derefter til knapindstillingerne og anvend følgende stilarter:
- Brug brugerdefinerede stilarter til knappen: Ja
- Knaptekststørrelse: 15px
- Knaptekstfarve: #ffffff
- Knap baggrundsfarve: #000000
- Knapkantbredde: 0 pixels
- Knapkantradius: 100px
- Knapskrifttype: Montserrat
- Knap skrifttypevægt: Semi fed
- Skrifttype: TT
afstand
Vi tilføjer også tilpassede margen- og polstringsværdier til afstandsindstillingerne.
- Margin (bund): 60vh
- Polstring (top og bund): 15px
- Polstring (venstre og højre): 40px
Påfør klæbrige effekter
Åben linje #1
Nu hvor vi har bygget bunden af vores design, er det tid til at anvende de klæbrige stilarter. Åbn indstillingerne for første linje.
Anvend klæbrige muligheder
Gå til fanen Avanceret og anvend følgende vedvarende indstillinger:
- Sticky Position: Hold dig til toppen
- Nederste klæbrig grænse: Sektion
- Forskydning fra omkringliggende klæbrige elementer: JA
- Overgangsstandard og Sticky Styles: JA
Tekstmodulets klæbrige indstillinger
Nu hvor linjen er Sticky, kan vi anvende stilarter på tekstmodulet inde i linjen. Åbn modulindstillingerne.
Sticky størrelse
Gå derefter til størrelsesindstillinger og anvend følgende størrelsesværdier:
- Bredde (klæbende): 80 vw
- Højde (klæbende): 90vh
Overgangstid
Til sidst skal du navigere til fanen Avanceret og øge varigheden af overgangen.
- Overgangsvarighed: 500ms
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.
kontor
Download DIVI nu!!!
Mobil
Download DIVI nu!!!
Konklusion
I denne artikel har vi endnu en gang vist dig, hvordan du bliver kreativ med Divis klæbrige muligheder.
Specifikt har vi vist dig, hvordan du kombinerer Divis filterindstillinger og klæbrige muligheder.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
