15%

15% auf alle Hosting-Dienste sparen

Teste deine Fähigkeiten und erhalte Rabatt auf jeden Hosting-Plan

Benutze den Code:

Skills
Anfangen
21.10.2024

Wie man Starter-Templates in WordPress verwendet, um jede benötigte Website zu erstellen

Starter-Templates in WordPress sind vorgefertigte, vollständig gestaltete Seitenlayouts, die Sie mit einem einzigen Klick in Ihre Website importieren können. Sie bieten eine vollständige visuelle Struktur – Header, Footer, Unterseiten, Typografie und Farbschemata – ohne eine einzige Zeile Code schreiben zu müssen. Sie werden mit Themes wie Astra, Neve, Kadence und OceanWP gebündelt und sind über Companion-Plugins zugänglich, die eine Bibliothek branchenspezifischer Designs bereitstellen.

Der praktische Nutzen ist erheblich: Anstatt eine Homepage von Grund auf neu zu erstellen, importieren Sie eine auf Ihre Nische abgestimmte Vorlage (SaaS-Produkt, Anwaltskanzlei, WooCommerce-Shop, Portfolio) und ersetzen dann den Platzhalterinhalt durch Ihren eigenen. Der gesamte Prozess – von einer leeren WordPress-Installation bis hin zu einer gestalteten, mehrseitigen Website – kann unter 30 Minuten dauern, vorausgesetzt, Ihre Hosting-Umgebung ist ordnungsgemäß konfiguriert.

Was Sie vor dem Start benötigen

Bevor Sie das WordPress-Dashboard öffnen, überprüfen Sie die folgenden serverseitigen Voraussetzungen. Viele Fehler beim Template-Import lassen sich auf eine unzureichende Hosting-Konfiguration zurückführen, nicht auf Plugin-Fehler.

Mindestanforderungen für PHP und Arbeitsspeicher:

  • PHP 7.4 oder höher (PHP 8.1+ empfohlen für moderne Themes)
  • memory_limit auf mindestens 256 MB in php.ini setzen
  • max_execution_time von 300 Sekunden oder mehr
  • upload_max_filesize und post_max_size beide auf 64 MB oder höher

Wenn Sie einen VPS Hosting-Plan nutzen, können Sie diese Werte direkt in /etc/php/8.1/fpm/php.ini bearbeiten (passen Sie den Versionspfad an Ihren Stack an) und PHP-FPM neu laden:

sudo nano /etc/php/8.1/fpm/php.ini
# Set: memory_limit = 256M, max_execution_time = 300
sudo systemctl reload php8.1-fpm

In gemeinsam genutzten Umgebungen werden diese Limits häufig über das Hosting-Kontrollpanel festgelegt. Wenn Sie einen Shared Web Hosting-Plan verwenden, überprüfen Sie den PHP-Konfigurationsbereich in cPanel oder wenden Sie sich an den Support, um die Limits vor einem vollständigen Website-Import zu erhöhen.

SSL wird vor dem Launch dringend empfohlen. Wenn Sie eine Vorlage über HTTP importieren und anschließend auf HTTPS umstellen, entstehen Mixed-Content-Probleme bei eingebetteten Bildern und Skripten. Konfigurieren Sie Ihr SSL-Zertifikat, bevor Sie den Import durchführen.

Schritt 1: Wählen Sie ein Theme, das Starter-Templates unterstützt

Nicht jedes WordPress-Theme wird mit einer Template-Bibliothek geliefert. Die folgenden vier sind die ausgereiftesten Ökosysteme, jedes mit Hunderten von Templates und aktiver Weiterentwicklung:

ThemeGröße der Template-BibliothekPage-Builder-KompatibilitätSchlanke Basis (KB)Kostenlose Version
**Astra**250+ TemplatesElementor, Gutenberg, Beaver Builder, Brizy~50 KBJa
**Neve**100+ TemplatesElementor, Gutenberg, Brizy~30 KBJa
**Kadence**100+ TemplatesGutenberg (nativ), Elementor~40 KBJa
**OceanWP**50+ TemplatesElementor, Gutenberg~60 KBJa

Astra ist die am weitesten verbreitete Option und bietet die tiefste Elementor-Integration. Kadence ist die beste Wahl, wenn Sie vollständig im nativen Gutenberg-Block-Editor bleiben und eine Abhängigkeit von einem Drittanbieter-Page-Builder vermeiden möchten. Neve ist von Haus aus am stärksten auf Performance optimiert.

So installieren Sie Ihr gewähltes Theme:

  1. Melden Sie sich in Ihrem WordPress-Dashboard an.
  2. Navigieren Sie zu Design > Themes.
  3. Klicken Sie auf Neu hinzufügen und suchen Sie nach Ihrem Theme.
  4. Klicken Sie auf Installieren und dann auf Aktivieren.

Schritt 2: Installieren Sie das Starter-Templates-Plugin

Jedes Theme-Ökosystem verwendet ein etwas anderes Plugin, um seine Template-Bibliothek zugänglich zu machen. Die folgende Tabelle ordnet Themes ihren Companion-Plugins zu:

ThemePlugin-NameWordPress.org Slug
AstraStarter Templates`astra-sites`
NeveNeve Pro / Otter Blocks`otter-blocks`
KadenceKadence Starter Templates`kadence-starter-templates`
OceanWPOcean Extra`ocean-extra`

Für Astra (der häufigste Workflow):

  1. Gehen Sie zu Plugins > Neu hinzufügen.
  2. Suchen Sie nach Starter Templates.
  3. Installieren und aktivieren Sie das Plugin mit dem Namen Starter Templates – Elementor, Gutenberg & Beaver Builder Templates.

Nach der Aktivierung erscheint ein neuer Menüpunkt unter Design > Starter Templates.

Wichtiger Sonderfall: Wenn Sie eine bestehende Website migrieren und bereits Inhalte vorhanden sind, führen Sie keinen vollständigen Website-Import durch. Dabei werden Ihre vorhandenen Seiten, Menüs und Widgets überschrieben. Verwenden Sie stattdessen Einzelne Seite importieren oder Homepage-Template importieren und fügen Sie die benötigten Designelemente manuell zusammen.

Schritt 3: Wählen Sie ein Starter-Template aus und importieren Sie es

Nach der Aktivierung des Plugins startet der Import-Assistent automatisch oder ist über Design > Starter Templates zugänglich.

Workflow:

  1. Wählen Sie Ihren Page-Builder. Der Assistent fragt, ob Sie Elementor, Gutenberg oder Beaver Builder verwenden möchten. Diese Wahl ist für den Import endgültig – Sie können keine Builder innerhalb eines einzelnen Template-Imports mischen. Wählen Sie Gutenberg für ein schlankeres, plugin-freies Setup; wählen Sie Elementor, wenn Sie erweiterte Drag-and-Drop-Flexibilität benötigen.
  1. Nach Kategorie filtern. Templates sind nach Branche geordnet (Business, eCommerce, Agentur, Restaurant, Portfolio, Bildung usw.). Verwenden Sie die Suchleiste für die Schlüsselwortfilterung.
  1. Vor dem Import eine Vorschau anzeigen. Klicken Sie auf ein Template-Vorschaubild, um eine Live-Vorschau zu öffnen. Prüfen Sie die Unterseiten (Über uns, Kontakt, Blog) – nicht nur die Homepage – da die Homepage oft poliert wirkt, während die Unterseiten spärlich gestaltet sind.
  1. Wählen Sie den Importumfang:
  • Komplette Website importieren – importiert alle Seiten, Beiträge, Menüs, Widgets und Theme-Customizer-Einstellungen. Am besten für neue Websites geeignet.
  • Homepage-Template importieren – importiert nur das Homepage-Layout. Am besten für bestehende Websites geeignet, bei denen Sie nur die Startseite auffrischen möchten.
  1. Bestätigen Sie den Import. Das Plugin lädt Demo-Inhalte, Bilder (von Unsplash oder dem CDN des Plugins) und Customizer-Einstellungen herunter. Bei langsameren Verbindungen oder restriktiven Servern kann dies 60–90 Sekunden dauern.

Was importiert wird und was nicht:

AssetImportiertHinweise
SeitenlayoutsJaAlle Seiten der Demo
Demo-BilderJaPlatzhalterbilder vom Unsplash CDN
Plugins (WooCommerce usw.)Auf AnfragePlugin-Installer wird als Teil des Assistenten ausgeführt
Ihre vorhandenen Beiträge/SeitenNeinVorhandene Inhalte werden nicht gelöscht, es sei denn, Sie wählen „Zuvor importierte Daten löschen”
Benutzerdefinierte Domain/DNS-EinstellungenNeinMuss separat konfiguriert werden
SSL-ZertifikatNeinMuss vorab konfiguriert werden

Schritt 4: Das Template anpassen

Mit dem Elementor-Editor

Navigieren Sie zu Seiten, fahren Sie mit der Maus über eine beliebige Seite und klicken Sie auf Mit Elementor bearbeiten. Der visuelle Editor öffnet sich mit dem importierten Layout, das vollständig bearbeitbar ist.

Wichtige Anpassungsaktionen:

  • Bilder ersetzen: Klicken Sie auf ein beliebiges Bild-Widget und dann auf die Bildvorschau im linken Panel, um die Medienbibliothek zu öffnen. Ersetzen Sie Demo-Bilder durch Ihre eigenen Assets.
  • Text direkt bearbeiten: Klicken Sie direkt auf ein beliebiges Textelement, um es an Ort und Stelle zu bearbeiten.
  • Globale Farben und Schriften: Gehen Sie in Elementor zu Website-Einstellungen > Globale Farben und Globale Schriften, um Ihre Markenpalette und Ihr Typografiesystem websiteweit festzulegen. Das Ändern einer globalen Farbe aktualisiert gleichzeitig alle Elemente, die darauf auf allen Seiten verweisen.
  • Abschnitts- und Spaltenstruktur: Klicken Sie mit der rechten Maustaste auf einen beliebigen Abschnitt, um ihn zu duplizieren, zu löschen oder zu verschieben. Verwenden Sie das Navigator-Panel (das Ebenen-Symbol in der unteren Symbolleiste) für komplexe Layouts mit verschachtelten Abschnitten.

Klicken Sie nach der Bearbeitung auf Aktualisieren (nicht auf Veröffentlichen – die Seite ist bereits veröffentlicht; Aktualisieren speichert Ihre Änderungen).

Mit dem Gutenberg-Block-Editor

Navigieren Sie zu Seiten und klicken Sie auf Bearbeiten bei der Zielseite. Der Block-Editor öffnet sich mit dem importierten musterbasierten Layout.

Wichtige Anpassungsaktionen:

  • Klicken Sie auf einen beliebigen Block, um ihn auszuwählen. Verwenden Sie die Symbolleiste über dem Block für Ausrichtungs-, Farb- und Formatierungsoptionen.
  • Verwenden Sie die Listenansicht (das Symbol mit gestapelten Linien in der oberen Symbolleiste), um die vollständige Block-Hierarchie anzuzeigen und zu navigieren – unverzichtbar für komplexe Templates mit verschachtelten Gruppen- und Cover-Blöcken.
  • Um globale Stile zu ändern, gehen Sie zu Design > Editor > Stile (Full-Site-Editing-Themes) oder Design > Customizer (klassische Themes).
  • Das Stile-Panel im Website-Editor ermöglicht es Ihnen, globale Typografie und Farbpaletten festzulegen, die auf alle Blöcke übertragen werden.

Hinweis zur Performance: Gutenberg-basierte Templates erzeugen saubereres HTML und laden schneller als Elementor-basierte, da sie das Elementor-Laufzeit-JavaScript nicht benötigen. Für Websites, bei denen Core Web Vitals Priorität haben, ist der Gutenberg-Weg messbar besser.

Schritt 5: Globale Theme-Einstellungen konfigurieren

Öffnen Sie nach dem Import Design > Customizer, um das globale Designsystem zu verfeinern. Die verfügbaren Panels variieren je nach Theme, aber alle wichtigen Starter-Template-Themes bieten:

Typografie:

  • Legen Sie die primäre Schriftfamilie für Überschriften (H1H6) und Fließtext fest.
  • Definieren Sie Schriftgrößen, Zeilenhöhen und Buchstabenabstände global.
  • Verwenden Sie Systemschriften (-apple-system, BlinkMacSystemFont, sans-serif) oder eine Google-Fonts-Auswahl. Systemschriften vermeiden eine externe HTTP-Anfrage und verbessern LCP-Werte.

Farben:

  • Definieren Sie eine Primärfarbe (Markenakzent), Sekundärfarbe, Textfarbe und Hintergrundfarbe.
  • Diese Werte füllen CSS-Custom-Properties (--wp--preset--color--primary), auf die alle importierten Blöcke und Widgets verweisen.

Layout:

  • Legen Sie die globale Container-Breite fest (typischerweise 1200px–1440px für moderne Designs).
  • Konfigurieren Sie das Header-Layout: Sticky-Header, transparenter Header beim Scrollen, Verhalten des mobilen Menüs.
  • Konfigurieren Sie Footer-Spalten, Widget-Bereiche und Copyright-Text.

Astra-spezifisch: Astras Customizer verfügt über ein Performance-Panel, in dem Sie das Laden von Google Fonts deaktivieren können (nützlich, wenn Sie Schriften für die DSGVO-Konformität selbst hosten) und CSS-Minifizierung aktivieren können.

Schritt 6: Platzhalterinhalte ersetzen

Demo-Inhalte von Templates sind absichtlich generisch gehalten. Ein systematisches Ersetzen ist schneller als das seitenweise Bearbeiten:

  1. Gehen Sie zu Seiten und sortieren Sie nach Datum, um alle während des Template-Setups importierten Seiten zu finden.
  2. Öffnen Sie jede Seite und ersetzen Sie:
  • Überschriften und Fließtext durch Ihre tatsächlichen Inhalte.
  • Demo-Bilder durch Ihre eigenen Fotos oder lizenzierte Stockbilder. Verwenden Sie beschreibenden alt-Text für jedes Bild.
  • Platzhalter-Telefonnummern, -Adressen und -E-Mail-Adressen.
  • Demo-Navigationslinks – überprüfen Sie Design > Menüs, um sicherzustellen, dass alle Menüpunkte auf echte Seiten verweisen.
  1. Aktualisieren Sie den Website-Titel und den Untertitel unter Einstellungen > Allgemein.
  2. Legen Sie Ihre Startseite und Blog-Seite unter Einstellungen > Lesen fest.

SEO-kritischer Schritt: Installieren Sie nach dem Ersetzen der Inhalte entweder Yoast SEO oder Rank Math und legen Sie für jede Seite einen eindeutigen Meta-Titel und eine Meta-Beschreibung fest. Template-Imports füllen keine SEO-Metadaten.

Schritt 7: Funktionalität mit Plugins erweitern

Starter-Templates bieten Design-Gerüste, keine Funktionalität. Je nach Website-Typ benötigen Sie zusätzliche Plugins:

Website-TypEmpfohlenes PluginZweck
eCommerceWooCommerceProduktkatalog, Warenkorb, Kasse
Lead-GenerierungWPForms oder Contact Form 7Kontakt- und Anfrageformulare
MitgliedschaftMemberPress oder Restrict Content ProGeschützte Inhalte
SEORank Math oder Yoast SEOOn-Page-SEO, Sitemaps, Schema
PerformanceWP Rocket oder LiteSpeed CacheCaching, Minifizierung, Lazy Loading
SicherheitWordfence oder Solid SecurityFirewall, Malware-Scanning
BackupUpdraftPlusAutomatisierte externe Backups

Wenn Sie WooCommerce betreiben, stellen Sie sicher, dass Ihr Hosting-Plan die zusätzliche Datenbankbelastung bewältigen kann. Ein VPS mit cPanel bietet Ihnen den nötigen Ressourcenspielraum und eine Verwaltungsoberfläche, um WooCommerce in großem Maßstab zu betreiben, ohne die Einschränkungen des Shared Hostings.

Schritt 8: Vorschau, Test und Launch

Führen Sie vor der Veröffentlichung diese Pre-Launch-Checkliste durch:

Visuelle Qualitätssicherung:

  • Vorschau auf Desktop, Tablet und Mobilgerät mit der responsiven Vorschau des WordPress-Customizers oder den Browser-DevTools.
  • Überprüfen Sie, ob auf keiner Seite noch Demo-Bilder vorhanden sind.
  • Stellen Sie sicher, dass alle Schriften korrekt geladen wurden (Netzwerk-Drosselung in den DevTools kann Schrift-Swap-Flackern aufdecken).

Funktionstests:

  • Senden Sie jedes Formular ab und bestätigen Sie, dass die Benachrichtigungs-E-Mail ankommt. Überprüfen Sie Ihre E-Mail-Hosting-Konfiguration, wenn Transaktions-E-Mails nicht zugestellt werden – WordPress’ Standard-wp_mail() basiert auf der mail()-Funktion von PHP, die viele Hosts blockieren. Verwenden Sie ein SMTP-Plugin (WP Mail SMTP, Post SMTP) mit authentifizierten Zugangsdaten.
  • Klicken Sie auf jeden Navigationslink und jede Schaltfläche. Importierte Templates enthalten manchmal fest codierte Demo-URLs.
  • Testen Sie den Checkout-Prozess, wenn WooCommerce aktiv ist.

Performance-Baseline:

  • Führen Sie einen PageSpeed Insights-Test auf der Homepage durch. Streben Sie einen LCP unter 2,5 Sekunden und einen CLS-Wert unter 0,1 an.
  • Wenn die Werte schlecht sind, aktivieren Sie Caching, optimieren Sie Bilder (in WebP konvertieren) und erwägen Sie ein CDN.

Sicherheit:

  • Stellen Sie sicher, dass HTTPS websiteweit erzwungen wird. Überprüfen Sie, ob in der Browser-Konsole keine Mixed-Content-Warnungen vorhanden sind.
  • Ändern Sie den Standard-WordPress-Admin-Benutzernamen, wenn er noch admin lautet.
  • Setzen Sie Dateiberechtigungen: Verzeichnisse auf 755, Dateien auf 644 und wp-config.php auf 600.

Sobald alle Prüfungen bestanden sind, ist die Website bereit. Wenn sie sich noch unter einer temporären Domain befindet, aktualisieren Sie die WordPress-Adresse (URL) und die Website-Adresse (URL) unter Einstellungen > Allgemein, nachdem Sie Ihre Domain weitergeleitet haben. Sie können Ihre Domain über Domain-Registrierung registrieren oder übertragen, falls Sie dies noch nicht getan haben.

Häufige Fehler und wie man sie vermeidet

Import schlägt mitten im Prozess fehl: Wird in der Regel durch zu niedrige PHP-memory_limit– oder max_execution_time-Werte verursacht. Erhöhen Sie diese Werte wie im Abschnitt zu den Voraussetzungen beschrieben und wiederholen Sie dann den Import.

Demo-Bilder werden nach dem Import nicht geladen: Das Starter-Templates-Plugin lädt Bilder von einem externen CDN. Wenn Ihr Server ausgehende HTTP-Einschränkungen oder eine Firewall hat, die externe Anfragen blockiert, werden Bilder nicht heruntergeladen. Fügen Sie die CDN-Domains des Plugins zur Whitelist hinzu oder lockern Sie vorübergehend die ausgehenden Regeln während des Imports.

Template sieht anders aus als die Vorschau: Das bedeutet fast immer, dass ein erforderliches Plugin (Elementor Pro, ein bestimmtes Add-on) nicht installiert wurde. Der Import-Assistent listet die erforderlichen Plugins auf – installieren Sie alle davon, bevor Sie importieren.

Customizer-Änderungen werden auf importierten Seiten nicht übernommen: Einige Elementor-Templates verwenden Elementors eigene globale Einstellungen anstelle des Theme-Customizers. Änderungen, die unter Design > Customizer vorgenommen werden, wirken sich nicht auf Elementor-gesteuerte Elemente aus. Verwenden Sie für diese Seiten Elementor > Website-Einstellungen.

Performance-Verschlechterung nach dem Import: Vollständige Website-Imports laden alle Demo-Plugins und -Assets. Überprüfen Sie Ihre aktiven Plugins nach dem Import und deaktivieren Sie alles, was Sie nicht benötigen. Jedes aktive Plugin verursacht PHP-Ausführungsaufwand bei jedem Seitenaufruf.

Technische Entscheidungsmatrix: Den richtigen Build-Pfad wählen

SzenarioEmpfohlener Pfad
Neue Website, keine vorhandenen Inhalte, schnelle Umsetzung gewünschtAstra + Starter Templates + Elementor, vollständiger Website-Import
Performance-kritische Website (Core Web Vitals als Priorität)Kadence + Kadence Starter Templates + nur Gutenberg
Bestehende Website, nur Homepage neu gestaltenBeliebiges Theme + einzelnes Seiten-Template importieren
WooCommerce-ShopAstra oder Kadence + WooCommerce-spezifisches Template
Entwickler, der für einen Kunden bautNeve + Child-Theme + selektive Block-Imports
Minimaler Plugin-Footprint erforderlichKadence + Gutenberg, kein Elementor

Pre-Launch-Checkliste

  • PHP-Speicherlimit beträgt vor dem Import 256 MB oder mehr
  • SSL-Zertifikat ist aktiv und HTTPS wird erzwungen
  • Vollständiger Website-Import zuerst in einer Staging-Umgebung durchgeführt, dann in die Produktion übertragen
  • Alle Demo-Platzhaltertexte und -bilder ersetzt
  • SEO-Meta-Titel und -Beschreibungen auf jeder Seite festgelegt
  • Alle Formulare mit bestätigter echter E-Mail-Zustellung getestet
  • Navigationsmenüs überprüft – keine toten Links oder Demo-URLs
  • Performance-Baseline mit PageSpeed Insights gemessen
  • Caching-Plugin aktiv und konfiguriert
  • Admin-Benutzername vom Standard admin geändert
  • wp-config.php-Berechtigungen auf 600 gesetzt
  • Domain-DNS zeigt auf die korrekte Server-IP

FAQ

Kann ich ein Starter-Template auf einer bestehenden WordPress-Website verwenden, ohne meine aktuellen Inhalte zu verlieren?

Ja, aber Sie müssen „Einzelne Seite importieren” oder „Homepage-Template importieren” auswählen, anstatt „Komplette Website importieren”. Der vollständige Website-Import überschreibt vorhandene Seiten, Menüs und Widget-Bereiche. Erstellen Sie immer ein vollständiges Backup vor jeder Import-Operation.

Funktionieren Starter-Templates mit jedem WordPress-Theme oder nur mit bestimmten?

Starter-Templates sind an bestimmte Theme-Ökosysteme gebunden. Das Astra-Starter-Templates-Plugin funktioniert nur mit dem Astra-Theme. Kadence-Starter-Templates erfordern das Kadence-Theme. Sie können keine Templates zwischen inkompatiblen Themes übergreifend importieren.

Warum sehen meine importierten Seiten anders aus als die Template-Vorschau?

Die häufigste Ursache ist ein fehlendes erforderliches Plugin – typischerweise Elementor Pro oder ein Premium-Add-on. Der Import-Assistent listet alle erforderlichen Plugins auf; installieren Sie alle davon vor dem Import. Eine weitere Ursache kann ein PHP-Speicherlimit sein, das dazu geführt hat, dass der Import lautlos fehlgeschlagen ist und einige Assets nicht heruntergeladen wurden.

Schadet die Verwendung eines Starter-Templates der SEO meiner Website?

Nicht grundsätzlich, aber Starter-Templates importieren Demo-Inhalte ohne SEO-Metadaten. Sie müssen manuell eindeutige Meta-Titel, -Beschreibungen und strukturierte Daten für jede Seite festlegen. Darüber hinaus erzeugen einige Elementor-lastige Templates aufgeblähtes HTML, das sich negativ auf die Core Web Vitals auswirken kann – überprüfen Sie dies nach dem Import mit PageSpeed Insights.

Kann ich nach der Anpassung meiner Website zu einem anderen Starter-Template wechseln?

Technisch gesehen ja, aber es ist destruktiv. Das Importieren eines neuen vollständigen Website-Templates überschreibt Ihre vorhandenen Anpassungen. Der praktische Ansatz besteht darin, Ihre aktuellen Customizer-Einstellungen zu exportieren (mit einem Theme-Export-Tool), das neue Template auf einer Staging-Website zu importieren, Ihre Inhalte manuell zu migrieren und dann die Staging-Website in die Produktion zu übertragen.

15%

15% auf alle Hosting-Dienste sparen

Teste deine Fähigkeiten und erhalte Rabatt auf jeden Hosting-Plan

Benutze den Code:

Skills
Anfangen