Så här använder du klibbig rubrik och rullningseffekter med Elementor

En rubrik är i allmänhet det första en person ser när de besöker din webbplats, och den fungerar som grunden för hur de utforskar den.

Oavsett om du har en e -handelswebbplats, en personlig webbplats, en webbplats för utbildning, ett communityforum eller en webbplats för media, är rubriken det som gör det enkelt att bläddra och roligt att använda.

Klibbiga rubriker blir allt populärare bland webbdesigners att organisera och strukturera en webbplats för förbättrad användarnavigering.

Vi visar dig hur du gör din klibbiga rubrik med Elementor i den här självstudien.

Klibbiga rubriker tillåter användare att se sidans rubrik och menysektion oavsett hur långt ner de rullar.

• Steg 1: Gör en meny
• Steg 2: Skapa din rubrik i Elementor
• Steg 3: Använd Elementor för att skapa en rubrikmall
• STEG 4: Hur du gör din Elementor Header klibbig
• Steg 5: anpassa vår CSS
• Slutsats

Steg 1: Gör en meny

För att lägga till en klibbig rubrik på din webbplats, gå till wp-admin > Utseende > Menyer och skapa en huvudmeny. Skriv avsnittet du vill visa i rubriken.

Steg 2: Skapa din rubrik i Elementor

Gå till Elementor Templates > Theme Builder när du är klar med att konstruera huvudmenyn. Välj rubrikområdet på sidan för temabyggaren och klicka på " Lägg till ny rubrik ."

Ge rubrikmallen ett namn och klicka på " Skapa mall " på popup-skärmen.

Du kommer sedan till Elementor -redigeringssidan. Du kan antingen använda en av de färdiga sidhuvudmallarna eller designa din egen från början.

Vi kommer att börja om från början med vårt Elementor -klibbiga huvud i den här självstudien.

Du kan se olika sidhuvudwidgets i Elementor -redigeraren innan vi börjar designa en mall. Vi kan snabbt och enkelt designa en rubrik med hjälp av dessa avsnitt.

Steg 3: Använd Elementor för att skapa en rubrikmall

Skapa en layout med två kolumner. Se till att avsnittets innehållsbredd är inställd på " Boxed ."

I inställningarna för innehållsbredd i Elementor Edit-sektionen, ställ in den första kolumnbredden till 20 % under " Redigera "-kolumnen.

Placera din webbplats webbplatslogotyp i den första kolumnen och justera den till vänster.

Lägg till en navigeringsmeny i den andra kolumnen och välj huvudmenyn du byggde i steg 1. Justera navigeringsmenyn till höger.

Vi kommer att hålla rubriken enkel för den här självstudien. Du kan göra din rubrik mer detaljerad genom att lägga till en bakgrundsfärg, sväva animeringseffekter, knappar och andra element.

STEG 4: Hur du gör din Elementor Header klibbig

Nu när vi har skapat vår grundläggande Elementor -rubrik är det dags att göra den till en Sticky -rubrik.

För att göra det, gå till sektionen Redigera (sektionen Hela rubriken). Välj Avancerat > Rörelseeffekter från rullgardinsmenyn.

Välj " Sticky to the Top " under rörelseeffekter och sedan " devices " där du vill att den klibbiga rubriken ska visas.

En klibbig rubrik är nästan alltid oönskad på surfplattor, och det är nästan alltid oönskat även på mobila skärmar. Som ett resultat klickar du på "x" bredvid båda alternativen under Sticky On, och lämnar bara "Desktop" markerat.

När du är nöjd med ditt arbete, klicka på " Publicera "; detta kommer att aktivera den klibbiga rubriken, men den kommer inte att ersätta din nuvarande temarubrik just nu.

Elementor uppmanar dig att lägga till ett villkor för rubriken efter att du har publicerat det. Du kan visa rubriken var du vill på webbplatsen genom att lägga till villkor.

Vi ville att denna rubrik skulle visas över hela webbplatsen, utan att 404 -sidan utelämnades. Som ett resultat inkluderade vi hela webbplatsen i valet medan vi utelämnade 404 -sidan.

Som du kan se är det enkelt och smärtfritt att använda Elementor för att skapa din personliga Sticky -rubrik!

Få din Elementor -klibbig rubrik att se mycket bättre ut Med hjälp av anpassad CSS -elementor kan du anpassa en klibbig rubrik genom att lägga till en CSS -klass för att göra den snyggare.

Du kan anpassa den klibbiga rubrikens höjd, bakgrundsfärg, övergång och klibbiga effekter här.

Återgå till redigeringsområdet för att göra din klibbiga rubrik mer elegant (hela rubriksektionen). Välj Avancerat > Rörelseeffekter från rullgardinsmenyn.

Ställ in " Effects Offset " på 100 i detta fall. När en besökare använder din webbplats är detta rullningsavståndet där rullningseffekten sker.

Ställ in rörelseförskjutningen till 100.

Tänk på att alternativen Offset Effects endast fungerar om Custom CSS används. Om du inte lägger till någon egen CSS kan du därför hoppa över det sista alternativet.

Innan du publicerar den sista klibbiga rubriken kan du lägga till villkor till den sista klibbiga rubriken. Ett amp villkor är var du vill att den klibbiga rubriken ska visas. Som ett amp kan du välja kriterierna " hela webbplatsen ."

Du vill nu inkludera lite anpassad CSS på din webbplats. Anpassad CSS är ganska flexibel, och du kan inkludera vad du vill om du är bekant med dess funktion.

Vi har slutfört städningen; vi går nu över till webbplatsens invecklingar, inklusive tillägg av den anpassade CSS -koden. Vi kommer att visa både grunderna och avancerade tekniker för att få gratis klibbiga header -effekter för Elementor. Om du använder Elementor 2.9 eller högre kan du använda de globala stilreglerna för att införliva denna CSS på din webbplats.

Följ procedurerna som beskrivs nedan för att inkludera anpassad CSS:

• För att komma åt hamburgarmenyn, leta upp den i det övre vänstra hörnet av Elementor-menyn och välj den.
• Välj Välj temastilar från rullgardinsmenyn under avsnittet Global stil.
• Välj Custom CSS från rullgardinsmenyn i det avsnittet (färgen ändras till blå från den tidigare genetiska röda färgen).

Efter det klistrar du in CSS -koden nedan.

header.sticky-header {--header-height: 90px; --kapacitet: 0,90; -krympa-mig: 0,80; -klibbig-bakgrundsfärg: #0e41e5; -övergång: .3s lätt in-ut; övergång: bakgrundsfärg var (-övergång), bakgrundsbild var (-övergång), bakgrundsfilter var (-övergång), opacitet var (-övergång); } header.sticky-header.elementor-sticky-effekter {bakgrundsfärg: var (-klibbig-bakgrundsfärg)! viktigt; bakgrundsbild: ingen! viktig; opacitet: var (-opacitet)! viktigt; -webkit-backdrop-filter: oskärpa (10px); bakgrundsfilter: oskärpa (10 pixlar); } header.sticky-header> .elementor-container {övergång: min-height var (-övergång); } header.sticky-header.elementor-sticky-effekter> .elementor-container {min-height: calc (var (-header-height) * var (-shrink-me))! viktigt; height: calc (var (-header-height) * var (-shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item {övergång: padding var (-övergång); } header.sticky-header.elementor-sticky-effekter .elementor-nav-meny .elementor-item {padding-bottom: 10px! viktigt; vadderingstopp: 10px! viktigt; } header.sticky-header> .elementor-container .logo img {övergång: max-width var (-övergång); } header.sticky-header.elementor-sticky-effekter .logo img {max-width: calc (100% * var (-shrink-me)); } 

Steg 5: anpassa vår CSS

Instruktionerna som nämns ovan guidar dig genom processen att skapa en minskande klibbig rubrik i Elementor. Om du vill veta mer om hur du anpassar rubriken ytterligare kan du titta på CSS -koden nedan, vilket gör att du kan bli mer kreativ med rubrikens design. Beroende på dina behov kan du anpassa Elementor -klibbiga rubrik genom att ändra många inställningar och göra den mer eller mindre klibbig. Vi rekommenderar att du använder en kodredigerare för att införliva denna CSS -ändring direkt i Elementor. Du kan använda Visual Studio Code eller Atom, som hjälper dig att snabbt sätta ihop koden och dra fördelar. Dessa redaktörer är gratis att använda och kan nås från olika system, inklusive Windows, Mac OS X och Linux.

Det här avsnittet visar hur du kan justera effekterna av Elementor -krymphuvudet med hjälp av CSS -stilarket. Om du bara gör en ändring av den anpassade egenskapen kommer den att omedelbart ändras för att matcha resten av CSS -koden.

Anpassningsalternativ för den minskande rubriken finns tillgängliga på totalt fem olika sätt. Alla variabler måste inte anpassas, men du har möjlighet att göra det om du väljer det. Så snart du har bestämt vilka variabler du vill ändra kan du bara ändra dessa variabler och lämna resten av parametrarna oförändrade.

Här är de fem CSS -variablerna, med standardvärdena för varje variabel som visas i rött.

Klibbig bakgrundsfärg är #0e41e5 och sidhuvudets höjd är 90 pixlar. Andra stylingsalternativ inkluderar: opacitet på 0,90, krymp-me på 0,80, opacitet på 0,90 och enkel-in/lätt-ut-övergång på 300 ms.

De anpassade egenskaperna är elementen som visas efter dubbelstrecket " -" i vår ex amp le -kod, och du kan hitta dem listade högst upp i vår amp -kod. Allt som krävs är att justera värdet som visas efter kolon och före semikolon i meningen.

För ex amp le, om du vill öka höjden på rubriken till 100 pixlar, så här skulle det se ut före och efter att ha ändrat höjden:

Tidigare var rubrikens höjd 90 pixlar; efter var rubrikens höjd 100 pixlar.

Med Elementor kan du designa en klibbig huvudmeny på flera olika sätt. Inte bara kan du konstruera en gratis Elementor -klibbig rubrik, men du kan också anpassa rubriken genom att lägga till anpassad CSS till den. Det är möjligt att få detaljerade anvisningar om hur man konstruerar en minskande klibbig Elementor-rubrik med Elementor och justerar din CSS med denna steg-för-steg-guide.

Elementor innehåller en mängd olika sidhuvudmallar; var och en är distinkt och elegant och hjälper dina tittare att navigera på din webbplats.

Med Elementor har du fullständig kontroll över stilen på dina webbplatshuvuden. För ex amp le kan du placera webbplatslogotypen i mitten av sidan och huvudmenyn under den. Du kan lägga till en rubrik ovanför huvudrubriken för att visa telefonnummer, länkar till sociala medier och annan information.

Här är bara några få amp av de många alternativ för sidhuvuddesign som är tillgängliga för Elementor -användare.

Slutsats

Att inkludera en klibbig rubrik på din webbplats kan göra det enkelt för besökare att gå igenom din webbplats och öka klick till alla områden på din webbplats.

Elementor eliminerar behovet av att manuellt generera klibbiga rubriker med Javascript och CSS, vilket tidigare krävdes. Att skapa en klibbig rubrik för din webbplats har aldrig varit enklare än nu, tack vare Elementor klibbiga rubriker.