10 Gratis Elementor Hero Sektion skabeloner, du kan importere i 2 minutter

De fleste gratis Elementor hero sektion skabeloner har det samme problem: du importerer en JSON-fil, får en frossen layout, og derefter bruge en time på at klikke ind i individuelle overskrift widgets, billede widgets, og afstandsstykker forsøger at gøre det til din. Ændre accent farve? Det er tolv separate stil paneler.

Før du scroller: denne kollektion er lige vokset til 11. Den nyeste, Loose Ends, GPU partikelhelten sidder på # 11, blev bygget efter vi filmede YouTube-videoen, så du vil ikke finde det der. Må ikke springe det. Tusind partikler, der kredser om din overskrift og undviger din besøgendes markør, er ikke noget, du vil se i noget andet Elementor-bibliotek, og der er en animeret forhåndsvisning nedenfor, så du kan se den bevæge sig.

Vi byggede disse 10 heltesektioner forskelligt. Hver enkelt importerer som en enkelt widget gennem Master Addons Widget Builder. Når du trækker det ind i Elementor, er hver overskrift, afsnit, knap, link og billede et mærket felt i fanen Indhold, og hele farveskemaet sidder i fanen Stil som 3 til 6 farvevælgere. Skift en “Accentfarve” og knapperne, svævetilstande, gløder og understreger al opdatering sammen, fordi CSS'en udleder hver sekundær farvetone fra de basisfarver, du vælger.

Alle 10 er gratis at downloade på denne side. Hver zip indeholder widgetfilen, de demobilleder, du ser i skærmbillederne (som upload-klare PNG'er plus de originale SVG'er), og en README, der kortlægger hvert billede til dets nøjagtige felt. Animationerne (parallaksebjerge, selvtegningsdiagrammer, kredsende ingrediensmærker) kommer automatisk, og hver eneste af dem respekterer den besøgendes indstilling med reduceret bevægelse, så du sender ikke tilgængelighedsproblemer sammen med øjenbolsjen.

Skærmbilleder forklarer ikke, hvordan animationen faktisk ser ud. Jeg lavede en video til dig, som du skal se, så du får en ordentlig idé om animationen, og hvad du får, efter du har downloadet skabelonen med heltesektioner.

Og en helt er kun den første skærm. Alt, hvad en besøgende ruller til efter det – funktionsgitteret, der forklarer, de vidnesbyrd, der overbeviser, prisfastsættelsestabellen, der lukker, FAQ, der dræber den sidste indvending – stadig skal bygges. Vi pakkede alle dem ind i en ledsagende samling af 30+ gratis Elementor sektion skabeloner, bygget på samme widget-baserede måde: Vælg en helt her, stak resten af siden derfra, og en komplet landingsside kommer sammen på en eftermiddag i stedet for en uge.

Nedenfor finder du alle 10 designs med rigtige skærmbilleder, en ærlig note om, hvem hver enkelt faktisk passer, og derefter en trin-for-trin importvejledning med skærmbilleder fra den nøjagtige arbejdsgang.

Nogle helte læser bedre med bevægelse i dem end med et stillbillede. Hvis det er den retning, du går, er 20 Elementor karruseldesign er ledsageren sat til denne – coverflow, en billedharmonika, en gardinserviet, en bane, en drag-scroll-strimmel og en helteskyder med fuld blødning kaldet Plinth, der bærer sit eget billedtekstpanel og call-to-action.

De importerer nøjagtigt som heltene nedenfor: en JSON-fil, Widget Builder, derefter en widget med mærkede felter. Otte af de tyve kører på det gratis plugin og tolv har brug for Pro, hvilket er den ene forskel, der er værd at vide, før du vælger. Hvert design har en live demo, så du kan se en bevægelsesstil i ti sekunder i stedet for at gætte fra et skærmbillede.

Hvad er der i denne samling

• 1. Pulseboard — SaaS / analytics product
• 2. Alpenrute — rejse & eventyr
• 3. Ember & Oak — kaffebar / restaurant
• 4. Atelier Norr — mode & e-handel
• 5. Offbeat Studio — kreativt bureau
• 6. Smede Atletik — fitness & fitness
• 7. Wiggly Minds — kids apps & uddannelse
• 8. Studio Meridian — arkitektur & interiør
• 9. Lowtone — begivenheder & musik
• 10. Måne — skønhed & hudpleje
• 11. Løse ender – for porteføljer, studier, og lancering sider, der har brug for en kæbe-drop
• Sådan importeres en heltesektion til Elementor (trin for trin)
• FAQ

Hvorfor disse ikke er almindelige sektionsskabeloner

En hurtig skelnen før udstillingsvinduet, fordi det ændrer, hvordan du vil bruge dem.

En normal Elementor sektion skabelon er et gemt arrangement af lager widgets. Det ser færdigt ud, men strukturelt er det snesevis af løse dele. Disse 10 helte er brugerdefinerede widgets bygget med Widget Builder: HTML, CSS, og JavaScript pakket bag Elementor kontroller. Tre praktiske konsekvenser:

• Redigering er hurtigere. Musikfestivalhelten har 24 felter (dato, placering, tre lineup-rækker med deres egne links, to knapper, farver). Du redigerer dem i ét panel i stedet for at jage gennem et træ af indlejrede beholdere.
• Animationer overlever. JavaScript'et sendes inde i widgetten: magnetiske knapper, optællingsstatistikker, museparallakse. Ingen ekstra plugins, ingen CDN-kald undtagen Google Fonts, som hver widget indlæser én gang, af sig selv.
• Intet lækker. Hvert stylesheet er scoped til sin egen wrapper klasse, og hver animation navn er prefixed, så to helte på samme side vil ikke kæmpe mod hinanden eller dit tema stilarter. Vi lærte, at en på den hårde måde.

Du får brug for Master Addons plugin PRO installeret sammen med Elementor. Widget Builder og dens importfunktion er inkluderet i den gratis version, hvilket er, hvordan 30.000 + websteder allerede kører det.

1. Pulseboard — for SaaS og analyseprodukter

Den klassiske split-helt, kopi til venstre og produkt til højre, men med tre detaljer, der får besøgende til at stoppe. Indtægtsdiagrammet tegner sig selv på belastning med en pulsprik, der rejser langs linjen. To stat-kort flyder over instrumentbrættet på en langsom bob. Og hele det visuelle vipper et par grader mod din markør, hvilket gør en flad mockup læse som et objekt.

Den social-proof række nedenunder tæller op til dit nummer (standard: 4.700 hold). Du skriver et almindeligt nummer i panelet, og animationen håndterer resten. Dette er layoutet at vælge, hvis dit produkt har en skærm, der er værd at vise: analyseværktøjer, CRM'er, dashboards, bookingsystemer. Hvis dit produkt ikke demo godt i et skærmbillede, skal du se på Offbeat (#5) i stedet, fordi dette layout lever eller dør på det højre billede.

Du kan redigere: 4-delt overskrift (det understregede accentord er sit eget felt), badgetekst, afsnit, 2 knapper med fuld linkkontrol, optællingsnummer, korrekturtekst, 3 billeder, 6 farver.

2. Alpenrute — for rejser, ture, og udendørs mærker

Et bjergpanorama i fuld skærm bygget af tre separate billedlag. Flyt din mus, og lagene skifter med forskellige hastigheder. Det er ægte dybde, ikke et fladt foto med tekst på toppen. Skyer driver hen over på 55- og 90-sekunders sløjfer, og en lodret højdeticker til højre tæller fra 0 til 2.847 m, når siden indlæses. Der er endda en lille vandrer med en blinkende forlygte på den forreste højderyg. Ingen har brug for vandreren. Alle husker vandreren.

Fordi landskabet kommer fra tre billedfelter, kan du bytte bjergene til dine egne lagdelte kunstværker (klitter, kystlinje, byens skyline) og holde parallaksen. Faktarækken (27 ruter / 8 vandrere max / 19 år) er seks redigerbare felter, og det er her, denne helt tjener tillid: specifikke tal i stedet for adjektiver. Bedst egnet: trekkingfirmaer, rejsearrangører, nationalparksteder, ethvert mærke, der sælger et sted i stedet for et produkt.

Du kan redigere: 2-linjers overskrift, øjenbryn, afsnit, 2 knapper + links, højdenummer og etiket, 3 faktapar, 4 kulisser, 4 farver (hele himmelgradienten gentoner fra én grundfarve).

3. Ember & Oak — for coffee shops, cafés, and restaurants

Mørk espresso baggrund, serif overskrift med en kursiv rav accent ord, og signaturen stykke: en ring af tekst læsning “LILLE BATCH · RISTET HVER TORSDAG · SINGLE ORIGIN”, der roterer langsomt omkring en top-down latte foto, mens damp stiger fra koppen. En kaffepose læner sig ind i hjørnet og retter op, når svævede. Nederst ruller et oprindelsesnavn telt (Yirgacheffe, Huila, Sidra...) på løkke og pauser på svæve.

Ringteksten er ét redigerbart felt, så et bageri skriver “SOURDOUGH · BAKED AT 5AM · NO SHORTCUTS” og hele personlighedsoverførslerne. Samme for teltet: ét felt, trykt to gange internt, så løkken aldrig viser en søm. Arbejder for enhver fødevarevirksomhed, hvor håndværk er banen — risterier, bagerier, bryggerier, gård-til-bord restauranter.

Du kan redigere: 3-delt overskrift med accentord, afsnit, prisnote, 2 knapper + links, ringetekst, markeringstekst, 2 billeder, 5 farver.

4. Atelier Norr — for fashion labels and premium e-commerce

Det mest støjsvage design i sættet, og den mest redaktionelle. To overdimensionerede ord (STILLE / SKRÆDDERSY som standard) skræver en buet portrætramme, hvert ord tørrer ind fra en klippet kant på belastning. Hold portrættet og det crossfades til et andet kig, mens billedteksten nedenunder skifter fra “01 / 02 — The Longline Coat” til “02 / 02 — The Drape Dress”. Den to-billede svævebytte er hele widget i miniature: tilbageholdende, men levende.

Kun tre farver til at styre (lærred, blæk, salvie accent), fordi designets magt er typografi og negativ plads snarere end palet. Hvis dit brand fotograferer godt, og du vil have webstedet til at føle sig som en lookbook, er dette den ene. Mode, smykker, keramik, møbler. Hvis du har brug for at proppe fem værdiforslag over folden, vil det bekæmpe dig, og det skal det.

Du kan redigere: begge overskriftsord, lodret sæsonmærke, afsnit, knap + link, hover-tip, 2 look-billeder med 2 billedtekster, sidefodsstribe, 3 farver.

5. Offbeat Studio — for kreative bureauer og studier

Kobolt, koral, og citron på off-white — Bauhaus plakatenergi. Overskriften råber med store bogstaver med et fremhævet accentord, der får et gult swipe understregning et halvt sekund efter belastning. Under det sidder tre porteføljefliser let roteret som udskrifter på et bord; hver enkelt retter sig, løfter og vipper mod din markør i 3D på hover. Et “BOOKING FOR Q4” klistermærke snurrer dovent over collagen.

Den cirkulære call-to-action er det stykke, folk leger med. Det er magnetic: det følger din markør inde i sin radius og springer tilbage, når du forlader. Hver flise har sit eget linkfelt, så collagen fordobles som en mini portefølje med tre casestudier, der kan klikkes direkte fra helten. For agenturer, designere, fotografer, alle, hvis arbejde er banen.

Du kan redigere: 3 servicemærker, kicker, 5-delt overskrift (accentord separat), afsnit, magnetisk knap + link, 3 fliser med 3 links, klistermærke tekst, klient markeringsramme, 5 farver.

6. Forge Atletik — for fitnesscentre og fitness mærker

Trækul og voltgrøn, kondenseret store bogstaver og en overskrift, der smækker i: hver linje lander med en skæv-og-skala snap i stedet for en høflig fade. Linje to er skitseret i stedet for fyldt, linje tre tager volt farve. Bag alt, en kæmpe spøgelse ord (FORGE) driver mod din rulle. Atleten billede sidder i en vinklet parallelogram ramme med en volt skråstreg skære layoutet diagonalt.

Stats tæller op langs bunden: 14 platforme, 31 klasser, 24 medlemmer pr træner max. Bemærk, hvad det sidste tal gør. “Medlemmer pr træner, max” er et løfte, ikke en prale, og det er den slags linje, der fylder intro sessioner. Byt spøgelsesordet til dit fitnesscenters navn i ét felt. Bygget til styrke fitnesscentre, CrossFit-bokse, kampsportstudier og trænere, hvis brand er intensitet.

Du kan redigere: 3-linjers overskrift, øjenbryn, afsnit, spøgelsesord, lodret tag, 2 knapper + links, 3 stat-par, atletbillede, 4 farver.

7. Wiggly Minds — for kids apps, schools, and education

Slik pasteller, afrundet type, og tre klat maskotter: en læser en bog, en holder en blyant, en vinker en stjerne tryllestav. De popper ind med en fjeder, bob blidt, og genert væk fra din markør, når den bevæger sig. Stjerner blinker på tværs af baggrunden, en gul squiggle tegner sig selv under det vippede accent ord, og hovedknappen klemmer ned som gelé, når den trykkes. En hvid bølge lukker sektionen, så den flyder ind i hvad der kommer næste.

Det centrerede layout holder forældre (de faktiske købere) på en klar sti: aldersinterval badge, løfte, et afsnit, der svarer “er denne skærm tid jeg vil fortryde?”, tillid linje med App Store rating. Maskoterne er tre billedfelter. Byt i dine egne tegn og bounce, skygge, og markør-sky adfærd gælder automatisk. For læring apps, dagplejer, kids 'klubber, pædiatriske praksis, og legetøj mærker.

Du kan redigere: overskrift med vippet accentord, badge, afsnit, 2 knapper + links, tillidslinje, 3 maskotbilleder, 6 farver.

8. Studio Meridian — for arkitekter, indretningsarkitekter, og porteføljer

Schweizisk gitterdisciplin: en metasøjle (øv, grundlagt, projekter på stedet), en tynd 300-vægts overskrift med ét ord med mursten, og et stort projektfoto, der afslører med en serviet. Et papirfarvet gardin glider af, og billedet afregner fra en lille zoom over et helt sekund. Den detalje, folk mailer os om, er grundplanen i sidepanelet, som tegner sig selv — vægge først, så dørsvingninger, så rum etiketter fading i. Det er en SVG animation, der skibe inde i demo-billedet, ingen plugin involveret.

Femogtyve redigerbare felter gør dette til den mest datarige helt af de ti. Hver meta-etiket, begge billedtekster, selv koordinaterne i bundreglen. Kun tre farver, og det er bevidst: grafit, papir og mursten er et system, og systemer er, hvad dette publikum respekterer. For arkitektfirmaer, interiørstudier, bygningsingeniører og enhver portefølje, hvor tilbageholdenhed signalerer kompetence.

Du kan redigere: 5-delt overskrift, afsnit, knap + tekstlink med URL'er, 3 metapar, foto + billedtekst, grundplan + billedtekst, koordinatregel, 3 farver.

9. Lowtone — til festivaler, koncerter, og event sider

Det højeste design her, og det tjener det. Et kæmpe ordmærke opdeler mellemordet i en orange-til-violet gradient, en glødende kugle driver bag indholdet og læner sig væk fra din markør, og langs bunden løber en fuld bredde equalizer: snesevis af barer, hver animere på sin egen rytme, så strimlen aldrig synligt sløjfer. Barerne er genereret af widgetens eget script og trække deres gradient fra din Style fane farver, så recoloring festivalen recolors lyden.

Tre lineup rækker (FRI / SAT / SUN) hver bære deres egen etiket, act liste, og link, så du kan sende hver dag til sin egen tidsplan side. Gradienten er tre separate farvestop i fanen Stil. Skift dem og ordmærket, knapper, glød, og equalizer følger alle. For festivaler, spillesteder, klub nætter, konferencer med headliners, og album lanceringer.

Du kan redigere: split ordmærke, dato, placering, afsnit, 3 lineup rækker med 3 links, 2 knapper + links, orb billede, 5 farver inklusive alle 3 gradient stop.

10. Måne — for hudpleje, skønhed, og wellness mærker

Tåget lavendel og fersken hazes sløre og drive bag en serif overskrift, hvis kursiv linje, “natten skift.”, får en blød gradient understregning, der blomstrer udad. Produktflasken flyder blidt i midten af en stiplet ring, og tre ingrediens badges (2% retinal, 5% havre gæring, 0% duft) orbit den på en 26-sekunders løkke, modsat roterende, så de holder sig oprejst hele vejen rundt.

Disse badges er konverteringsspillet. Procentvise påstande er, hvad hudplejekøbere scanner efter, og her cirkler de bogstaveligt talt rundt om produktet. Alle seks badgeværdier og etiketter er almindelige tekstfelter. Kravrækken nedenunder (dermatolog testet · duftfrit · genanvendeligt glas) runder tillidshistorien ud. For hudpleje, kosttilskud, stearinlys, hårpleje — ethvert produkt, hvor ingredienslisten er argumentet.

Du kan redigere: 2-delt overskrift, øjenbryn, afsnit, 2 knapper + links, 3 krav, 3 kredsende badgepar, flaskebillede, 4 farver.

11. Løse ender – for porteføljer, studier, og lancering sider, der har brug for en kæbe-drop

Denne er ny, og det er den mest ambitiøse ting, vi har skubbet gennem Widget Builder indtil videre: en overskrift på fuld skærm, der sidder i øjet på en hvirvel af tusind partikler, simuleret på den besøgendes GPU i realtid. Flyt musen og sværmdelene rundt om markøren, og derefter springer tilbage. Kameraet driver lidt også, hvilket gør feltet læse som et mellemrum snarere end en baggrundsvideo. Overskriften afkoder sig selv med en karakter scramble på belastning, den primære knap bærer en langsom lys sweep, og en film-korn lag holder den mørke baggrund fra banding.

Partiklerne er ikke ét fast udseende. En dropdown i fanen Stil skifter feltet mellem Strands (farverige hvirvlende filamenter), Snow (langsom hvid drift), Stars (en næsten stillestående stjernemark), og Universe (langt deep-space wisps). Fire skydere styrer tæthed (100 til 2.000 partikler), størrelse, dybde og hvor hårdt sværmen reagerer på musen. Der er også en justeringskontrol, der flytter hele indholdsstakken til venstre, i midten eller til højre, så den samme widget fungerer som en redaktionel venstrejusteret helt eller en centreret splash-side. En ærlig note: 3D-motoren indlæses fra en CDN, omkring 1,2 MB cachelagret efter det første besøg, og kører på WebGPU i Chrome og Edge med et WebGL2-tilbagefald alle andre steder. Hvis den anmodning mislykkes, gengiver helten som en normal stylet sektion, og intet går i stykker. Ingen billeder at uploade enten; hele scenen genereres.

Du kan redigere: pille tekst, øjenbryn, overskrift, tagline, 2 knapper med fuld link kontrol, rulle cue, 3 bund-bar tekster, indhold justering (venstre / center / højre), partikeltype (strenge / sne / stjerner / univers), tæthed, størrelse, dybde og mus-reaktion skydere, 5 farver.

Sådan importeres en heltesektionskabelon til Elementor (trin for trin)

Hele processen tager omkring to minutter pr. widget. Du skal bruge WordPress med Elementor og the Master Addons PRO plugin aktiv. Her er den nøjagtige arbejdsgang, screenshottet fra en reel import af musikfestivalhelten.

Trin 1: Fjern låsen til download

Dobbeltklik på lynlåsen (her, music-festival-hero.zip). Indeni finder du tre ting: widgetfilen (widget-music-festival.json), a demo-images mappe med upload-klare PNG'er, og en README.txt det fortæller dig, hvilket billede der hører hjemme i hvilket felt. Der er også en svg-originals mappe — mere om det i FAQ.

Trin 2: Importer JSON til Widget Builder

I din WordPress admin, gå til Master Addons → Widget Builder og klik Importer Widget. Træk i .json fil ind i dialogen, eller klik på Gennemse filer. Kun JSON går her. Billederne kommer senere, gennem det normale mediebibliotek.

Trin 3: Kontroller widgetten og gem

Widgetten åbnes i bygherren med alt, der allerede er kablet: indholdssektioner til venstre, HTML/CSS/JS bag faner og en dokumentationssidebjælke, der viser hvert felttoken. Du behøver ikke at røre ved noget af det. Bare tryk Gem indstillinger. Hvis du er nysgerrig efter, hvordan felterne forbinder til koden, skal Vejledning til indstillinger for Widget Builder forklarer token-systemet.

Trin 4: Træk det ind på din side

Åbn en vilkårlig side med Elementor. Din nye widget vises i panelet under Favoritter; søg dens navn, hvis du ikke får øje på den. Træk den ind i en container. Et tip til dig: indstil containerens Indholdsbredde til fuld bredde så kant-til-kant designs som festivalen og rejsehelte kan faktisk nå kanterne.

Trin 5: Rediger indholdet og links

Klik på widget og fanen Indhold lister hver redigerbare stykke, grupperet den måde, designet er grupperet: Indholdsområde, Lineup Rækker, Knapper, Billeder. Skriv over enhver tekst og preview opdateres live. Hver knap og linket række har en ordentlig Elementor link kontrol. Indsæt din URL, og tryk derefter på gearet for at skifte “åbn i nyt vindue” og “nofollow”.

Trin 6: Upload demobillederne

I afsnittet Billeder skal du klikke på hvert felt og uploade den matchende fil fra demo-images mappe. README kortlægger dem, hvis en widget har flere. Demo-PNG'erne eksporteres ved 2x opløsning, så de forbliver skarpe på nethindens skærme. Byt dine egne billeder ind når som helst; feltet er en standard WordPress medievælger. Derefter Publicere. Færdig.

For at restyle: åbn Fanen Style. Hver helt udsætter sin fulde palet som en håndfuld farvekontroller, og hver afledt nuance (hovertilstande, gløder, grænser, gradienter) genberegner fra dem. Du kan ikke halvfarve disse designs, hvilket er præcis pointen.

FAQ

Alle 10 heltesektioner er gratis til personlige og kommercielle projekter. Bygget og testet af Master Addons-teamet på Elementor med Master Addons v3.x. Spørgsmål eller en widgetanmodning? Fortæl os i kommentarerne. Samlingen vokser baseret på, hvad folk beder om.