Sådan bruger du sticky header og rulleeffekter med Elementor

En header er generelt det første, en person ser, når de besøger dit websted, og det fungerer som grundlaget for, hvordan de udforsker det.

Uanset om du har et e-handelswebsted, et personligt websted, et websted for uddannelse, et fællesskabsforum eller et websted for medierne, er overskriften det, der gør det nemt at gennemse og behageligt at bruge.

Sticky headers bliver mere og mere populære blandt webdesignere til at organisere og strukturere et websted for forbedret brugernavigation.

Vi viser dig, hvordan du laver din sticky header ved hjælp af Elementor i denne tutorial.

Sticky headers giver brugerne mulighed for at se sidens sidehoved og menusektion, uanset hvor langt ned de ruller.

• Trin 1: at lave en menu
• Trin 2: Opret din header i Elementor
• Trin 3: Brug Elementor til at lave en header-skabelon
• TRIN 4: Sådan gør du din Elementor-header klæbrig
• Trin 5: Tilpas vores CSS
• Konklusion

Trin 1: at lave en menu

For at tilføje en sticky header til dit websted, skal du gå til wp-admin > Udseende > Menuer og oprette en hovedmenu. Skriv den sektion, du vil have vist, i overskriften.

Trin 2: Opret din header i Elementor

Gå til Elementor Templates > Theme Builder, når du er færdig med at konstruere hovedmenuen. Vælg Header-området på siden med temabygger, og klik på " Tilføj ny sidehoved ."

Giv overskriftsskabelonen et navn, og klik på " Opret skabelon " på pop op-skærmen.

Du vil blive ført til Elementor-redigeringssiden derefter. Du kan enten bruge en af ​​de færdiglavede header-skabeloner eller designe din egen fra bunden.

Vi starter fra bunden med vores Elementor sticky header i denne tutorial.

Du kan se forskellige header-widgets i Elementor-editoren, før vi begynder at designe en skabelon. Vi kan hurtigt og nemt designe en header ved hjælp af disse sektioner.

Trin 3: Brug Elementor til at lave en header-skabelon

Opret et layout med to kolonner. Sørg for, at sektionens indholdsbredde er indstillet til " Boxed ".

Rediger -kolonnen i indstillingerne for indholdsbredde i Elementor-redigeringssektionen .

Placer dit websteds webstedslogo i den første kolonne, og juster det til venstre.

Tilføj en Nav-menu i den anden kolonne, og vælg den hovedmenu, du byggede i trin 1. Juster navigationsmenuen til højre.

Vi vil holde overskriften enkel til denne øvelse. Du kan gøre din header mere detaljeret ved at tilføje en baggrundsfarve, svævende animationseffekter, knapper og andre elementer.

TRIN 4: Sådan gør du din Elementor-header klæbrig

Nu hvor vi har skabt vores grundlæggende Elementor-header, er det tid til at gøre det til en Sticky-header.

For at gøre det skal du gå til sektionen Rediger (Sektionen Hele overskriften). Vælg Avanceret > Bevægelseseffekter fra rullemenuen.

Vælg " sticky to the Top " under bevægelseseffekter og derefter " devices ", hvor du vil have den sticky header til at blive vist.

En sticky header er næsten altid uønsket på enheder i tabletstørrelse, og det er næsten altid også uønsket på mobilskærme. Som et resultat skal du klikke på "x" ud for begge muligheder under Sticky On, så kun "Desktop" er valgt.

Når du er tilfreds med dit arbejde, klik på " Udgiv "; dette vil aktivere den klæbende overskrift, men det vil ikke erstatte din nuværende temaoverskrift på nuværende tidspunkt.

Elementor beder dig om at tilføje en betingelse for din header, efter du har udgivet den. Du kan vise overskriften, hvor du vil på webstedet, ved at tilføje betingelser.

Vi ønskede, at denne sidehoved skulle vises over hele webstedet og udelade 404-siden. Som et resultat inkluderede vi hele webstedet i valget, mens vi udelod 404-siden.

Som du kan se, er det enkelt og smertefrit at bruge Elementor til at skabe din personlige Sticky header!

Få din Elementor Sticky Header til at se meget bedre ud ved at bruge Custom CSS Elementor giver dig mulighed for at tilpasse en sticky header ved at tilføje en CSS-klasse for at gøre den mere stilfuld.

Du kan tilpasse den klæbende overskrifts højde, baggrundsfarve, overgang og klæbende effekter her.

Vend tilbage til redigeringsområdet for at gøre din sticky header mere stilfuld (Hele header-sektionen). Vælg Avanceret > Bevægelseseffekter fra rullemenuen.

Indstil " Effects Offset " til 100 i dette tilfælde. Når en besøgende bruger dit websted, er dette den rulleafstand, hvor rulleeffekten sker.

Indstil bevægelsesforskydningen til 100.

Vær opmærksom på, at indstillingerne for Offset Effects kun virker, hvis brugerdefineret CSS bruges. Derfor, hvis du ikke tilføjer din egen tilpassede CSS, kan du springe den sidste mulighed over.

Før du udgiver den sidste klæbende overskrift, kan du eventuelt tilføje betingelser til den sidste klæbende overskrift. Et eksempel amp en sticky header-tilstand er, hvor du ønsker, at den sticky header skal vises. Som et eksempel amp du vælge kriterierne " hele webstedet ."

Du vil nu gerne inkludere noget Custom CSS på dit websted. Custom CSS er ret fleksibel, og du kan inkludere hvad du vil, hvis du er fortrolig med dens drift.

Vi har afsluttet rengøringen; vi flytter nu til hjemmesidens forviklinger, herunder tilføjelsen af ​​den tilpassede CSS-kode. Vi vil demonstrere både det grundlæggende og avancerede teknikker til at opnå gratis sticky header-effekter til Elementor. Hvis du bruger Elementor 2.9 eller nyere, kan du bruge de globale stilregler til at inkorporere denne CSS på dit websted.

Følg procedurerne nedenfor for at inkludere den tilpassede CSS:

• For at få adgang til hamburgermenuen skal du finde den i øverste venstre hjørne af Elementor-menuen og vælge den.
• Vælg Vælg tematypografier i rullemenuen under sektionen Global stil.
• Vælg Custom CSS fra rullemenuen i den sektion (farven ændres til blå fra dens tidligere genetiske røde farve).

Indsæt derefter CSS-koden nedenfor.

header.sticky-header { --header-height: 90px; --opacitet: 0,90; --shrink-me: 0,80; --sticky-background-color: #0e41e5; --transition: .3s let ind-ud; overgang: baggrundsfarve var(--overgang), baggrundsbillede var(--overgang), baggrundsfilter var(--overgang), opacitet var(--overgang); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) ; baggrundsbillede: ingen ; opacitet: var(--opacitet) ; -webkit-baggrundsfilter: sløring(10px); baggrundsfilter: sløring(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)); højde: calc(var(--header-height) * var(--shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item { transition: padding var(--transition); } header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item { padding-bottom: 10px; polstring-top: 10px; } 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)); } 

Trin 5: Tilpas vores CSS

Instruktionerne ovenfor vil guide dig gennem processen med at oprette en aftagende klæbrig overskrift i Elementor. Hvis du vil vide mere om, hvordan du tilpasser headeren yderligere, kan du se på CSS-koden nedenfor, som vil give dig mulighed for at være mere kreativ med header-designet. Afhængigt af dine behov kan du personliggøre Elementors klæbende header ved at ændre adskillige indstillinger og gøre det mere eller mindre klæbrigt. Vi anbefaler, at du bruger en kodeeditor til at inkorporere denne CSS-ændring direkte i Elementor. Du kan bruge Visual Studio Code eller Atom, som vil hjælpe dig med at sætte koden sammen hurtigt og høste fordelene. Disse editorer er gratis at bruge og kan tilgås fra forskellige systemer, herunder Windows, Mac OS X og Linux.

Dette afsnit vil demonstrere, hvordan du kan justere effekterne af Elementors skrumpende header ved at bruge CSS-typografiarket. Hvis du kun foretager én ændring af den tilpassede egenskab, vil den straks blive ændret, så den matcher resten af ​​CSS-koden.

Tilpasningsmuligheder for den faldende overskrift er tilgængelige på i alt fem forskellige måder. Ikke alle variabler skal tilpasses, men du har mulighed for at gøre det, hvis du vælger det. Så snart du har besluttet, hvilke variabler du vil ændre, kan du kun ændre disse variable og lade resten af ​​parametrene være uændrede.

Her er de fem CSS-variabler, med standardværdierne for hver variabel vist med rødt.

Sticky baggrundsfarve er #0e41e5 og headerhøjden er 90px. Andre stylingmuligheder omfatter: opacitet på 0,90, shrink-me på 0,80, opacitet på 0,90 og let ind/ud-overgang på 300 ms.

De brugerdefinerede egenskaber er de elementer, der vises efter den dobbelte bindestreg "–" i vores amp , og du kan finde dem opført øverst i vores amp . Det eneste, der kræves, er at justere den værdi, der vises efter kolon og før semikolon i sætningen.

Hvis du amp vil øge højden af ​​headeren til 100px, ser du sådan her ud før og efter ændring af højden:

Før var headerhøjden 90 pixels; derefter var headerhøjden 100 pixels.

Ved hjælp af Elementor kan du designe en sticky header-menu på flere forskellige måder. Ikke kun kan du konstruere en gratis Elementor sticky header, men du kan også personliggøre headeren ved at tilføje tilpasset CSS til den. Det er muligt at få detaljerede instruktioner om, hvordan man konstruerer en aftagende klæbrig Elementor-header ved hjælp af Elementor og justerer din CSS med denne trinvise vejledning.

Elementor inkluderer en række header-skabeloner; hver er særskilt og elegant og hjælper dine seere med at navigere på dit websted.

Med Elementor har du fuldstændig kontrol over stilen på dine hjemmesideheadere. For amp kan du placere webstedets logo i midten af ​​siden og hovedmenuen under det. Du kan tilføje en overskrift over hovedoverskriften for at vise telefonnummeret, links til sociale medier og andre oplysninger.

Her er blot nogle få amp på de mange muligheder for headerdesign, der er tilgængelige for Elementor-brugere.

Konklusion

Inkludering af en sticky header på dit websted kan gøre det nemt for besøgende at krydse dit websted og øge antallet af klik til alle områder af dit websted.

Elementor eliminerer behovet for manuelt at generere sticky headers med Javascript og CSS, som tidligere var påkrævet. Det har aldrig været mere ligetil at oprette en sticky header til dit websted, end det er nu, takket være Elementor sticky headers.