Slik bruker du klebrig topptekst og rulleeffekter med Elementor

Et topptekst er vanligvis det første en person ser når de besøker nettstedet ditt, og det fungerer som grunnlaget for hvordan de utforsker det.

Enten du har et e -handelsnettsted, et personlig nettsted, et nettsted for utdanning, et fellesskapsforum eller et nettsted for media, er overskriften det som gjør det enkelt å bla gjennom og hyggelig å bruke.

Sticky headers blir stadig mer populært blant webdesignere for å organisere og strukturere et nettsted for forbedret brukernavigasjon.

Vi viser deg hvordan du lager din klebrig overskrift ved hjelp av Elementor i denne opplæringen.

Klebrig overskrifter lar brukerne se sidens topptekst og menyseksjon uavhengig av hvor langt ned de ruller.

• Trinn 1: For å lage en meny
• Trinn 2: Opprette toppteksten din i Elementor
• Trinn 3: Bruk Elementor til å lage en topptekstmal
• TRINN 4: Slik gjør du Elementor -hodet klebrig
• Trinn 5: Tilpass vår CSS
• Konklusjon

Trinn 1: For å lage en meny

For å legge til en klebrig overskrift på nettstedet ditt, gå til wp-admin > Utseende > Menyer og lag en hovedmeny. I overskriften skriver du inn delen du vil vise.

Trinn 2: Opprette toppteksten din i Elementor

Gå til Elementor-maler > Temabygger når du er ferdig med å konstruere hovedmenyen. Velg topptekstområdet på temabyggersiden og klikk " Legg til ny overskrift ."

Gi overskriftsmalen et navn og klikk " Opprett mal " på popup-skjermen.

Du vil bli ført til Elementor -redigeringssiden etter det. Du kan enten bruke en av de ferdiglagde topptekstmalene eller designe din egen fra bunnen av.

Vi starter fra bunnen av med vår Elementor -klebrig overskrift i denne opplæringen.

Du kan se forskjellige topptekst -widgets i Elementor -editoren før vi begynner å designe en mal. Vi kan raskt og enkelt designe en topptekst ved hjelp av disse seksjonene.

Trinn 3: Bruk Elementor til å lage en topptekstmal

Lag en to-kolonne layout. Sørg for at seksjonens innholdsbredde er satt til " Boxed ."

I innstillingene for innholdsbredde i Elementor Edit-seksjonen, sett den første kolonnebredden til 20 % under " Rediger "-kolonnen.

Plasser nettstedets nettstedslogo i den første kolonnen og juster den til venstre.

Legg til en navigeringsmeny i den andre kolonnen, og velg hovedmenyen du bygde i trinn 1. Juster navigasjonsmenyen til høyre.

Vi skal holde overskriften enkel for denne opplæringen. Du kan gjøre overskriften mer detaljert ved å legge til en bakgrunnsfarge, svevende animasjonseffekter, knapper og andre elementer.

TRINN 4: Slik gjør du Elementor -hodet klebrig

Nå som vi har opprettet vår grunnleggende Elementor -overskrift, er det på tide å gjøre den til en Sticky -header.

For å gjøre det, gå til Rediger-delen (hele overskriften). Velg Avansert > Bevegelseseffekter fra rullegardinmenyen.

Velg " sticky to the Top " under bevegelseseffekter, deretter " devices " der du vil at den klebrige overskriften skal vises.

En klebrig topptekst er nesten alltid uønsket på enheter i nettbrett, og det er nesten alltid uønsket også på mobile skjermer. Som et resultat klikker du på "x" ved siden av begge alternativene under Sticky On, og bare "Desktop" er valgt.

Når du er fornøyd med arbeidet ditt, klikk på " Publiser "; dette vil aktivere den selvklebende overskriften, men den erstatter ikke den nåværende temaoverskriften på dette tidspunktet.

Elementor ber deg legge til en betingelse for overskriften din etter at du har publisert den. Du kan vise overskriften hvor du vil på nettstedet ved å legge til betingelser.

Vi ønsket at denne overskriften skulle vises over hele nettstedet, uten at 404 -siden ble utelatt. Som et resultat inkluderte vi hele nettstedet i valget mens vi utelot 404 -siden.

Som du kan se, er det enkelt og smertefritt å bruke Elementor til å lage din personlige Sticky -topptekst!

Få Elementor Sticky Header til å se mye bedre ut Ved hjelp av Custom CSS Elementor lar deg tilpasse en klebrig header ved å legge til en CSS -klasse for å gjøre den mer stilig.

Du kan tilpasse høyden på den klissete overskriften, bakgrunnsfargen, overgangen og klissete effekter her.

Gå tilbake til redigeringsområdet for å gjøre den klebrige overskriften mer stilig (hele overskriftsdelen). Velg Avansert > Bevegelseseffekter fra rullegardinmenyen.

Sett " Effects Offset " til 100 i dette tilfellet. Når en besøkende bruker nettstedet ditt, er dette rulleavstanden der rulleeffekten skjer.

Sett bevegelsesforskyvningen til 100.

Vær oppmerksom på at alternativene Offset Effects bare fungerer hvis Custom CSS brukes. Følgelig, hvis du ikke legger til noen egen CSS, kan du hoppe over det siste alternativet.

Før du publiserer den siste klebrige overskriften, kan du eventuelt legge til betingelser til den siste klebrige overskriften. Et eksempel amp overskriftstilstand er hvor du vil at den klebrige overskriften skal vises. Som et eksempel amp du velge kriteriene " hele nettstedet ."

Du vil nå inkludere tilpasset CSS på nettstedet ditt. Tilpasset CSS er ganske fleksibelt, og du kan inkludere hva du vil hvis du er kjent med driften.

Vi har fullført rengjøringen; Vi går nå til det vanskelige på nettstedet, inkludert tillegg av den tilpassede CSS -koden. Vi vil demonstrere både det grunnleggende og avanserte teknikker for å få gratis klissete header -effekter for Elementor. Hvis du bruker Elementor 2.9 eller nyere, kan du bruke de globale stilreglene til å inkorporere denne CSS -en på nettstedet ditt.

Følg prosedyrene som er beskrevet nedenfor for å inkludere tilpasset CSS:

• For å få tilgang til hamburgermenyen, finn den i øvre venstre hjørne av Elementor-menyen og velg den.
• Velg Velg temastiler fra rullegardinmenyen under Global Style-delen.
• Velg Custom CSS fra rullegardinmenyen i den delen (fargen endres til blå fra den tidligere genetiske røde fargen).

Lim deretter inn CSS -koden nedenfor.

header.sticky-header {--header-høyde: 90px; --kapasitet: 0,90; -krymp-meg: 0,80; -klissete-bakgrunnsfarge: #0e41e5; -overgang: .3s letthet-i-ut; overgang: bakgrunnsfarge var (-overgang), bakgrunnsbilde var (-overgang), bakteppe-filter var (-overgang), opacity var (-overgang); } header.sticky-header.elementor-sticky-effekter {bakgrunn-farge: var (-klissete-bakgrunnsfarge)! viktig; bakgrunnsbilde: ingen! viktig; opacity: var (-opacity)! -webkit-backdrop-filter: uskarphet (10px); backdrop-filter: uskarphet (10px); } header.sticky-header> .elementor-container {overgang: min-høyde var (-overgang); } header.sticky-header.elementor-sticky-effekter> .elementor-container {min-høyde: calc (var (-header-høyde) * var (-krympe-meg))! viktig; høyde: calc (var (-header-høyde) * var (-shrink-me)); } header.sticky-header .elementor-nav-menu .elementor-item {overgang: padding var (-overgang); } header.sticky-header.elementor-sticky-effekter .elementor-nav-meny .elementor-element {polstring-bunn: 10px! viktig; polstringstopp: 10px! viktig; } 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)); } 

Trinn 5: Tilpass vår CSS

Instruksjonene som er oppført ovenfor, veileder deg gjennom prosessen med å lage en synkende klebrig overskrift i Elementor. Hvis du vil vite mer om hvordan du kan tilpasse overskriften ytterligere, kan du se på CSS -koden nedenfor, slik at du kan være mer kreativ med overskriftsdesignen. Avhengig av dine behov kan du tilpasse Elementor klebrig overskrift ved å endre mange innstillinger og gjøre den mer eller mindre klebrig. Vi anbefaler at du bruker en kodeditor for å innlemme denne CSS -endringen direkte i Elementor. Du kan bruke Visual Studio Code eller Atom, som vil hjelpe deg med å sette koden raskt sammen og høste fordelene. Disse redaktørene er gratis å bruke og kan nås fra forskjellige systemer, inkludert Windows, Mac OS X og Linux.

Denne delen vil demonstrere hvordan du kan justere effektene av Elementor krympeoverskrift ved å bruke CSS -stilarket. Hvis du bare gjør en endring i den egendefinerte egenskapen, vil den umiddelbart bli endret for å matche resten av CSS -koden.

Tilpassingsalternativer for den synkende overskriften er tilgjengelig på totalt fem forskjellige måter. Ikke alle variablene må tilpasses, men du har muligheten til å gjøre det hvis du velger det. Så snart du har bestemt deg for hvilke variabler du vil endre, kan du bare endre disse variablene og la resten av parameterne være uendret.

Her er de fem CSS -variablene, med standardverdiene for hver variabel vist i rødt.

Klebrig bakgrunnsfarge er #0e41e5 og topphøyden er 90px. Andre stylingsalternativer inkluderer: opacity på 0,90, shrink-me på 0,80, opacity på 0,90, og let-inn/lett-ut-overgang på 300 ms.

De egendefinerte egenskapene er elementene som vises etter den doble bindestrek “ -” i vår ex amp le -kode, og du finner dem oppført øverst i vår amp -kode. Alt som kreves er å justere verdien som vises etter kolon og før semikolon i setningen.

For eksempel amp le, hvis du vil øke høyden på overskriften til 100 piksler, ser det slik ut før og etter endring av høyden:

Før var topphøyden 90 piksler; etter var topphøyden 100 piksler.

Ved å bruke Elementor kan du designe en klebrig toppmeny på flere forskjellige måter. Ikke bare kan du konstruere en gratis Elementor klebrig overskrift, men du kan også tilpasse overskriften ved å legge til tilpasset CSS til den. Det er mulig å få detaljerte instruksjoner om hvordan du konstruerer et synkende klebrig Elementor-topptekst ved hjelp av Elementor og justerer CSS med denne trinnvise veiledningen.

Elementor inkluderer en rekke overskriftsmaler; hver er tydelig og elegant og hjelper seerne dine med å navigere på nettstedet ditt.

Med Elementor har du full kontroll over stilen til nettstedets overskrifter. For ex amp le, kan du plassere nettstedet logoen i midten av siden og hovedmenyen under. Du kan legge til en overskrift over hovedoverskriften for å vise telefonnummeret, lenker til sosiale medier og annen informasjon.

Her er bare noen få amp av de mange overskriftsdesignalternativene som er tilgjengelige for Elementor -brukere.

Konklusjon

Inkludert en klebrig overskrift på nettstedet ditt kan gjøre det enkelt for besøkende å krysse nettstedet ditt og øke klikkene til alle områder av nettstedet ditt.

Elementor eliminerer behovet for å manuelt generere klebrig overskrifter med Javascript og CSS, som tidligere var påkrevd. Å lage en klebrig overskrift for nettstedet ditt har aldri vært enklere enn det er nå, takket være Elementor klebrige overskrifter.