Sådan bruges sticky header og rulleeffekter med Elementor

Et overskrift 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 eCommerce -websted, et personligt websted, et websted til uddannelse, et fællesskabsforum eller et websted til medierne, er overskriften det, der gør det enkelt at gennemse og sjovt at bruge.

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

Vi viser dig, hvordan du laver dit klæbrige overskrift ved hjælp af Elementor i denne vejledning.

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

• Trin 1: For at lave en menu
• Trin 2: Oprettelse af dit overskrift i Elementor
• Trin 3: Brug Elementor til at lave en header -skabelon
• TRIN 4: Sådan gør du din Elementor Header Sticky
• Trin 5: Tilpas vores CSS
• Konklusion

Trin 1: For 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. I overskriften skal du skrive den sektion, du vil have vist.

Trin 2: Oprettelse af dit overskrift 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 bliver derefter taget til Elementor -redigeringssiden. Du kan enten bruge en af ​​de færdiglavede header-skabeloner eller designe din egen fra bunden.

Vi starter fra bunden med vores Elementor -klæbrige overskrift i denne vejledning.

Du kan se forskellige header -widgets i Elementor -editoren, før vi begynder at designe en skabelon. Vi kan hurtigt og nemt designe et overskrift 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 ".

Indstil den første kolonnebredde til 20% under " Rediger "-kolonnen i indstillingerne for indholdsbredde i Elementor-redigeringssektionen.

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

Tilføj en navigationsmenu 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 vejledning. Du kan gøre dit overskrift 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 Sticky

Nu hvor vi har oprettet vores grundlæggende Elementor -header, er det tid til at gøre det til et 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.

Et klæbrigt header er næsten altid uønsket på tablets i størrelse, og det er næsten altid også uønsket på mobile skærme. Som et resultat skal du klikke på "x" ud for begge muligheder under Sticky On, og kun "Desktop" er valgt.

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

Elementor beder dig om at tilføje en betingelse for dit overskrift, når du har offentliggjort det. Du kan vise overskriften, hvor du vil på webstedet ved at tilføje betingelser.

Vi ønskede, at dette overskrift skulle vises over hele webstedet, uden at 404 -siden udelades. 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 oprette dit personlige Sticky header!

Få dit Elementor Sticky Header til at se meget bedre ud Ved hjælp af Custom CSS Elementor giver dig mulighed for at tilpasse et sticky header ved at tilføje en CSS -klasse for at gøre det mere stilfuldt.

Du kan tilpasse den klæbrige overskrifts højde, baggrundsfarve, overgang og klæbrige 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.

Husk, at mulighederne for offseteffekter kun fungerer, hvis brugerdefineret CSS bruges. Derfor kan du springe den sidste mulighed over, hvis du ikke tilføjer din egen tilpassede CSS.

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

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

Vi har afsluttet rengøringen; vi går nu til webstedets finurligheder, herunder tilføjelse af den tilpassede CSS -kode. Vi vil demonstrere både det grundlæggende og avancerede teknikker til at opnå gratis klæbrige header -effekter til Elementor. Hvis du bruger Elementor 2.9 eller højere, kan du bruge de globale stilregler til at inkorporere denne CSS i 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 tema-stilarter i rullemenuen under sektionen Global stil.
• Vælg Brugerdefineret CSS i rullemenuen i det pågældende afsnit (farven skifter til blå fra den tidligere genetiske røde farve).

Indsæt derefter CSS -koden herunder.

header.sticky-header {--header-højde: 90px; --opacitet: 0,90; -krymp-mig: 0,80; -klæbrig-baggrundsfarve: #0e41e5; -overgang: .3s let ind-ud; overgang: baggrundsfarve var (-overgang), baggrundsbillede var (-overgang), baggrundsfilter var (-overgang), opacitet var (-overgang); } header.sticky-header.elementor-sticky-effekter {baggrundsfarve: var (-klæbrig-baggrundsfarve)! vigtigt; baggrundsbillede: ingen! vigtig; opacitet: var (-opacitet)! vigtigt; -webkit-backdrop-filter: sløring (10px); backdrop-filter: sløring (10px); } header.sticky-header> .elementor-container {overgang: min-højde var (-overgang); } header.sticky-header.elementor-sticky-effekter> .elementor-container {min-højde: calc (var (-header-højde) * var (-shrink-me))! vigtig; højde: calc (var (-header-højde) * var (-shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item {overgang: padding var (-overgang); } header.sticky-header.elementor-sticky-effekter .elementor-nav-menu .elementor-item {polstring-bund: 10px! vigtigt; polstringstop: 10px! vigtigt; } header.sticky-header> .elementor-container .logo img {overgang: max-width var (-overgang); } header.sticky-header.elementor-sticky-effekter .logo img {max-width: calc (100% * var (-shrink-me)); } 

Trin 5: Tilpas vores CSS

Instruktionerne ovenfor vil guide dig gennem processen med at oprette et faldende klæbrigt overskrift i Elementor. Hvis du vil vide flere detaljer om, hvordan du tilpasser overskriften yderligere, kan du se på CSS -koden herunder, hvilket giver dig mulighed for at være mere kreativ med overskriftsdesignet. Afhængigt af dine behov kan du tilpasse Elementor klæbrige overskrift ved at ændre mange indstillinger og gøre den mere eller mindre klæbrig. Vi anbefaler, at du bruger en kode -editor til at inkorporere denne CSS -ændring direkte i Elementor. Du kan bruge Visual Studio Code eller Atom, som hjælper dig med hurtigt at sammensætte koden og høste fordelene. Disse redaktører er gratis at bruge og kan tilgås fra forskellige systemer, herunder Windows, Mac OS X og Linux.

Dette afsnit viser, hvordan du kan justere effekterne af Elementor -krympningshovedet ved hjælp af CSS -stilarket. Hvis du kun foretager en ændring af den tilpassede ejendom, ændres den straks for at matche resten af ​​CSS -koden.

Tilpasningsmuligheder for det 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 variabler 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 stylingsmuligheder inkluderer: uigennemsigtighed på 0,90, krymp-mig på 0,80, uigennemsigtighed på 0,90 og let-i/lethed-overgang på 300 ms.

De brugerdefinerede egenskaber er de elementer, der vises efter det dobbelte bindestreg “ -” i vores ex amp le -kode, og du kan finde dem anført øverst i vores amp -kode. Det eneste, der kræves, er at justere den værdi, der vises efter kolon og før semikolon i sætningen.

For eksempel amp le, hvis du vil øge headerens højde til 100px, ser det sådan ud før og efter ændring af højden:

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

Ved hjælp af Elementor kan du designe en klæbrig overskriftsmenu på flere forskellige måder. Ikke alene kan du konstruere et gratis Elementor -klæbrigt overskrift, men du kan også personliggøre overskriften ved at tilføje brugerdefineret CSS til det. Det er muligt at få detaljerede anvisninger til, hvordan man konstruerer et faldende klæbrig Elementor-header ved hjælp af Elementor og justerer din CSS med denne trin-for-trin guide.

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

Med Elementor har du fuldstændig kontrol over stilen på dine webstedsoverskrifter. Til ex amp le, kan du placere webstedet logoet i midten af siden, og hovedmenuen under den. Du kan tilføje en overskrift over hovedoverskriften for at få vist telefonnummeret, links til sociale medier og andre oplysninger.

Her er blot et par amp på de mange muligheder for design af header, der er tilgængelige for Elementor -brugere.

Konklusion

Inklusiv en klæbrig overskrift på dit websted kan gøre det let for besøgende at krydse dit websted og øge klik til alle områder af dit websted.

Elementor eliminerer behovet for manuelt at generere klæbrige overskrifter med Javascript og CSS, hvilket tidligere var påkrævet. At oprette en klæbrig overskrift til dit websted har aldrig været mere ligetil end nu, takket være Elementor klæbrige overskrifter.