Hur man använder sticky header 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.

Sticky headers blir allt populärare bland webbdesigners för 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 handledningen.

Sticky headers tillåter användare att se sidans rubrik och menyavsnitt oavsett hur långt ned de rullar.

• Steg 1: att skapa 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: att skapa 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 att tas till Elementors redigeringssida efter det. Du kan antingen använda en av de färdiggjorda rubrikmallarna eller designa din egen från grunden.

Vi börjar från början med vår Elementor sticky header i denna handledning.

Du kan se olika header-widgets 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 webbplatsens logotyp i den första kolumnen och rikta in den till vänster.

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

Vi kommer att hålla rubriken enkel för denna handledning. Du kan göra din rubrik mer detaljerad genom att lägga till en bakgrundsfärg, svävande animationseffekter, 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 förvandla 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 sticky header är nästan alltid oönskad på enheter i surfplattastorlek, och det är nästan alltid oönskat på mobilskärmar också. Som ett resultat klickar du på "x" bredvid båda alternativen under Sticky On, så att endast "Desktop" är 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 din rubrik efter att du har publicerat den. Du kan visa rubriken var du vill på webbplatsen genom att lägga till villkor.

Vi ville att den här rubriken skulle visas över hela webbplatsen och utelämna 404-sidan. Som ett resultat inkluderade vi hela webbplatsen i valet samtidigt som 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 header!

Få din Elementor Sticky Header att se mycket bättre ut med anpassad CSS. Med Elementor kan du anpassa en sticky header 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 snyggare (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.

Kom ihåg att alternativen för offseteffekter bara fungerar om anpassad CSS används. Följaktligen, om du inte lägger till någon egen CSS kan du hoppa över det sista alternativet.

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

Du vill nu inkludera 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 krångligheter, inklusive tillägget av den anpassade CSS-koden. Vi kommer att demonstrera både grunderna och avancerade tekniker för att få gratis sticky 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 nedan för att inkludera den anpassade CSS:en:

• För att komma åt hamburgermenyn, lokalisera 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 sin tidigare genetiska röda färg).

Efter det, klistra in CSS-koden nedan.

header.sticky-header { --header-height: 90px; --opacitet: 0,90; --krymp-mig: 0,80; --sticky-background-color: #0e41e5; --transition: .3s lätthet-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--effects { background-color: var(--sticky-background-color) !important; bakgrundsbild: ingen !viktigt; opacitet: var(--opacitet) !viktigt; -webkit-backdrop-filter: blur(10px); bakgrundsfilter: blur(10px); } header.sticky-header > .elementor-container { transition: min-height var(--transition); } header.sticky-header.elementor-sticky--effects > .elementor-container { min-height: calc(var(--header-height) * var(--shrink-me))!viktigt; höjd: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-meny .elementor-item { transition: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px!important; padding-top: 10px!viktigt; } header.sticky-header > .elementor-container .logo img { transition: max-width var(--transition); } header.sticky-header.elementor-sticky--effects .logo img { max-width: calc(100% * var(--shrink-me)); }

Steg 5: anpassa vår CSS

Instruktionerna som listas ovan guidar dig genom processen att skapa en minskande sticky header 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 vara mer kreativ med headerdesignen. Beroende på dina behov kan du anpassa Elementors 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 skörda fördelarna. Dessa redigerare är gratis att använda och kan nås från olika system, inklusive Windows, Mac OS X och Linux.

Det här avsnittet kommer att visa hur du kan justera effekterna av Elementors krympande rubrik genom att använda CSS-formatmallen. Om du bara gör en ändring av den anpassade egenskapen kommer den omedelbart att ändras för att matcha resten av CSS-koden.

Anpassningsalternativ för den minskande rubriken är 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 vill. Så snart du har bestämt dig för vilka variabler du vill modifiera, 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.

Sticky bakgrundsfärg är #0e41e5 och rubrikens höjd är 90px. Andra stylingalternativ inkluderar: opacitet på 0,90, shrink-me på 0,80, opacitet på 0,90 och lätt-in/ease-out-övergång på 300ms.

De anpassade egenskaperna är de element som visas efter det dubbla bindestrecket "–" i vår amp , och du kan hitta dem listade överst i vår amp . Allt som krävs är att justera värdet som visas efter kolon och före semikolon i meningen.

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

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

Med hjälp av Elementor kan du designa en sticky header-meny på flera olika sätt. Du kan inte bara konstruera en gratis Elementor sticky header, utan 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 avtagande klibbig Elementor-rubrik med hjälp av Elementor och justerar din CSS med denna steg-för-steg-guide.

Elementor innehåller en mängd olika rubrikmallar; 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 webbplatsrubriker. Till amp kan du placera webbplatsens logotyp i mitten av sidan och huvudmenyn under den. Du kan lägga till en rubrik ovanför huvudrubriken för att visa telefonnumret, länkar till sociala medier och annan information.

Här är bara några amp på de många designalternativen för header som är tillgängliga för Elementor-användare.

Slutsats

Att inkludera en sticky header på din webbplats kan göra det enkelt för besökare att gå igenom din webbplats och öka antalet klick till alla delar av din webbplats.

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