Trenger å lage en global header for din nettside med Divi?
En global overskrift vil vises overalt på din nettstedet Web, med mindre du har tilordnet en annen overskrift til en side eller et innlegg.
La oss starte!
undersøkelsen
Her er en forhåndsvisning av den globale headeren vi skal designe.
Konfigurer hovedmenyen din
Start med å lage menyen din i WordPress-nettstedets utseendeinnstillinger.
Få tilgang til temabygger-alternativet under Divi
I alternativene til Divi-temaklikker du på Theme Builder. Når du er der, vil du legge merke til en nettstedsmal Standard.
Legg til og lag en global overskrift
Le nettstedsmal standard er der du kan begynne å lage din egendefinerte globale topptekst, globale hovedtekst og globale bunntekst. Klikk "Add Global Header" og fortsett ved å klikke "Build Global Header" for å starte prosessen.
Seksjonsinnstillinger
dimensjonering
Åpne seksjonsinnstillingene du finner på siden, i Style-fanen, endre dimensjonene på forskjellige skjermstørrelser.
- Maksimal bredde: 100 %
- Maksimal bredde: 1280px (for PC og nettbrett), 100 % (for mobil)
avstanden
Fjern alle øvre og nedre indre marger
- Inner Margin Vertex: 0px
- Nedre intern margin: 0px
grensen
Legg nå til en kantradius nederst i venstre og høyre hjørne av seksjonen.
- Nederst til venstre: 50px
- Nederst til høyre: 50px
Skyggekasse
La oss også legge til en subtil boksskygge.
- Box Shadow Blur Styrke: 60px
- Tekstskriftfarge: rgba(0,0,0,0.13)
synlighet
- Horisontal overløp: Synlig
- Vertikalt overløp: Synlig
Dediker en ny linje til overskriften
Nå som vi har fullført de generelle seksjonsinnstillingene, kan vi begynne å legge til rader. Totalt vil vi trenge to linjer; en som er dedikert til overskriften og en som lar menyelementer vises. Vi starter med overskriften ved å legge til en ny rad ved å bruke følgende kolonnestruktur:
Linjeinnstillinger
Bakgrunnsinnstillinger
Uten å legge til noen moduler til linjen, åpne linjeinnstillingene og endre bakgrunnsfargen.
- Bakgrunn: #38383F
dimensjonering
Deretter endrer du linjestørrelsesparametrene.
- Bruk egendefinert takrennebredde: JA
- Kolonneavstand: 1
- Maksimal bredde: 100 %
- Maksimal bredde: 100 %
Ser
La oss nå sørge for at kolonnene vises ved siden av hverandre på mindre skjermer ved å legge til denne linjen med CSS-kode i hovedradelementet.
01
display: flex;
Legg til bildemodul i kolonne 1
Last ned logo
Når du har fullført radinnstillingene, er det på tide å begynne å legge til moduler. Legg til en bildemodul i kolonne 1 og last opp logoen din.
justering
Gå til kategorien Stil og juster bildet til venstre.
dimensjonering
Endre også bredden på modulen.
avstanden
Legg også til egendefinerte marginverdier.
Legg til sporingsmodul for sosiale medier i kolonne 2
Legg til sosiale nettverk
La oss gå til den andre kolonnen. Der vil vi trenge en sporingsmodul for sosiale medier. Legg til de sosiale nettverkene du ønsker. Du kan legge til så mange sosiale medier du vil.
Bakgrunnsfarge for sosiale nettverk
Deretter åpner du hvert sosiale nettverk individuelt og endrer bakgrunnsfargen til en helt gjennomsiktig farge.
- Bakgrunnsfarge: rgba (0,0,0,0)
justering
Gå tilbake til de vanlige modulinnstillingene og endre den fullstendige justeringen av modulen.
icon
Endre også ikoninnstillingene.
- Ikonfarge: #FFFFFF
- Bruk egendefinert ikonstørrelse: Ja
- Ikonskriftstørrelse: 16px (PC og nettbrett), 12px (telefon)
avstanden
Legg til en toppmargin.
Legg til knappemodulen i kolonne 3
Flytt til den tredje kolonnen og legg til en knappemodul som inneholder en tekst du ønsker.
justering
Endre justeringen av knappen i Stil-fanen.
Knappeinnstillinger
Tilpass knappeinnstillingene som følger:
- Bruk egendefinerte stiler for knappen: Ja
- Knappetekststørrelse: 12px (skrivebord), 10px (nettbrett), 8px (telefon)
- Tekstfarge på knapp: #ffffff
- Bakgrunnsknapp: #ffae25
- Knappekantbredde: 0 piksler
- Kantradiusknapp: 0 piksler
- Bokstavavstand mellom knapper: 5 px (stasjonær PC), 3 px (nettbrett og telefon)
- Fontknapp: Åpne Ingen
- Myk lysknapp: fet tekst
- Kopier knappstil: TT
avstanden
Tilpass marginverdier.
Dediker en ny linje til menylinjen
Når du har fylt ut linjen som er dedikert til den globale overskriften, kan du legge til en annen linje like nedenfor.
Linjeinnstillinger
dimensjonering
Uten å legge til noen moduler ennå, åpne linjeinnstillingene og endre størrelsesinnstillingene i Stil-fanen.
avstanden
Fjern deretter alle bunn- og toppmarger.
Legg til en menymodul i kolonnen
Velg Meny
Deretter legger du til en menymodul i kolonnen og velger menyen du opprettet i den første delen av denne opplæringen.
Disposisjon
Bytt til kategorien Stil og endre layoutinnstillingene som følger:
Tilkoblinger
Endre også fargen på den aktive lenken i Stil-fanen.
- Aktiv lenkefarge: #ffae25
Nedtrekksmeny
Gjør det samme for fargen på rullegardinmenyen i innstillingene for rullegardinmenyen.
- Farge på rullegardinmenyen: #ffae25
icon
- Hamburgermenyikonfarge: #ffae25
Menytekst
Med menytekstinnstillinger.
- Menyskrift: Prata
- Menytekstfarge: #000000
Få overskrift og menylinje på toppen
Åpne seksjonsinnstillinger
Når du har fullført den andre linjen, er alt du trenger å gjøre å sørge for at delen forblir øverst på sidene og innleggene våre. For å gjøre dette åpner vi seksjonsinnstillingene igjen.
Legg til tilpasset CSS til hovedelementet
Deretter går vi til den avanserte fanen, og vi vil legge til noen få linjer med CSS-kode til hovedelementet i seksjonen.
01
position: fixed;02
top: 0;03
left: 0;04
right: 0;
Lagre globale topptekst- og temabyggeralternativer
Når du har fullført hele det globale topptekstdesignet, må du huske å lagre designet før du går ut av maloppsettet. Når du er ute av maloppsettet, lagrer du hele endringene i temabyggeren, og du er ferdig!
undersøkelsen
Nå som vi har gått gjennom alle trinnene, la oss ta en siste titt på resultatet.
konklusjonen
I denne artikkelen viste vi deg hvordan du lager en tilpasset global header med Divis nye temabygger. Denne opplæringen viser hvor enkelt det er å lage vakre overskrifter og bruke dem på hele nettstedet Web eller spesifikke tilpassede innleggstyper.
Vi håper det hjelper deg med å tilpasse nettstedet ditt med Theme Builder.
Hvis du har spørsmål eller forslag, vennligst legg igjen en kommentar i kommentarfeltet nedenfor.
...
