loader image

Radiboxes Server machen WordPress Websites bis zu 4x schneller - ohne zusätzliche Optimierung. Raidboxes migriert deine Website und du kannst selbst vergleichen. Wenn du zufrieden bist, wähle einfach das passende Paket in deren Preistabelle.

4.97

Sehr gut

trustedshops.de

Autor

duckducknews

So erstellen Sie auf einfache Weise ein benutzerdefiniertes WordPress-Theme (ohne jeglichen Code)

Möchten Sie ein benutzerdefiniertes WordPress-Theme von Grund auf neu erstellen?

In der Vergangenheit mussten Sie den WordPress-Codex befolgen und ein anständiges Programmierwissen haben, um ein benutzerdefiniertes WordPress-Theme zu erstellen. Aber dank der neuen WordPress-Theme-Generatoren kann jetzt jeder ein komplett benutzerdefiniertes WordPress-Theme innerhalb einer Stunde erstellen (keine Programmierkenntnisse erforderlich).

In diesem Artikel zeigen wir Ihnen, wie Sie ganz einfach ein benutzerdefiniertes WordPress-Theme erstellen können, ohne irgendeinen Code zu schreiben.

Creating a custom WordPress theme without writing any code

Erstellen eines benutzerdefinierten WordPress-Themes für Einsteiger

Im Gegensatz zu statischen HTML-Seiten sind WordPress-Themes eine Reihe von Vorlagendateien, die in PHP, HTML, CSS und JavaScript geschrieben sind. Normalerweise müssen Sie ein gutes Verständnis all dieser Web-Design-Sprachen haben oder einen Web-Entwickler beauftragen, um ein benutzerdefiniertes WordPress-Theme zu erstellen.

Wenn Sie einen Entwickler oder eine Agentur beauftragen, können die Kosten für ein benutzerdefiniertes WordPress-Theme Tausende von Dollar erreichen.

Da sich viele Kleinunternehmer die hohen Kosten für ein individuelles WordPress-Theme nicht leisten können, begnügen sich viele von ihnen mit den Standard-Themes, die mit WordPress geliefert werden.

Diejenigen, die sich nicht mit den Standard-Themes zufrieden geben wollten und Anpassungen wünschten, verwendeten entweder einen Drag & Drop WordPress Page Builder oder sie nutzten ein Theme-Framework, um ein eigenes Theme zu erstellen.

Obwohl WordPress-Theme-Frameworks die Erstellung eines WordPress-Theme erleichtern, sind sie eine Lösung für Entwickler, nicht für den durchschnittlichen Website-Besitzer.

Auf der anderen Seite machten es WordPress Page Builder Plugins super einfach, benutzerdefinierte Seitenlayouts mit einer Drag & Drop-Oberfläche zu erstellen, aber sie waren nur auf Layouts beschränkt. Sie konnten damit keine benutzerdefinierten Themes erstellen.

Bis Beaver Builder, eines der besten WordPress-Seitenerstellungs-Plugins, beschloss, dieses Problem mit seinem Add-on namens Beaver Themer zu lösen.

Beaver Builder best WordPress page builder plugin

Beaver Themer ist ein Site-Builder-Add-on, mit dem Sie benutzerdefinierte Theme-Layouts über eine Drag-and-Drop-Oberfläche erstellen können, ohne Code lernen zu müssen.

Schauen wir uns an, wie Sie mit Beaver Themer ganz einfach ein WordPress-Theme erstellen können.

Einrichten von Beaver Themer zum Erstellen eines benutzerdefinierten Themas

Beaver Themer ist ein Add-on-Plugin für Beaver Builder, daher benötigen Sie für diesen Artikel beide Plugins.

Zunächst müssen Sie die Plugins Beaver Builder und Beaver Themer installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress-Plugins.

Mit Beaver Themer können Sie ein benutzerdefiniertes Theme erstellen, aber Sie benötigen trotzdem ein Theme, mit dem Sie beginnen können. Wir empfehlen, ein leichtgewichtiges Theme zu verwenden, das eine Seitenvorlage mit voller Breite enthält, um als Einstiegs-Theme zu fungieren.

Sie können viele solcher Themes im Theme-Verzeichnis von WordPress.org finden. Die meisten modernen WordPress-Themes enthalten ein Full-Width-Template. Unsere Top-Entscheidungen sind:

    • Astra

– Ein kostenloses, leichtgewichtiges Allzweck-WordPress-Theme, das mit integrierter Unterstützung für Beaver Builder kommt.

    • OeanWP

– Ein weiteres beliebtes kostenloses Mehrzweck-WordPress-Theme, das mit vollständiger Unterstützung für den Page Builder geliefert wird.

  • StudioPress-Themes

– Alle ihre Themes sind mit Beaver Builder kompatibel und würden hervorragend mit Beaver Themer funktionieren.

Für dieses Tutorial werden wir Astra verwenden, ein leichtgewichtiges und einfach anpassbares WordPress-Theme.

Einrichten Ihres Themes für Beaver Themer

Wenn Sie ein benutzerdefiniertes WordPress-Theme mit Beaver Themer erstellen, müssen Sie sicherstellen, dass Beaver Themer Zugriff auf den gesamten Umfang der Seite hat (von Rand zu Rand).

Dies ist das Standard-Astra-Layout. Wie Sie sehen können, enthält dieses Layout eine Seitenleiste, die bei der Verwendung von Beaver Themer schwierig zu handhaben sein kann.

Default theme layout with a sidebar

Sie können das ändern, indem Sie das Admin-Panel Ihrer Website besuchen und dann zur Seite Erscheinungsbild “ Anpassen navigieren. Von hier aus müssen Sie zur Registerkarte Layout “ Sidebars wechseln.

Turning off sidebars in your theme

Wählen Sie dort unter der Option Standard-Layout einfach „Keine Seitenleiste“ aus und klicken Sie auf die Schaltfläche Veröffentlichen, um Ihre Änderungen zu speichern.

Ihr Thema wird nun ein Layout ohne Seitenleisten verwenden. Dies ist das beste Layout für die Verwendung mit Beaver Themer.

Theme layout with no sidebars

Dieses ganzseitige Layout ermöglicht es Beaver Themer, jeden Zentimeter des Bildschirms zu nutzen, sodass Sie ein schönes durchgängiges visuelles Erlebnis schaffen können.

Die meisten WordPress-Themes enthalten eine Vorlagendatei für Seiten mit voller Breite. Wenn Sie ein anderes Theme verwenden, dann finden Sie möglicherweise eine Option zum Entfernen von Seitenleisten in Ihren Theme-Einstellungen.

Wenn Sie diese nicht finden können, wenden Sie sich an den Entwickler Ihres Themes, der Ihnen möglicherweise dabei helfen kann.

Sobald Sie Ihr Theme auf ein Full-Width-Layout eingestellt haben, sind Sie bereit, Ihr eigenes WordPress-Theme mit Beaver Themer zu erstellen.

Kurze Grundlagen zu Beaver Themer

Beaver Themer arbeitet auf dem Beaver Builder auf. Als Seitenerstellungs-Plugin ermöglicht Beaver Builder das Ziehen und Ablegen von Elementen auf einer Seite, um benutzerdefinierte Layouts zu erstellen.

Es verfügt über die folgenden Elemente, die Sie in Ihren Layouts verwenden können:

  • Vorlage: Eine Sammlung von Spalten, Zeilen und Modulen, aus denen ein ganzes Seitenlayout besteht.
  • Spalten: Vertikale Layoutmodule, die helfen, den Inhalt horizontal auszurichten.
  • Zeilen: Horizontale Sammlung von mehreren Modulen
  • Modul: Ein Element, das bestimmte Informationen ausgibt, wie z. B. Titel, Textblock, Tabelle, Galerie usw.

Bearbeiten Sie einfach eine Seite im Beaver Builder und klicken Sie dann auf die Schaltfläche „Hinzufügen“ in der oberen rechten Ecke. Sie können dann per Drag & Drop Spalten, Zeilen, Module, auf Ihre Seite ziehen und sofort mit der Bearbeitung beginnen.

Using Beaver Builder

Wenn Sie nicht bei Null anfangen wollen, dann wählen Sie aus einer Liste von vorgefertigten Vorlagen, um damit zu beginnen.

Beaver Builder templates

Mit Beaver Builder können Sie Ihre Layouts auch speichern und später als Vorlagen verwenden.

Um mehr zu erfahren, lesen Sie unseren Artikel über das Erstellen eines benutzerdefinierten Seitenlayouts mit Beaver Builder.

Wir wollen aber nicht nur Seitenlayouts erstellen. Wir wollen ein komplettes benutzerdefiniertes Thema erstellen.

An dieser Stelle kommt Beaver Themer ins Spiel.

Es fügt dem Beaver Builder ein weiteres Element namens „Themer Layout“ hinzu.

Themer Layout

Mit Themer-Layouts können Sie benutzerdefinierte Layouts für die Kopf- und Fußzeile, Inhaltsbereiche, die 404-Seite und andere Vorlagenteile erstellen.

Dies sind die Bausteine aller WordPress-Themes, und indem Sie sie verwenden, können Sie ein benutzerdefiniertes Theme erstellen, das Ihren Anforderungen entspricht.

Verwenden von Beaver Themer-Vorlagen zum Erstellen eines benutzerdefinierten WordPress-Themes

In der folgenden Anleitung führen wir Sie durch die Schritte, die nötig sind, um die beliebtesten benutzerdefinierten Theme-Elemente zu erstellen. Wenn Sie fertig sind, haben Sie Ihr Basis-Theme vollständig in ein benutzerdefiniertes WordPress Child-Theme verwandelt.

Erstellen eines benutzerdefinierten Headers für Ihr Theme

Beginnen wir mit dem Header-Bereich Ihrer Website. Ein benutzerdefinierter Header ist ein wesentlicher Bestandteil eines Themes und die Erstellung eines solchen kann mit herkömmlichen Methoden schwierig sein.

Glücklicherweise hat Beaver Themer Header-Funktionen eingebaut. Sie können entweder die vorgefertigte Vorlage verwenden oder die Menü- und Bildmodule mit einem zweispaltigen Layout verwenden.

Um zu diesem Header-Bereich zu gelangen, müssen wir zunächst ein Header-Layout in Beaver Themer einrichten. Besuchen Sie Beaver Builder “ Neue Seite hinzufügen und geben Sie einen Titel für Ihre Kopfzeile an.

Creating a custom header layout

Danach wählen Sie als Typ „Themer Layout“ und als Layout-Option „Header“. Sobald Sie fertig sind, klicken Sie auf die Schaltfläche „Themer Layout hinzufügen“, um fortzufahren.

Dies bringt Sie zur Seite mit den Layout-Einstellungen. Hier müssen Sie „Entire Site“ als den Ort auswählen, an dem die Kopfzeilenvorlage angezeigt werden soll.

Layout settings

Klicken Sie anschließend auf die Schaltfläche „Beaver Builder starten“, um die Benutzeroberfläche des Builders zu öffnen.

Beaver Builder wird mit einem einfachen einspaltigen und zweizeiligen Kopfzeilen-Layout als Ausgangspunkt gestartet.

Header layout

Sie können die gleichen Beaver Builder Drag-and-Drop-Tools verwenden, um den Hintergrund, die Farben, den Text usw. zu ändern. Sie können auch andere Module hinzufügen, vorgefertigte Vorlagen laden und Zeilen/Spalten hinzufügen, indem Sie auf die Schaltfläche „Hinzufügen“ in der oberen rechten Ecke klicken.

Wenn Sie mit dem Design zufrieden sind, klicken Sie auf die Schaltfläche „Fertig“, um Ihr Layout zu speichern oder zu veröffentlichen.

Sie können nun Ihre Website besuchen, um Ihren benutzerdefinierten Themenheader in Aktion zu sehen. Wie Sie sehen können, haben wir das Header-Layout auf unser benutzerdefiniertes Thema angewendet.

Custom header in your custom theme

Abgesehen von der Kopfzeile wird noch kein Inhalt angezeigt, und Sie werden wahrscheinlich den Fußzeilenbereich Ihres Basis-Themas sehen.

Lassen Sie uns dies ändern.

Erstellen einer benutzerdefinierten Fußzeile für Ihr Theme

Sie können eine benutzerdefinierte Fußzeile für Ihr Theme mit dem Beaver Themer erstellen, genauso wie Sie eine benutzerdefinierte Kopfzeile erstellt haben.

Gehen Sie zu Beaver Builder “ Add New page und geben Sie einen Titel für Ihr Footer-Layout ein. Wählen Sie dann „Themer-Layout“ als Typ und „Fußzeile“ als Layout-Option.

Footer layout

Klicken Sie auf die Schaltfläche „Themer-Layout hinzufügen“, um fortzufahren.

Dies bringt Sie zur Seite mit den Layout-Einstellungen. Hier müssen Sie „Entire Site“ als den Ort auswählen, an dem die Vorlage angezeigt werden soll.

Footer layout settings

Danach klicken Sie auf die Schaltfläche „Beaver Builder starten“, um die Benutzeroberfläche des Builders zu öffnen.

Beaver Builder wird mit einem dreispaltigen Fußzeilen-Layout gestartet. Sie können dieses Layout als Startpunkt verwenden und mit der Bearbeitung beginnen.

Editing your footer layout

Sie können Module, Textblöcke oder alles andere hinzufügen, was Sie möchten. Sie können jederzeit Farben und Schriftarten ändern, ein Hintergrundbild hinzufügen und mehr.

Wenn Sie mit dem Design zufrieden sind, klicken Sie auf die Schaltfläche „Fertig“, um Ihr Layout zu speichern oder zu veröffentlichen.

Inhaltsbereich für Beiträge und Seiten erstellen

Nun, da wir Kopf- und Fußzeilen für jede Seite und jeden Beitrag auf der Website erstellt haben, ist es an der Zeit, den Beitrags- oder Seitenkörper (den Inhaltsbereich) zu erstellen.

Wir beginnen auf die gleiche Weise, wie wir die Kopf- und Fußzeile erstellt haben, indem wir das Layout „Singular“ auf der Seite „Neu hinzufügen“ hinzufügen.

Creating posts and page layouts

Als nächstes wählen Sie, wo dieses Layout angezeigt werden soll. Sie können Singular wählen, um es für alle einzelnen Beiträge und Seiten zu verwenden, oder Sie können Beiträge oder nur die Seiten wählen.

Singular layout settings

Danach klicken Sie auf die Schaltfläche „Beaver Builder starten“, um die Builder-Oberfläche zu öffnen.

Editing singular layout

Der Beaver Builder lädt ein Beispiel für ein einzigartiges Layout mit dem Titel des Beitrags/der Seite oben, gefolgt vom Inhalt, der Autoren-Bio-Box und dem Kommentarbereich.

Sie können auf jedes dieser Elemente zeigen und klicken, um es zu bearbeiten oder neue Module, Spalten und Zeilen nach Bedarf hinzuzufügen.

Wenn Sie mit dem Layout zufrieden sind, klicken Sie auf die Schaltfläche „Fertig“, um Ihre Änderungen zu speichern und zu veröffentlichen.

Sie können nun Ihre Website besuchen, um sie in Aktion zu sehen.

Theme layout with content

Archiv-Layouts für Ihr benutzerdefiniertes Thema erstellen

Jetzt, wo Ihr benutzerdefiniertes Theme in Form gekommen ist, können Sie damit fortfahren, Layouts für andere Teile Ihrer Website zu erstellen. Archivseiten sind die Bereiche, in denen WordPress Ihre Kategorien, Tags, Autoren und Monatsarchive anzeigt.

Lassen Sie uns ein Layout für Archivseiten in Ihrem benutzerdefinierten Thema erstellen.

Sie beginnen, indem Sie Beaver Builder “ Neue Seite hinzufügen aufrufen und einen Titel für Ihr Archiv-Layout angeben.

Creating an archive layout for your custom theme

Danach wählen Sie als Typ „Themer Layout“ und als Layout-Option „Archiv“. Klicken Sie auf die Schaltfläche „Themer-Layout hinzufügen“, um fortzufahren.

Dies bringt Sie zur Seite mit den Layout-Einstellungen. Hier müssen Sie „All Archive“ als den Ort auswählen, an dem die Vorlage angezeigt werden soll. Sie können auch separate Layouts für jeden einzelnen Archivtyp wie Datum, Suchergebnisse, Kategorie, Tags usw. erstellen.

Archive layout settings

Danach klicken Sie auf die Schaltfläche „Beaver Builder starten“, um die Builder-Oberfläche zu öffnen.

Beaver Builder wird mit einem einfachen einspaltigen Archiv-Layout gestartet. Der Titel des Archivs wird oben angezeigt, gefolgt von den Beiträgen.

Editing Archives layout for your theme

Sie können auf jedes Element zeigen und klicken, um seine Eigenschaften zu bearbeiten. Sie können auch neue Module, Zeilen und Spalten nach Bedarf hinzufügen.

Klicken Sie anschließend auf die Schaltfläche „Fertig“, um Ihre Änderungen zu speichern und zu veröffentlichen.

Andere Layouts für Ihr benutzerdefiniertes WordPress-Theme erstellen

Mit Beaver Themer können Sie auch Layouts für andere Seiten in der Vorlagenhierarchie erstellen, z. B. 404-Seite, Vorlagenteile, Suchergebnisseite und mehr.

Mit der eingebauten Drag-and-Drop-Funktionalität des Beaver Builders können Sie ganz einfach Ihr eigenes benutzerdefiniertes WordPress-Theme von Grund auf erstellen, ohne jemals Code zu schreiben. Dies ist wirklich die anfängerfreundlichste WordPress-Theme-Entwicklungsmethode, die es gibt.

Wir hoffen, dass dieser Artikel Ihnen geholfen hat, zu lernen, wie Sie ein benutzerdefiniertes WordPress-Theme erstellen können, ohne Code zu lernen.

Die beliebtesten Beiträge

Wie man den ungültigen JSON-Fehler in WordPress behebt (Anleitung für Anfänger)

Versuchen Sie, den ungültigen JSON-Fehler in WordPress zu beheben? Dieser Fehler tritt auf, wenn Sie WordPress-Beiträge oder -Seiten auf Ihrer Website bearbeiten. Sie erhalten die Meldung "Die Antwort ist keine gültige JSON-Antwort" und die Aktualisierung der Seite schlägt fehl. In diesem Artikel zeigen wir Ihnen, wie Sie den ungültigen JSON-Fehler ...

So beheben Sie den Fehler „Verbindung ist nicht privat“ (Anleitung für Website-Besitzer)

Sehen Sie die Fehlermeldung "Ihre Verbindung ist nicht privat" auf Ihrer WordPress-Website? Dies ist die Fehlermeldung, die Sie in Google Chrome sehen. Der gleiche Fehler wird auf allen modernen Browsern mit leicht unterschiedlichen Meldungen angezeigt und kann für Anfänger bei der Fehlerbehebung etwas verwirrend sein. In dieser Anleitung für Website-Besitzer ...

Wie man eine Seite in voller Breite in WordPress erstellt (Anleitung für Anfänger)

Möchten Sie eine Seite in voller Breite in WordPress erstellen, so dass Sie Ihren Inhalt über den Bildschirm strecken können? Die meisten WordPress-Themes verfügen bereits über eine integrierte Vorlage für eine Seite in voller Breite, die Sie verwenden können. Wenn Ihr Theme jedoch keine hat, dann ist es einfach, sie ...
DSGVO Cookie-Einwilligung mit Real Cookie Banner