Har du brug for at oprette en global header til din websted med Divi?
En global overskrift vises overalt på din Websted, medmindre du har tildelt en anden sidehoved til en side eller et indlæg.
Lad os starte!
undersøgelse
Her er en forhåndsvisning af den globale header, vi skal designe.
Konfigurer din hovedmenu
Start med at oprette din menu i dit WordPress-websteds udseendeindstillinger.
Få adgang til indstillingen Theme Builder under Divi
I mulighederne for Divi-tema, klik på Theme Builder. Når du er der, vil du bemærke en hjemmeside skabelon Standard.
Tilføj og opret en global header
Le hjemmeside skabelon standard er, hvor du kan begynde at oprette din tilpassede globale sidehoved, globale brødtekst og globale sidefod. Klik på "Tilføj global overskrift", og fortsæt ved at klikke på "Byg global overskrift" for at starte processen.
Sektionsindstillinger
dimensionering
Åbn sektionsindstillingerne, du finder på siden, i Style-fanen, skift dimensionerne på forskellige skærmstørrelser.
- Maksimal bredde: 100 %
- Maksimal bredde: 1280px (til pc og tablet), 100 % (til mobil)
afstand
Fjern alle indvendige marginer i top og bund
- Indre margin toppunkt: 0px
- Bund intern margin: 0px
grænse
Tilføj nu en kantradius til nederste venstre og højre hjørne af sektionen.
- Nederst til venstre: 50px
- Nederst til højre: 50px
Skyggeæske
Lad os også tilføje en subtil boksskygge.
- Box Shadow Blur Styrke: 60px
- Undertekstskriftfarve: rgba(0,0,0,0.13)
synlighed
- Vandret overløb: Synligt
- Lodret overløb: Synlig
Dediker en ny linje til overskriften
Nu hvor vi har gennemført de generelle sektionsindstillinger, kan vi begynde at tilføje rækker. I alt skal vi bruge to linjer; en, der er dedikeret til overskriften og en, der tillader menupunkter at blive vist. Vi starter med overskriften ved at tilføje en ny række ved hjælp af følgende kolonnestruktur:
Linieindstillinger
Baggrundsindstillinger
Uden at tilføje moduler til linjen skal du åbne linjeindstillingerne og ændre baggrundsfarven.
- Baggrund: #38383F
dimensionering
Rediger derefter linjestørrelsesparametrene.
- Brug tilpasset tagrendebredde: JA
- Kolonneafstand: 1
- Maksimal bredde: 100 %
- Maksimal bredde: 100 %
Visning
Lad os nu sikre os, at kolonnerne vises ved siden af hinanden på mindre skærme ved at tilføje denne linje med CSS-kode til hovedrækkeelementet.
01
display: flex;
Tilføj billedmodul i kolonne 1
Download logo
Når du har gennemført rækkeindstillingerne, er det tid til at begynde at tilføje moduler. Tilføj et billedmodul til kolonne 1 og upload dit logo.
tilpasning
Gå til fanen Stil og juster billedet til venstre.
dimensionering
Rediger også modulets bredde.
afstand
Tilføj også tilpassede margenværdier.
Tilføj sporingsmodul til sociale medier i kolonne 2
Tilføj sociale netværk
Lad os gå til anden kolonne. Der skal vi bruge et sporingsmodul til sociale medier. Tilføj de sociale netværk efter eget valg. Du kan tilføje lige så mange sociale medier, som du vil.
Socialt netværk baggrundsfarve
Åbn derefter hvert socialt netværk individuelt og skift baggrundsfarven til en helt gennemsigtig farve.
- Baggrundsfarve: rgba (0,0,0,0)
tilpasning
Gå tilbage til de normale modulindstillinger, og skift derefter den fulde justering af modulet.
ikon
Skift også ikonindstillingerne.
- Ikonfarve: #FFFFFF
- Brug tilpasset ikonstørrelse: Ja
- Ikonskriftstørrelse: 16px (pc og tablet), 12px (telefon)
afstand
Tilføj en topmargen.
Tilføj knapmodulet i kolonne 3
Flyt til den tredje kolonne og tilføj et knapmodul, der indeholder en tekst efter eget valg.
tilpasning
Skift justeringen af knappen på fanen Stil.
Knapindstillinger
Tilpas knapindstillingerne som følger:
- Brug brugerdefinerede stilarter til knappen: Ja
- Knaptekststørrelse: 12px (desktop), 10px (tablet), 8px (telefon)
- Knaptekstfarve: #ffffff
- Baggrundsknap: #ffae25
- Knapkantbredde: 0 pixels
- Knap til kantradius: 0 pixels
- Knapbogstavafstand: 5 px (computer), 3 px (tablet og telefon)
- Font-knap: Åbn Ingen
- Blødt lys-knap: Fed tekst
- Kopi knap stil: TT
afstand
Tilpas margenværdier.
Dediker en ny linje til menulinjen
Når du har udfyldt linjen dedikeret til den globale overskrift, kan du tilføje endnu en linje lige nedenfor.
Linieindstillinger
dimensionering
Uden at tilføje nogen moduler endnu, skal du åbne linjeindstillingerne og ændre størrelsesindstillingerne på fanen Stil.
afstand
Fjern derefter alle bund- og topmargener.
Tilføj et menumodul til kolonnen
Vælg Menu
Tilføj derefter et menumodul til kolonnen og vælg den menu, du oprettede i den første del af denne øvelse.
Disposition
Skift til fanen Stil og skift layoutindstillingerne som følger:
Tilslutninger
Skift også farven på det aktive link på fanen Stil.
- Farve på aktivt link: #ffae25
Drop-down menu
Gør det samme for farven på rullemenuens linje i rullemenuens indstillinger.
- Farve på rullemenuen: #ffae25
ikon
- Hamburger menu ikon farve: #ffae25
Menutekst
Med menutekstindstillinger.
- Menuskrifttype: Prata
- Menutekstfarve: #000000
Få overskrift og menulinje til at forblive øverst
Åbn sektionsindstillinger
Når du har gennemført den anden linje, skal du bare sørge for, at sektionen forbliver øverst på vores sider og indlæg. For at gøre dette åbner vi sektionsindstillingerne igen.
Tilføj tilpasset CSS til hovedelementet
Dernæst går vi til den avancerede fane, og vi tilføjer et par linjer med CSS-kode til hovedelementet i sektionen.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Gem muligheder for globale header og temabygger
Når du har fuldført hele det globale headerdesign, skal du sørge for at gemme designet, før du forlader skabelonlayoutet. Når du er ude af skabelonlayoutet, skal du gemme hele dine temabyggerændringer, og du er færdig!
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på resultatet.
Konklusion
I denne artikel viste vi dig, hvordan du opretter en tilpasset global header med Divis nye temabygger. Denne vejledning viser, hvor nemt det er at skabe smukke overskrifter og anvende dem på hele din Websted eller specifikke tilpassede indlægstyper.
Vi håber, det hjælper dig med at tilpasse dit websted med Theme Builder.
Hvis du har spørgsmål eller forslag, bedes du efterlade os en kommentar i kommentarfeltet nedenfor.
...
