WordPress Theme erstellen ohne Programmierkenntnisse – Schritt fĂĽr Schritt

Wordpress Theme erstellen mit Elementor Theme Builder

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:

  1. Ein Theme mit HTML, CSS und PHP selbst programmieren (komplex und aufwendig)
  2. 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.

Keine Programmierkenntnisse
Wenn ich ein eigenes WordPress Theme selbst programmieren müsste, dann würde ich wahrscheinlich durchdrehen. Gott sei Dank gibt es eine einfachere Möglichkeit 🙂

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 

Elementor Pro inklusive Theme Builder
Elementor ist ein Drag & Drop Page Builder. Die Pro-Version enthält eine geniale Theme Builder Funktionalität mit der du die Grenzen von WordPress sprengen kannst. Auch diese Webseite wurde komplett mit Elementor erstellt.

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.

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.

Theme-Stil Einstellungen

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

Elementor Theme Builder benutzen
Nachdem du auf den Button Neu hinzufügen geklickt hast, öffnet sich dieses Fenster. Hier kannst du einen Bereich auswählen (in diesem Fall Kopfzeile) und ein entsprechendes Template erstellen.

Um deinen Workflow zu beschleunigen, kannst du auf bestehende Header- und Footer-Templates zurĂĽckgreifen, und diese einfach anpassen.

Elementor Vorlagen fĂĽr den Header
Der schnellste Weg einen eigenen Header zu erstellen: Wähle eine Header-Template Vorlage

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.

Bedingung erstellen, wo das Template angezeigt werden soll.

4. Erstelle dein Blog-Layout

Auch beim Blog-Layout kannst du auf bestehende Templates zurĂĽckgreifen und diese anpassen.

Eines von vielen Blog-Templates (Single-Post). Das Template fĂĽr diesen Blog (und somit auch fĂĽr diesen Beitrag, den du gerade lieĂźt) habe ich aber komplett neu erstellt.

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

Dank einiger schöner Templates dauert das Erstellen der 404-Seite weniger als 5 Minuten

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!

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!

Newsletter abonnieren und keinen Beitrag mehr verpassen!
Ich schicke dir eine E-Mail, wenn ein neuer Beitrag veröffentlicht wird.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit widerrufen. Mehr Infos: Datenschutzerklärung.

Inhaltsverzeichnis
Weitere Beiträge lesen:
Ăśber den Autor
Robert Leitinger

In den letzten 10 Jahren habe ich mehrere erfolgreiche Online-Projekte umgesetzt.
Im Jahr 2018 folgte die GrĂĽndung meiner eigenen Webdesign und Online Marketing Agentur.
Ergänzend zu diesem Blog betreibe ich auch einen YouTube Kanal.

Mehr ĂĽber mich erfahren

Kennzeichnung & Information: Affiliate Links / Partnerlinks
Bei einem Link, der mit einem Stern gekennzeichnet ist (*), handelt es sich um einen Affiliate Link. Wenn du über diesen Link etwas kaufst, erhalte ich eine kleine Provision. Für dich entstehen dadurch keine Mehrkosten. So kann diese Webseite finanziert werden und sie bleibt frei von externen Werbebanner. Vielen Dank! Weitere Informationen disbezüglich findest du in der Datenschutzerklärung.

Ăśber robert-leitinger.com

Ich schicke dir eine Mail, sobald ein neuer Beitrag veröffentlicht wird.

Mit dem Absenden des Formulars erteilst du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit wiederrufen. Mehr Infos: Datenschutzerklärung.

TEILEN ist wie TRINKGELD fĂĽr mich : -)
Vielen Dank!

Inhaltsverzeichnis (scroll down)

Nutzt du schon Elementor Pro?

In meinem Elementor Testbericht erfährst du mehr über die Pro-Version zu Elementor

Ăśber robert-leitinger.com

Ich schicke dir eine Mail, sobald ein neuer Beitrag veröffentlicht wird.

Mit dem Absenden dieses Formulars erteilst Du mir die Einwilligung, dir meinen E-Mail-Newsletter zuzusenden. Dies kannst du jederzeit wiederrufen. Weitere Infos findest du in der Datenschutzerklärung.