30+ kostenlose Elementorabschnittsvorlagen, die Sie in wenigen Minuten importieren können (2026)

Dies ist eine Bibliothek von 30+ kostenlosen Elementor-Abschnittsvorlagen, die die zehn Abschnitte abdecken, die fast jede Website benötigt: Funktionen, über, Statistiken, Erfahrungsberichte, Preise, Team, FAQ, Call-to-Action-Bands, Kontaktformulare und Logo-Streifen. Jeder wird als kleine JSON-Datei heruntergeladen, importiert über den Master Addons Widget Builder und landet in Ihrem Elementor-Panel als Widget, wo jede Überschrift, Schaltfläche, jedes Bild und jede Farbe ein beschriftetes Feld ist Keine eingefrorenen Layouts, keine Jagd durch verschachtelte Container, um einen Preis zu ändern.

Wir haben jede Vorlage von Hand erstellt. Echtes HTML, CSS und JavaScript, dann in ein Widget Builder-Widget mit eigenen Inhalts- und Stilsteuerelementen. Dieser letzte Schritt ist der Unterschied zwischen dieser Sammlung und einer typischen Elementor-Vorlagenbibliothek: Sie importieren keine Seite, die Sie rückentwickeln müssen. Sie importieren ein Widget, das Sie ausfüllen.

Ein Abschnittstyp fehlt absichtlich: Helden. Wir haben bereits eine eigene Sammlung von veröffentlicht Kostenlose Elementor-Helden-Abschnittsvorlagen„Diese auf Widget-Basis erstellte Methode, also würde die Wiederholung hier nur die Zählung ergänzen. Wählen Sie einen Helden aus diesem Beitrag, stapeln Sie Abschnitte aus diesem darunter und Sie haben eine vollständige Landingpage zusammengestellt, ohne einen einzigen Block von Grund auf neu zu entwerfen.

Alle 30+ sind unten, gruppiert nach Abschnittstyp, jeweils mit Screenshot und direktem Download, schnapp dir die benötigten oder lies dir die Import-walkhrough Zuerst.

Schieberegler sind die anderen, die Sie hier nicht finden werden Ein Karussell ist eine andere Art von Build-Timing, Drag, Drag, ARIA-Rollen, andere Dinge, von denen es eine eigene Sammlung hat Karussell- und Schieberkonstruktionen: eine Miniaturansichtsgalerie, ein Mosaik, dessen Kacheln sich neu mischen, eine Zeitleiste, die an realen Daten befestigt ist, ein Tafelsatz mit Tabulatoren und ein Zitatschieber mit Fortschrittsanzahl.

Insgesamt zwanzig Designs Acht Importe auf dem kostenlosen Plugin, das Gleiche wie alles auf dieser Seite; die anderen zwölf brauchen Pro. Die Route in beiden Richtungen ist identisch. Lassen Sie den JSON in den Widget Builder fallen und das Design landet in Ihrem Panel als Widget, das Sie ausfüllen.

Was im Rudel ist

Helden-Sektionen sind nicht mit Absicht hier Wir haben bereits ein eigenes Paket veröffentlicht Kostenlose Elementor-Helden-Abschnittsvorlagen Genauso gebaut Stapeln Sie einen Helden aus diesem Beitrag auf Abschnitte aus diesem und Sie haben eine vollständige Landingpage zusammengestellt.

So importieren Sie diese Elementor-Abschnittsvorlagen

Um eine Abschnittsvorlage zu importieren, laden Sie deren Zip herunter, entpacken Sie sie und gehen Sie dann zu Master-Addons → Widget Builder → Importieren In Ihrem WordPress-Admin und laden Sie die JSON-Datei hoch Die Vorlage erscheint als neues Widget in Ihrem Elementor-Panel Ziehen Sie sie auf eine beliebige Seite und bearbeiten Sie alles von den Registerkarten Inhalt und Stil.

1. Herunterladen und entpacken. Jeder Zip enthält das Widget JSON, ein Vorschaubild und (sofern das Design Kunstwerke verwendet) die Demobilder sowie ein README, das jedes einzelne seinem Feld zuordnet.
2. Importieren Sie das JSON. WordPress-Admin → Master-Addons → Widget Builder → Widget importieren Laden Sie das hoch widget-*.json Datei. Die Widget-builder Schiffe mit Master Addons Pro; die JSON-Downloads selbst sind kostenlos.
3. Lass es auf eine Seite fallen. Elementor öffnen, den Namen des Widgets durchsuchen, hineinziehen Es rendert mit dem vollständigen Demo-Inhalt, den Sie in den Screenshots sehen.
4. Mach es dir. Jeder Text ist ein Feld, jeder Button hat einen Link-Regler, jede Grundfarbe ist ein Picker im Tab Stil Vorlagen, die Fotos verwenden, haben leere Bild-Slots; laden Sie Ihr eigenes oder das gebündelte Demo-Art hoch.

Ein Heads-up auf den Demo-Bildern: es sind SVG-Dateien, und WordPress blockiert SVG-Uploads aus der Box. Entweder vor dem Upload in PNG/WebP konvertieren oder ein SVG-enabling-Plugin installieren Das Widget rendert fein ohne Bilder zu Bild-Slots verstecken sich, bis Sie sie füllen.

Warum das Widgets sind, keine Seitenvorlagen

Die meisten Elementorabschnitte, die Sie herunterladen, sind gespeicherte Seitenfragmente. Sie sehen richtig aus, bis Sie versuchen, sie zu bearbeiten. Dann klicken Sie durch verschachtelte Spalten und versuchen herauszufinden, welcher innere Container den Preistext enthält. In dem Moment, in dem Sie eine Farbe ändern, ändern Sie sie an neun Stellen.

Jede Vorlage hier ist ein einzelnes Widget mit seinem Inhalt hinter beschrifteten Steuerelementen Das Praktische gewinnt:

• Repeater für wiederholte Dinge. Preispläne, Testimonials Mitglieder, Logos Team-Felder, alle Repeater-Felder Fügen Sie einen vierten Plan oder eine zehnte FAQ hinzu und das Layout, die Animations-Staffelung und die Nummerierung passen sich an Die FAQ-Tabellenvorlage baut sogar ihre Kategorien-Tabs aus allen Kategorien um, die Sie eingeben.
• Vier bis sechs Grundfarben thematisieren den gesamten Abschnitt neu. Sekundäre Farbtöne, Ränder, Leuchten und Schatten entstehen durch die Basispflücker mit CSS color-mix()„. „Ärkstens“einmal ändern” und die Aufzählungspunkte, Linkunterstreichungen, Fokusringe und Schwebezustände folgen alle.
• Die Animationen werden im Inneren versendet. Count-up-Zähler, das Testimonial-Karussell, der Abrechnungs-Toggle, Akkordeon-Physik, das Logo-Marquee: alles mit Scoped JavaScript, das respektiert prefers-reduced-motion Und wird nicht gegen andere Widgets auf der Seite kämpfen. Im gesamten Paket sind das 698 beschriftete Steuerelemente, die Arbeiten ausführen, die Sie sonst im benutzerdefinierten CSS erledigen würden.
• Echte Kopie, nicht Lorem Ipsum. Jede Vorlage importiert den Inhalt der fiktiven Marke aus ihrem Screenshot, sodass Sie Sätze bearbeiten und nicht auf die Platzhaltersuppe starren.

Funktionen und Dienstleistungen Abschnitt Vorlagen

Das Arbeitstier einer beliebigen Landingpage Vier Stile, denn “Features” bedeutet für ein SaaS-Grid etwas anderes als für den Prozess-Erklärer eines Solarinstallateurs.

1. Symbolkartenraster

Ein dunkles dreispaltiges Raster aus sechs Feature-Karten, aufgebaut um einen Cursor-Follow-Glanz: Bewegen Sie Ihre Maus und ein weiches radiales Licht zieht sie über die Karten Karten Karten Karten sind ein Repeater: Symbol (fügen Sie eine beliebige SVG ein), Titel, Text, und ein optionaler Pfeillink pro Karte Sechs Karten aus einer fiktiven Analyse SaaS kommen vorgefüllt, und der versetzte Eingang animiert die Anzahl der Karten, die Sie am Ende haben.

Laden Sie die Icon-Kartenrastervorlage herunter (.zip)

2. Abwechselnde Bildzeilen

Klassische Bild-links / Bild-rechts Reihen mit einem Count-up-Stats Streifen unter der Kopfzeile Der Wechsel erfolgt automatisch Zeilen kippen Seiten je nach Position, so dass das Hinzufügen einer vierten oder fünften Reihe durch den Repeater den Zickzack intakt hält Jede Reihe trägt ein Kicker-Abzeichen, drei Kontrollkugeln, und eine eigene Linksteuerung Demokunst für die drei Bookkeeping-App-Reihen ist im Zip.

Laden Sie die Vorlage für abwechselnde Zeilen herunter (.zip)

3. Nummerierte Prozessliste

Fünf nummerierte Schritte auf einer vertikalen Spur, mit einer Fortschrittszeile, die sich beim Scrollen selbst zeichnet und Punkten, die leuchten, wenn ihr Schritt in den Ansichtsfenster gelangt Schritte live in einem Repeater (Zahl, Titel, Chip-Etikett, Text) und die Fortschritts-Mathe liest die Schrittanzahl zur Laufzeit Drei Schritte oder acht, die Zeile landet immer noch auf dem letzten Punkt Es gibt eine umschaltbare CTA-Fußzeile mit einem hervorgehobenen Status eingebacken.

Laden Sie die nummerierte Prozessvorlage herunter (.zip)

4. Bildvitrinenkarten

Drei große Bildkarten mit einer 3 D-Neigung, die dem Cursor folgt, dazu ein scrollendes Keyword-Marquee zwischen Header und Raster, Sie fügen jedes Ticker-Keyword einmal hinzu Die nahtlose Schleifenduplikation geschieht in JavaScript, so dass das Marquee nie eine Naht anzeigt Karten nehmen jeweils ein Bild, Abzeichen, Titel, Text, und verlinken; die drei Podcast-Tool-Demo-Illustrationen werden im Zip versendet.

Laden Sie die Vorlage für Bildvitrinekarten herunter (.zip)

Über uns Abschnittsvorlagen

Drei Layouts für die Rubrik “wer bist du und warum sollte es mich interessieren” Wählen Sie nach dem, was Sie haben: ein gutes Foto, eine gute Nummer, oder eine gute Mission.

5. Bild mit Geschichte übrig

Foto links mit einer Schwebeschräge im Polaroid-Stil, Story-Kopie rechts, drei Count-up-Statistiken und einem Signaturblock. Der Stats-Repeater verarbeitet Präfix, Dezimalzahlen und Tausende Kommas. Die Demo zählt bis zu 2.400 Großhandelspartner, ohne dass Sie Code berühren. Bäckerei-Demoszene als SVG enthalten.

Laden Sie die Vorlage für die linke Geschichte des Bildes herunter (.zip)

6. Bild rechts mit schwebendem Abzeichen

Das Spiegellayout: Text links, Bild rechts, mit einem schwebenden “27 Jahre” - Badge, das hochzählt, wenn es in Sicht scrollt Die Checkliste für die Anmeldeinformationen ist ein Repeater, das Badge ist umschaltbar, und beide Badge-Linien sind bearbeitbar Verwenden Sie es jahrelang im Geschäft, Projekte versendet, was auch immer Ihre beste Nummer ist.

Laden Sie die Vorlage für das rechte Bildabzeichen herunter (zip)

7. Mission und Werte

Kein Foto nötig Ein großes Leitbild mit akzentfarbener Phrase, dann vier Wertkarten mit Liniensymbolen, die sich im Schwebeflug leicht drehen Karten sind ein Repeater mit einem stichwortbasierten Symbolfeld (Wellen, Community, Sonne, Herz) Die Icons sind CSS-Masken, die Ihre Akzentfarbe erben, also färben sie sich mit der Palette neu, anstatt mit ihr zu kollidieren.

Laden Sie die Missions- und Wertevorlage herunter (.zip)

Statistiken und Gegenbandvorlagen

Kurze Abschnitte, unverhältnismäßige Auswirkungen Beide führen Count-up-Animationen aus, die einmal ausgelöst werden, wenn sie in die Ansicht gescrollt werden, und beide zeigen Endwerte sofort für Besucher mit aktivierter reduzierter Bewegung an.

8. Lichtstatistikband

Vier Zähler auf papierweißen, serifenförmigen Ziffern, Trennlinien, die sich beim Klettern der Zahlen einzeichnen Ein Spaltenschieber konfiguriert das Desktop-Gitter neu, wenn Sie drei oder fünf statt vier Statistiken ausführen, und ein einzelner Dauerregler stimmt ab, wie schnell alles zählt.

Laden Sie die Lichtstatistiken-Bandvorlage herunter (zip)

9. Dark stats Band

Die kontrastreiche Version: nahezu schwarzer Hintergrund, Kalkakzent, über jedem Zähler ein Symbol mit einem Glimtimpuls Symbole zyklieren automatisch pro Karte (Bolzen, Turbine, Heim, Schild) und jeder Stat legt seine eigene Zähldauer fest, sodass die Zahlen in Folge landen und nicht alle auf einmal Überschrift teilt sich in drei Felder auf, sodass das Akzentwort dort sitzt, wo Sie es wollen.

Laden Sie die Dark-Stats-Bandvorlage herunter (zip)

Testimonial-Abschnittvorlagen

Vier Möglichkeiten, den Beweis zu zeigen, vom vollen Karussell bis zum einzigen vernichtenden Zitat Wenn man nur eines aus dieser Gruppe nimmt: Die Punkte des Karussells werden aus Ihrer Folienanzahl generiert, denn wir alle haben schon Schieber mit vier Punkten und sechs Folien gesehen.

10. Zeugniskarussell

Ein richtiger Schieberegler: Pfeiltasten, anklickbare Punkte, Tastaturnavigation und automatische Höhe, sodass kurze Anführungszeichen keine große leere Karte hinterlassen. Folien sind ein Repeater (Zitat, Name, Rolle, Avatar) und Punkte und die „N der Gesamtzahl“”-Etiketten bauen sich aus den hinzugefügten „Vier Demo-Avatare werden im Reißverschluss versendet.

Download der Testimonial-Karussellvorlage (.zip)

11. Mauerwerksgitter

Sechs Karten in CSS-Spalten Mauerwerk mit gestaffelten Enthüllungen Jede Repeater-Reihe nimmt ein Zitat (plus optionaler zweiter Absatz für die hohen Karten), eine 15-Sterne-Bewertung, Initialen für den Avatarkreis und einen “featured” - Knebel, der einer Karte die Akzentbehandlung verleiht Sterne rendern aus dem Bewertungswert, so dass eine 4-Sterne-Bewertung vier gefüllte Sterne zeigt, nicht was auch immer fest codiert war.

Laden Sie die Mauerwerksrastervorlage herunter (.zip)

12. Einziges großes Zitat

Ein Zitat, riesiger Serifen-Typ, aufgedeckt Zeile für Zeile mit einer maskierten Animation Du fügst das Zitat als einen Absatz ein; das JavaScript teilt es in ausgeglichene Zeilen und mal die Enthüllung, so dass ein 15-Wort-Zitat und ein 40-Wort-Zitat beide korrekt animieren Ein kleiner Metastreifen darunter (Zimmer, Bewertung, Jahr) ist ein Repeater, den man komplett leeren kann.

Laden Sie die Vorlage für ein einzelnes Angebot herunter (.zip)

13. Bewertungskarten mit Zusammenfassung

Der Review-Aggregator-Look: ein großer Count-up-Score, animierte Verteilerbalken (fünf Sterne: 84%, vier: 11%...), dann vier von der Plattform markierte Rezensionskarten mit Ausweisfarben pro Karte Teilsterne malen Diese hat die meisten Kontrollen der Testimonial-Gruppe, 24, denn alles von den Taktprozentsätzen bis zur Bildunterschrift unter der Partitur ist bearbeitbar.

Laden Sie die Bewertungskartenvorlage herunter (zip)

Vorlagen für Preistabellenabschnitte

Der Bereich mit den höchsten Einsätzen auf einer kommerziellen Website, also haben wir vier Varianten gebaut, anstatt einen “universellen” Tisch, der niemandem passt Alle vier laufen ihre Preise durch Count-up-Animationen und setzen eine vollständige Link-Steuerung auf jede Taste.

14. Klassisch dreistufig

Drei Karten, gestaffelter Eingang, Preise, die auf Scroll hochgerechnet werden Pläne sind ein Repeater Features gehen als eine Zeile pro Feature in einem Textarea rein, Pläne können also fünf Features haben oder neun ohne leere Slots Ein “beliebtes” Kipphebel pro Plan schaltet den Button dieser Karte von Geist auf festen Akzent um.

Laden Sie die dreistufige Preisvorlage herunter (zip)

15. Hervorgehobener Plan

Gleiche Drei-Säulen-Knochen, aber der beliebte Plan erhebt sich physisch über seine Nachbarn mit einem Glimtimpuls und einem Band, Die Hervorhebung folgt einem Knebel in jeder Repeater-Reihe, so dass die Förderung eines anderen Plans im nächsten Quartal ein Schalter ist, kein Restyle Eine Footer-Stats-Reihe (Uptime, Rechenzentren, Support) kann abgeschaltet werden.

Laden Sie die hervorgehobene Planvorlage herunter (zip)

16. Vergleichsmerkmalsliste

Eine echte Feature-Matrix: drei Planspalten, Feature-Zeilen mit Ja/Nein/Benutzerdefinierten Werten (“5 users”, “Unlimited”), und ein erweiterbarer Block, der sechs weitere Zeilen mit einer glatten Höhenanimation freigibt. Typ yes oder no In einer Zelle und sie rendert als Scheck oder Kreuz; tippe alles andere ein und es druckt als Text Welcher Plan bekommt den Spaltenhighlight “Bester Wert” ist ein Dropdown Bei 38 Steuerelementen ist es die tiefste Vorlage im Pack.

Laden Sie die Vergleichslistenvorlage herunter (zip)

17. Monatlicher / jährlicher Knebel

Der SaaS-Standard Ein zugänglicher Schalter dreht jede Karte zwischen monatlicher und jährlicher Preisgestaltung mit einer kleinen Preis-Flip-Animation um; Jeder Plan enthält beide Preise plus beide „abgerechnet als“Noten in seiner Repeater-Reihe. Der „20%-Abzeichen speichern”-Text ist ein Feld „Rechnen Sie die Mathematik, ändern Sie das Abzeichen”.

Laden Sie die Vorlage zum Umschalten der Abrechnung herunter (.zip)

Team-Sektion Vorlagen

Menschen kaufen von Menschen Drei Layouts, je nachdem, wie viel Persönlichkeit Sie zeigen möchten Alle drei machen Fotos durch die Felder pro Mitglied Repeater und verschlechtern sich anmutig, während die Slots leer sind.

18. Fotokartenraster

Vier Portraitkarten mit einem Zoom-and-Border-Sweep-Schweber Name, Rolle, und eine einzeilige Bio pro Mitglied; die Eingangstasche berechnet sich für jede Mitgliederzahl neu Vier Demo-Porträt-Illustrationen kommen im Zip, wenn Sie Platzhalter benötigen, während Sie echte Kopfschüsse sammeln.

Laden Sie die Teamkarten-Rastervorlage herunter (.zip)

19. Schwebe-Enthüllungsbios

Porträts, die beim Schweben, Fokussieren oder Tippen ein Bio-Panel nach oben schieben, sodass es mit einer Tastatur und auf Telefonen funktioniert, nicht nur mit einer Maus. Jede Mitgliedsreihe verfügt über LinkedIn-, Instagram- und E-Mail-Link-Steuerelemente, und die gesamte soziale Zeile kann ausgeschaltet werden, wenn Ihr Team dies lieber nicht tun möchte.

Laden Sie die Hover-Bio-Vorlage herunter (.zip)

20. Mannschaftsschieber

Ein Mitglied nach dem anderen: großes Foto, Rollen-Tag, eine vollere Bio, und ein Zähler “01 / 05”, der aus Ihrer tatsächlichen Mitgliederzahl wieder aufbaut, genauso wie die Punkte Pfeiltasten funktionieren Gut für kleine Teams, bei denen jeder mehr als eine Visitenkarte verdient.

Laden Sie die Vorlage für den Team-Slider herunter (.zip)

FAQ-Abschnittvorlagen

Der größte Suchcluster in diesem Pack und der Abschnitt, der Einwände vor Ihrem endgültigen CTA abtötet Vier Builds. Alle stellen Fragetext als echte Überschriften dar und halten die ARIA-Verkabelung intakt, was in FAQ-Abschnitten wichtiger ist als anderswo.

21. Akkordeon

Ein offenes Akkordeon mit glatter Höhenanimation und rotierenden Plus-Icons Fragen und Antworten sind ein Repeater; ob der erste Artikel offen startet, ist ein Knebel Die Fußzeile (“Noch hängen geblieben? Schreib uns”) hat eigene Link - und E-Mail-Felder, denn diese Zeile endet immer hart codiert und wird sonst vergessen.

Laden Sie die FAQ-Akkordeonvorlage herunter (zip)

22. Zweispaltige Frage-und-Antwort-Runde

Kein Klick Alle sechs Antworten bleiben in einem nummerierten zweispaltigen Raster mit gestaffelten Enthüllungen sichtbar Die Nummerierung 01 – – – 06 ist CSS-Zähler, also nummerieren sich Elemente neu, wenn Sie eine Septime hinzufügen Besser als ein Akkordeon, wenn Ihre Antworten kurz sind und Sie lieber Besucher sie tatsächlich lesen möchten.

Laden Sie die zweispaltige FAQ-Vorlage herunter (.zip)

23. Registerkarten der Kategorie

Zwölf Fragen über vier Kategorien mit verschiebbarer Pillen-Tab-Leiste Hier ist der Trick: Sie verwalten überhaupt keine Tabs Jede Frage im Repeater hat ein Kategoriefeld, und das Widget baut die Tab-Tasten aus den einzigartigen Kategorien auf, die es findet Benennen Sie eine Kategorie auf drei Fragen um und die Registerkarte benennt sich selbst um Vollständige Pfeil-Tasten-Tab-Navigation enthalten.

Laden Sie die Karteikartenvorlage herunter (zip)

24. FAQ mit Supportkarte

Akkordeon links (diesmal mehrfach geöffnet), eine klebrige Supportkarte rechts mit Illustration, Kontaktkanälen und einer Teamnotiz mit drei Avatar-Steckplätzen. Kontaktkanäle sind ein Repeater mit einem Chat/E-Mail/Telefon/Uhr-Symbol-Picker pro Reihe. Der klebrige Offset der Karte ist ein Schieberegler, für den Fall, dass Ihre Website einen fetten festen Header hat.

Laden Sie die Split-Vorlage für den FAQ-Support herunter (.zip)

Call-to-Action-Bandvorlagen

Das Letzte, was Besucher vor der Fußzeile sehen Drei Energieniveaus: laut, produktgesteuert und leise.

25. Fettgedruckter Verlauf

Eine animierte dreifarbige Farbverlaufswäsche mit schwebenden Klecksen, die auf Ihren Zeiger zudriften Die drei Farbverlaufsfarben sind separate Pflücker, so dass die Verlagerung der gesamten Stimmung von violett auf markenorange drei Klicks erfordert Primär - und Geistertasten verfügen jeweils über eine Volllinksteuerung; die Kleckse schalten sich für Minimalisten ab (und schalten sich für Besucher mit reduzierter Bewegung ab).

Laden Sie die CTA-Vorlage für den Fettgradienten herunter (.zip)

26. Mit Produktbild teilen

Kopieren und Checkliste links, Produktaufnahme rechts mit schwebenden Spec-Abzeichen (Kapazität, Ladezeit, Gewicht), die sich neu positionieren, wie viele Sie hinzufügen Die Sternebewertung zählt bis zu 4,8 aus 2.318 Bewertungen in der Demo, und beide Zahlen sind Felder. Gebaut für ein physisches Produkt, funktioniert aber für alles mit Specs, mit denen man prahlen sollte.

Laden Sie die CTA-Vorlage für das geteilte Bild herunter (.zip)

27. Minimal zentriert

Cremehintergrund, eine Überschrift, ein Knopf, dünne Regeln oben und unten Die Überschrift verrät Wort für Wort, und weil die Aufteilung zur Laufzeit geschieht, animiert Ihre neu geschriebene Überschrift genau die gleicheWenn jeder zweite Abschnitt auf der Seite schreit, schließt dieser den Deal, indem er seine Stimme senkt.

Laden Sie die minimalzentrierte CTA-Vorlage herunter (.zip)

Kontaktformular Abschnitt Vorlagen

Drei Kontaktlayouts mit funktionierendem Front-End-Verhalten: Validierung, Fokuszustände und eine Inline-Erfolgsnachricht. Faire Warnung, auch in den Feldbeschreibungen jedes Widgets deutlich angegeben: Diese Formulare sind präsentativ: Sie validieren und bestätigen, senden aber keine E-Mail. Überweisen Sie das Markup an Ihr Formular-Plugin Ihrer Wahl für eine echte Lieferung oder verwenden Sie sie als schnellste Möglichkeit, einen Prototyp einer Kontaktseite zu erstellen, die später ein echtes Formular erhält.

28. Formular mit Kontaktinfo

Info-Spalte (E-Mail, Telefon, Büro, als Repeater mit Rad-Icons) neben einem Formular mit Name, E-Mail, Firma, einem Budget-Dropdown, und einem Nachrichtenfeld Budgetbereiche sind ihr eigener Repeater Jedes Label und Platzhalter ist editierbar, was an dem Tag zählt, an dem Sie die Seite übersetzen.

Laden Sie die Formularinfo-Split-Vorlage herunter (zip)

29. Formular mit Karte

Ein Formular mit Themenauswahlchips neben einer illustrierten SVG-Karte: animierte gestrichelte Route, pulsierende Pin-, Park- und Kanaldetails. Keine Google Maps-Einbettung, kein API-Schlüssel, keine Auswirkungen auf das Cookie-Banner. Straßenetiketten auf der Karte sind Textfelder, also legen Sie Ihre tatsächlichen Straßen darauf.

Laden Sie die Formularkartenvorlage herunter (zip)

30. Zentrierte Karte

Eine zentrierte Karte auf dunklem Hintergrund mit einem Scheinwerfer, der Ihrem Cursor folgt und einem blinkenden Statusabzeichen “Antworten innerhalb eines Werktages” Der Abzeichentext ist ein Feld und das ganze Abzeichen ist umschaltbar Kleinste Standfläche der drei Lassen Sie es am Ende jeder Seite fallen, die eine Kontaktmöglichkeit ohne eine dedizierte Kontaktseite benötigt.

Laden Sie die zentrierte Kartenvorlage herunter (zip)

Logostreifenvorlagen

Social Proof in seiner kompaktesten Form Beide Vorlagen nehmen Logo-Uploads durch einen Repeater auf, und bis Sie hochladen, gibt jeder Slot den Markennamen als gestylte Textwortmarke wieder, sodass der Abschnitt in der Mitte des Aufbaus nie kaputt aussieht.

31. Statisches Graustufengitter

Acht Logos in einem Raster, Graustufen bis zum Schweben, darunter ein Count-Up-Status (“Powering reporting for 1,400+ teams”).Säulen sind ein Slider, die Stat-Zeile ist umschaltbar, und der Graustufen-to-Color-Hover funktioniert auf allen PNG - oder SVG-Logos, die Sie hochladen.

Laden Sie die statische Logo-Rastervorlage herunter (zip)

32. Scrollendes Festzelt

Ein Endlosmark mit Kantenausblendungen, das beim Schweben stoppt und für Besucher mit reduzierter Bewegung anhält Sie fügen jedes Logo einmal hinzu; der nahtlose Schleifenklon wird in JavaScript gehandhabt Die Scrollgeschwindigkeit ist ein Schieberegler; Die Demo läuft in einer 28-Sekunden-Schleife, die sich eher selbstbewusst als hektisch liest.

Laden Sie die Scrolling-Festzeltvorlage herunter (zip)

Welche Abschnitte braucht eine Landing Page eigentlich?

Eine stark konvertierende Landingpage folgt einer ziemlich stabilen Scroll-Reihenfolge: Held, Logo-Streifen, Funktionen, über oder Social Proof, Preisgestaltung, FAQ, endgültiger CTA, und Kontakt Nicht jede Seite braucht alle, aber die Reihenfolge ist wichtig, denn jeder Abschnitt beantwortet den Einwand, den der vorherige erhoben hat.

Das Muster, das wir auf SaaS-, Agentur- und lokalen Wirtschaftsseiten sehen: Der Held erhebt Anspruch, auf dem Logo-Streifen steht „Andere haben es geglaubt“Funktionen erklären es, Erfahrungsberichte beweisen es, die Preisgestaltung quantifiziert es, die FAQ behandelt das „Ja, aber” Momente, und die CTA-Band erwischt jeden, der so weit gescrollt hat, immer noch unentschlossen. Das ist die Scroll-Reihenfolge, der diese Sammlung folgt, von oben nach unten. Sie können die gesamte Seite aus diesem Beitrag zusammenstellen plus die Heldenpackungoder beginnen Sie bei einem vollständigen Vorlagenkit und einzelne Abschnitte tauschen.

Häufig gestellte Fragen