Vil du lage en unik og fantastisk bakgrunn med masker og bakgrunnsmønstre fra Divi ?
De nye bakgrunnsmaskene og mønstrene har Divi brukes oftest for deler av en side. Men vi kan også legge dem til overskrifter!
I denne opplæringen viser vi deg hvordan du legger til masker og bakgrunnsmønstre i en overskriftsmal Divi ved å bruke konstruktøren temaer.
Det er en fin måte å lage helt unike topptekstdesign for din nettstedet Web.
La oss begynne.
undersøkelsen
Her er en rask titt på designet vi skal lage i denne opplæringen.
Gå til Divis temabygger og begynn å lage en global header
Fra WordPress-dashbordet, gå til Divi > Temabygger
Klikk på "Legg til global overskrift"
Velg "Bygg global topptekst".
Etter det kan du begynne å designe en ny header ved å bruke Divi Builder.
Hvordan legge til bakgrunnsmasker og mønstre til en Divi-overskrift
Lage seksjonsbakgrunnen med bakgrunnsfarge og mønster
Les også: Divi: Hvordan lage en Testimonials-seksjon i form av et rutenett
For å komme i gang, åpne innstillingene for den eksisterende delen.
Under fanen Innhold, oppdater bakgrunnsalternativene med følgende innstillinger:
Bakgrunnsfarge:
- Bakgrunn: #262d3f
Bakgrunnsmønster:
- Modell: Piller
- Mønsterfarge: rgba(255,255,255,0.1)
- Mønsterstørrelse: tilpasset størrelse.
- Mønsterbredde: 1px
Padding
Under fanen utforming, oppdater seksjonsutfyllingen som følger:
- Polstring (øverst og bunn): 0px
Dette vil redusere det vertikale rommet til overskriften litt.
Legg til en rad med følgende kolonneoppsett
Lagt til plassholderhodeinnhold (en meny og en knapp)
Legg til en ny meny i venstre kolonne i raden.
Velg en meny.
Legg deretter til en logo og bruk innstillingene for å tilpasse menyen og logoen etter ønske.
I høyre kolonne legger du til en knappemodul og tilpasser den også etter eget ønske.
Lage linjebakgrunnen med gradient, maske og mønster
Gradienten
Åpne radinnstillingene som inneholder menyen og knappen. Oppdater deretter bakgrunnsalternativene med følgende bakgrunnsinnstillinger:
Bakgrunnsgradient:
- Gradientstopp 1 (50%): Klart
- Gradientstopp 2 (75%): #ff4c00
- Styring: 90 grader
Mønster
- Modell: Piller
- Mønsterfarge: rgba(38,45,63,0.48)
- Mønsterstørrelse: 1 piksel
- Vertikal offset: 20px
Merk: Den vertikale forskyvningen av mønsteret er satt til 20px fordi det er 20px topppolstring på seksjonen over linjen. Dette sikrer at seksjonsmønsteret er på linje med radmønsteret.
Bakgrunnsmaske
- Maske: fiskebein
- Maskefarge: #262d3f
MERK: For overskrifter er det best å holde maskestørrelsen satt til "Forleng for å fylle" slik at den dekker det horisontale rommet uten å gå på bekostning av maskens utforming.
Siste hånd på streken
Se også: Divi: Hvordan bruke "Gradient Builder" for å forskjønne bildene dine
For å fullføre designet legger vi til en kantradius og noen flere redigeringer på linjen.
Radius, kantlinje og kantavstand
Under fanen utforming, oppdater utfyllingen som følger:
- Polstring (øverst og bunn): 5px
Gi så raden et fint avrundet hjørne for et ekstra designelement.
- Avrundede hjørner: 50px
- Venstre kantbredde: 50px
- Venstre kantfarge: #262d3f
Vi må gi en kant til venstre side av raden fordi den firkantede kanten av masken vil flyte over raden til tross for de avrundede hjørnene.
Endelig resultat
La oss se det endelige resultatet.
Gradienten er litt subtil, så her er en titt på hvordan den ser ut.
Og her er stasjonær og mobil header-design.
Last ned DIVI nå!!!
konklusjonen
Overskriftens bakgrunnsdesign er bare toppen av isfjellet. Det er mye å utforske med bakgrunnsalternativene som er tilgjengelige i Divi.
Vi håper denne opplæringen har hjulpet deg med å forstå hvordan Divis bakgrunnsmasker og mønstre kan fungere sammen for å lage et unikt bakgrunnsdesign for overskriftene dine.
Eksperimenter gjerne med flere bakgrunnsdesignkombinasjoner for å passe til ditt eget design. nettstedet Web eller ditt kommende prosjekt.
Du kan også konsultere ressursene våre, hvis du trenger flere elementer for å gjennomføre prosjektene dine med oppretting av nettsteder.
Ikke nøl med å også konsultere vår guide på WordPress blog oppretting eller den på Divi: tidenes beste WordPress-tema.
Men i mellomtiden, del denne artikkelen på de forskjellige sosiale nettverkene dine.
...
