Die meisten kostenlosen Elementor-Helden-Abschnittsvorlagen haben das gleiche Problem: Sie importieren eine JSON-Datei, erhalten ein eingefrorenes Layout und klicken dann eine Stunde lang in einzelne Überschriften-Widgets, Bild-Widgets und Abstandshalter, um sie zu Ihrem zu machen. Ändern Sie die Akzentfarbe? Das sind zwölf separate Stilfelder.
Bevor Sie scrollen: Diese Sammlung wuchs gerade auf 11. Die neueste, die Lose Enden#11 sitzenden GPU-Partikelhelden, wurde gebaut, nachdem wir das YouTube-Video gedreht haben, so dass Sie es dort nicht finden Nicht überspringen. Tausend Partikel, die Ihre Überschrift umkreisen und dem Cursor Ihres Besuchers ausweichen, werden Sie in keiner anderen Elementor-Bibliothek sehen, und unten gibt es eine animierte Vorschau, damit Sie zusehen können, wie er sich bewegt.
Wir haben diese 10 Helden-Abschnitte anders gebaut Jeder importiert als Einzelwidget Durch die Master Addons Widget Builder. Wenn Sie es in Elementor ziehen, ist jede Überschrift, jeder Absatz, jede Schaltfläche, jeder Link und jedes Bild ein beschriftetes Feld in der Inhaltsregisterkarte, und das gesamte Farbschema befindet sich in der Registerkarte Stil als 3 bis 6 Farbwähler Ändern Sie eine “Accent Color” und die Tasten, schweben Sie Zustände, leuchtet und unterstreicht alle Aktualisierungen zusammen, da das CSS jede sekundäre Tönung aus den von Ihnen ausgewählten Basisfarben ableitet.
Alle 10 sind kostenlos auf dieser Seite herunterzuladen Jeder Zip enthält die Widget-Datei, die Demo-Bilder, die Sie in den Screenshots sehen (als Upload-fähige PNGs plus die ursprünglichen SVGs), und ein README, das jedes Bild genau seinem Feld zuordnet Die Animationen (Parallaxenberge, selbstzeichnende Diagramme, umlaufende Zutatenabzeichen) kommen automatisch daher, und jeder von ihnen respektiert die Einstellung des Besuchers in reduzierter Bewegung, sodass Sie keine Barrierefreiheitsprobleme zusammen mit der Augenweide versenden.
Wie die Animation tatsächlich aussieht, erklären Screenshoots nichtIch habe für euch ein Video gemacht, das ihr euch ansehen solltet, damit ihr eine richtige Vorstellung von der Animation bekommt und was ihr bekommt, nachdem ihr die Vorlage für die Heldenabschnitte heruntergeladen habt.
Und ein Held ist nur der erste Bildschirm Alles, was ein Besucher danach scrollt – das Featuregitter, das erklärt, die Erfahrungsberichte, die überzeugen, die Preistabelle, die sich schließt, die FAQ, die den letzten Einwand tötet „A-C-Hinweis muss noch aufgebaut werden. Wir haben all das in eine Begleitsammlung gepackt 30+ kostenlose Elementor-Abschnittsvorlagen, auf die gleiche Widget-basierte Weise aufgebaut: Wählen Sie hier einen Helden aus, stapeln Sie von dort aus den Rest der Seite, und eine vollständige Landingpage wird an einem Nachmittag statt an einer Woche zusammengestellt.
Im Folgenden findet ihr alle 10 Designs mit echten Screenshots, eine ehrliche Anmerkung, wer eigentlich jeweils passt, und dann eine Schritt-für-Schritt-Importanleitung Mit Screenshots aus dem genauen Workflow.
Manche Helden lesen besser mit Bewegung darin als mit einem StandbildWenn du in diese Richtung gehst, wird die 20 Elementorkarusselldesigns Der Begleiter ist auf diesen einen – Abdeckungsfluss eingestellt, ein Bildakkordeon, ein Vorhangtuch, eine Umlaufbahn, ein Drag-Scroll-Streifen und ein Vollblut-Heldenschieber namens Plinth, der über ein eigenes Bildunterschriftspaneel und Call-to-Action verfügt.
Sie importieren genau wie die Helden unten: eine JSON-Datei, Widget Builder, dann ein Widget mit beschrifteten Feldern Acht der zwanzig laufen auf dem kostenlosen Plugin und zwölf brauchen Pro, das ist der einzige Unterschied, den es zu wissen lohnt, bevor man sich aussucht Jedes Design hat eine Live-Demo, so dass man sich zehn Sekunden lang einen Motion Style ansehen kann, anstatt aus einem Screenshot zu raten.
Was in dieser Sammlung ist
- 1. Pulseboard Produkt SaaS / Analytik
- 2. Alpenrute & Abenteuer
- 3. Bernstein & Eiche Kaffeeshop / Restaurant
- 4. Norr Norr & Mode & E-Commerce
- 5. Offbeat Studio Kreativagentur
- 6. Forge Athletics Fitnessstudio und Fitness
- 7. gly Minds & Wig-Kind-Apps & Bildung
- 8. Studio Meridian & Innenräume
- 9. Lowtone Veranstaltungen & Musik
- 10. Måne & Hautpflege
- 11. Loose Ends – für Portfolios, Studios und Startseiten, die einen Kiefertropfen benötigen
- So importieren Sie einen Heldenabschnitt in Elementor (Schritt für Schritt)
- FAQ
Warum das keine gewöhnlichen Abschnittsvorlagen sind
Eine kurze Unterscheidung vor dem Schaufenster, denn es ändert sich, wie Sie sie verwenden.
Eine normale Elementor-Abschnittsvorlage ist eine gespeicherte Anordnung von Stock-Widgets. Sie sieht fertig aus, aber strukturell sind es Dutzende loser Teile Diese 10 Helden sind Benutzerdefinierte Widgets Mit dem Widget Builder erstellt: HTML, CSS und JavaScript, verpackt hinter Elementor-Steuerelementen. Drei praktische Konsequenzen:
- Die Bearbeitung geht schneller. Der Musikfestival-Held hat 24 Felder (Datum, Ort, drei Lineup-Reihen mit eigenen Links, zwei Knöpfe, Farben).Man bearbeitet sie in einem Panel, anstatt durch einen Baum aus verschachtelten Containern zu jagen.
- Animationen überleben. Das JavaScript wird im Widget ausgeliefert: Magnettasten, Count-up-Statistiken, Mausparallaxe Keine zusätzlichen Plugins, keine CDN-Aufrufe außer Google Fonts, die jedes Widget einmal alleine lädt.
- Nichts leckt. Jedes Stylesheet ist auf seine eigene Wrapper-Klasse beschränkt und jeder Animationsname ist vorangestellt, sodass zwei Helden auf derselben Seite weder gegeneinander noch gegen die Stile Ihres Themas kämpfen. Das haben wir auf die harte Tour gelernt.
Du wirst das brauchen Master Addons Plugin PRO neben Elementor installiert Der Widget Builder und seine Importfunktion sind in der kostenlosen Version enthalten, so führen ihn bereits 30.000+ Seiten aus.
1. Pulseboard Produkte für SaaS und Analytics
Der klassische Split-Held, links Kopie und rechts Produkt, aber mit drei Details, die Besucher zum Stoppen bringen Das Umsatzdiagramm sich selbst zieht Auf Last mit einem Pulspunkt, der entlang der Linie wandert Zwei Stat-Karten schweben auf einem langsamen Bob über das Armaturenbrett Und das ganze Visual neigt sich ein paar Grad in Richtung Ihres Cursors, was ein flaches Mockup als Objekt lesen lässt.
Die sozialdichte Zeile darunter zählt bis zu Ihrer Nummer (Standard: 4.700 Teams).Sie geben eine einfache Nummer in das Panel ein und die Animation verarbeitet den Rest. Dies ist das Layout, das Sie auswählen sollten, wenn Ihr Produkt einen Bildschirm hat, der es wert ist, angezeigt zu werden: Analysetools, CRMs, Dashboards, Buchungssysteme Wenn Ihr Produkt in einem Screenshot nicht gut demoiert, schauen Sie sich stattdessen Offbeat (#5) an, denn dieses Layout lebt oder stirbt auf diesem rechten Bild.
Sie können bearbeiten: 4-teilige Überschrift (das unterstrichene Akzentwort ist ein eigenes Feld), Abzeichentext, Absatz, 2 Schaltflächen mit Volllinksteuerung, Anzahl der Auszählungen, Korrekturtext, 3 Bilder, 6 Farben.
2. Alpenrute „Marken für Reisen, Touren und Outdoor
Ein aus drei getrennten Bildschichten aufgebautes Vollbild-Bergpanorama Bewege deine Maus und die Schichten verschieben sich mit unterschiedlichen Geschwindigkeiten, das ist echte Tiefe, kein flaches Foto mit Text obendrauf Wolken treiben auf 55 - und 90-Sekunden-Schleifen hinüber, und ein vertikaler Höhenticker rechts zählt von 0 bis 2.847 m als Seitenladevorgabe Es gibt sogar einen winzigen Wanderer mit blinkender Stirnlampe auf dem vorderen Grat Niemand braucht den Wanderer Jeder erinnert sich an den Wanderer.
Weil die Szenerie aus drei Bildfeldern stammt, kann man die Berge gegen eigene Schichtkunstwerke (Dünen, Küstenlinie, Stadtsilhouette) tauschen und die Parallaxe beibehalten, die Faktenzeile (27 Routen / 8 Wanderer max / 19 Jahre) sind sechs bearbeitbare Felder, und dort verdient dieser Held Vertrauen: spezifische Zahlen statt Adjektive Am besten passen: Trekkingunternehmen, Reiseveranstalter, Nationalpark-Seiten, jede Marke, die einen Ort statt ein Produkt verkauft.
Sie können bearbeiten: 2-zeilige Überschrift, Augenbraue, Absatz, 2 Knöpfe + Links, Höhennummer und Etikett, 3 Faktenpaare, 4 Szeneriebilder, 4 Farben (der gesamte Himmelsverlauf wird von einer Grundfarbe neu getönt).
3. Ember & Oak & E-Läden, Cafe und Restaurants
Dunkler Espressohintergrund, Serifenschlagzeile mit kursivem Bernsteinakzentwort, und das Signaturstück: ein Textring mit der Aufschrift “KLEINER BATCH · JEDEN DONNERSTAG GERÖSTET · EINZELNER URSPRUNG”, der sich langsam um ein Lattefoto von oben nach unten dreht, während Dampf aus der Tasse steigt Ein Kaffeesack lehnt sich in die Ecke und richtet sich im Schwebezustand auf Unten scrollt ein Herkunftsnamen-Festzelt (Yirgacheffe, Huila, Sidra..) auf Schleife und hält auf einem Überfall inne.
Der Ringext ist ein bearbeitbares Feld, also schreibt eine Bäckerei “SOURDOUGH · GEBACKEN UM 5 AM · KEINE ABKÜRZUNGEN” und die ganze Persönlichkeit überträgt Gleiches für das Festzelt: ein Feld, zweimal intern gedruckt, so dass die Schleife nie ein Nahtbild zeigt Funktioniert für jedes Lebensmittelgeschäft, wo das Pech, die Bäckereien, die Brauereien, die Farm-to-table-Restaurants ist.
Sie können bearbeiten: 3-teilige Überschrift mit Akzentwort, Absatz, Preishinweis, 2 Knöpfe + Links, Ringext, Festzelttext, 2 Bilder, 5 Farben.
4. Norr Norr für Modelabels und Premium-E-Mails
Das leiseste Design im Set, und das redaktionellste Zwei überdimensionale Wörter (standardmäßig QUIET / TAILORING) reiten sich über ein gewölbtes Porträt, wobei jedes Wort von einer abgeschnittenen Kante auf der Last wischt Bewegen Sie das Porträt und es kreuzt sich zu einem zweiten Blick, während die Bildunterschrift von “01/ 02 The Longline Coat” zu “02 / 02 “The Drape Dress” wechselt. Dieser zwei-Bild-Hover-Swap ist das ganze Widget in Miniatur: zurückhaltend, aber lebendig.
Nur drei Farben zu verwalten (Leinwand, Tinte, Salbei-Akzent), weil die Kraft des Designs ist Typografie und negative Raum statt Palette Wenn Ihre Marke gut fotografiert und Sie möchten, dass die Seite wie ein Lookbook fühlt, ist dies die Mode, Schmuck, Keramik, Möbel Wenn Sie fünf Wertversprechen über die Falte stopfen müssen, wird es Sie bekämpfen, und es sollte.
Sie können bearbeiten: Beide Schlagzeilen, vertikale Saisonbeschriftung, Absatz, Schaltfläche + Link, Hover-Hinweis, 2 Look-Bilder mit 2 Bildunterschriften, Fußleiste, 3 Farben.
5. Offbeat Studio für Kreativagenturen und Studios
Kobalt, Koralle, Zitrone auf cremefarbenem, Bauhaus-Poster-Energie Die Überschrift ruft in Großbuchstaben mit hervorgehobenem Akzentwort bekommt eine halbe Sekunde nach der Ladung eine gelbe Wischunterstreichung Darunter sitzen drei Portfolio-Plättchen leicht gedreht wie Abdrücke auf einem Tisch; jede richtet sich, hebt und neigt sich im Schwebeflug in 3 D zu Ihrem Cursor hin Ein Aufkleber “BOOKING FOR Q4” spinnt faul über der Collage.
Der Circular Call-to-Action ist das Stück, mit dem die Leute spielen Es ist Magnet: sie folgt deinem Cursor in seinem Radius und springt zurück, wenn du gehst Jede Kachel hat ihr eigenes Linkfeld, also verdoppelt sich die Collage als Mini-Portfolio mit drei Fallstudien, die direkt vom Helden anklickbar sind Für Agenturen, Designer, Fotografen, jeden, dessen Arbeit ist Der Pitch.
Sie können bearbeiten: 3 Service-Tags, Kicker, 5-teilige Überschrift (Akzentwort getrennt), Absatz, Magnetknopf + Link, 3 Kacheln mit 3 Links, Aufklebertext, Client-Festzelt, 5 Farben.
6. Forge Athletics für Fitnessstudios und Fitnessmarken
Holzkohle und Voltgrün, kondensierter Großkasentyp und eine Schlagzeile, die Schlägt In: jede Zeile landet mit einem Skew-and-Scale-Schnapper statt einem höflichen Fade Zeile zwei wird umrissen statt gefüllt, Zeile drei nimmt die Voltfarbe an Hinter allem driftet ein Riesengeisterwort (FORGE) gegen deine Schriftrolle, das Sportlerbild sitzt in einem abgewinkelten Parallelogrammrahmen mit einem Voltschlitz, der das Layout diagonal schneidet.
Unten zählen Statistiken: 14 Plattformen, 31 Klassen, 24 Mitglieder pro Coach max. Beachten Sie, was diese letzte Zahl bewirkt “Mitglieder pro Coach, max” ist ein Versprechen, kein Prahlen, und es ist die Art von Linie, die Intro-Sessions füllt Tauschen Sie das Geisterwort gegen den Namen Ihres Fitnessstudios in einem Feld Gebaut für Kraft-Fit-Fit-Fit, CrossFit-Boxen, Kampfsport-Studios, und Trainer, deren Marke Intensität ist.
Sie können bearbeiten: 3-zeilige Überschrift, Augenbraue, Absatz, Geisterwort, vertikales Tag, 2 Tasten + Links, 3 Stat-Paare, Athletenbild, 4 Farben.
7. Gly Minds & Bildung für Kinder-Apps, Schulen, Schulen
Bonbonpastell, abgerundeter Typ, und drei Klecksmaskottchen: Einer liest ein Buch, einer hält einen Bleistift, einer schwenkt einen Sternstab, Sie springen mit einer Feder ein, wackeln sanft und scheuen sich vor Ihrem Cursor, während er sich bewegt Sterne funkeln über den Hintergrund, ein gelbes Kringeln zieht sich unter das geneigte Akzentwort, und der Hauptknopf drückt sich beim Drücken wie Gelee nach unten Eine weiße Welle schließt den Abschnitt, so dass er in das fließt, was als nächstes kommt.
Das zentrierte Layout hält Eltern (die eigentlichen Käufer) auf einem klaren Weg: Altersklassenabzeichen, Versprechen, ein Absatz, der antwortet “ist diese Bildschirmzeit ich bereuen?”, Vertrauenslinie mit der App Store-BewertungDie Maskottchen sind drei Bildfelder, tauschen die eigenen Charaktere ein und das Bounce, Shadow, und Cursor-shy Verhalten gelten automatisch Für Lern-Apps, Tagespflege, Kinderclubs, Kinderpraxen, und Spielzeugmarken.
Sie können bearbeiten: Überschrift mit geneigtem Akzentwort, Abzeichen, Absatz, 2 Tasten + Links, Vertrauenslinie, 3 Maskottchenbilder, 6 Farben.
8. Studio Meridian-Portfolios für Architekten, Innenarchitekten und
Schweizer Grid-Disziplin: eine Meta-Säule (Praxis, gegründet, Projekte vor Ort), eine dünne 300-Gewichte-Schlagzeile mit einem gemauerten unterstrichenen Wort, und ein großes Projektfoto, das mit einem Wisch enthüllt Ein papierfarbener Vorhang gleitet ab und das Bild setzt sich von einem leichten Zoom über eine ganze Sekunde abDas Detail, über das uns gemailt wird, ist der Grundriss in der Seitenleiste, die sich selbst zieht „Zuerst schwingt die Tür, dann verblassen die Raumbeschriftungen. Es handelt sich um eine SVG-Animation, die im Demobild geliefert wird, ohne dass ein Plugin beteiligt ist.
Fünfundzwanzig bearbeitbare Felder machen dies zum datenreichsten Helden der zehn. Jedes Meta-Label, beide Bildunterschriften, sogar die Koordinaten in der unteren Regel Nur drei Farben, und das ist bewusst: Graphit, Papier und Ziegel ist ein System, und Systeme sind das, was dieses Publikum respektiert Für Architekturbüros, Innenstudios, Bauingenieure und jedes Portfolio, in dem Zurückhaltung Kompetenz signalisiert.
Sie können bearbeiten: 5-teilige Überschrift, Absatz, Button + Textlink mit URLs, 3 Meta-Paare, Foto + Bildunterschrift, Grundriss + Bildunterschrift, Koordinatenregel, 3 Farben.
9. Lowtone-Seiten für Festivals, Konzerte und Veranstaltungen
Das lauteste Design hier, und es bringt es ein Eine riesige Wortmarke teilt sich in der Mitte des Wortes in einen orange-violetten Gradienten, eine leuchtende Kugel driftet hinter dem Inhalt und lehnt sich von Ihrem Cursor ab, und am Boden entlang verläuft sie über die gesamte Breite Entzerrer: Dutzende Takte, von denen jeder seinen eigenen Rhythmus animiert, sodass der Streifen nie sichtbar in einer Schleife läuft. Die Takte werden durch das eigene Skript des Widgets generiert und ziehen ihren Farbverlauf aus den Tab-Farben Ihres Stils, sodass das Neufärben des Festivals den Klang nachbildet.
Drei Lineup-Reihen (FRI / SAT / SUN) tragen jeweils ihr eigenes Label, ihre eigene Acteliste und ihren eigenen Link, sodass Sie jeden Tag auf ihre eigene Zeitplanseite senden können. Der Farbverlauf beträgt drei separate Farbstopps auf der Registerkarte Stil. Verschieben Sie sie und die Wortmarke, Schaltflächen, Leuchten und Equalizer folgen alle. Für Festivals, Veranstaltungsorte, Clubabende, Konferenzen mit Headlinern und Album-Launchs.
Sie können bearbeiten: Split-Wortmarke, Datum, Ort, Absatz, 3 Zeilenreihen mit 3 Links, 2 Tasten + Links, Orb-Bild, 5 Farben einschließlich aller 3 Farbverlaufsstopps.
10. Måne für Hautpflege, Beauty, Wellnessmarken
Nebellavendel und Pfirsichhaseln verschwimmen und treiben hinter einer Serifenschlagzeile, deren kursive Linie, “die Nachtschicht”, einen weichen, nach außen blühenden Farbverlauf erhält Die Produktflasche schwebt sanft in der Mitte eines gestrichelten Rings, und drei Zutatenabzeichen (2% Netzhaut, 5% Haferferment, 0% Duft) Bahn umkreisen Es befindet sich in einer 26-Sekunden-Schleife und dreht sich gegenläufig, sodass sie die ganze Zeit aufrecht bleiben.
Jene Abzeichen sind die Umwandlung Prozentuale Angaben sind das, wonach Hautpflegekäufer scannen, und hier umkreisen sie buchstäblich das Produkt Alle sechs Abzeichenwerte und Etiketten sind Klartextfelder Die darunter liegende Anspruchsreihe (dermatologe getestet · duftfrei · recyclebares Glas) rundet die Vertrauensgeschichte ab Für Hautpflege, Ergänzungen, Kerzen, Haarpflegeprodukt, bei dem die Zutatenliste das Argument ist.
Sie können bearbeiten: 2-teilige Überschrift, Augenbraue, Absatz, 2 Knöpfe + Links, 3 Claims, 3 umlaufende Abzeichenpaare, Flaschenbild, 4 Farben.
11. Loose Ends – für Portfolios, Studios und Startseiten, die einen Kiefertropfen benötigen
Dieser ist neu und das ehrgeizigste, was wir bisher durch den Widget Builder gebracht haben: eine Schlagzeile im Vollbildmodus, die im Auge eines Wirbels sitzt Tausend Teilchen, simuliert auf der GPU des Besuchers in Echtzeit. Bewegen Sie die Maus und die Schwarmteile um den Cursor, dann springt sie zurück Die Kamera driftet auch ein wenig, was das Feld als Leerzeichen und nicht als Hintergrundvideo lesen lässt Die Überschrift dekodiert sich selbst mit einem Charakter-Scramble auf Last, die Primärtaste trägt einen langsamen Lichtdurchlauf und eine Film-Korn-Schicht verhindert, dass sich der dunkle Hintergrund bandt.
Die Partikel sind kein fester Look Ein Dropdown im Style-Tab schaltet das Feld zwischen Stränge (bunte wirbelnde Filamente), Schnee (langsame weiße Drift), Stars (ein nahezu stilles Sternenfeld) und Universum (lange Deep-Space-Wisps) Vier Schieberegler steuern Dichte (100 bis 2.000 Partikel), Größe, Tiefe, und wie stark der Schwarm auf die Maus reagiert Außerdem gibt es eine Ausrichtungssteuerung, die den ganzen Content-Stack nach links, in der Mitte oder rechts bewegt, sodass das gleiche Widget als redaktioneller links ausgerichteter Held oder zentrierter Splash-Seite funktioniert Eine ehrliche Anmerkung: Die 3 D-Engine lädt von einem CDN, etwa 1,2 MB werden nach dem ersten Besuch zwischengespeichert, und läuft auf WebGPU in Chrome und Edge mit einem WebGL2-Fallback überall sonst, schlägt der Held als normaler abgefärbter Abschnitt und es wird auch nichts an der ganzen Bild-Szene hochgeladen;.
Sie können bearbeiten: Pillentext, Augenbraue, Überschrift, Slogan, 2 Schaltflächen mit Volllinksteuerung, Scroll-Cue, 3 Texte in der unteren Leiste, Inhaltsausrichtung (links/mitte/rechts), Partikeltyp (Stränge/Schnee/Sterne/Universum), Dichte, Größe, Tiefe und Mausreaktionsregler, 5 Farben.
So importieren Sie eine Hero-Abschnittsvorlage in Elementor (Schritt für Schritt)
Der ganze Vorgang dauert pro Widget etwa zwei Minuten, Sie benötigen WordPress mit Elementor und die Master Addons PRO Plugin aktiv Hier der genaue Workflow, Screenshot von einem echten Import des Musikfestivalhelden.
Schritt 1: Entpacken Sie den Download
Doppelklicken Sie auf den Reißverschluss (hier, hier music-festival-hero.zip). Drinnen findet man drei Dinge: die Widget-Datei (widget-music-festival.json), a demo-images Ordner mit hochladefähigen PNGs und einem README.txt Das sagt dir, welches Bild in welches Feld gehört Es gibt auch ein svg-originals Ordner dazu in den FAQ.
Schritt 2: Importieren Sie den JSON in den Widget Builder
Gehen Sie in Ihrem WordPress-Admin zu Master-Addons → Widget Builder und klicken Widget importieren. Ziehen Sie die .json Datei in den Dialog, oder klicken Sie auf Dateien durchsuchen Hier geht nur das JSON Die Bilder kommen später, durch die normale Mediathek.
Schritt 3: Überprüfen Sie das Widget und speichern Sie
Das Widget öffnet sich im Builder mit allem, was bereits verkabelt ist: Inhaltsabschnitte auf der linken Seite, das HTML/CSS/JS hinter Tabs und eine Dokumentations-Seitenleiste, in der jedes Feld-Token aufgelistet ist Sie müssen keines davon berühren Einfach drücken Einstellungen speichern. Wenn Sie neugierig sind, wie sich die Felder mit dem Code verbinden, wird die Einstellungshandbuch für Widget Builder Token-System erklärt.
Schritt 4: Ziehen Sie es in Ihre Seite
Öffnen Sie eine beliebige Seite mit Elementor Ihr neues Widget erscheint im Panel unter Favoriten; suchen Sie seinen Namen, wenn Sie ihn nicht entdecken Ziehen Sie ihn in einen Container Ein Tipp für Sie: Stellen Sie den des Containers ein Inhaltsbreite bis zur vollen Breite So können Edge-to-Edge-Designs wie die Festival - und Reisehelden tatsächlich an die Ränder gelangen.
Schritt 5: Bearbeiten Sie den Inhalt und die Links
Klicken Sie auf das Widget und die Registerkarte Inhalt listet jedes bearbeitbare Stück auf, gruppiert die Art und Weise, wie das Design gruppiert wird: Inhaltsbereich, Aufstellungsreihen, Schaltflächen, Bilder Geben Sie über einen beliebigen Text ein und die Vorschau-Updates live Jede Schaltfläche und verknüpfte Zeile verfügt über eine richtige Elementor-Link-Steuerung Fügen Sie Ihre URL ein und drücken Sie dann den Gang, um “in neuem Fenster öffnen” und “nofollow” umzuschalten.
Schritt 6: Laden Sie die Demo-Bilder hoch
Klicken Sie im Abschnitt Bilder auf jedes Feld und laden Sie die passende Datei aus dem hoch demo-images Ordner. Die README bildet sie ab, wenn ein Widget mehrere hat Die Demo-PNGs werden mit 2 x Auflösung exportiert, bleiben also auf Retina-Bildschirmen scharf. Vertauschen Sie jederzeit Ihre eigenen Fotos; das Feld ist ein Standard-WordPress-Medienauswahlgerät Dann Veröffentlichen. Fertig.
Zum Neustylen: Öffnen Sie die Style-tab. Jeder Held entlarvt seine volle Palette als eine Handvoll Farbkontrollen, und jeder abgeleitete Farbton (Hover-Zustände, Leuchten, Ränder, Farbverläufe) berechnet sich von denen. Man kann diese Designs nicht halb einfärben, was genau der Punkt ist.
FAQ
Funktionieren diese Hero-Abschnittvorlagen mit kostenlosem Elementor?
Ja. Hier läuft alles auf kostenlosem Elementor plus Master Addons PRO Plugin Kein Elementor Pro erforderlich Die Widget Builder Import-Funktion wird in der kostenlosen Version ausgeliefert.
Werden die Animationen meine Seite verlangsamen?
Kein messbarer Unterschied in unseren Tests Die Animationen sind CSS und ein kleines Scoped Script pro Widget Keine Animationsbibliotheken, keine jQuery Abhängigkeit, keine externen Anfragen außer einem Google Fonts Aufruf pro Widget (und es lädt einmal, auch wenn das Widget zweimal erscheint) Die Zips selbst laufen 30 KB bis 2 MB, und das sind fast ausschließlich die Demo-Bilder.
Was passiert für Besucher, die Animationen ausschalten?
Jedes Widget überprüft die Präferenz des Betriebssystems für reduzierte Bewegung, wenn es eingeschaltet ist, rendern Eingänge sofort, Festzelt und Umlaufbahn stoppen und Zähler zeigen ihre endgültigen Zahlen anDas Design bleibt erhalten; die Bewegung geht höflich.
Warum gibt es SVG-Dateien im Zip, wenn WordPress sie nicht hochlädt?
WordPress blockiert standardmäßig aus Sicherheitsgründen SVG-Uploads, daher enthalten die Zips PNG-Versionen, die überall hochladen Das verwendet der Import-Guide Die svg-originals Ordner ist ein Bonus: wenn Ihre Website SVG zulässt (über ein Plugin wie Safe SVG), sind die Vektorversionen bei einem Bruchteil der Dateigröße unendlich scharf.
Kann ich zwei dieser Heldenabschnitte auf derselben Website verwenden?
Ja, auch auf der gleichen Seite Die Stile jedes Widgets sind auf eine eigene Wrapper-Klasse beschränkt und seine Animationsnamen sind vorangestellt, sodass sie weder miteinander noch mit Ihrem Theme kollidieren können.
Kann ich die Schriftarten ändern?
Jedes Widget lädt seine beiden Google Fonts automatisch passend zum Design, um sie zu tauschen, öffnen Sie das Widget im Widget Builder, bearbeiten Sie die Schrift-URL im JS-Tab und die Schriftfamiliennamen im CSS-Tab Es handelt sich um eine zweizeilige Änderung Die Widget Builder-Dokumente Abdeckung der Funktionsweise der Code-Tabs.
Kann ich das Design selbst bearbeiten, nicht nur den Inhalt?
Das ist der lustige Teil Jedes Widget ist im Widget Builder vollständig geöffnet HTML, CSS, und JS sind genau dort in Tabs, kommentiert und lesbar Fügen Sie ein Feld hinzu, entfernen Sie einen Abschnitt, ändern Sie einen Haltepunkt, wenn Sie ein Stylesheet bearbeiten können, können Sie jede davon in etwas Neues forken Die Widget-builder Seite hat einen Überblick, und wenn man etwas Gutes baut, wollen wir es sehen.
Alle 10 hero-abschnitte sind kostenlos für persönliche und kommerzielle projekte vom master addons team auf elementor mit master addons v3. x Fragen oder eine widget-anfrage aufgebaut und getestet? sagen sie uns in den kommentaren Die sammlung wächst basierend auf dem, was die leute verlangen.
