Vil du skabe en unik og fantastisk baggrund med masker og baggrundsmønstre fra Divi ?
De nye baggrundsmasker og mønstre har Divi bruges mest til sektioner af en side. Men vi kan også tilføje dem til overskrifter!
I denne vejledning viser vi dig, hvordan du tilføjer masker og baggrundsmønstre til en overskriftsskabelon Divi ved hjælp af konstruktøren temaer.
Det er en fantastisk måde at skabe helt unikke headerdesigns til din Websted.
Lad os starte.
undersøgelse
Her er et hurtigt kig på det design, vi vil skabe i denne tutorial.
Gå til Divis temabygger og begynd at oprette en global header
Fra WordPress-dashboardet, gå til Divi > Theme Builder
Klik "Tilføj global header"
Vælg "Byg global header".
Derefter kan du begynde at designe en ny header ved hjælp af Divi Builder.
Sådan tilføjer du baggrundsmasker og -mønstre til en Divi-header
Oprettelse af sektionsbaggrunden med en baggrundsfarve og et mønster
Læs også: Divi: Sådan opretter du en Testimonials-sektion i form af et gitter
For at komme i gang skal du åbne indstillingerne for den eksisterende sektion.
Under fanen Indhold, opdater baggrundsindstillingerne med følgende indstillinger:
Baggrundsfarve:
- Baggrund: #262d3f
Baggrundsmønster:
- Model: Piller
- Mønsterfarve: rgba(255,255,255,0.1)
- Mønsterstørrelse: brugerdefineret størrelse.
- Mønsterbredde: 1px
Polstring
Under fanen Design, opdater sektionsudfyldningen som følger:
- Polstring (top og bund): 0px
Dette vil reducere det lodrette rum i overskriften en smule.
Tilføj en række med følgende kolonnelayout
Tilføjet indhold af pladsholderhoved (en menu og en knap)
Tilføj en ny menu i rækkens venstre kolonne.
Udvalg af menu.
Tilføj derefter et logo og brug indstillingerne til at tilpasse menuen og logoet som ønsket.
Tilføj et knapmodul i højre kolonne, og tilpas det også efter din smag.
Oprettelse af linjebaggrunden med gradient, maske og mønster
Gradienten
Åbn rækkeindstillingerne, der indeholder din menu og knap. Opdater derefter baggrundsindstillingerne med følgende baggrundsindstillinger:
Baggrundsgradient:
- Gradientstop 1 (50%): Klar
- Gradientstop 2 (75%): #ff4c00
- Styring: 90 grader
Mønster
- Model: Piller
- Mønsterfarve: rgba(38,45,63,0.48)
- Mønsterstørrelse: 1 pixel
- Lodret offset: 20px
Bemærk: Den lodrette forskydning af mønsteret er indstillet til 20px, fordi der er 20px toppolstring på sektionen over linjen. Dette sikrer, at sektionsmønsteret flugter med rækkemønsteret.
Baggrundsmaske
- Maske: Sildeben
- Maskefarve: #262d3f
BEMÆRK: For overskrifter er det bedst at holde maskestørrelsen indstillet til "Udvid for at fylde", så den dækker det vandrette rum uden at gå på kompromis med maskens design.
Sidste hånd på stregen
Se også: Divi: Sådan bruger du "Gradient Builder" til at forskønne dine billeder
For at fuldende designet tilføjer vi en kantradius og et par flere redigeringer til linjen.
Radius, kant og kantafstand
Under fanen Design, opdater polstringen som følger:
- Polstring (top og bund): 5px
Giv derefter rækken et flot afrundet hjørne for et ekstra designelement.
- Afrundede hjørner: 50px
- Venstre kantbredde: 50px
- Venstre kantfarve: #262d3f
Vi er nødt til at give en kant til venstre side af rækken, fordi den firkantede kant af masken vil flyde over rækken på trods af de afrundede hjørner.
Endelig resultat
Lad os se det endelige resultat.
Gradienten er lidt subtil, så her er et kig på, hvordan det ser ud.
Og her er desktop- og mobilheaderdesignet.
Download DIVI nu!!!
Konklusion
Sidehovedets baggrundsdesign er kun toppen af isbjerget. Der er meget at udforske at gøre med de baggrundsmuligheder, der er tilgængelige i Divi.
Vi håber, at denne vejledning har hjulpet dig med at forstå, hvordan Divis baggrundsmasker og mønstre kan arbejde sammen for at skabe et unikt baggrundsdesign til dine overskrifter.
Du er velkommen til at eksperimentere med flere kombinationer af baggrundsdesign, så de passer til dit eget design. Websted eller dit kommende projekt.
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.
...
