När du skapar din globala rubrik finns det många saker du behöver tänka på. Elementen du lägger i din header bör hjälpa dig besökare för att enkelt navigera. För att minska den tid människor spenderar på att surfa väljer många webbdesigners en fast topprubrik, vilket tillåter besökare för att omedelbart komma åt andra sidor eller publikationer. Detta är verkligen praktiskt, men när du skapar en fast rubrik, mycket av höjden på din visningsport besökare är upptagen, vilket tillåter mindre än innehåll att visa på en gång. Om du inte är redo att göra denna uppoffring, vet att du inte behöver göra det. Du kan skörda fördelarna med en fast rubrik genom att låta din övergripande rubrik avslöja när dina besökare rullar uppåt och dölja den när de rullar nedåt. Idag guidar vi dig genom att dölja och avslöja din globala rubrik med hjälp av Divis Theme Builder.

undersökningen

Innan vi dyker in i handledningen, låt oss ta en titt på resultatet på olika skärmstorlekar.

Animationsmenyn avslöjade divi

1. Gå till Divi Theme Builder och lägg till en ny mall

Börja med att gå till Divi Theme Builder.

Divi temabyggare

Börja skapa en global rubrik

Klicka där på "Lägg till en global rubrik" och välj "Skapa en global rubrik".

Divi builder globala rubrik

2. Börja skapa en global rubrik

Avsnitt inställningar

Bakgrundsfärg

Inuti mallredigeraren kommer du att märka ett avsnitt. Öppna detta avsnitt och ändra dess bakgrundsfärg.

  • Bakgrundsfärg: #ffffff
Inställning av Divi-session

dimensionering

Gå till designfliken och tilldela en bredd på 100% till ditt nästa avsnitt.

  • Bredd: 100%
Konfigurera bredd

avstånd

Lägg också till anpassad övre och undre stoppning.

  • Övre stoppning: 2vw
  • Botten stoppning: 2vw
Inställningar

Skugga låda

Vi kommer också att applicera en subtil nyans på vårt avsnitt.

  • Box Shadow suddighetsstyrka: 50px
  • Skuggfärg: rgba (0,0,0,0,08)
Ombre divi-modul

CSS ID

Senare i denna handledning behöver vi lite anpassad kod för att rullningseffekten ska uppstå. För att förbereda oss för detta lägger vi till ett CSS-ID i avsnittet.

  • CSS ID: global rubriksektion
Lägg till css divi-klasser

Huvudelement

Vi gör också avsnittet till en fast rubrik genom att lägga till två rader CSS-kod i huvudsektionselementet.

position: fixed;top: 0;

Divi sectoin-inställningar

Z-index

Nu för att se till att vår sektion visas högst upp på sidan eller innehåll av inlägget kommer vi också att öka z-indexet i synlighetsinställningarna.

  • Z-index: 99999
Zindex-konfiguration

Lägg till en ny rad

Kolumnstruktur

När du är klar med alla sektionsparametrarna fortsätter du att lägga till en ny rad i avsnittet med följande kolumnstruktur:

Välj en layout

dimensionering

Utan att lägga till en modul ännu, öppna radinställningarna och låt raden fylla hela skärmens bredd.

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1
  • Utjämna kolumnhöjder: Ja
  • Bredd: 100%
  • Max bredd: 100%
Konfiguration av dellinjemodulen

avstånd

Ta också bort all standard övre och nedre stoppning.

  • Övre stoppning: 0px
  • Botten stoppning: 0px
avslöja den globala rubriken

Huvudelement

centrera den innehåll i kolumnen och låt kolumnerna förbli sida vid sida på mindre skärmstorlekar genom att lägga till två rader med CSS-kod till radens huvudelement.

display: flex;align-items: center;

Lägg till en kod css element huvud divi

Lägg till spårningsmodulen för sociala medier i kolumn 2

Lägg till sociala nätverk

Det är dags att lägga till moduler, med början med en spårningsmodul för sociala medier i kolumn 1. Lägg till de sociala nätverk du vill visa.

Lägg till sociala medier-knappen

Återställ enskilda sociala mediestilar

Fortsätt genom att återställa stilarna i varje socialt nätverk till en individuell nivå.

Återställ stilen för en divi-modul

Lägg till ett individuellt socialt nätverksutrymme

Du måste också öppna inställningarna för varje socialt nätverk individuellt och lägga till nedre vaddering i avståndsinställningarna.

  • Botten stoppning: 0.5vw
Divi-modulavståndskonfiguration

uppriktning

När du har lagt till den nedre stoppningen individuellt i varje socialt nätverk, gå tillbaka till modets allmänna inställningar. Byt till designfliken och ändra modulinriktningen.

  • Justering av modulen: centrum
Konfigurationsmodul för Divi-justering

Standardikoninställningar

Ändra också ikonfärgen i ikoninställningarna.

  • Ikonfärg: # 000000
Ändra färg divi

Håll muspekaren inställningar

Och ändra färgen på svävarikonen.

  • Ikonfärg: # c2ab92
Ändring av ikonen på svävaren

gräns

Slutför modulparametrarna genom att lägga till en nedre kant i gränsparametrarna.

  • Nedre kantbredd: 1 st
  • Nedre kantfärg: # 000000
Konfigurera divi-gränser

Lägg till en menymodul i kolumn 2

Välj menyn

Låt oss gå vidare till nästa kolumn! Lägg till en menymodul och välj en meny efter eget val.

Definiera innehållet i divi-menymodulen

Ladda ner logotyp

Ladda sedan upp en logotyp i modulen.

Välj en divi-formlogotyp

Ta bort bakgrundsfärg

Och ta bort bakgrundsfärgen.

Ta bort bakgrundsfärg div

Disposition

Byt sedan till fliken Design och se till att följande inställningar gäller för layouten:

  • Stil: centrerad
  • Riktning på rullgardinsmenyn: ned
Divi-menylayout

Standardmenytekst

Fortsätt genom att ändra menytextinställningarna enligt följande:

  • Aktiv länkfärg: # c2ab92
  • Menyteckensnitt: Cormorant Garamond
  • Textfärg: # 000000
  • Menytekststorlek: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
Konfigurationslänkar meny modul divi

Håll menytekst

Ändra menyteksten på muspekaren.

  • Färg på menyn: # c2ab92
Divi-menyns färginställning

Rullgardinsmenyn

Ändra sedan färgen på rullgardinsmenyn i rullgardinsmenyn.

  • Färg på raden i rullgardinsmenyn: # 000000
Divi-menymodulens färgkonfiguration

ikoner

Vi ändrar också färgen på hamburgarens menyikon i ikoninställningarna.

  • Hamburger-menyns ikonfärg: # 000000
Divi-menyikonkonfiguration

dimensionering

Fortsätt genom att ändra den maximala logotypbredden på olika skärmstorlekar i storleksinställningarna.

  • Maximal logobredd: 5vw (skrivbord), 10vw (surfplatta), 13vw (telefon)
Divi-menyens breddkonfiguration

CSS-länkmeny

Och slutför modulinställningarna genom att lägga till två rader CSS-kod till modulmenylänken på den avancerade fliken.

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

Konfiguration css meny divi

Lägg till en textmodul i 3-kolumnen

Lägg till en kopia

Låt oss gå vidare till den sista modulen! Där är den enda modulen vi behöver en textmodul.

Lägg till en divi-textmodul

Lägg till en länk

Denna modul kommer att fungera som en CTA. Lägg till en länk efter eget val.

  • Modullänk URL: #
Divi-textmodulkonfiguration

Standardinställningar för text

Byt till fliken moduldesign och ändra textinställningarna i enlighet med detta:

  • Textstilsort: Cormorant Garamond
  • Textfärg: # 000000
  • Textstorlek: 1vw (skrivbord), 2vw (surfplatta), 3vw (telefon)
Divi textmodul teckensnittsfärgjustering

Hover textinställningar

Ändra färgen på texten på muspekaren.

  • Textfärg: # c2ab92
Divi-modulens textjustering

dimensionering

Fortsätt genom att ändra parametrarna för modulstorlek på olika skärmstorlekar.

  • Bredd: 12vw (skrivbord), 18vw (surfplatta), 22vw (telefon)
  • Justering av modulen: centrum
Storleksjustering av Divi-textmodul

avstånd

Och lägg till lite nedre vaddering i avståndsinställningarna.

  • Botten stoppning: 0.5vw
Divi-modulavståndsjustering

gräns

Slutför modulparametrarna genom att lägga till en nedre kant.

  • Nedre kantbredd: 1 st
  • Nedre kantfärg: # 000000
Divi textmodul kantjustering

Lägg till en kodmodul i 2-kolumnen

Sätt in JQuery och CSS-kod

När du väl har utformat alla moderna i raden är det dags att få avslöjande / döljande effekt att hända. För att göra detta måste vi lägga till anpassad kod till en kodmodul som vi kommer att placera i kolumn 2. Den här koden fungerar i alla avsnitt du lägger till oavsett hur du utformar din rubrik eller modulerna. som du använder, se bara till att du har lagt till CSS-ID i ditt avsnitt. Placera JQuery-kod mellan skripttaggar och CSS-kod mellan stiltaggar som visas på utskriftsskärmen nedan.

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;}

Lägg till js-kod jquery wordpress divi

3. Spara generatorändringarna och visa resultatet

När du har slutfört den globala rubriken, spara alla ändringar och se resultatet på din webbplats!

Slutlig design av divi-menymodulen
Divi builder globala rubrik

undersökningen

Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.

Fullständig modulöversikt

Avslutande tankar

I den här artikeln har vi visat dig hur du får ditt globala huvud att visas när du rullar upp och döljer det när du rullar ner. Detta är ett populärt och effektivt sätt att hjälpa dina besökare att navigera enkelt utan att ta upp en del av deras fönsterhöjd. Du kan också ladda ner JSON-filen gratis! Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.