Hvordan bruke klebrig overskrift og rulleeffekter med Elementor

En header 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 å surfe og morsomt å bruke.

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

Vi viser deg hvordan du lager den klissete overskriften din ved hjelp av Elementor i denne opplæringen.

Sticky overskrifter lar brukere se sidens overskrift og menydel uavhengig av hvor langt ned de ruller.

• Trinn 1: å lage en meny
• Trinn 2: Opprett overskriften din i Elementor
• Trinn 3: Bruk Elementor til å lage en overskriftsmal
• TRINN 4: Slik gjør du Elementor-overskriften klissete
• Trinn 5: Tilpass vår CSS
• Konklusjon

Trinn 1: å 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: Opprett overskriften 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 på " Opprett mal " på popup-skjermen.

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

Vi starter fra bunnen av med Elementor klebrig overskrift i denne opplæringen.

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

Trinn 3: Bruk Elementor til å lage en overskriftsmal

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 Nav-meny 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-overskriften klissete

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

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

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

En klebrig overskrift er nesten alltid uønsket på enheter i nettbrettstørrelse, og det er nesten alltid uønsket på mobilskjermer også. Som et resultat klikker du på "x" ved siden av begge alternativene under Sticky On, slik at bare "Desktop" er valgt.

Når du er fornøyd med arbeidet ditt, klikk " 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å siden ved å legge til betingelser.

Vi ønsket at denne overskriften skulle vises over hele nettstedet, og utelate 404-siden. 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 header!

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

Du kan tilpasse den klebrige overskriftens høyde, bakgrunnsfarge, overgang og klebrige 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 for Offset Effects bare vil fungere hvis Custom CSS brukes. Følgelig, hvis du ikke legger til noen egendefinert 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 en selvklebende overskriftstilstand er hvor du vil at den klebrige overskriften skal vises. Som et eksempel amp du velge kriteriene " hele nettstedet ."

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

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

Følg prosedyrene som er skissert nedenfor for å inkludere den tilpassede CSS:

• For å få tilgang til hamburgermenyen, finn den i øverste 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 vil endres til blå fra den tidligere genetiske røde fargen).

Deretter limer du inn CSS-koden nedenfor.

header.sticky-header { --header-height: 90px; --opasitet: 0,90; --krymp-meg: 0,80; --sticky-background-color: #0e41e5; --transition: .3s lette-inn-ut; overgang: bakgrunnsfarge var(--overgang), bakgrunnsbilde var(--overgang), bakteppe-filter var(--overgang), opasitet var(--overgang); } header.sticky-header.elementor-sticky--effects { background-color: var(--sticky-background-color) ; bakgrunnsbilde: ingen ; opasitet: var(--opasitet) ; -webkit-backdrop-filter: blur(10px); bakteppe-filter: 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)); høyde: 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; polstring-topp: 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)); }

Trinn 5: Tilpass vår CSS

Instruksjonene oppført ovenfor vil guide deg gjennom prosessen med å lage en avtagende klebrig overskrift i Elementor. Hvis du vil vite mer om hvordan du tilpasser overskriften ytterligere, kan du se på CSS-koden nedenfor, som vil tillate deg å være mer kreativ med headerdesignet. Avhengig av behovene dine, kan du tilpasse Elementors klebrige overskrift ved å endre en rekke innstillinger og gjøre den mer eller mindre klebrig. Vi anbefaler at du bruker et koderedigeringsprogram for å inkorporere denne CSS-endringen direkte i Elementor. Du kan bruke Visual Studio Code eller Atom, som vil hjelpe deg med å sette sammen koden raskt 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 effekten av Elementors krympende overskrift ved å bruke CSS-stilarket. Hvis du bare gjør én endring i den tilpassede egenskapen, vil den umiddelbart endres slik at den samsvarer med resten av CSS-koden.

Tilpasningsalternativer for den avtagende 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.

Sticky bakgrunnsfarge er #0e41e5 og toppteksthøyden er 90px. Andre stylingsalternativer inkluderer: opasitet på 0,90, krympe-me på 0,80, opasitet på 0,90 og lett inn-/ut-overgang på 300 ms.

De tilpassede egenskapene er elementene som vises etter den doble bindestreken "–" i amp vår, og du kan finne dem oppført øverst i amp vår. Alt som kreves er å justere verdien som vises etter kolon og før semikolon i setningen.

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

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

Ved å bruke Elementor kan du designe en selvklebende overskriftsmeny 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 en avtagende klebrig Elementor-overskrift ved å bruke Elementor og justere CSS-en din med denne trinnvise veiledningen.

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

Med Elementor har du full kontroll over stilen til nettsidehodene dine. For amp kan du plassere nettstedslogoen i midten av siden og hovedmenyen under den. Du kan legge til en overskrift over hovedoverskriften for å vise telefonnummeret, lenker til sosiale medier og annen informasjon.

Her er bare noen få amp på de mange header-designalternativene som er tilgjengelige for Elementor-brukere.

Konklusjon

Inkludering av en selvklebende overskrift på nettstedet ditt kan gjøre det enkelt for besøkende å krysse nettstedet ditt og øke antallet klikk til alle områder av nettstedet ditt.

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