Når du lager din globale overskrift, er det mange ting du må vurdere. Elementene du legger inn i overskriften skal hjelpe deg Besøkende for å navigere enkelt. For å redusere tiden folk bruker på å surfe, velger mange webdesignere en fast topptekst, noe som tillater det Besøkende for å umiddelbart få tilgang til andre sider eller publikasjoner. Dette er veldig nyttig, men når du lager en fast overskrift, vil mye av høyden på visningsporten din Besøkende er opptatt, noe som tillater mindre enn innhold å vise med en gang. Hvis du ikke er klar til å ofre dette, vet at du ikke trenger det. Du kan høste fordelene av en fast overskrift ved å la den generelle overskriften vise når de besøkende ruller opp og skjuler den når de ruller nedover. I dag vil vi veilede deg gjennom å skjule og avsløre den globale overskriften din ved å bruke Divis Theme Builder.

undersøkelsen

Før vi dykker inn i opplæringen, la oss ta en titt på resultatet på forskjellige skjermstørrelser.

1. Gå til Divi Theme Builder og legg til en ny mal

Begynn med å gå til Divi Theme Builder.

Begynn å lage en global topptekst

Der klikker du på "Legg til en global header" og velger "Create a global header".

2. Begynn å lage en global topptekst

Seksjonsinnstillinger

Bakgrunnsfarge

Inne i malredigereren vil du legge merke til en seksjon. Åpne denne delen og endre bakgrunnsfargen.

• Bakgrunnsfarge: #ffffff

dimensjonering

Gå til designfanen og tilordne en bredde på 100% til din neste seksjon.

• Bredde: 100%

avstanden

Legg også til tilpasset øvre og nedre polstring.

• Øvre polstring: 2vw
• Bunnpolstring: 2vw

Skyggekasse

Vi vil også bruke en subtil nyanse på seksjonen vår.

• Box Shadow Blur Styrke: 50px
• Skyggefarge: rgba (0,0,0,0,08)

CSS ID

Senere i denne opplæringen trenger vi litt tilpasset kode for at rulleeffekten skal oppstå. For å forberede deg på dette legger vi til en CSS-ID i seksjonen.

• CSS ID: global topptekstseksjon

Hovedelement

Vi vil også gjøre seksjonen til en fast overskrift ved å legge til to linjer CSS-kode til hovedseksjonselementet.

position: fixed;top: 0;

Z-indeks

Nå for å sikre at delen vår vises øverst på siden eller innhold av innlegget vil vi også øke z-indeksen i synlighetsinnstillingene.

• Z-indeks: 99999

Legg til en ny linje

Kolonne struktur

Når du er ferdig med alle seksjonsparametrene, fortsett å legge til en ny linje til seksjonen ved å bruke følgende kolonnestruktur:

dimensjonering

Uten å legge til en modul ennå, åpne radinnstillingene og la raden fylle hele bredden på skjermen.

• Bruk en tilpasset rennebredde: Ja
• Rennesteinsbredde: 1
• Utjevne kolonnehøyder: Ja
• Bredde: 100%
• Maks bredde: 100%

avstanden

Fjern også all standard øvre og nedre polstring.

• Øvre polstring: 0px
• Bunnpolstring: 0px

Hovedelement

sentrere den innhold av kolonnen og la kolonnene forbli side ved side på mindre skjermstørrelser ved å legge til to linjer med CSS-kode til hovedelementet i raden.

display: flex;align-items: center;

Legg til sporingsmodulen for sosiale medier i kolonne 2

Legg til sosiale nettverk

Det er på tide å legge til moduler, startende med en sporingsmodul for sosiale medier i kolonne 1. Legg til de sosiale nettverkene du vil vise.

Tilbakestill individuelle sosiale mediestiler

Fortsett med å tilbakestille stilene til hvert sosiale nettverk til et individuelt nivå.

Legg til et individuelt sosialt nettverksrom

Du må også åpne innstillingene for hvert sosiale nettverk individuelt og legge til bunnpolstring i avstandsinnstillingene.

• Bunnpolstring: 0.5vw

justering

Når du har lagt til den nederste polstringen til hvert sosiale nettverk, kan du gå tilbake til modets generelle innstillinger. Bytt til designfanen og endre moduljusteringen.

• Justering av modulen: senter

Standard ikoninnstillinger

Endre også ikonfargen i ikoninnstillingene.

• Ikonfarge: # 000000

Hold ikonet for musepekeren

Og endre fargen på sveveikonet.

• Ikonfarge: # c2ab92

grensen

Fullfør modulparametrene ved å legge til en nedre kant i grenseparametrene.

• Nederste kantbredde: 1px
• Nedre kantfarge: # 000000

Legg til en menymodul i kolonne 2

Velg menyen

La oss gå videre til neste kolonne! Legg til en menymodul og velg en meny du ønsker.

Last ned logo

Last deretter opp en logo i modulen.

Fjern bakgrunnsfarge

Og fjern bakgrunnsfargen.

Disposisjon

Bytt deretter til kategorien Design og sørg for at følgende innstillinger gjelder for oppsettet:

• Stil: Sentrert
• Retning på rullegardinmenyen: ned

Standard menytekst

Fortsett med å endre menytekstinnstillingene som følger:

• Aktiv lenkefarge: # c2ab92
• Meny font: Cormorant Garamond
• Tekstfarge: # 000000
• Menytekststørrelse: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)

Hold menytekst

Endre menyteksten på svevet.

• Menytekstfarge: # c2ab92

Nedtrekksmeny

Endre deretter fargen på rullegardinmenyen i rullegardinmenyinnstillingene.

• Farge på linjen i rullegardinmenyen: # 000000

ikoner

Vi endrer også fargen på hamburger-menyikonet i ikoninnstillingene.

• Hamburger-menyikonfarge: # 000000

dimensjonering

Fortsett ved å endre maksimal logobredde på forskjellige skjermstørrelser i størrelsesinnstillingene.

• Maksimal logobredde: 5vw (skrivebord), 10vw (nettbrett), 13vw (telefon)

CSS-koblingsmeny

Og fullfør modulinnstillingene ved å legge til to linjer med CSS-kode i modulmenykoblingen i den avanserte fanen.

padding-bottom: 1vw;border-bottom: 1px solid #000;

Legg til en tekstmodul i 3-kolonnen

Legg til en kopi

La oss gå videre til den siste modulen! Der er den eneste modulen vi trenger, en tekstmodul.

Legg til en kobling

Denne modulen vil fungere som en CTA. Legg til en lenke du ønsker.

• Modullenke URL: #

Standard tekstinnstillinger

Bytt til moduldesignfanen og endre tekstinnstillingene deretter:

• Tekst font: Cormorant Garamond
• Tekstfarge: # 000000
• Tekststørrelse: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)

Hold tekstinnstillinger

Endre fargen på teksten på svevet.

• Tekstfarge: # c2ab92

dimensjonering

Fortsett ved å endre parametere for modulstørrelse på forskjellige skjermstørrelser.

• Bredde: 12vw (stasjonær), 18vw (nettbrett), 22vw (telefon)
• Justering av modulen: senter

avstanden

Og legg til litt bunnpolstring i avstandsinnstillingene.

• Bunnpolstring: 0.5vw

grensen

Fullfør modulparametrene ved å legge til en nedre kant.

• Nederste kantbredde: 1px
• Nedre kantfarge: # 000000

Legg til en kodemodul i 2-kolonnen

Sett inn JQuery og CSS-kode

Når du har stylet alle modene på rad, er det på tide å få avslørings- / skjuleffekten til å skje. For å gjøre dette må vi legge til tilpasset kode i en kodemodul som vi vil plassere i kolonne 2. Denne koden vil fungere i alle seksjoner du legger til, uansett hvordan du designer toppteksten eller modulene. du bruker, bare sørg for at du har lagt til CSS-ID-en i seksjonen din. Plasser JQuery-kode mellom skriptekoder og CSS-kode mellom stilkoder som vist på utskriftsskjermen nedenfor.

jQuery(function($){ var topPosition = $(window).scrollTop(); $(window).scroll(function() {var scrollMovement = $(window).scrollTop();if(scrollMovement > topPosition) {$('#global-header-section').slideUp();} else {$('#global-header-section').slideDown();}topPosition = scrollMovement;}); });

main-content{margin-top: 7vw;}

3. Lagre generatorendringene og vis resultatet

Når du har fullført den globale overskriften, lagre alle endringer og se resultatet på din nettstedet Web!

undersøkelsen

Nå som vi har gått gjennom alle trinnene, la oss ta en endelig titt på hvordan det ser ut på forskjellige skjermstørrelser.

avslutt~~POS=TRUNC tanker

I denne artikkelen har vi vist deg hvordan du får Global Header til å vises når du ruller opp og skjuler det når du ruller nedover. Dette er en populær og effektiv måte å hjelpe de besøkende på å navigere enkelt uten å ta opp en del av vinduhøyden. Du kan også laste ned JSON-filen gratis! Hvis du har spørsmål eller forslag, er du velkommen til å legge igjen en kommentar i kommentarfeltet nedenfor.