Wie man mit Seiten in WordPress und Divi arbeitet: Ein vollständiger Schritt-für-Schritt-Leitfaden

WordPress betreibt über 43% aller Websites im Internet — und das aus gutem Grund. Seine intuitive Benutzeroberfläche, das umfangreiche Plugin-Ökosystem und die flexiblen Content-Management-Funktionen machen es zum bevorzugten CMS für alle — von Solo-Bloggern bis zu Unternehmen auf Unternehmensebene. Wenn Sie WordPress mit dem Divi-Theme von Elegant Themes kombinieren, schalten Sie einen Drag-and-Drop-Visual-Builder frei, mit dem Sie atemberaubende, professionelle Seiten entwerfen können, ohne eine einzige Codezeile zu schreiben.

In diesem umfassenden Leitfaden erfahren Sie genau, wie Sie Seiten in WordPress mit dem Divi Builder erstellen, anpassen, organisieren und veröffentlichen. Egal, ob Sie Ihre erste Website erstellen oder eine bestehende verfeinern, dieses Tutorial behandelt alles, was Sie wissen müssen.

Was sind Seiten in WordPress? (Und wie unterscheiden sie sich von Beiträgen)

Bevor Sie in die technischen Schritte eintauchen, ist es wichtig zu verstehen, was eine WordPress-Seite tatsächlich ist — und wie sie sich von einem Blog-Beitrag unterscheidet.

Seiten sind das strukturelle Rückgrat Ihrer Website. Sie enthalten Inhalte, die sich nicht häufig ändern und nicht kategorisiert oder getaggt werden müssen. Denken Sie an Ihre Über uns, Kontakt, Dienstleistungen oder Startseite — dies sind alles klassische Beispiele für WordPress-Seiten.

Das Verständnis dieser Unterscheidung hilft Ihnen, intelligentere Entscheidungen darüber zu treffen, wie Sie Ihre Inhalte organisieren und präsentieren.

Voraussetzungen: Was Sie vor dem Start benötigen

Um diesem Leitfaden zu folgen, stellen Sie sicher, dass Sie folgendes haben:

• Eine Live-WordPress-Installation in einer zuverlässigen Hosting-Umgebung
• Das Divi-Theme installiert und aktiviert (erhältlich von Elegant Themes)
• Administrator-Zugriff auf Ihr WordPress-Dashboard
• Ein grundlegendes Verständnis der Struktur und Ziele Ihrer Website

Wenn Sie Ihre Hosting-Umgebung noch einrichten, erwägen Sie VPS-Hosting von AlexHost — eine hochleistungsfähige, skalierbare Lösung, die Ihnen vollständigen Root-Zugriff, dedizierte Ressourcen und die Flexibilität bietet, WordPress mit optimaler Geschwindigkeit auszuführen. Für kleinere Projekte oder persönliche Websites ist Shared Web Hosting eine erschwingliche und anfängerfreundliche Alternative, die vollständig mit WordPress kompatibel ist.

Schritt 1: Melden Sie sich bei Ihrem WordPress-Dashboard an

Öffnen Sie zunächst Ihren bevorzugten Webbrowser und navigieren Sie zu Ihrem WordPress-Admin-Panel. Die Standard-URL ist:

http://yourdomain.com/wp-admin

Geben Sie Ihren Benutzernamen und Ihr Passwort ein, und klicken Sie dann auf Anmelden. Sie landen auf dem WordPress-Dashboard — der zentralen Kontrollzentrale für Ihre gesamte Website.

> Pro-Tipp: Wenn Sie mehrere WordPress-Sites verwalten oder ein optimierteres Admin-Erlebnis benötigen, erwägen Sie die Verwendung eines VPS mit cPanel für zentralisierte Server- und Site-Verwaltung über eine einzige, intuitive Schnittstelle.

Schritt 2: Erstellen Sie eine neue WordPress-Seite

Sobald Sie sich im Dashboard befinden, führen Sie diese Schritte aus, um eine neue Seite zu erstellen:

1. Suchen Sie im linken Navigationsmenü nach Seiten und klicken Sie darauf
2. Klicken Sie auf Neu hinzufügen oben in der Seitenliste (oder verwenden Sie die + Neu > Seite Verknüpfung in der oberen Admin-Leiste)
3. Sie werden zum WordPress-Block-Editor (Gutenberg) weitergeleitet

Titel und grundlegende Inhalte hinzufügen

• Klicken Sie auf das Feld „Titel hinzufügen” oben und geben Sie Ihren Seitennamen ein (z. B. *Über uns*, *Kontakt*, *Dienstleistungen*)
• Im Inhaltsbereich darunter können Sie Textblöcke, Bilder, Überschriften, Schaltflächen und andere Elemente mit dem Gutenberg-Block-Editor hinzufügen
• Verwenden Sie die „/” Verknüpfung im Editor, um schnell nach einem beliebigen Blocktyp zu suchen und ihn einzufügen

In diesem Stadium arbeiten Sie mit dem Standard-WordPress-Editor. Wenn Sie jedoch erweiterte visuelle Anpassungen wünschen — und Sie Divi verwenden — möchten Sie den Divi Builder im nächsten Schritt aktivieren.

Schritt 3: Aktivieren und verwenden Sie den Divi Builder

Der Divi Builder verwandelt den Standard-WordPress-Editor in eine leistungsstarke, visuelle Drag-and-Drop-Design-Umgebung. So aktivieren und verwenden Sie ihn:

Aktivieren des Divi Builders

Nach dem Öffnen Ihrer Seite im Editor sehen Sie eine prominente Schaltfläche in der Nähe der Oberseite des Inhaltsbereichs:

„Divi Builder aktivieren” — klicken Sie darauf.

WordPress wird Sie mit drei Startoptionen auffordern:

Wählen Sie die Option, die am besten zu Ihrem Projekt passt, und klicken Sie auf Mit dem Erstellen beginnen.

Verstehen der Divi Builder-Struktur

Bevor Sie Inhalte hinzufügen, ist es hilfreich zu verstehen, wie Divi seine Layout-Hierarchie organisiert:

Section
  └── Row
        └── Column
              └── Module

• Abschnitte sind die größten Container — sie spannen die volle Breite der Seite
• Reihen befinden sich in Abschnitten und definieren die Spaltenstruktur (1, 2, 3 Spalten usw.)
• Spalten sind die einzelnen vertikalen Unterteilungen innerhalb einer Reihe
• Module sind die tatsächlichen Inhaltselemente (Text, Bilder, Schaltflächen, Formulare usw.)

Schritt 3a: Abschnitte und Reihen hinzufügen

1. Klicken Sie auf das blaue „+” Symbol am unteren Ende der Leinwand, um einen neuen Abschnitt hinzuzufügen
2. Wählen Sie einen Abschnittstyp: Regulär, Vollbreite oder Spezialität
3. Klicken Sie im Abschnitt auf das „+” Symbol, um eine Reihe hinzuzufügen
4. Wählen Sie Ihr bevorzugtes Spaltenlayout (z. B. 1/2 + 1/2 für ein zweispaltiges Design)

Schritt 3b: Module hinzufügen

Module sind die Inhalts-Bausteine jeder Divi-Seite. Um eines hinzuzufügen:

1. Klicken Sie auf das graue „+” Symbol in einer Spalte
2. Eine Modelbibliothek wird angezeigt — durchsuchen oder suchen Sie nach dem benötigten Modul
3. Klicken Sie auf das Modul, um es in Ihr Layout einzufügen

Häufig verwendete Divi-Module sind:

• Text-Modul — für Absätze, Überschriften und formatierten Text
• Bild-Modul — für Fotos, Grafiken und Illustrationen
• Schaltflächen-Modul — für CTAs und Navigationslinks
• Schieber-Modul — für Hero-Bild-Karussells
• Kontaktformular-Modul — für Lead-Erfassung und Anfragen
• Blurb-Modul — für Symbol + Text-Feature-Boxen
• Video-Modul — für eingebettete Video-Inhalte
• Testimonial-Modul — für sozialen Beweis und Bewertungen
• Code-Modul — für benutzerdefinierte HTML-, CSS- oder JavaScript-Snippets

Schritt 3c: Module anpassen

Klicken Sie auf das Bleistift (Bearbeiten) Symbol auf einem beliebigen Modul, um sein Einstellungsfenster zu öffnen. Die Einstellungen sind in drei Registerkarten organisiert:

#### 1. Inhalts-Registerkarte

Konfigurieren Sie den tatsächlichen Inhalt des Moduls — Text, Bilder, Links, Schaltflächenbeschriftungen, Formularfelder usw.

#### 2. Design-Registerkarte

Kontrollieren Sie das visuelle Erscheinungsbild des Moduls:

• Typografie — Schriftfamilie, Größe, Gewicht, Zeilenhöhe, Buchstabenabstand
• Farben — Hintergrund-, Text-, Rahmen- und Symbolfarben
• Abstände — Innen- und Außenabstand-Steuerelemente (mit responsiven Haltepunkten)
• Rahmen und Schatten — abgerundete Ecken, Box-Schatten, Rahmenstile
• Größe — Breite, Höhe, maximale Breitenbeschränkungen

#### 3. Erweiterte Registerkarte

Greifen Sie auf Einstellungen auf Entwicklerebene zu:

• CSS-Klassen und IDs — für benutzerdefinierte Styling-Hooks
• Benutzerdefiniertes CSS — schreiben Sie modul-spezifisches CSS direkt
• Sichtbarkeit — zeigen/verbergen Sie das Modul auf Desktop, Tablet oder Mobilgerät
• Animationen — Eingangsanimationseffekte und Timing

> Design-Tipp: Divis responsive Steuerelemente ermöglichen es Ihnen, unterschiedliche Werte für Desktop-, Tablet- und Mobilansichten festzulegen. Zeigen Sie Ihre Seite immer in allen drei Haltepunkten in der Vorschau an, bevor Sie sie veröffentlichen.

Schritt 4: Organisieren Sie Ihre Seiten mit Hierarchien

Mit dem Wachstum Ihrer Website wird die Organisation von Seiten für Benutzererlebnis und SEO von entscheidender Bedeutung. WordPress unterstützt übergeordnete-untergeordnete Seitenhierarchien, mit denen Sie verwandte Seiten unter einer gemeinsamen übergeordneten Seite verschachteln können.

Erstellen einer übergeordneten-untergeordneten Seitenbeziehung

1. Während Sie eine Seite bearbeiten, schauen Sie sich die rechte Seitenleiste im Block-Editor an
2. Klicken Sie auf Seite, um das Seiteneinstellungsfenster zu erweitern
3. Suchen Sie den Abschnitt Seitenattribute
4. Klicken Sie unter Übergeordnete Seite auf das Dropdown-Menü und wählen Sie die Seite aus, die Sie als übergeordnet zuweisen möchten

Beispielhierarchie:

Services (parent)
  ├── Web Design (child)
  ├── SEO Consulting (child)
  └── Content Marketing (child)

Diese Struktur erstellt saubere URLs (z. B. yoursite.com/services/web-design/) und hilft Suchmaschinen, die Inhaltsarchitektur Ihrer Website besser zu verstehen.

Schritt 5: Fügen Sie Seiten zu Ihrem Navigationsmenü hinzu

Das Erstellen einer Seite fügt sie nicht automatisch zur Navigation Ihrer Website hinzu. Sie müssen sie manuell zu einem Menü hinzufügen.

1. Gehen Sie im WordPress-Dashboard zu Erscheinungsbild > Menüs
2. Wählen Sie ein vorhandenes Menü oder klicken Sie auf Neues Menü erstellen
3. Aktivieren Sie im Seiten-Fenster auf der linken Seite das Kontrollkästchen neben den Seiten, die Sie hinzufügen möchten
4. Klicken Sie auf Zum Menü hinzufügen
5. Ziehen und ablegen Sie Menüelemente, um sie neu zu ordnen oder Dropdown-Untermenüs zu erstellen
6. Klicken Sie auf Menü speichern, wenn Sie fertig sind

> Best Practice: Halten Sie Ihr primäres Navigationsmenü auf Ihre wichtigsten Seiten konzentriert. Streben Sie maximal 5–7 Elemente auf oberster Ebene an, um Besucher nicht zu überfordern.

Schritt 6: Konfigurieren Sie Seiteneinstellungen für SEO und Leistung

Bevor Sie veröffentlichen, nehmen Sie sich einen Moment Zeit, um wichtige Seiteneinstellungen zu konfigurieren, die sowohl die Suchmaschinen-Sichtbarkeit als auch das Benutzererlebnis beeinflussen.

Permalink (URL-Slug)

• Suchen Sie in der Block-Editor-Seitenleiste den Abschnitt Permalink
• Bearbeiten Sie den URL-Slug, um ihn kurz, aussagekräftig und keyword-reich zu gestalten
• Vermeiden Sie automatisch generierte Slugs mit Nummern (z. B. /?p=123)
• Gutes Beispiel: yoursite.com/about-us/
• Schlechtes Beispiel: yoursite.com/?page_id=47

Beitragsbild

• Weisen Sie ein relevantes Beitragsbild zu, um das Erscheinungsbild beim sozialen Teilen zu verbessern und visuelle Konsistenz zu gewährleisten

Seitenvorlage

• Einige Themes (einschließlich Divi) bieten mehrere Seitenvorlagen (z. B. Vollbreite, keine Seitenleiste)
• Wählen Sie die entsprechende Vorlage unter Seitenattribute > Vorlage

SEO-Metadaten

• Wenn Sie ein SEO-Plugin wie Yoast SEO oder Rank Math verwenden, füllen Sie folgendes aus:
• Meta-Titel — schließen Sie Ihr primäres Keyword ein
• Meta-Beschreibung — schreiben Sie eine überzeugende Zusammenfassung von 150–160 Zeichen
• Focus-Keyword — legen Sie Ihren Zielsuchterminus fest

Schritt 7: Speichern, zeigen Sie eine Vorschau an und veröffentlichen Sie Ihre Seite

Sobald Sie mit Ihrem Seitendesign und den Einstellungen zufrieden sind, ist es Zeit, online zu gehen.

Speicheroptionen im Divi Builder

Oben rechts in der Divi Builder-Schnittstelle finden Sie:

• Entwurf speichern — speichert Ihre Arbeit, ohne sie öffentlich sichtbar zu machen
• Vorschau — öffnet eine Live-Vorschau Ihrer Seite in einem neuen Tab
• Veröffentlichen/Aktualisieren — macht die Seite auf Ihrer Website live

Veröffentlichung aus dem Block-Editor

Wenn Sie den Divi Builder beenden und zum Standard-Block-Editor zurückkehren:

1. Klicken Sie auf Entwurf speichern, um zu speichern, ohne zu veröffentlichen
2. Klicken Sie auf Vorschau, um zu überprüfen, wie die Seite auf der Vorderseite aussieht
3. Klicken Sie auf Veröffentlichen, wenn Sie bereit sind, sie live zu schalten
4. Bestätigen Sie durch erneutes Klicken auf Veröffentlichen im Bestätigungsfenster

> Wichtig: Zeigen Sie Ihre Seite immer auf Desktop und Mobilgerät in der Vorschau an, bevor Sie sie veröffentlichen. Divis responsive Design-Tools sind leistungsstark, aber manuelle Überprüfung erkennt Probleme, die automatisierte Tools übersehen.

Erweiterte Tipps: Mehr aus WordPress und Divi herausholen

Verwenden Sie den Divi Theme Builder für globale Vorlagen

Der Divi Theme Builder (verfügbar in Divi 4.0+) ermöglicht es Ihnen, globale Vorlagen für Header, Footer und spezifische Beitrags-/Seitentypen zu erstellen. Dies gewährleistet Design-Konsistenz auf Ihrer gesamten Website, ohne jede Seite manuell zu bearbeiten.

Speichern Sie Layouts in der Divi-Bibliothek

Wenn Sie einen Abschnitt oder ein Layout entworfen haben, das Ihnen gefällt, speichern Sie ihn in der Divi-Bibliothek