Kunne du tænke dig at bruge Divis maske og baggrundsmønsteroverlay?
Med det sidste version af baggrundsmaske og baggrundsmønsterfunktion af Divi, kan du oprette unikke Hero-sektioner til din Websted. En heltesektion er den første sektion af din Websted og det er det første du har besøgende se før du ruller dit Websted, så det er vigtigt at være iøjnefaldende!
Denne artikel viser dig, hvordan du opretter fem unikke baggrundsmasker og mønsteroverlejringer, som du kan anvende på et baggrundsbillede for at skabe virkelig fantastiske heltesektioner.
Denne vejledning vil dække de væsentlige trin, der er nødvendige for at oprette hver helte-sektion og give dig de værktøjer, du skal bruge for at skabe en slående heltesektion til dit websted på få minutter.
Lad os starte!
undersøgelse
Her er et hurtigt overblik over de fem heltesektioner, vi vil oprette i denne artikel i dag.
Download DIVI nu!!!
Designene er subtile, enkle og alligevel virkningsfulde.
Læs også: Divi: Sådan bruger du "Gradient Builder" til at forskønne dine billeder
Opret en ny side med Divi Builder
For at komme i gang skal du gøre følgende:
Fra WordPress-dashboardet, gå til Sider> Tilføj nyt for at oprette en ny side.
Giv den en titel, der giver mening for dig, og klik Brug Divi Builder
klik derefter på Begynd at bygge (Byg fra skrammer)
Derefter har du et tomt lærred til at begynde at designe i Divi.
Fem eksempler på baggrundsmaske og mønsteroverlejringer, der skal anvendes på et baggrundsbillede
Lad os først oprette Hero-sektionen
Alle vores eksempeldesigns bruger den samme sektions-, række- og kolonnestruktur, så lad os konfigurere dem nu.
1. Opret en layoutstruktur
Tilføj en række til din side, og klik derefter på det grønne "+"-ikon for at vise kolonnestrukturen og vælg den første kolonne, kolonnen i fuld bredde.
2. Tilføj sektionsafstand
Nu hvor vi har defineret vores række og kolonne, er det tid til at tilføje lidt mellemrum til sektionen.
På fanen Afstand skal du opdatere følgende:
- Desktop: 400 pixels (øverst og nederst)
- Tablet: 200 pixels (øverst og nederst); 25px (venstre og højre)
- Telefon: 50 pixels (øverst og nederst); 25px (venstre og højre)
Hero Section Design #1
Lad os designe den første Hero-sektion.
Download DIVI nu!!!
1. Tilføj overskriftstekst
Klik på det grå "+"-ikon for at få modulbiblioteket frem. Rul til tekst, og klik for at indlæse.
Indtast titelteksten og derefter under fanen Tekstoverskrift, konfigurer disse indstillinger:
- Overskrift skrifttype: Work Sans
- Tekstfarve: Hvid #ffffff
- Overskrifts tekststørrelse:
- Desktop: 3 em
- Tablet: 2,2 em
- Telefon: 1.4em
2. Tilføj knapmodul
Tilføj en knap og konfigurer disse indstillinger:
- Under fanen Indholds: Find ud af mere
- Under fanen Justering, vælg: Center
- Klik Brug brugerdefinerede stilarter til knap konfigurer derefter:
- Knaptekststørrelse:
- Desktop: 20px
- Tablet: 16px
- Telefon: 14px
- Knaptekstfarve: #ffffff
- Baggrund: #1d1d1d
- Knapkantbredde: 0
- Grænseradius: 0
- Bogstavafstand: 3 point
- Button Font: Work Sans
- Skrifttype: TT
- Knaptekststørrelse:
3. Tilføj et baggrundsbillede
Nu hvor vores indhold er konfigureret, er det tid til at begynde at designe baggrunden for afsnittet.
- Gå til baggrundsknappen og klik på den 3. fane, billedfanen, og klik derefter på "Tilføj baggrundsbillede".
- Dette vil få dit mediebibliotek frem, hvor du kan vælge et billede eller uploade et nyt.
- Når du har valgt dit billede, skal du klikke på knappen "Upload et billede" i nederste højre hjørne.
4. Tilføj et baggrundsmønster
Nu hvor vi har sat vores baggrundsbillede op, lad os tilføje et mønster.
- I fanen Baggrund, naviger til den 5. fane, fanen Baggrundsmønster, og klik derefter på "Tilføj baggrundsmønster".
- Vælg Tuftede fra rullemenuen og konfigurer disse indstillinger:
- Mønsterfarve – rgba(255,255,255,0.31)
- Mønstertransformation: ingen
- Størrelse: Faktisk størrelse
- Mønster Gentagelse Oprindelse: Top Nederst
- Mønstergentagelse: Gentag
- Blandingstilstand: normal
5. Tilføj baggrundsmaske
Nu hvor vi har konfigureret vores baggrundsbillede og mønster, lad os tilføje en baggrundsmaske.
- I fanen Baggrund, naviger til den 6. fane, fanen Baggrundsmaske, og klik derefter på "Tilføj en baggrundsmaske".
- Vælg Bønne fra rullemenuen og konfigurer disse indstillinger:
- Maskefarve: rgba(0,0,0,0.36)
- Maskeformat: vandret rektangel
- Størrelse: Stretch to Fill
Så! Du har nu en smukt designet Hero-sektion.
Section Hero #2 design
Lad os nu designe den anden heltesektion.
1. Tilføj et baggrundsbillede, og indstil blandingstilstanden til Overlay
Vælg dit baggrundsbillede, indstil blandingstilstanden til Overlay, og tilføj en overlejringsfarve på rgba (10,10,10,0.64).
2. Tilføj et baggrundsmønster
Nu hvor vi har sat baggrundsbilledet op, lad os tilføje et baggrundsmønster.
- På fanen Baggrund skal du gå til den 5. fane, fanen Baggrundsmønster, og klik derefter på "Tilføj baggrundsmønster".
- Vælg Tuftede fra rullemenuen og konfigurer disse indstillinger:
- Mønsterfarve – rgba(255,255,255,0.09)
- Mønstertransformation: ingen
- Størrelse: Cover
- Mønster Gentagelse Oprindelse: Øverst til venstre
- Mønstergentagelse: Gentag
- Blandingstilstand: normal
3. Tilføj baggrundsmaske
Nu hvor vi har konfigureret vores baggrundsbillede og mønster, lad os tilføje en baggrundsmaske.
- I fanen Baggrund, naviger til den 6. fane, fanen Baggrundsmaske, og klik derefter på "Tilføj baggrundsmaske".
- Vælg Indskudstegn fra rullemenuen og konfigurer disse indstillinger:
- Maskefarve: rgba(0,0,0,0.36)
- Masketransformation: Ingen
- Aspect Ratio: vandret rektangel
- Maskestørrelse: Stretch To Fyld
- Maskeblandingstilstand: Normal
Section Hero #3 design
Lad os nu designe den tredje Hero-sektion.
1. Tilføj et baggrundsbillede, og indstil blandingstilstanden til Overlay
Vælg dit baggrundsbillede, indstil blandingstilstanden til Overlay, og tilføj en overlejringsfarve på rgba (10,10,10,0.39).
2. Tilføj et baggrundsmønster
Nu hvor vi har sat vores baggrundsbillede op, lad os tilføje et baggrundsmønster.
- I fanen Baggrund, naviger til den 5. fane, fanen Baggrundsmønster, og klik derefter på "Tilføj baggrundsmønster".
- Vælg Diagonale striber 2 fra rullemenuen og konfigurer disse indstillinger:
- Mønsterfarve – rgba(0,0,0,0.06)
- Mønstertransformation: ingen
- Størrelse: Faktisk størrelse
- Mønster Gentagelse Oprindelse: Øverst til venstre
- Mønstergentagelse: Gentag
- Blandingstilstand: Normal
3. Tilføj baggrundsmaske
Nu hvor vi har tilføjet et baggrundsbillede og et mønster, lad os tilføje en baggrundsmaske.
- I fanen Baggrund, naviger til den 6. fane, fanen Baggrundsmaske, og klik derefter på "Tilføj baggrundsmaske".
- Vælg Trekanter fra rullemenuen og konfigurer disse indstillinger:
- Maskefarve: rgba(10, 10, 10, 0,61)
- Masketransformation: ingen
- Aspect Ratio: vandret rektangel
- Maskestørrelse: Stretch To Fyld
- Maskeblandingstilstand: Normal
Section Hero #4 design
Lad os nu designe den fjerde sektion af Hero.
1. Tilføj et baggrundsbillede
Vælg dit baggrundsbillede.
2. Tilføj et baggrundsmønster
Nu hvor vi har tilføjet vores baggrundsbillede, lad os tilføje et baggrundsmønster.
- I fanen Baggrund, naviger til den 5. fane, fanen Baggrundsmønster, og klik derefter på "Tilføj baggrundsmønster".
- Vælg Smiles fra rullemenuen og konfigurer disse indstillinger:
- Mønsterfarve – rgba(0,0,0,0.2)
- Mønstertransformation: ingen
- Størrelse: Cover
- Gentag oprindelse: øverst til venstre
- Mønstergentagelse: Gentag
- Mønsterblandingstilstand: Normal
3. Tilføj baggrundsmaske
Nu hvor vi har anvendt vores baggrundsbillede og mønster, lad os tilføje en baggrundsmaske.
- I fanen Baggrund, naviger til den 6. fane, fanen Baggrundsmaske, og klik derefter på "Tilføj baggrundsmaske".
- Vælg Hjørnesø fra rullemenuen og konfigurer disse indstillinger:
- Maskefarve: rgba(10, 10, 10, 0,61)
- Masketransformation: vandret
- Aspektforhold: Vandret rektangel
- Størrelse: Cover
- Maskeposition: Center til venstre
- Mask Blender Mode: Normal
3. Konfigurer linjeparametre
Før vi går, har denne Hero-sektion unikke linjestile. Lad os sætte det op.
- Størrelse:
- Bredde: 80 %
- Maks. bredde: 800px
- Rækkejustering:
- Desktop: Standard
- Tablet: Center
- Telefon: Center
- Marginer:
- Venstre: 20vw
Section Hero #5 design
Lad os nu designe den femte Hero-sektion.
Download DIVI nu!!!
1. Tilføj et baggrundsbillede
Vælg dit baggrundsbillede.
2. Tilføj et mønster
Nu hvor vi har konfigureret vores baggrundsbillede, lad os anvende et baggrundsmønster.
- I fanen Baggrund, naviger til den 5. fane, fanen Baggrundsmønster, og klik derefter på "Tilføj baggrundsmønster".
- Vælg Crosses fra rullemenuen og konfigurer disse indstillinger:
- Mønsterfarve – #ffffff
- Mønstertransformation: ingen
- Størrelse: Brugerdefineret størrelse
- Mønsterbredde: 10px
- Mønsterhøjde: 10px
- Gentag oprindelse: Top Nederst
- Mønstergentagelse: Gentag
- Mønsterblandingstilstand: Normal
3. Tilføj baggrundsmaske
Nu hvor vi har et baggrundsbillede og et mønster anvendt, lad os tilføje en baggrundsmaske.
- I fanen Baggrund, naviger til den 6. fane, fanen Baggrundsmaske, og klik derefter på "Tilføj baggrundsmaske".
- Vælg Diagonale piller fra rullemenuen og konfigurer disse indstillinger:
- Maskefarve: rgba(10, 10, 10, 0,61)
- Masketransformation: vandret
- Aspektforhold: Vandret rektangel
- Størrelse: Cover
- Maskeposition: midten til venstre
- Maskeblandingstilstand: Normal
3. Konfigurer linjeparametre
Før vi går, har denne Hero-sektion også unikke linjestile. Lad os sætte det op.
- Størrelse:
- Bredde: 80 %
- Maks. bredde: 800px
- Rækkejustering:
- Desktop: Standard
- Tablet: Center
- Telefon: Center
- Mellemrum:
- Margin (højre): 18vw
Se også: Divi: Sådan tilføjer du masker og baggrundsmønstre til en header
Konklusion
Det er nemt at designe en unik og iøjnefaldende Hero-sektion til din hjemmeside med de nye muligheder baggrund og mønster maske af Divi. Hver funktion har mange muligheder, der giver dig mulighed for at skabe ægte kreative baggrunde.
Plus, du kan tilføje baggrundsmønstre og masker til enhver Divi Builder-vare! Designmulighederne er uendelige.
Forhåbentlig vil denne teknik tilføje endnu en nyttig designfærdighed til fremtidige projekter.
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 gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også 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.
...
