Der ursprüngliche Gemini-Chat zu diesem Thema war ungewöhnlich umfangreich. Es ging nicht nur um ein hübscheres Layout, sondern um ein typisches Problem älterer WordPress-Seiten: viel historisch gewachsener HTML- und CSS-Code, Teile aus dem klassischen Editor, Theme-Ausgaben, Inline-Styles und Inhalte, die sich nur schwer weiterpflegen lassen. Ziel war deshalb: Inhalt behalten, technischen Ballast entfernen und die Seite in ein klares, modernes Drei-Spalten-Layout überführen.
Der wichtigste Schritt: Inhalt und Seitencode trennen
Wenn du im Browser den Quelltext einer WordPress-Seite kopierst, erhältst du nicht nur deinen eigentlichen Seiteninhalt. Darin stecken oft zusätzlich:
- Theme-Header und Footer
- Navigation
- globales CSS
- Schema-Markup
- Plugin-Skripte
- Tracking-Code
- WordPress-Block-Styles
- Cache- und Optimierungsreste
Genau das war im ursprünglichen Material sichtbar: Der vermeintliche Seiteninhalt bestand zu großen Teilen aus generiertem Frontend-Code. Dieser Code sollte nicht wieder in einen Gutenberg- oder GenerateBlocks-Container kopiert werden.
1. Zuerst den echten redaktionellen Inhalt sichern
Bevor du die Seite neu strukturierst, sichere alles, was inhaltlich erhalten bleiben soll:
- Überschriften
- Fließtexte
- Listen
- Bilder und Bildunterschriften
- Buttons und Links
- Kontaktinformationen
- SEO-relevante Textpassagen
Am besten entsteht daraus zunächst eine einfache Gliederung ohne Design. So wird sichtbar, welche Inhalte tatsächlich wichtig sind und welche nur aus alten Layout-Konstruktionen stammen.
2. Nicht den kompletten Frontend-HTML-Code zurückimportieren
Ein häufiger Fehler ist, den im Browser angezeigten Quelltext als Ausgangspunkt für eine neue WordPress-Seite zu verwenden. Das führt zu doppelten Styles, unnötigen Klassen und schwer wartbarem Code.
Stattdessen sollte der alte Inhalt semantisch neu aufgebaut werden: Überschrift als Überschrift, Text als Absatz, Bild als Image-Block, Spalten als Grid.
3. Bei GeneratePress und GenerateBlocks nativ neu bauen
Wenn du bereits GeneratePress und GenerateBlocks nutzt, ist ein sauberes Grid meist besser als ein eigener HTML-Block. Die Grundstruktur kann zum Beispiel so aussehen:
- äußerer Container für Breite und Abstand
- Grid mit drei Spalten
- pro Spalte ein eigener Container
- darin Überschrift, Text, Bild und optional Button
Der Vorteil: Alle Abstände, Farben und responsive Einstellungen bleiben im normalen Block-Editor editierbar.
4. Welche Inhalte gehören in drei Spalten?
Ein Drei-Spalten-Layout eignet sich besonders für gleichwertige Leistungs- oder Themenblöcke. Typische Aufteilung:
- Spalte 1: Hauptleistung oder Kernkompetenz
- Spalte 2: zweiter Leistungsbereich beziehungsweise Dokumenttyp
- Spalte 3: Ablauf, Kontakt oder besonderer Vorteil
Wichtig ist, dass die Spalten inhaltlich ähnlich gewichtet sind. Drei Spalten mit stark unterschiedlicher Textmenge wirken schnell unruhig.
5. Nicht alles in das Grid zwingen
Hero, Einleitung, Vertrauenselemente, längere Erklärtexte und Kontaktbereich dürfen außerhalb des Drei-Spalten-Rasters bleiben. Ein gutes Layout lebt von Hierarchie, nicht davon, jeden Inhalt in Karten zu pressen.
6. Altlasten erkennen
Typische Kandidaten zum Entfernen oder Neuaufbauen sind:
- verschachtelte Tabellen nur fürs Layout
- leere Absätze für Abstand
- mehrfach gesetzte
- Inline-Styles an jedem Absatz
- alte Shortcodes nicht mehr verwendeter Plugins
- harte Pixelbreiten
- leere Div-Container
- duplizierte CSS-Regeln
Solche Konstruktionen erschweren insbesondere die mobile Darstellung.
7. Abstände nicht mit Leerzeilen bauen
In GenerateBlocks sollten Abstände über Padding, Margin, Gap beziehungsweise Block Spacing gesteuert werden. Mehrere leere Absatzblöcke zwischen Elementen sind ein Relikt aus älteren Editoren und sollten beim Neuaufbau verschwinden.
8. Responsive Verhalten von Anfang an mitdenken
Drei Spalten auf Desktop sollten auf kleineren Geräten nicht einfach immer schmaler werden. Ein sinnvoller Aufbau ist oft:
- Desktop: 3 Spalten
- Tablet: 2 Spalten oder 3, wenn genug Platz vorhanden ist
- Mobil: 1 Spalte
GenerateBlocks erlaubt dafür Geräteeinstellungen beziehungsweise Grid-Breiten je Breakpoint.
9. Einheitliche Karten statt Einzelanfertigungen
Wenn die drei Spalten optisch als Karten erscheinen sollen, definiere gemeinsame Eigenschaften:
- gleiche Innenabstände
- gleiche Hintergrundfarbe
- einheitlicher Border-Radius
- gleiche Überschriftenebene
- gleiches Button-Design
Damit wird die Seite später wesentlich leichter änderbar.
10. Global Styles nutzen
Statt jede Karte einzeln zu formatieren, kannst du in GenerateBlocks globale Stile oder wiederverwendbare Klassen verwenden. Das ist besonders hilfreich, wenn dieselben Karten auf mehreren Seiten vorkommen.
Änderst du später beispielsweise den Innenabstand oder die Überschriftfarbe, muss die Anpassung nicht an jeder einzelnen Karte durchgeführt werden.
11. SEO beim Umbau nicht verlieren
Ein Layout-Umbau darf die Suchmaschinenstruktur nicht zerstören. Prüfe deshalb vor und nach dem Neuaufbau:
- Bleibt die URL gleich?
- Gibt es weiterhin genau eine klare H1?
- Bleiben wichtige H2/H3-Zwischenüberschriften erhalten?
- Bleiben relevante Textpassagen erhalten?
- Funktionieren interne und externe Links?
- Bleiben Bild-Alt-Texte vorhanden?
- bleiben SEO-Titel und Meta-Beschreibung erhalten?
Wenn nur das Layout geändert wird, sollte der Slug normalerweise unverändert bleiben.
12. Nicht blind Text löschen, nur weil er alt aussieht
„Ballast entfernen“ darf nicht bedeuten, längere fachliche Inhalte zu löschen. Gerade ältere Seiten enthalten oft Textpassagen, die für Longtail-Suchanfragen wertvoll sind.
Deshalb zuerst unterscheiden zwischen:
- technischem Ballast – kann meist entfernt werden
- inhaltlicher Wiederholung – kann gestrafft werden
- fachlichem Inhalt – sollte erhalten oder verbessert werden
13. Alten Classic-Editor-Inhalt migrieren
Wenn eine Seite vollständig im klassischen Editor gebaut wurde, ist eine automatische Umwandlung selten perfekt. Besser ist oft, den brauchbaren Inhalt abschnittsweise zu übernehmen und nativ in Gutenberg/GenerateBlocks neu zu strukturieren.
Bei sehr langen Seiten kann ein Zwischenexport in eine Textdatei helfen, um Inhalt und alten Formatierungscode voneinander zu trennen.
14. Was aus dem ursprünglichen Quellcode wirklich nützlich ist
Der im Chat eingefügte vollständige Seitencode war trotz seiner Größe nicht nutzlos. Er hilft, bestimmte Dinge zu erkennen:
- verwendete Farben
- Schriftarten und Größen
- maximale Containerbreite
- Menüfarben
- vorhandene CSS-Klassen
Diese Informationen können beim Nachbau des visuellen Stils dienen. Der Code selbst sollte aber nicht einfach übernommen werden.
15. Performance verbessert sich oft automatisch
Wenn überflüssige Inline-Styles, alte Plugins und verschachtelte Container entfallen, wird die Seite oft schlanker. Das bedeutet nicht automatisch perfekte PageSpeed-Werte, aber der DOM wird übersichtlicher und CSS-Konflikte werden seltener.
16. Nach dem Umbau testen
Prüfe die neue Seite mindestens auf:
- Desktop in mehreren Fensterbreiten
- Tablet
- Smartphone
- Menü und Buttons
- Kontaktlinks
- Sprungmarken
- Bilder und Alt-Texte
- Formulare
- Yoast-Metadaten
- PageSpeed und Core Web Vitals
17. Einen Abschnitt nach dem anderen migrieren
Bei einer wichtigen Live-Seite ist es riskant, alles gleichzeitig zu ersetzen. Ein besserer Weg ist, die neue Version zunächst als Entwurf oder Kopie aufzubauen, dann abschnittsweise zu vergleichen und erst danach live zu schalten.
18. Drei Spalten sind ein Mittel, kein Selbstzweck
Das Ziel ist nicht „möglichst drei Spalten“, sondern eine klare Informationsarchitektur. Wenn zwei Inhalte logisch zusammengehören und ein dritter deutlich länger ist, kann ein 2+1-Layout sinnvoller sein.
Fazit
Eine alte GeneratePress-Seite lässt sich sehr gut modernisieren, wenn man nicht versucht, den kompletten historischen Frontend-Code zu retten. Der bessere Weg ist: redaktionellen Inhalt sichern, technischen Ballast entfernen, die Struktur mit GenerateBlocks nativ neu aufbauen und SEO-relevante Inhalte sowie URLs beibehalten. Ein Drei-Spalten-Grid ist dabei besonders für gleichwertige Leistungsblöcke geeignet und lässt sich sauber auf Tablet und Mobil herunterbrechen.