Roy 
En klæbrig overskrift forbliver fastgjort til toppen af skærmen, mens den besøgende ruller. Dit logo, menu og call-to-action-knap forbliver tilgængelig, uanset hvor langt ned nogen går, hvilket er grunden til, at næsten alle SaaS- og agenturwebsteder sender en.
Denne vejledning viser, hvordan du opretter en klæbrig overskrift i Elementor ved hjælp af den gratis Master Addons Theme Builder, så du ikke får brug for Elementor Pro. Og mens jeg bruger Master Addons her, er metoden universel: Byg overskriften som en skabelon, og indstil derefter dens beholderposition til Fast. Enhver overskriftsbygger, der lader dig redigere overskriften i Elementor, følger de samme tre klik.
2020-versionen af dette indlæg fortalte dig at droppe et CSS-id på en sektion og indsætte det i Navigation Menu-widget. Det var Sections-æraen. Elementor har brugt Flexbox Containers som standardlayout siden 3.6, og positionskontrollen sidder nu lige i panelet, så hele CSS ID-dansen er væk.
To forskellige adfærd kaldes ved samme navn, og at blande dem sammen er grunden til, at folk ender med at jage efter en indstilling, der ikke eksisterer.
A fast overskrift er på skærmen fra det øjeblik siden indlæses og aldrig forlader. Det er hvad position: fixed gør, og det er det, vi bygger her.
A sticky-on-scroll header sidder øverst normalt, ruller væk, og glider derefter ind igen, når den besøgende ruller op. Du vil se det kaldet smart rulle eller skjul-på-rulle. Det har brug for en rulleeffekt, og Elementor holder dem i Pro.
For de fleste websteder er den faste overskrift den, du faktisk ønsker, og det er den, du kan bygge gratis.
Her er udgangspunktet. En normal Elementor-header sidder øverst på siden som enhver anden beholder.
Rul lidt ned, og det er væk. Logo, menu, Anmod om gratis demo-knap, alt sammen fra toppen af skærmen. Så en besøgende, der kommer til din prissætning sektion og ønsker at klikke på Kontakten, skal rulle tilbage op for at finde menuen igen.
Det er hele problemet, en klæbrig header løser.
Du skal bruge gratis Elementor, version 3.6 eller nyere, så Containere er tændt.
Du skal også bruge en header skabelon for at anvende indstillingen på. Elementors egen Theme Builder er Pro-only, så tag en gratis: Master Addons inkluderer en gratis header builder, og dens Theme Builder håndterer footers, 404s, arkiver, og enkelte skabeloner også.
Har du allerede en header skabelon fra et andet plugin? Spring til Trin 2. Positionsindstillingen er native Elementor, så den opfører sig ens, uanset hvor din header kom fra.
Gå til Master Addons > Temabygger. Dine skabeloner er angivet efter type. Min har en sidehoved og en sidefod, begge Aktive, begge indstillet til at blive vist på tværs af hele webstedet.
Ingen overskrift endnu? Klik Tilføj ny skabelon, indstil typen til Header, skift Aktivering til, og indstil betingelsen til Hele webstedet. Den header builder docs dæk den, og strømmen er den samme, som jeg gik igennem i guide til redigering af sidefoden i Elementor.
Hold markøren over headerskabelonen og tryk Rediger med Elementor. Overskriften åbnes på sit eget lærred.
Folk tager denne fejl konstant, så vær præcis her: du vil have ydre beholder af overskriften. Ikke logoet, ikke nav-menu-widgetten, og ikke en indlejret beholder gemt inde i den.
Den pålidelige måde at være sikker på er Struktur panel, lagikonet i den øverste bjælke. Klik på det øverste niveau Container i det træ, og hele overskriften skal fremhæve. Hvis kun logoet eller menuen lyser, har du grebet et underordnet element, og indstilling af position på det vil fastgøre den ene widget til skærmen i stedet for din overskrift. Det ser bizart ud, og det er den første ting at kontrollere, om dit resultat er underligt.
Med overskriftsbeholderen valgt, skal du åbne Advanced faneblad og udvid Layout sektion. De Position dropdown har tre muligheder.
Standard er, hvad du har nu: overskriften ruller væk med siden. Absolut pins overskriften til siden snarere end skærmen, så det stadig ruller af, som er for overlay overskrifter, ikke klæbrig dem. Fast pins det til viewport, og det er den, du ønsker.
Pick Fast, og panelet udvides med orienteringskontrollerne.
Indstil vandret orientering til venstre med en forskydning på 0, og Lodret Orientering til Top med en forskydning af 0. Nul på begge limer overskriften helt øverst til venstre i viewport. Hæv den lodrette forskydning, hvis du hellere vil have overskriften svævede lidt under den øverste kant.
Elementor vil også kaste en advarsel på dig: “Tilpasset positionering betragtes ikke som bedste praksis for responsivt webdesign og bør ikke bruges for ofte.” Ignorer det. Det er en generel advarsel mod at sprede faste og absolutte elementer gennem et layout, og en fast overskrift er lærebogssagen, hvor det er det rigtige opkald. Bare tjek mobilvisningen, når du er færdig, som jeg vender tilbage til.
Stadig i layoutsektionen, find Z-indeks marker og sæt den til noget behageligt højt. Jeg bruger 99.
Z-indeks bestemmer hvilket element der sidder på toppen, når to overlapper hinanden. En fast overskrift vil med garanti overlappe dit sideindhold, når den besøgende ruller, og hvis dens z-indeks er for lavt, ruller indholdet lige over toppen af det. Det er den klassiske fejl, hvor overskriften er teknisk klistret, men skydere, popups og billeder pløjer lige igennem den.
Hvis noget stadig dækker overskriften, skal du støde tallet op. Det skal kun slå, hvad det taber til, og masser af skyder- og popup-plugins sætter deres eget z-indeks i tusindvis.
Hit Publicere.
Åbn live-webstedet, og rul. Overskriften forbliver låst til toppen af skærmen hele vejen ned.
Hvis det stadig ruller væk på frontenden, men ser lige i editoren, skal du rydde din cache, før du begynder at fejlfinde. Et caching-plugin vil med glæde tjene den gamle header CSS i et stykke tid.
Trinnene ovenfor får overskriften fastgjort. Hvad der følger er, hvad der adskiller en klæbrig overskrift, der overlever kontakt med et rigtigt websted fra en, du river tilbage ud en uge senere.
Et fast element løftes ud af det normale sideflow, så det holder op med at arve en baggrund fra noget. Hvis du aldrig indstiller en baggrundsfarve på overskriften, ruller dit sideindhold nedenunder det og viser lige igennem, og din menutekst bliver til ulæselig suppe i det øjeblik et billede passerer bag det.
Vælg overskriftsbeholderen, gå til Stil > Baggrund, og giv det en ensfarvet. Hvis du virkelig ønsker en gennemsigtig overskrift, er det et gyldigt udseende, men design derefter den første sektion til at arbejde bag det.
Samme grundlæggende årsag. En fast overskrift optager ikke længere plads i layoutet, så den første sektion glider op for at udfylde det hul, den efterlod, og en del af den ender med at blive fanget bag overskriften.
Tilføj top polstring til din første sektion, der nogenlunde matcher overskriftens højde. Hvis overskriften er 80px høj, skal du give helten 80px top polstring. Hvis du ikke er sikker på, hvor høj den er, skal du højreklikke på overskriften på forenden og inspicere den; højden er lige der i browserværktøjerne.
Telefonskærme er korte. En header, der føles fint på en desktop-skærm, kan sluge en alvorlig del af en telefons viewport og derefter følge den besøgende ned hver side.
Skift til mobilvisning i Elementors responsive tilstand, og klip headerens lodrette polstring. Positionskontrollerne er også per enhed, så du kan indstille Position tilbage til Default kun på mobilen, og lad overskriften rulle væk der. På en lang artikelside er det normalt det bedre opkald. Hvis du kører brugerdefinerede brudpunkter, skal Brugerdefineret Breakpoints udvidelse lader dig tune dette til din rigtige enhed bredder.
Ja, og det er den del, der er værd at forstå. Position: Fast er en native Elementor kontrol, ikke en Master Addons funktion. Master Addons gør præcis ét job her: giver dig en gratis header skabelon, der åbner i Elementor. Når du er i editoren, er den klæbrige del almindelig Elementor.
Så hvis du bygger overskrifter med en anden temabygger, eller dit tema sender en egen Elementor-redigerbar overskrift, gælder den samme Avanceret > Layout > Position > Fast sti. Det eneste, der ændres, er, hvor du går for at åbne overskriften til redigering.
Fast positionering løfter overskriften ud af sideflowet, hvorfor du skal padde den første sektion, så intet gemmer sig bag det. Hvis du vil springe det trin over, CSS position: sticky er alternativet. Det holder overskriften i flowet og stifter den kun, når den når toppen, så der er intet indholdsspring at rette.
Fangsten er, hvor du tilføjer CSS. Elementors per-element Custom CSS-boks er en Pro-funktion, men de gratis Master Addons Brugerdefineret CSS-udvidelse giver dig den samme boks uden omkostninger. Vælg overskriftsbeholderen, åbn dens Brugerdefineret CSS-felt, og indsæt dette:
selector {
position: sticky;
top: 0;
z-index: 99;
}selector er Elementor stenografi for det element, du redigerer, så du behøver ikke et id eller en klasse. En gotcha: hvis en overordnet beholder har overflow: hidden, klæbrig lydløst stopper med at arbejde, så klart, at fra forfaderen, hvis overskriften nægter at pin. Den fulde adfærd er dokumenteret i MDN-reference om CSS-position.
Tre af disse ruter er gratis, og hver passer til et forskelligt behov. Hvis du foretrækker et guidet panel frem for den rå Advanced-fane, Master Addons Positioneringsforlængelse udsætter den samme Faste kontrol på ét sted.
| Metode | Behovskode | Omkostning | Indholdshop | Bedst til |
|---|---|---|---|---|
| Position Fast (native eller Positionering) | No | Free | Har brug for en polstring fix | Altid synlig header |
| position: klæbrig (Brugerdefineret CSS) | Et uddrag | Free | Ingen | Rent layout, intet spring |
| Elementor Pro klæbrig rulle effekter | No | Betalt | Håndteret | Skjul-på-rul og krymp |
| Dedikeret sticky-header plugin | No | Free | Håndteret | Forudbyggede rulleeffekter |
Vil du have overskriften til at skrumpe eller bytte farve, når den besøgende ruller? Der læser rulleafstand, hvilket CSS ikke kan gøre alene. Et par linjer JavaScript gennem de gratis Master Addons Brugerdefineret JS udvidelse kan skifte en klasse på overskriften forbi en rulletærskel, så styler du den klasse i Custom CSS. Det er mere arbejde end et plugin, der sender effekten, så vej indsatsen, før du bygger den i hånden.
Når den er limet til skærmen, er overskriften synlig 100% af tiden, så den er et sekunds pass værd.
Trim højden først. En høj header, der aldrig går væk, bliver irriterende hurtigt, og hver pixel, du gemmer, er en pixel af indhold, som den besøgende kan se. Se derefter på, hvad der er i det: en permanent slot på skærmen er et godt hjem for dit bedste link, uanset om det er en demo, prissætning eller kontaktknap.
Stort websted? Master Addons Navigation Menu widget bygger mega menuer, så du kan holde hele strukturen et klik væk uden header vokser. Og holde øje med vægten, da headeren nu indlæses på hver side og aldrig losser. Den Elementor hastighedsguide er værd at læse, hvis din load tid allerede er stram.
Hvis du helst ikke vil bygge en header fra bunden, vil Master Addons skabelonbibliotek har færdige overskrifter, du kan importere og derefter gøre klæbrig med de samme trin, og den Skabelonsæt send matchende sidehoveder og sidefødder til et helt websted.
Ja. Positionen: Fast kontrol er en del af gratis Elementor. Du behøver kun en header skabelon til at anvende det på, og Master Addons Theme Builder giver dig en gratis. Elementors egen Theme Builder og dens klæbrige rulle effekter er Pro-only dele.
En fast overskrift er altid synlig fra sidebelastning og ruller aldrig væk. En sticky-on-scroll-header ruller af, og glider derefter ind igen, når den besøgende ruller op. Position: Fast giver dig den første. Den anden har brug for Elementor Pros rulleeffekter.
En fast overskrift fjernes fra det normale sideflow, så afsnittet nedenfor glider op under det. Tilføj toppolstring til din første sektion, der nogenlunde matcher overskriftens højde, og indstil en solid baggrundsfarve på overskriftsbeholderen.
z-indekset er for lavt. I fanen Avanceret under Layout skal du indstille Z-indeks til 99 (eller højere) på overskriftsbeholderen, så den stables over alt andet på siden.
Ofte ikke. En fast header spiser knap lodret plads på en telefon. Elementors positionskontroller er pr. enhed, så skift til mobilvisning og indstil Position tilbage til Standard, eller skær i det mindste headerens polstring ned.
Oprettelse af en klæbrig overskrift i Elementor er tre indstillinger på ét element. Vælg overskriftsbeholderen, indstil Position til Fast med nul forskydninger, hæv z-indekset. Alt derefter er oprydning: giv overskriften en solid baggrund, pad den første sektion, så intet gemmer sig bag den, og kontroller, hvordan det føles på en telefon, før du kalder det gjort.
Det hele kører på gratis Elementor. Det eneste du behøver er en header skabelon til at redigere, hvilket er, hvad den gratis Temabygger i Master Addons giver, sammen med sidefod, 404, arkiv, og enkelte skabeloner. Hvis du senere vil have resten af værktøjskassen, det er, hvad den Pro planer dække, men intet i denne tutorial har brug for det.
Relateret læsning: sådan redigeres sidefoden i WordPress med Elementor, sådan opretter du en skæv baggrund i Elementor, og sådan oprettes en én side hjemmeside med Elementor.
Få alle de premium widgets og skabeloner, du ønsker, bygget med ren kode, der holder dit websted hurtigt. Drop bloat, ikke funktionerne.
110+ Premium-widgets og livstidsopdateringer – Byg hinsides grænser. En eksklusiv skabelse af Pixar Labs
Hver Master Addons Pro licens leveres med en 14-dages refusion uden spørgsmål, levetid opdateringer, og prioriteret support. Prøv det risikofrit dette forår – 40% FRA med “NULSTIL40″ kupon.