Anfängerleitfaden zur vollständigen Website-Bearbeitung mit WordPress

Begeben Sie sich auf eine Reise grenzenloser Kreativität mit der vollständigen Website-Bearbeitung für Ihre WordPress -Seite. Vorbei sind die Zeiten starrer Vorlagen und begrenzter Anpassungsmöglichkeiten. Stellen Sie sich vor, Sie könnten jeden Winkel Ihrer Website selbst gestalten – von eleganten Headern für einen einladenden Seitentitel bis hin zu aufwendig gestalteten Footern oder einer stilvollen Sidebar, die einen bleibenden Eindruck hinterlässt.

Mit der vollständigen Website-Bearbeitung in WordPress verschwimmen die traditionellen Grenzen des Webdesigns und ebnen den Weg für eine neue Ära der Innovation in der Website-Gestaltung. Dieser revolutionäre Ansatz führt eine Reihe von Designblöcken ein, mit denen Sie das Block-Theme-Layout Ihrer Website mühelos an Ihre individuelle Vision anpassen können. Vordefinierte Strukturen schränken Sie nicht länger ein; stattdessen können Sie experimentieren, Neues entdecken und sich vollkommen ausdrücken.

Eine detaillierte Anleitung zur vollständigen Website-Bearbeitung in WordPress 

Die vollständige Website-Bearbeitung in WordPress ermöglicht es Ihnen, jeden Aspekt Ihrer Website einfach anzupassen. Anders als beim herkömmlichen Ansatz, bei dem Sie nur Beiträge und Seiten bearbeiten konnten, können Sie jetzt benutzerdefinierte Kopf- und Fußzeilen und komplexe Inhaltsbereiche mithilfe von Blöcken gestalten.

Beliebte Plugins für die komplette Website-Gestaltung, wie Divi und Elementor , haben diesen Paradigmenwechsel aufgegriffen und bieten Ihnen einen Block-Editor mit zahlreichen fortschrittlichen Funktionen und intuitiver Bedienung. Ob Sie ein erfahrener Entwickler oder ein Neuling im Bereich Block-Themes und -Vorlagen sind – die vollständige Website-Bearbeitung ermöglicht es Ihnen, Ihre Ideen mit beispielloser Präzision und Finesse umzusetzen.

Lesen Sie auch : Die besten Elementor SaaS WordPress-Themes

Die wichtigsten Vorteile der vollständigen Website-Bearbeitung

Kurz gesagt, die Bearbeitung der gesamten Website ermöglicht es Ihnen, Ihrer Kreativität freien Lauf zu lassen, Ihren Arbeitsablauf zu optimieren und Ihre Website zukunftssicher zu machen – und das alles ohne den Aufwand komplizierter Tools oder technischer Fachsprache.

Die wichtigsten Vorteile sind:

• Volle Designkontrolle : Dank der vollständigen Website-Bearbeitung haben Sie die volle Kontrolle. Gestalten Sie jeden Winkel Ihrer Website – vom Website-Icon über die Bereiche für Beitragsbilder und das Website- Logo bis hin zum Beitragsblock – alles genau so, wie Sie es sich vorstellen, von Kopf- bis Fußzeilen, ganz einfach.

• Einheitliche Bearbeitungsoberfläche : Schluss mit dem Hin- und Herwechseln zwischen verschiedenen Seitenvorlagen, Vorlagendateien und Editoren. Die WordPress-Website-Bearbeitung vereint alles an einem Ort, vereinfacht die Arbeit im WordPress-Dashboard und macht die Anpassung des Erscheinungsbilds Ihrer Website effizienter.

• Erweiterte Anpassungsmöglichkeiten : Sind Sie die standardisierten Designs der meisten Theme-Vorlagen ? Die vollständige WordPress-Websitebearbeitung bietet eine Fülle an Anpassungsmöglichkeiten für die WordPress-Plattform. So können Sie jeden Aspekt Ihrer Webseite personalisieren und Ihren einzigartigen Stil zum Ausdruck bringen.

• Optimierter Workflow : Schluss mit dem Jonglieren mit mehreren Tools und Plugins. Die Bearbeitung der gesamten Website optimiert den Designprozess und spart Ihnen Zeit und Mühe, sodass Sie sich auf das Wesentliche konzentrieren können: die Erstellung großartiger Inhalte.

• Weniger Plugin-Abhängigkeit : Schluss mit der Plugin-Flut! Nutzen Sie die vollständige Website-Bearbeitung, denn viele Funktionen, für die früher Plugins nötig waren, sind jetzt direkt in den WordPress-Blogbeitrag integriert, wie im neuen Website-Editor zu sehen ist. Dadurch wird der Bedarf an zusätzlicher Software, die Ihre Seitenlayouts unübersichtlich macht, minimiert.

• Machen Sie Ihre Website zukunftssicher : Mit der umfassenden WordPress-Websitebearbeitung bleiben Sie immer auf dem neuesten Stand. Durch die Nutzung dieser innovativen Bearbeitungsmöglichkeit gestalten Sie Ihre Website zukunftssicher und stellen sicher, dass sie sich an neue Funktionen anpassen und relevant bleiben, während sich die Technologie ständig weiterentwickelt.

Ist die vollständige Website-Bearbeitung nur bei Block-Themes verfügbar?

Die vollständige Bearbeitung von WordPress-Websites ist nicht auf Block-Themes beschränkt, aber die Website-Blöcke sind so konzipiert, dass sie die Möglichkeiten dieser Funktion voll ausschöpfen.

So funktionieren WordPress-Websites mit allen im Theme integrierten Blöcken:

• Block-Themes beinhalten einen Spaltenblock mit Kopfzeilenvorlage, Fußzeilen, Seitenleisten und anderen Vorlagenelementen sowie einen Beitragsinhaltsblock.

• Sie verwenden eine theme.json-Datei als vollständiges Website-Bearbeitungsthema, um globale Stile und Einstellungen zu steuern und ersetzen damit den herkömmlichen Theme-Customizer.

• Die Blockeinstellungen sind zwar nicht zwingend erforderlich, aber für die Bearbeitung der gesamten Website optimiert, sodass Benutzer Blöcke in den Theme-Vorlagen hinzufügen können.

• Aktuell stehen über 160 Blockeinstellungen zur Verfügung, was jedoch eine relativ geringe Anzahl im Vergleich zu den Tausenden von traditionellen Themes darstellt, die in der WordPress-Community bereits beliebt sind.

Hinsichtlich der Blöcke selbst gibt es zwei Arten:

• Statische Blöcke enthalten Inhalte, die zum Zeitpunkt der Veröffentlichung bekannt sind, wie Absätze, Überschriften, Bilder und Schaltflächen.

• Dynamische (Theme-)Blöcke sind für die Erstellung von Vorlagen konzipiert und können Inhalte dynamisch aus dem Backend der Website abrufen, wie z. B. Beitragsfeeds, Titel, Beitragsbilder und mehr.

Weiterlesen : Erfahren Sie, wie Sie in WordPress ganz einfach einen benutzerdefinierten Beitragstyp erstellen.

Was Sie vor der Nutzung der vollständigen Website-Bearbeitung wissen sollten

Bevor Sie sich mit der Benutzeroberfläche des Website-Editors vertraut machen und Ihre WordPress-Website anpassen, ist es wichtig, die Anforderungen und potenziellen Einschränkungen der vollständigen Website-Bearbeitung zu verstehen. Obwohl diese Funktion sehr leistungsstark ist, werden nicht alle WordPress-Nutzer sofort auf ihren vollen Funktionsumfang zugreifen können.

Nur kompatibel mit Block-Themes

Die vollständige Website-Bearbeitung ist nur für Block-Themes verfügbar . Bei klassischen Themes ist der Template-Editor eingeschränkt oder nicht zugänglich, und die neue Benutzeroberfläche des Website-Editors wird in Ihrem Dashboard nicht angezeigt. Installieren Sie ein kompatibles Block-Theme, indem Sie im Theme-Verzeichnis nach dem Tag „Vollständige Website-Bearbeitung“ suchen.

Block-Themes wurden speziell für die Unterstützung von Header- und Footer-Vorlagen, Blockstilen und benutzerdefinierten Seiten mithilfe des blockbasierten Layoutsystems entwickelt. Diese Themes verwenden eine theme.json-Datei , um globale Stile, Inhaltsbreite und Vorlagenstruktur zu definieren und ersetzen damit ältere Anpassungsoptionen.

Überprüfen Sie Ihre WordPress-Version

Die Funktion „Vollständige Website-Bearbeitung“ wurde in WordPress 5.8 eingeführt und in späteren Versionen weiterentwickelt. Für eine optimale Nutzung von Template-Elementen, Abfrageschleifenblöcken und Stilvarianten ein Update auf die neueste WordPress-Version dringend empfohlen. Ältere Versionen unterstützen möglicherweise nicht die Block-Auszeichnung oder bestimmte Blöcke, die in neueren Themes verwendet werden.

Die Lernkurve verstehen

Die Umstellung auf die vollständige Website-Bearbeitung mag ungewohnt erscheinen, wenn Sie von klassischen Editoren oder Builder-Plugins gewohnt sind. Das Drei-Punkte-Menü, die Block-Werkzeugleiste und die neuen Layout-Tools bieten zwar umfangreiche Funktionen, erfordern aber etwas Einarbeitungszeit. Nehmen Sie sich Zeit, die gesamte Website-Struktur im neuen Editor zu erkunden.

Verwenden Sie eine Staging-Umgebung

Bevor Sie ein Block-Theme aktivieren oder von einem Builder-Plugin , empfiehlt es sich, die Änderungen in einer Testumgebung zu prüfen. So stellen Sie sicher, dass die Umstellung Ihre aktuelle Seitenstruktur, die HTML-Dateiorganisation und Ihr benutzerdefiniertes CSS nicht beeinträchtigt.

Wenn Sie diese Grundlagen verstehen, können Sie Fallstricke vermeiden und das Beste aus Ihrer WordPress-Vollseitenbearbeitung herausholen.

Schritte zur vollständigen Website-Bearbeitung in WordPress

Sind Sie bereit, Ihre WordPress-Website auf die nächste Stufe zu heben? Befolgen Sie diese einfachen Schritte, um das volle Potenzial der vollständigen Website-Bearbeitung auszuschöpfen und jeden Aspekt Ihrer Website einfach und präzise anzupassen.

Schritt 1: Auswahl eines kompatiblen Designs

Es gibt über 150 Themes für die komplette Website-Bearbeitung auf WordPress. Sie können eines kostenlos von WordPress herunterladen oder ein Premium-Theme erwerben. Wir wählen zunächst ein kostenloses Theme von WordPress aus. Melden Sie sich dazu in Ihrem WordPress-Dashboard an und gehen Sie zu Design → Themes . Klicken Sie anschließend auf „Neu hinzufügen“ .

Klicken Sie anschließend auf „Funktionsfilter“ , um Filter festzulegen. Sie können nach Thema, Funktionen oder Layout sortieren. Um Filter anzuwenden, aktivieren Sie das Kontrollkästchen „Website-Editor“ und klicken Sie auf „Filter anwenden“ .

Sie sehen nun Ihre Optionen. Wählen Sie ein Design, das Ihnen gefällt, oder entscheiden Sie sich für das Design „Twenty Twenty-Two“ für diese Anleitung. Sobald Sie Ihr Design ausgewählt haben, aktivieren Sie es – und schon kann es losgehen!

Lesen Sie auch : Die besten WordPress-Block-Themes entdecken

Schritt 2: Anpassen einer Vorlage

Beginnen wir mit der Anpassung Ihres neuen Designs. Wir konzentrieren uns dabei aus Gründen der Einfachheit auf das Design „Twenty Twenty Two“ :

• Aktivieren Sie Ihr Design : Nachdem Sie es ausgewählt haben, aktivieren Sie es, um mit der Anpassung zu beginnen.

• Zugriff auf den Editor : Navigieren Sie zu Darstellung → Editor , um auf die Bearbeitungswerkzeuge zuzugreifen.

• Vorlagen erkunden : Beginnen Sie nach dem Öffnen des Editors mit der Startseitenvorlage. Um weitere Vorlagen zu entdecken, klicken Sie auf das WordPress-Logo und anschließend auf „Vorlagen“.

• Neue Vorlagen erstellen : Nutzen Sie die „Neu hinzufügen“ , um einzigartige Vorlagen zu erstellen, die auf die Bedürfnisse Ihrer Website zugeschnitten sind.

• Passen Sie Vorlagenelemente an : Ändern Sie Vorlagenelemente wie Kopf- und Fußzeilen, um das Erscheinungsbild Ihrer Website zu optimieren.

• Blöcke hinzufügen : Erweitern Sie die Funktionalität Ihrer Website durch die Integration von Blöcken. Klicken Sie auf die blaue Schaltfläche „+“ Blöcke hinzuzufügen und .

• Vorhandene Blöcke bearbeiten : Sie können die notwendigen Anpassungen an vorhandenen Blöcken vornehmen, indem Sie darauf klicken und deren Inhalt oder Einstellungen ändern.

Weiterlesen : Tipps zur Behebung von WordPress-Aktualisierungs- und Veröffentlichungsfehlern: Die ultimative Liste

Schritt 3: Globale Stile beschaffen

Ein herausragendes Merkmal von Themes mit vollständiger Website-Bearbeitung ist die Möglichkeit, globale Stile festzulegen. So können Sie Schriftarten, Farben und Abstände auf Ihrer gesamten Website mühelos anpassen. Ob Sie ein einheitliches Erscheinungsbild oder spezifische Stile für einzelne Bereiche wünschen – diese Funktion spart Ihnen im Vergleich zu älteren Themes viel Zeit. Hier erfahren Sie, wie Sie im Theme „Twenty Twenty Two“ auf globale Stile zugreifen und diese anpassen:

• Zugriff auf globale Stile : Klicken Sie auf das Stile-Symbol oben rechts im Website-Editor, um auf die globalen Stile Ihrer Website zuzugreifen.

• Verfügbare Designs durchsuchen : Nach der Aktivierung können Sie die verfügbaren Designs des Twenty Twenty Two-Themes erkunden, indem Sie auf den „Designs durchsuchen“ . Hier können Sie ein Farbschema , das zu Ihrer Website passt.

• Typografieeinstellungen: Im Bereich „Typografie“ können Sie die Schriftoptionen für Ihren Text und Ihre Links anpassen. Passen Sie Schriftart, -größe, Zeilenhöhe und -stärke an, um das gewünschte Erscheinungsbild zu erzielen.

• Farbanpassung: Im Bereich „Farben“ können Sie die Farben Ihrer globalen Farbpalette bearbeiten. Wählen Sie aus verschiedenen Optionen Farben für Hintergründe, Texte und Links. Das Theme „Twenty Twenty Two“ bietet 17 Volltonfarben und 20 Farbverläufe. Zusätzlich können Sie benutzerdefinierte Farben und Farbverläufe für Ihr Branding hinzufügen.

• Abstände anpassen : Optimieren Sie abschließend die Abstände Ihres Layouts. Legen Sie die Abstände oben, links, rechts und unten gemeinsam oder einzeln fest, um sicherzustellen, dass die Inhalte Ihrer Website gut übersichtlich und optisch ansprechend sind.

Mehr dazu : WordPress-Änderungen werden nicht angezeigt? Ganz einfach beheben!

Schritt 4: Designblöcke verwenden

Im Block-Editor stehen Ihnen über 90 Blöcke zur Verfügung, mit denen Sie Seitenvorlagen im Website-Editor erstellen können. Einige davon sind dynamische Designblöcke, die dynamische Inhalte auf der Website anzeigen. Wenn Sie beispielsweise die Vorlage für einen einzelnen Beitrag verwenden, sehen Sie Blöcke wie Beitragsüberschrift, Beitragsbild und Beitragsinhalt. Diese sind besonders praktisch, um dynamische Vorlagen für Ihre Blogbeiträge zu erstellen.

• Designblöcke für Header, Footer und mehr verwenden : Es gibt 27 Designblöcke. Wir konzentrieren uns darauf, wie Sie einige davon verwenden, um eine neue Header-Vorlage für Ihre Website zu erstellen. Gehen Sie zunächst zum Menü „Vorlagen“ und wählen Sie „Leere Vorlage“, um zu beginnen.

• Navigation in der Ebenenansicht : Um zu sehen, welche Blöcke auf Ihrer Seite verwendet werden, klicken Sie auf das Ebenen-Symbol oben links in Ihrem Website-Editor-Fenster.

• Blöcke für die Kopfzeile hinzufügen : Klicken Sie auf das blaue Plus-Symbol und scrollen Sie zu den Optionen für Designblöcke. Wählen Sie den Vorlagenblock aus und ziehen Sie ihn auf Ihre leere Seite. Geben Sie ihm einen Namen und klicken Sie auf „Erstellen“. Fügen Sie anschließend einen Abstandsblock für 20 Pixel Abstand am oberen Rand und einen Spaltenblock mit der Spaltenaufteilung 33/33/33 hinzu.

• Anpassung des Headers : Fügen Sie das Website-Logo, die Navigation und die Social-Media-Links in die Spalten ein. Sie können Bilder hochladen, Menüpunkte hinzufügen oder Social-Media- Symbole einfügen.

• Layout anpassen : In der Ebenenansicht können Sie unter Spalteneinstellungen → Breite . Dadurch wird ein optimaler Abstand für Ihre Kopfzeile gewährleistet.

• Vorlage speichern : Sobald Sie mit Ihrem Header-Design zufrieden sind, klicken Sie auf Veröffentlichen, um Ihre Vorlage zu speichern.

Weitersuchen : Die besten Elementor SaaS WordPress-Themes

Schritt 5: Blockmuster für die ersten Designs

Beim Erstellen von Templates sind Blockmuster eine schnelle Möglichkeit, Blöcke für ein einfacheres Design hinzuzufügen. WordPress bietet Standard-Blockmuster, Sie können aber auch eigene erstellen. So greifen Sie darauf zu und verwenden sie:

• Zugriff auf Blockmuster : Klicken Sie im Website-Editor auf das blaue Plus-Symbol und wechseln Sie dann zum Tab „Muster“. Dort finden Sie verschiedene Kategorien wie Fußzeilen, Kopfzeilen, Schaltflächen, Galerien und mehr.

• Muster bearbeiten : Jedes Muster kann an Ihr Design angepasst werden. Sie können Farben, Schriftarten und Abstände innerhalb einzelner Blöcke anpassen.

• Muster speichern : Um ein von Ihnen angepasstes Muster zu speichern, klicken Sie in der Listenansicht auf das Menü mit den drei Punkten und wählen Sie dann „Zu wiederverwendbaren Blöcken hinzufügen“. Sie können es auch als Vorlagenteil für die spätere Verwendung speichern.

Die Verwendung von Blockmustern optimiert Ihren Designprozess und hilft Ihnen dabei, mühelos professionell aussehende Vorlagen zu erstellen.

Weiterführende Lektüre : Die besten Tools für das Reputationsmanagement von Websites zur Überwachung von Erwähnungen in sozialen Medien

Profi-Tipps und häufige Fehler bei der Verwendung des vollständigen Website-Editors

Nachdem Sie nun ein solides Verständnis für die ersten Schritte entwickelt haben, ist es an der Zeit, sich auf bewährte Vorgehensweisen zu konzentrieren und auf einige häufig auftretende Herausforderungen zu achten, die beim Erstellen von Websites mit dem WordPress-Website-Editor auftreten können.

Vor größeren Änderungen immer ein Backup erstellen

Erstellen Sie eine Sicherungskopie, bevor Sie Ihre Designdateien aktualisieren, eine neue Vorlage hinzufügen oder die Seitenstruktur bearbeiten. So schützen Sie Ihre Inhalte, falls es aufgrund von Blockkonflikten oder dem Entfernen von Blöcken, die die aktuelle Seite betreffen, zu Fehlern kommt.

Verwenden Sie den Code-Editor für erweiterte Steuerungsmöglichkeiten

Die Blockoberfläche ist zwar leistungsstark, fortgeschrittene Benutzer können sie jedoch durch die Verwendung des Code-Editors im Site-Editor noch weiter ausbauen. Dies ist besonders hilfreich, um das Layout einzelner Blöcke anzupassen oder HTML-Kommentare einzufügen. Darüber hinaus lassen sich Ausrichtung, Abstände und Inhaltsbreite präziser einstellen als mit dem visuellen Editor möglich.

Meistere den Abfrageschleifenblock

Der Abfrageschleifen- Block ist ein zentraler Bestandteil der dynamischen Inhaltserstellung in der vollständigen Website-Bearbeitung. Er ermöglicht es Ihnen, Beitragsübersichten, Produktlisten oder kategoriespezifische Feeds an beliebiger Stelle Ihrer Website anzuzeigen, nicht nur in den Seitenvorlagen. Lernen Sie, die Schleifeneinstellungen anzupassen, Filter hinzuzufügen und den Seiteninhalt mithilfe wiederverwendbarer Blockstrukturen zu individualisieren.

Vermeiden Sie die Vermischung von klassischen und Block-Designs

Die Verwendung klassischer Themes in Verbindung mit FSE-Tools kann zu Inkonsistenzen führen. Ihre Footer- oder Header-Vorlagen werden möglicherweise nicht korrekt angezeigt, und Sie könnten den Zugriff auf die Benutzeroberfläche des Website-Editors verlieren. Um Probleme zu vermeiden, empfehlen Theme-Entwickler die Verwendung von vollständig blockkompatiblen Themes.

Stilvarianten entdecken und anpassen

Viele moderne Block-Themes bieten integrierte Stilvarianten, mit denen sich Schriftarten, Farben und Abstände der Website . Diese Varianten können Sie einfach wechseln, ohne den Seiteninhalt zu verändern. So erhalten Sie maximale Gestaltungsflexibilität, ohne auf externe Page-Builder angewiesen zu sein.

Verwenden Sie wiederverwendbare Blöcke und Vorlagenteile

Durch die Erstellung wiederverwendbarer Blöcke können Sie ein einheitliches Design für Elemente wie Kommentarformulare, CTA-Bereiche und benutzerdefinierte Seiten gewährleisten. Speichern Sie Blöcke oder Muster direkt über das Drei-Punkte-Menü im Editor und organisieren Sie Ihre Layouts effizienter über mehrere Vorlagen hinweg.

Achten Sie auf mögliche Plugin-Konflikte

Ältere Builder-Plugins oder Erweiterungen für den klassischen Editor können mit den Funktionen von FSE in Konflikt geraten. Verwenden Sie nach Möglichkeit blockkompatible Builder-Plugin-Alternativen und deaktivieren Sie Tools, die Funktionen duplizieren, die bereits im neuen Template-Editor integriert sind.

Wenn Sie diese Tipps befolgen und sich der häufigsten Fehler bewusst sind, erhalten Sie eine bessere Kontrolle über Ihre WordPress-Vorlagen und können mit der vollständigen Website-Bearbeitung schnellere, schlankere und zukunftssichere Websites erstellen.

Abschluss

Mit der vollständigen Website-Bearbeitung von WordPress können Sie Ihrer Kreativität freien Lauf lassen und die volle Kontrolle über das Design Ihrer Website übernehmen. Entdecken Sie kompatible Block-Themes, meistern Sie den Block-Editor, nutzen Sie die Ressourcen der Community, implementieren Sie Best Practices und lernen Sie kontinuierlich dazu.

Wenn Sie diese praktischen Schritte befolgen, können Sie sich eine Welt voller Möglichkeiten erschließen, Ihren Arbeitsablauf optimieren und Ihre Online-Präsenz mit dieser innovativen WordPress-Funktion zukunftssicher gestalten.

Häufig gestellte Fragen zur WordPress-Website-Bearbeitung