Når du opretter din globale header, er der mange ting, du skal overveje. De elementer, du sætter i din header, skal hjælpe din besøgende nemt at navigere. For at reducere den tid, folk bruger på at browse, vælger mange webdesignere en fast topheader, hvilket tillader besøgende for straks at få adgang til andre sider eller publikationer. Dette er virkelig praktisk, men når du opretter en fast header, er meget af højden på din viewport besøgende er optaget, hvilket tillader mindre end indhold at vise på én gang. Hvis du ikke er klar til at give dette offer, skal du vide, at du ikke behøver at gøre det. Du kan høste fordelene ved en fast overskrift ved at lade din overordnede overskrift afsløre, hvornår dine besøgende ruller op og skjule det, når de ruller ned. I dag guider vi dig gennem at skjule og afsløre din globale header ved hjælp af Divi's Theme Builder.

undersøgelse

Før vi dykker ned i vejledningen, lad os se på resultatet på forskellige skærmstørrelser.

1. Gå til Divi Theme Builder og tilføj en ny skabelon

Start med at gå til Divi Theme Builder.

Begynd at oprette en global header

Der skal du klikke på "Tilføj global header" og vælge "Create Global Header".

2. Begynd at oprette en global header

Sektionsindstillinger

Baggrundsfarve

Inde i skabeloneditoren vil du bemærke en sektion. Åbn denne sektion og skift dens baggrundsfarve.

• Baggrundsfarve: #ffffff

dimensionering

Skift til designfanen, og indstil din næste sektion til 100 % bredde.

• Bredde: 100%

afstand

Tilføj også tilpasset top- og bundpolstring.

• Øvre polstring: 2vw
• Bundpolstring: 2vw

Skyggeæske

Vi vil også anvende en subtil skygge på vores sektion.

• Box Shadow Blurstyrke: 50px
• Skygge farve: rgba (0,0,0,0,08)

CSS ID

Senere i denne tutorial skal vi bruge noget tilpasset kode for at få scroll-effekten til at ske. For at forberede os på dette tilføjer vi et CSS ID til sektionen.

• CSS ID: Global Header Section

Hovedelement

Vi vil også gøre sektionen til en fast overskrift ved at tilføje to linjer CSS-kode til sektionens hovedelement.

position: fixed;top: 0;

Z-indeks

Nu for at sikre, at vores sektion vises øverst på siden eller indhold af indlægget, vil vi også øge z-indekset i synlighedsindstillingerne.

• Z-indeks: 99999

Tilføj en ny linje

Kolonne struktur

Når du har fuldført alle sektionsindstillinger, skal du fortsætte ved at tilføje en ny række til sektionen ved hjælp af følgende kolonnestruktur:

dimensionering

Uden at tilføje et modul endnu, åbn linjeindstillingerne og lad linjen fylde hele skærmens bredde.

• Brug en brugerdefineret tagrendebredde: Ja
• Tagrendebredde: 1
• Udligne kolonnehøjder: Ja
• Bredde: 100%
• Maks bredde: 100%

afstand

Fjern også al standard top- og bundpolstring.

• Øvre polstring: 0px
• Bundpolstring: 0px

Hovedelement

centrere det indhold af kolonnen og lad kolonnerne forblive side om side på mindre skærmstørrelser ved at tilføje to linjer CSS-kode til rækkens hovedelement.

display: flex;align-items: center;

Føj sporingsmodulet til sociale medier til kolonne 2

Tilføj sociale netværk

Det er tid til at tilføje moduler, startende med et sporingsmodul til sociale medier i kolonne 1. Tilføj de sociale netværk, du vil vise.

Nulstil individuelle sociale mediestile

Fortsæt ved at nulstille stile for hvert socialt netværk på individuelt niveau.

Tilføj et individuelt socialt netværksrum

Du skal også åbne indstillingerne for hvert socialt netværk individuelt og tilføje bundpolstring i afstandsindstillingerne.

• Bundpolstring: 0.5vw

tilpasning

Når du har tilføjet bundpolstringen individuelt til hvert socialt netværk, skal du vende tilbage til dit moduls generelle indstillinger. Skift til designfanen og modificer modulets justering.

• Justering af modulet: center

Standardikonindstillinger

Skift også ikonets farve i ikonindstillinger.

• Ikonfarve: # 000000

Hold musen over ikonindstillinger

Og skift ikonfarven, når du svæver.

• Ikonfarve: #c2ab92

Border

Fuldfør modulindstillingerne ved at tilføje en bundramme i kantindstillingerne.

• Nederste kantbredde: 1 stk
• Nederste kantfarve: # 000000

Føj et menumodul til kolonne 2

Vælg menuen

Lad os gå til næste kolonne! Tilføj et menumodul og vælg en menu efter eget valg.

Download logo

Upload derefter et logo i modulet.

Fjern baggrundsfarve

Og fjern baggrundsfarven.

Disposition

Skift derefter til designfanen og sørg for, at følgende indstillinger gælder for layoutet:

• Stil: Centreret
• Retning af rullemenuen: ned

Standard menutekst

Fortsæt ved at ændre menutekstindstillingerne som følger:

• Aktivt link farve: #c2ab92
• Menufont: Skarv Garamond
• Tekstfarve: # 000000
• Menustekststørrelse: 1vw (desktop), 2vw (tablet), 3vw (telefon)

Hover menutekst

Rediger menuteksten, når du svæver.

• Menutekstfarve: #c2ab92

Drop-down menu

Skift derefter farven på rullemenulinjen i rullemenuindstillingerne.

• Farve på rullemenuen: #000000

ikoner

Vi ændrer også hamburgermenuens ikonfarve i ikonindstillingerne.

• Hamburger-menuikonfarve: # 000000

dimensionering

Fortsæt ved at ændre den maksimale logobredde på forskellige skærmstørrelser i størrelsesindstillingerne.

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

Link CSS-menu

Og fuldfør modulindstillingerne ved at tilføje to linjer CSS-kode til modulmenulinket på fanen avanceret.

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

Føj et tekstmodul til 3-kolonnen

Tilføj en kopi

Lad os gå videre til det sidste modul! Der er det eneste modul, vi har brug for, et tekstmodul.

Tilføj et link

Dette modul vil fungere som en CTA. Tilføj et link efter eget valg.

• Modullink URL: #

Standard tekstindstillinger

Skift til moduldesignfanen og rediger tekstindstillingerne i overensstemmelse hermed:

• Tekstskrifttype: Cormorant Garamond
• Tekstfarve: # 000000
• Tekststørrelse: 1vw (desktop), 2vw (tablet), 3vw (telefon)

Hold markørindstillinger

Skift farven på tekst, når du svæver.

• Tekstfarve: #c2ab92

dimensionering

Fortsæt ved at ændre indstillingerne for modulstørrelse på forskellige skærmstørrelser.

• Bredde: 12vw (desktop), 18vw (tablet), 22vw (telefon)
• Justering af modulet: center

afstand

Og tilføj noget bundpolstring i afstandsindstillingerne.

• Bundpolstring: 0.5vw

Border

Fuldfør modulparametrene ved at tilføje en bundramme.

• Nederste kantbredde: 1 stk
• Nederste kantfarve: # 000000

Føj et kodemodul til 2-kolonnen

Indsæt JQuery og CSS-kode

Når du har stylet alle modulerne i rækken, er det tid til at få afsløre/skjul effekten til at ske. For at gøre dette bliver vi nødt til at tilføje noget brugerdefineret kode til et kodemodul, som vi placerer i kolonne 2. Denne kode fungerer på enhver sektion, du tilføjer, uanset hvordan du designer din header eller de moduler, du bruger, bare sørg for du har tilføjet CSS-id'et til din sektion. Placer JQuery-kode mellem script-tags og CSS-kode mellem stiltags som vist på printskærmen 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. Gem generatorændringer og se resultatet

Når du har gennemført den globale overskrift, skal du gemme alle ændringer og se resultatet på din Websted!

undersøgelse

Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.

endelige tanker

I denne artikel viste vi dig, hvordan du får din globale overskrift til at vises, når du ruller op, og skjuler den, når du ruller ned. Dette er en populær og effektiv måde at hjælpe dine besøgende med at navigere let uden at optage nogen af ​​deres vindueshøjde. Du var også i stand til at downloade JSON-filen gratis! Hvis du har spørgsmål eller forslag, er du velkommen til at skrive en kommentar i kommentarfeltet nedenfor.