Zum Inhalt springen
Elementor Template Kits: So erstellen Sie eine vollständige Website in Stunden
Elementor📖 Anleitung

Elementor Template Kits: So erstellen Sie eine vollständige Website in Stunden

Can BayarCan BayarAktualisiert am: 12 Min. Lesezeit424 Aufrufe

Template-Kits sind Sammlungen von vorgefertigten Seiten und Abschnitten, die es Ihnen ermöglichen, eine vollständige Website in Stunden anstelle von Tagen zu erstellen. Das Template-System von Elementor umfasst sowohl einzelne Seitenvorlagen als auch vollständige Website-Kits, die jeden Seitentyp abdecken, den eine Website benötigt – von der Startseite und der Über-uns-Seite bis hin zum Blog und der Kontaktseite. In diesem Leitfaden erklären wir, wie Sie Elementor-Template-Kits effektiv nutzen, wo Sie sie finden und wie Sie sie für Ihr Projekt anpassen können.

Was sind Elementor-Template-Kits?

Ein Elementor-Template-Kit ist ein Satz von koordinierten Seitenvorlagen, die dafür entworfen wurden, zusammen als vollständige Website zu funktionieren. Im Gegensatz zu einzelnen Vorlagen, die inkonsistente Stile aufweisen können, sorgt ein Kit dafür, dass Farben, Typografie, Abstände und Designelemente auf allen Seiten konsistent sind.

Ein typisches Template-Kit umfasst:

VorlagentypEnthaltene SeitenZweck
Globale VorlagenHeader, Footer, 404-SeiteSeitenübergreifende konsistente Elemente
KernseitenStartseite, Über uns, Leistungen, KontaktStandard-Webseiten
Blog-VorlagenBlog-Archiv, EinzelbeitragInhaltsveröffentlichungs-Layout
WooCommerceShop, Produkt, Warenkorb, KasseE-Commerce-Seiten
Popup-VorlagenCookie-Hinweis, Newsletter, CTAWerbeüberlagerungen
AbschnittsvorlagenHero, Funktionen, Testimonials, FAQ, CTAWiederverwendbare Seitenabschnitte

Wo man Template-Kits findet

Elementors integrierte Bibliothek

Elementor Pro beinhaltet den Zugriff auf eine Bibliothek mit über 100 vollständigen Website-Kits und über 300 einzelnen Seitenvorlagen. Diese sind direkt im Elementor-Editor verfügbar:

  1. Öffnen Sie den Elementor-Editor auf einer beliebigen Seite
  2. Klicken Sie auf das Ordnersymbol (Template-Bibliothek) in der Editor-Toolbar
  3. Navigieren Sie zum "Kits"-Tab, um vollständige Website-Kits zu sehen
  4. Vorschau auf ein Kit und wenden Sie es mit einem Klick an

Kit-Kategorien umfassen Geschäft, kreative Agentur, Portfolio, Restaurant, Fitness, Immobilien, Medizin, Bildung und Technologie – die meisten gängigen Website-Typen abdeckend.

Drittanbieter-Template-Marktplätze

Über Elementors integrierte Bibliothek hinaus bieten mehrere Quellen zusätzliche Template-Kits an:

  • ThemeForest / Envato Elements: Hunderte von Elementor-Template-Kits in verschiedenen Nischen
  • Starter-Template-Plugins: Themen wie Astra bieten ihre eigene Elementor-Template-Bibliothek an
  • Elementor-Addon-Plugins: Essential Addons und Happy Addons beinhalten zusätzliche Vorlagen
  • TemplateMonster: Premium-Elementor-Kits für spezifische Branchen

Wie man ein Template-Kit anwendet

Methode 1: Vollständiger Kit-Import (Empfohlen)

  1. Navigieren Sie zu Templates → Kit-Bibliothek im WordPress-Admin (Elementor Pro)
  2. Durchsuchen oder suchen Sie nach einem Kit, das zu Ihrem Projekt passt
  3. Klicken Sie auf "Demo anzeigen", um alle Seiten im Kit vorzuschauen
  4. Klicken Sie auf "Kit anwenden", um alle Vorlagen zu importieren
  5. Wählen Sie aus, welche Vorlagen importiert werden sollen (Sie können Seiten überspringen, die Sie nicht benötigen)
  6. Das Kit importiert Seiten, Header, Footer, Popups und globale Stile

Der Importprozess dauert in der Regel 1-3 Minuten, abhängig von der Kit-Größe und der Geschwindigkeit Ihres Servers. Nach dem Import erscheinen alle Seiten als Entwürfe in Ihrer WordPress-Seitenliste, bereit zur Anpassung.

Methode 2: Einzelne Vorlage importieren

Wenn Sie nur bestimmte Seiten aus einem Kit benötigen:

  1. Öffnen Sie den Elementor-Editor auf einer beliebigen Seite
  2. Klicken Sie auf das Symbol der Template-Bibliothek
  3. Durchsuchen Sie den spezifischen Seitentyp, den Sie benötigen (z. B. "Über uns-Seite")
  4. Fügen Sie die Vorlage in Ihre aktuelle Seite ein

Methode 3: Importieren aus JSON-Datei

Für Vorlagen, die von Drittanbieterquellen heruntergeladen wurden:

  1. Gehen Sie zu Templates → Gespeicherte Vorlagen im WordPress-Admin
  2. Klicken Sie auf "Vorlagen importieren"
  3. Laden Sie die JSON-Datei(en) hoch
  4. Die Vorlagen erscheinen in Ihrer Bibliothek der gespeicherten Vorlagen

Anpassen von Template-Kits

Schritt 1: Globale Farben und Schriftarten festlegen

Bevor Sie einzelne Seiten bearbeiten, konfigurieren Sie die globalen Designeinstellungen Ihrer Marke:

  1. Öffnen Sie den Elementor-Editor → klicken Sie auf das Hamburger-Menü (oben links) → Site-Einstellungen
  2. Globale Farben: Legen Sie Ihre primären, sekundären, Text- und Akzentfarben fest. Die meisten Kits verwenden das globale Farbsystem, sodass das Ändern dieser Farben alle Seiten gleichzeitig aktualisiert
  3. Globale Schriftarten: Legen Sie Ihre primären (Überschriften) und sekundären (Fließtext) Schriftfamilien fest
  4. Speichern Sie Ihre globalen Einstellungen

Dieser einzelne Schritt verwandelt das gesamte Kit, um mit Ihrer Markenidentität übereinzustimmen, ohne jede Seite einzeln bearbeiten zu müssen.

Schritt 2: Platzhalterinhalt ersetzen

Template-Kits verwenden Platzhalterinhalt (Lorem Ipsum, Stockbilder, Dummy-Telefonnummern). Ersetzen Sie systematisch:

  • Logo: Aktualisieren Sie in der Header-Vorlage (gilt für die gesamte Website)
  • Textinhalt: Ersetzen Sie den Platzhaltertext durch Ihren tatsächlichen Text
  • Bilder: Ersetzen Sie Stockfotos durch Ihre eigenen (behalten Sie ähnliche Seitenverhältnisse für konsistente Layouts)
  • Kontaktinformationen: Aktualisieren Sie Telefonnummer, E-Mail, Adresse und Links zu sozialen Medien
  • Links: Aktualisieren Sie die Links im Navigationsmenü und die internen Seitenlinks

Schritt 3: Layout an Ihre Bedürfnisse anpassen

Die meisten Vorlagen benötigen einige Layoutanpassungen:

  • Entfernen Sie unnötige Abschnitte: Löschen Sie Abschnitte, die für Ihr Unternehmen nicht relevant sind
  • Abschnitte neu anordnen: Ziehen Sie Abschnitte nach oben oder unten, um Ihrer Inhaltspriorität zu entsprechen
  • Neue Abschnitte hinzufügen: Fügen Sie zusätzliche Inhaltsblöcke dort ein, wo sie benötigt werden
  • Responsive Einstellungen anpassen: Überprüfen Sie die Tablet- und Mobilvorschauen und passen Sie Abstände, Schriftgrößen und die Sichtbarkeit von Elementen an

Tipps zur Arbeit mit Template-Kits

  • Wählen Sie ein Kit, das Ihrem endgültigen Design nahekommt. Es ist schneller, eine ähnliche Vorlage zu modifizieren, als eine stark anzupassen, die weit von Ihrer Vision entfernt ist
  • Importieren Sie zuerst das gesamte Kit, und löschen Sie dann, was Sie nicht benötigen. Dies stellt sicher, dass globale Stile und verlinkte Elemente korrekt funktionieren
  • Verwenden Sie das Designsystem des Themas. Wenn Ihr Thema (wie Astra oder GeneratePress) eigene Design-Tokens hat, stellen Sie sicher, dass die globalen Farben des Kits mit den Einstellungen des Themas übereinstimmen
  • Testen Sie auf allen Geräten. Template-Kits sind zuerst für Desktop konzipiert. Überprüfen Sie immer die mobile und Tablet-Erfahrung, bevor Sie veröffentlichen
  • Speichern Sie angepasste Abschnitte als Vorlagen. Nachdem Sie einen Abschnitt angepasst haben, den Sie möglicherweise wiederverwenden möchten (Testimonials, CTA-Block, Preistabelle), speichern Sie ihn in Ihrer Vorlagenbibliothek für andere Seiten

Leistung von Template-Kits

Template-Kits können Leistungsüberlastungen verursachen, wenn sie schwere Animationen, mehrere Videoeinbettungen oder übergroße Bilder enthalten. Für optimierte Seitenladegeschwindigkeit:

  • Entfernen Sie Animationen, die keinen klaren Zweck erfüllen
  • Ersetzen Sie eingebettete Videos durch Thumbnail-Bilder, die das Video beim Klicken laden
  • Komprimieren und skalieren Sie Bilder auf angemessene Abmessungen
  • Verwenden Sie die Leistungsfunktionen von Elementor (Verbesserte Asset-Ladung, Lazy Load für Hintergrundbilder)
  • Testen Sie mit Google PageSpeed Insights nach der Anpassung

Häufig gestellte Fragen

Sind Elementor-Template-Kits kostenlos?

Elementor enthält einige kostenlose Vorlagen, aber vollständige Website-Kits erfordern Elementor Pro. Drittanbieter-Kits von Marktplätzen wie Envato Elements erfordern in der Regel ein Abonnement oder einen einmaligen Kauf. Elementor Pro bei PluginTheme.net bietet Zugang zur vollständigen Kit-Bibliothek.

Kann ich ein Template-Kit auf mehreren Websites verwenden?

Ja, wenn Ihre Elementor Pro-Lizenz mehrere Sites erlaubt. Template-Kits können von einer Site exportiert und in eine andere importiert werden. Unter GPL-Lizenzierung gibt es keine Einschränkungen, wie viele Sites Sie die Vorlagen verwenden.

Funktionieren Template-Kits mit jedem WordPress-Theme?

Template-Kits funktionieren mit jedem Theme, das mit Elementor kompatibel ist. Themen wie Astra, GeneratePress und Hello Elementor bieten jedoch die sauberste Grundlage, da sie ihre eigenen Stile nicht in Elementor-Inhalte einfügen. Die Verwendung eines stark gestylten Themas mit einem Template-Kit kann visuelle Konflikte verursachen.

Wie aktualisiere ich ein Template-Kit nach der Anwendung?

Template-Kits erstellen reguläre WordPress-Seiten. Nach dem Import sind die Seiten unabhängig vom Kit – die Aktualisierung des Kits hat keine Auswirkungen auf Ihre angepassten Seiten. Wenn Elementor eine aktualisierte Version eines Kits veröffentlicht, können Sie die neue Version neben Ihren vorhandenen Seiten importieren und manuell die Änderungen übernehmen, die Sie möchten.

Kann ich Vorlagen aus verschiedenen Kits mischen?

Technisch ja, aber es wird nicht empfohlen. Verschiedene Kits verwenden unterschiedliche Farbschemata, Typografie und Abstandswerte. Das Mischen führt zu visueller Inkonsistenz. Wenn Sie einen Seitentyp benötigen, der nicht in Ihrem Kit enthalten ist, entwerfen Sie ihn entweder von Grund auf neu mit den globalen Stilen Ihres Kits oder importieren Sie die neue Vorlage und passen Sie deren Styling manuell an.

Was ist der Unterschied zwischen einem Template-Kit und einer Starter-Vorlage?

Eine Starter-Vorlage ist typischerweise ein Design für eine einzelne Seite (Startseite, Landingpage), die Sie importieren und anpassen. Ein Template-Kit ist ein vollständiges Set von koordinierten Seiten, Kopfzeilen, Fußzeilen und Popups, die zusammen als vollständige Website funktionieren. Kits bieten Konsistenz; einzelne Vorlagen bieten Flexibilität für spezifische Seiten.

Zugriff auf 100+ Elementor Website-Kits

Holen Sie sich Elementor Pro, um auf die vollständige Template-Kit-Bibliothek, den Theme Builder und alle Pro-Widgets zuzugreifen. Erstellen Sie vollständige Websites in Stunden, nicht in Wochen.

Durchsuchen Sie Elementor Pro →

Häufig gestellte Fragen

Was ist der Unterschied zwischen Elementor-Vorlagen und Template-Kits?
Eine Vorlage ist ein Design für eine einzelne Seite. Ein Template-Kit ist ein vollständiges Set von koordinierten Vorlagen für eine gesamte Website, einschließlich Startseite, Über uns, Dienstleistungen, Kontakt, Blog und anderen Seiten, die konsistente Designelemente teilen.
Benötige ich Elementor Pro, um Template-Kits zu verwenden?
Ja, Elementor Free bietet Zugang zu einigen grundlegenden Vorlagen. Vollständige Template-Kits und die Template Kit Library mit Hunderten von professionellen Kits erfordern Elementor Pro. Drittanbieter von Vorlagen bieten ebenfalls Kits für beide Versionen an.
Kann ich die Designs von Template-Kits nach dem Import anpassen?
Ja. Template-Kits bieten einen Ausgangspunkt, kein fertiges Produkt. Nach dem Import können Sie Farben, Schriftarten, Bilder, Textinhalte und Layout-Elemente mit dem Elementor-Visual-Editor anpassen. Globale Stile ermöglichen effiziente Änderungen für das gesamte Thema.
Wie importiere ich ein Elementor-Template-Kit?
Klicken Sie im Elementor-Editor auf das Symbol der Template Kit Library. Durchsuchen oder suchen Sie nach einem Kit, das zu Ihrer Branche passt. Klicken Sie auf Kit anwenden, um alle Seiten und globalen Stile zu importieren. Einzelne Vorlagen können auch Seite für Seite importiert werden.
Enthalten Template-Kits Dummy-Inhalte?
Ja. Template-Kits enthalten Platzhaltertexte, Beispielbilder und Demoinhalte. Ersetzen Sie diese durch Ihre tatsächlichen Inhalte, Markenbilder und Unternehmensinformationen. Einige Kits enthalten Anweisungen zu empfohlenen Bildgrößen und Inhaltsstrukturen.

Diesen Beitrag teilen

Über den Autor

Can Bayar
Can Bayar

WordPress-Experte

Senior WordPress-Entwickler mit über 10 Jahren Erfahrung in der Plugin- und Theme-Entwicklung. Spezialisiert auf WooCommerce, Elementor und Leistungsoptimierung.

WordPressWooCommerceElementorPHPJavaScriptLeistungsoptimierung

Bleiben Sie informiert

Erhalten Sie die neuesten WordPress-Tipps und Tutorials in Ihrem Posteingang.