In diesem Tutorial zeige ich dir Schritt für Schritt, wie du einfach und schnell ein eigenes WordPress Theme erstellen kannst. Komplett ohne Programmierkenntnisse – einfach per Drag & Drop.
Das alles funktioniert mit dem WordPress Theme Builder von Elementor. Dazu aber gleich mehr.
Wie du ein WordPress Theme selbst erstellen kannst
Im Grunde gibt es zwei Möglichkeiten, wie du ein WordPress Theme selbst erstellen kannst:
- Ein Theme mit HTML, CSS und PHP selbst programmieren (komplex und aufwendig)
- Ein Theme mit einem Theme Builder erstellen (einfach per Drag & Drop)
Auf die erste Möglichkeit (ein Theme selbst programmieren), werde ich in diesem Beitrag nicht genauer eingehen. Ein sehr umfangreiches Tutorial dazu findest du auf akademie.de sowie auf t3n.de.
Ich zeige dir die einfachere Variante.
Mit dem Theme Builder von Elementor kannst du dein Theme nämlich einfach per Drag & Drop erstellen. Dabei kannst du sogar auf unzählige Vorlagen zurückgreifen und diese dann einfach anpassen.
Dein eigenes Theme kannst du somit in weniger als einer Stunde erstellen – ganz ohne HTML, CSS oder PHP-Kenntnisse!
Was ist der Elementor Theme Builder?
Elementor ist einer der populärsten Page- und Theme Builder für WordPress. Ein sehr umfangreiches Review über dieses geniale Tool findest du hier in meinem Elementor Testbericht.
Elementor ist ein Plugin, welches du kostenlos über das WordPress Backend installieren kannst.
Die kostenpflichtige Pro-Version von Elementor verfügt neben vielen anderen Features auch über eine Theme Builder Funktionalität. Elementor Pro kannst du ab ca. 45 Euro (49 Dollar) hier auf der offiziellen Webseite kaufen*.
Auch diese Webseite wurde komplett mit Elementor
So funktioniert der Elementor Theme Builder
Eines möchte ich gleich vorweg klarstellen: Elementor ist ein Plugin und benötigt immer ein echtes WordPress Theme als Basis, damit es überhaupt funktioniert. Somit kann man auch kein „echtes WordPress Theme“ mit Elementor erstellen.
Allerdings ist es möglich, dass du mit dem Elementor Theme Builder quasi jeden Bereich des von dir eingesetzten Themes überschreibst.
Du kannst also deine gesamte WordPress-Webseite mit Elementor erstellen: Den Header-Bereich inklusive Menü, das Blog-Layout, Archiv- bzw. Kategorie-Seiten, die Seite wo interne Suchergebnisse angezeigt werden, etc.
Alle Bereiche, wo Layout und Design von deinem Theme vorgegeben werden, können mit Elementor Pro erstellt und ersetzt werden.
Das Prinzip hinter dem Theme Builder ist also, dass selbst erstellte Templates das eigentliche Theme-Layout ersetzen.
Genau genommen erstellst du also kein echtes Theme, sondern lediglich ein Theme-Layout, welches das installierte Theme überschreibt.
In der Praxis – also im Ergebnis – macht dies aber keinen Unterschied.
Welches (Basis-) Theme sollte man nutzen?
Elementor selbst bietet für diesen Einsatzzweck das kostenlose Hello Elementor Theme. Dabei handelt es sich um ein komplett reduziertes, ja “nacktes” Theme ohne Funktionen und ohne echtem Layout.
In Kombination mit dem Elementor Theme Builder ist das natürlich die perfekte Wahl, um eine bestmögliche Performance zu erreichen. Das Hello Theme ist so stark reduziert, das lediglich 17kB an Daten geladen werden.
Zwei weitere WordPress Themes die ebenfalls großartig mit Elementor harmonieren sind GeneratePress und Astra. Die beiden Themes sind ebenfalls auf maximale Performance optimiert.
Theme-Style Funktion
Ergänzend zum Theme Builder bietet Elementor Pro auch noch die Funktion Theme-Style an. Damit können globale Stile für Schriften (Body-Text, H1, H2…), Buttons, Links etc. festgelegt werden.
Die Funktion Theme-Style ist vergleichbar mit den Customizer-Optionen von guten WordPress Themes.
Wenn du GeneratePress oder Astra nutzt, kannst du auf diese Funktion verzichten und die globalen Stile in den Optionen des Customizers festlegen. Wenn du das Hello Theme nutzt, solltest du die Theme-Stil Funktion nutzen, da hier keine disbezüglichen Optionen im Customizer bereitstehen.
Welche Seiten / Bereiche musst du erstellen?
Bevor ich mit der (einfachen) Schritt für Schritt Anleitung starte, klären wir noch schnell welche Seiten und Bereiche überhaupt erstellt werden müssen.
Im Grunde müssen wir folgende Templates erstellen, um ein komplettes Theme zu erhalten:
- Header
- Footer
- Layout einer Standard-Seite
- Layout eines einzelnen Blog Posts
- Archiv-Layout (Kategorie Seite)
- Suchergebnisseite
- 404-Seite
Schritt für Schritt Anleitung
Falls du Elementor noch nie genutzt hast, dann wirst du jetzt überrascht sein, wie einfach du damit ein eigenes Theme-Layout erstellen kannst:
1. Kaufe Elementor Pro
Damit du die Theme-Builder Funktion nutzen kannst, benötigst du die Pro-Version von Elementor. Falls du diese noch nicht hast, kannst du sie hier kaufen*.
2. Installiere ein schlankes Basis-Theme
Wie vorhin schon angesprochen empfehle ich dir das Elementor Hello Theme zu verwenden. Bei diesem komplett blanken Theme werden nur 17kB an Daten geladen. Somit hast du auch bezüglich der Performance, den perfekten Unterbau für deine Webseite.
Aber auch GeneratePress, Astra und weitere Themes sind bestens mit Elementor kompatibel und ebenfalls sehr schlank.
3. Erstelle Header und Footer
Erstellte zuerst deinen Header und deinen Footer. Du findest die Option dazu im WordPress-Backend:
Templates – Theme Builder – Neu hinzufügen – Kopfzeile
Templates – Theme Builder – Neu hinzufügen – Fußzeile
Um deinen Workflow zu beschleunigen, kannst du auf bestehende Header- und Footer-Templates zurückgreifen, und diese einfach anpassen.
Nach dem Abspeichern kannst du noch festlegen, wo dein Header bzw. Footer angezeigt werden soll. In der Regel wirst du hier die Option „gesamte Webseite“ (Entire Site) wählen.
Es ist aber auch möglich, unterschiedliche Header je nach Seitentyp etc. zu erstellen und anzeigen zu lassen. Z.b. kannst du in deinen Beiträgen einen anderen Header anzeigen lassen, als z.B. auf deiner Startseite.
4. Erstelle dein Blog-Layout
Auch beim Blog-Layout kannst du auf bestehende Templates zurückgreifen und diese anpassen.
Hier kannst du das Layout für deine Blog-Beiträge festlegen:
Templates – Theme Builder – Neu hinzufügen – Single – Beitrag
Hier kannst du das Layout für deinen Archiv- bzw. Kategorie-Seiten festlegen:
Templates – Theme Builder – Neu hinzufügen – Archiv
Schreiben kannst du deine Blog-Beiträge aber natürlich wie gewohnt im WordPress-Editor (z.B. Gutenberg). So mache ich das auch hier in diesem Blog.
Das Blog- und Kategorie-Layout habe ich mit Elementor erstellt, die Blog-Beiträge schreibe ich aber im Gutenberg-Editor von WordPress. Es ist allerdings auch möglich, die einzelnen Blog-Beiträge mit Elementor zu schreiben und zu stylen.
5. Erstelle das Layout einer Standard-Seite
Hier kannst du das Layout einer gewöhnlichen Seite erstellen:
Templates – Theme Builder – Neu hinzufügen – Single – Seite
Den Schritt könntest du dir aber auch sparen, falls du alle weiteren Seiten sowieso direkt mit dem Elementor Page Builder erstellst.
6. Erstelle deine 404- und Sucherergebnis-Seite
Die 404-Seite ist die Seite, welche angezeigt wird, wenn eine Seite nicht gefunden wird (z.B. bei einer fehlerhaften Verlinkung oder Umleitung). Die Seite kannst du wie gewohnt erstellen.
Templates – Theme Builder – Neu hinzufügen – Single – 404 Seite
Für die Suchergebnis-Seite erstellst du einfach eine weitere Archiv-Seite:
Templates – Theme Builder – Neu hinzufügen – Archiv
Bei den Anzeige-Bedingungen wählst du dann einfach „Suchergebnisse“ aus:
Optional: Erstelle die restlichen Seiten deiner Webseite
Ich gehe immer so vor, dass ich im ersten Schritt mein Theme-Layout erstelle. Das haben wir nach diesen 6 einfachen Schritten bereits erledigt.
Danach erstelle ich die Startseite sowie die restlichen Seiten meiner Webseite ebenfalls mit Elementor (z.B. eine Über mich Seite / Leistungs-Seite, etc.).
Lege dazu einfach jeweils eine neue Seite im WordPress-Backend an und erstelle sie wie gewohnt mit Elementor. Welche Seite deine Startseite ist, kannst du wie gewohnt im WordPress Customizer festlegen.
Fertig – nun hast du neben deinem Theme-Layout auch deine gesamte Webseite mit Elementor Pro erstellt!
Ich erstelle immer erst mein Theme-Layout mit Elementor Pro. Danach erstelle ich die restlichen Seiten ebenfalls mit Elementor.
Lediglich meine Blogbeiträge erstelle ich wie gewohnt im Gutenberg-Editor von WordPress.
Theme kaufen oder selbst erstellen? Mein Fazit
Ich bevorzuge mittlerweile einen Theme Builder über ein Premium Theme, da die Vorteile einfach auf der Hand liegen:
- Mit einem Theme Builder habe ich die volle Kontrolle über das Layout meiner Webseite.
- Durch einen Theme Builder bin ich komplett unabhängig von dem verwendeten Theme-
- Mit einem Theme Builder kann ich die User Experience gezielt verbessern-
- Elementor Pro spart mir viel Zeit, da Seiten und Templates einfach mittels Drag & Drop erstellt werden-
- Es macht mir großen Spaß, meine Layouts mit Elementor umzusetzen. Selbst zu coden oder jedes Detail über CSS anpassen zu müssen, würde mir weniger Freude bereiten.
Natürlich ist Elementor Pro mit jährlichen (wenn auch überschaubaren) Kosten verbunden. Allerdings ist Elementor Pro ja nicht nur ein Theme Builder, sondern vor allem ein Page Builder mit hohem Funktionsumfang. Somit lohnt sich die Investition allemal, wenn man ein ordentliches Online-Projekt auf WordPress-Basis umsetzen möchte.
Weiterführende Informationen:
Mein Elementor Test zum Nachlesen
Elementor ist ab ca. 45 Euro erhältlich. Hier findest du die aktuellen Preise auf der offiziellen Webseite*
Hier findest du kostenlose Elementor Templates
Mein Review zum Astra Theme (harmoniert super mit Elementor)
Mein Review zum Generatepress Premium Theme (ebenfalls eine großartige Wahl)
Das kostenlose Hello Theme im WordPress Theme Verzeichnis
Fragen oder Ergänzungen?
Hast zu Fragen zum Elementor Theme Builder oder weitere Ergänzungen zum Beitrag? Wenn ja dann schreibe doch einfach gleich jetzt ein Kommentar!
