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.
1. Gå till Divi Theme Builder och lägg till en ny mall
Börja med att gå till Divi Theme Builder.
Börja skapa en global rubrik
Klicka där på "Lägg till en global rubrik" och välj "Skapa en global 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
dimensionering
Gå till designfliken och tilldela en bredd på 100% till ditt nästa avsnitt.
- Bredd: 100%
avstånd
Lägg också till anpassad övre och undre stoppning.
- Övre stoppning: 2vw
- Botten stoppning: 2vw
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)
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
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;
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
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:
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%
avstånd
Ta också bort all standard övre och nedre stoppning.
- Övre stoppning: 0px
- Botten stoppning: 0px
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 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.
Återställ enskilda sociala mediestilar
Fortsätt genom att återställa stilarna i varje socialt nätverk till en individuell nivå.
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
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
Standardikoninställningar
Ändra också ikonfärgen i ikoninställningarna.
- Ikonfärg: # 000000
Håll muspekaren inställningar
Och ändra färgen på svävarikonen.
- Ikonfärg: # c2ab92
gräns
Slutför modulparametrarna genom att lägga till en nedre kant i gränsparametrarna.
- Nedre kantbredd: 1 st
- Nedre kantfärg: # 000000
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.
Ladda ner logotyp
Ladda sedan upp en logotyp i modulen.
Ta bort bakgrundsfärg
Och ta bort bakgrundsfärgen.
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
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)
Håll menytekst
Ändra menyteksten på muspekaren.
- Färg på menyn: # c2ab92
Rullgardinsmenyn
Ändra sedan färgen på rullgardinsmenyn i rullgardinsmenyn.
- Färg på raden i rullgardinsmenyn: # 000000
ikoner
Vi ändrar också färgen på hamburgarens menyikon i ikoninställningarna.
- Hamburger-menyns ikonfärg: # 000000
dimensionering
Fortsätt genom att ändra den maximala logotypbredden på olika skärmstorlekar i storleksinställningarna.
- Maximal logobredd: 5vw (skrivbord), 10vw (surfplatta), 13vw (telefon)
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;
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 länk
Denna modul kommer att fungera som en CTA. Lägg till en länk efter eget val.
- Modullänk URL: #
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)
Hover textinställningar
Ändra färgen på texten på muspekaren.
- Textfärg: # c2ab92
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
avstånd
Och lägg till lite nedre vaddering i avståndsinställningarna.
- Botten stoppning: 0.5vw
gräns
Slutför modulparametrarna genom att lägga till en nedre kant.
- Nedre kantbredd: 1 st
- Nedre kantfärg: # 000000
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;}
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!
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.
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.
OK! Grattis till jobbet! Ensam utan en sådan här stepper är svårt för en nybörjare. Jag var bara nyfiken på om du i samma process kan lägga till en konfiguration så att menyn inte försvinner. Snäpp helt enkelt när du bläddrar igenom sidorna