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!

Inhaltsverzeichnis
Ü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

Robert Leitinger

3 Gedanken zu „WordPress Theme erstellen ohne Programmierkenntnisse – Schritt für Schritt“

  1. Hallo Robert,

    vielen Dank für deinen ausführlichen Bericht. Funktioniert das ganze auch, wenn ich ein bestehendes Theme wechseln möchte? Ich habe mir vor zwei Jahren ein Theme gekauft, was mir nicht mehr gefällt, aber weiß nicht, wie ich das jetzt ändern kann mit Elementor Pro. Bislang bin ich davon ausgegangen, dass ich ein komplett neues (eigenes Theme) coden muss, um dann zu wechseln.

    Danke dir im Voraus und lieben Gruß

    Antworten
    • Hallo Nicoletta, du musst natürlich kein eigenes neues Theme coden. Da Elementor mit fast jedem Theme kompatibel ist, könntest du theoretisch auch versuchen, dein bestehendes Theme direkt mit Elementor zu überschreiben.
      Ich würde dir aber folgende Vorgehensweise vorschlagen:

      1. Transferiere deine bestehende Webseite auf eine andere Domain (bzw. auf eine Unterdomain wie neu.deine-webseite.com)
      2. Wechsle auf ein leichtes Theme wie z.B. Generatepress (auch die kostenlose Version ausreichend) oder Hello Theme. So wirst du den “Ballast” deines bestehenden Themes los.
      3. Erstelle jetzt dein Theme mit dem Theme Builder (wie in diesem Beitrag beschrieben)
      4. Transferiere die Webseite zurück, bzw. überschreibe deine bestehende Webseite

      In diesem Video zeige ich dir, wie du deine Webseite einfach von A nach B transferieren und überschreiben kannst.
      Ergänzend wollte ich noch sagen, dass du die “Entwicklungswebseite” (also wo du dein neues Theme erstellst) auf noindex schalten solltest (um Duplicate Content zu vermeiden).

Schreibe einen Kommentar

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)
Ü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.