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 jeden – von Solo-Bloggern bis hin 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 gestalten 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 wir in die technischen Schritte eintauchen, ist es wichtig zu verstehen, was eine WordPress-Seite eigentlich ist — und wie sie sich von einem Blog-Beitrag unterscheidet.

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

Das Verständnis dieser Unterscheidung hilft dir, intelligentere Entscheidungen darüber zu treffen, wie du deine Inhalte organisierst und präsentierst.

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 hochperformante, 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 in 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 Kontrolltafel 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 Oberfläche.

Schritt 2: Eine neue WordPress-Seite erstellen

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 Block-Typ 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 verwenden Divi – möchten Sie den Divi Builder im nächsten Schritt aktivieren.

Schritt 3: Divi Builder aktivieren und verwenden

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

Aktivieren des Divi Builders

Nach dem Öffnen Ihrer Seite im Editor sehen Sie eine prominente Schaltfläche oben im Inhaltsbereich:

„Divi Builder aktivieren” — klicken Sie darauf.

WordPress zeigt Ihnen drei Startoptionen an:

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

Grundlagen 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 erstrecken sich über die volle Breite der Seite
• Zeilen befinden sich in Abschnitten und definieren die Spaltenstruktur (1, 2, 3 Spalten usw.)
• Spalten sind die einzelnen vertikalen Unterteilungen innerhalb einer Zeile
• Module sind die eigentlichen Inhaltselemente (Text, Bilder, Schaltflächen, Formulare usw.)

Schritt 3a: Abschnitte und Zeilen hinzufügen

1. Klicken Sie auf das blaue „+”-Symbol am unteren Ende der Canvas, um einen neuen Abschnitt hinzuzufügen
2. Wählen Sie einen Abschnitttyp: Regulär, Vollbreite oder Spezial
3. Klicken Sie im Abschnitt auf das „+”-Symbol, um eine Zeile 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 Inhaltsbausteine jeder Divi-Seite. So fügen Sie eines hinzu:

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:

• Textmodul — für Absätze, Überschriften und formatierten Text
• Bildmodul — für Fotos, Grafiken und Illustrationen
• Schaltflächenmodul — 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-Funktionsfelder
• Videomodul — für eingebettete Videoinhalte
• 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 Stift-(Bearbeitungs-)Symbol auf einem beliebigen Modul, um sein Einstellungsfenster zu öffnen. Die Einstellungen sind in drei Registerkarten organisiert:

1. Registerkarte „Inhalt”

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

2. Registerkarte „Design”

Steuern Sie das visuelle Erscheinungsbild des Moduls:

• Typografie — Schriftfamilie, Größe, Gewicht, Zeilenhöhe, Zeichenabstand
• Farben — Hintergrund-, Text-, Rahmen- und Symbolfarben
• Abstände — Padding- und Margin-Steuerelemente (mit responsiven Breakpoints)
• Rahmen und Schatten — abgerundete Ecken, Box-Schatten, Rahmenstile
• Größe — Breite, Höhe, Max-Breite-Einschränkungen

3. Registerkarte „Erweitert”

Greifen Sie auf Einstellungen auf Entwicklerebene zu:

• CSS-Klassen und IDs — für benutzerdefinierte Styling-Hooks
• Benutzerdefiniertes CSS — schreiben Sie modulspezifisches CSS direkt
• Sichtbarkeit — zeigen/verbergen Sie das Modul auf Desktop, Tablet oder Mobilgeräten
• 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 auf allen drei Breakpoints 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 sowohl für die Benutzererfahrung als auch für SEO entscheidend. WordPress unterstützt Parent-Child-Seitenhierarchien, mit denen Sie verwandte Seiten unter einer gemeinsamen übergeordneten Seite verschachteln können.

Erstellen einer Parent-Child-Seitenbeziehung

1. Suchen Sie beim Bearbeiten einer Seite die rechte Seitenleiste im Block-Editor
2. Klicken Sie auf Seite, um das Einstellungsfenster der Seite zu erweitern
3. Suchen Sie den Abschnitt Seiteneigenschaften
4. Klicken Sie unter Übergeordnete Seite auf das Dropdown-Menü und wählen Sie die Seite aus, die Sie als übergeordnete Seite 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: Seiten zu Ihrem Navigationsmenü hinzufügen

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 Appearance > Menus
2. Wählen Sie ein vorhandenes Menü aus oder klicken Sie auf Create a New Menu
3. Aktivieren Sie im Panel Pages auf der linken Seite das Kontrollkästchen neben den Seiten, die Sie hinzufügen möchten
4. Klicken Sie auf Add to Menu
5. Ziehen Sie Menüelemente per Drag & Drop, um sie neu zu ordnen oder Dropdown-Untermenüs zu erstellen
6. Klicken Sie auf Save Menu, 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: Seiteneinstellungen für SEO und Leistung konfigurieren

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

Permalink (URL-Slug)

• Suchen Sie in der Seitenleiste des Block-Editors den Abschnitt Permalink
• Bearbeiten Sie den URL-Slug so, dass er kurz, aussagekräftig und keyword-reich ist
• Vermeiden Sie automatisch generierte Slugs mit Zahlen (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 und die visuelle Konsistenz zu verbessern

Seitenvorlage

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

SEO-Metadaten

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

Schritt 7: Speichern, Vorschau und Veröffentlichung Ihrer Seite

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

Speicheroptionen im Divi Builder

Oben rechts in der Divi Builder-Oberfläche finden Sie:

• Save Draft — speichert Ihre Arbeit, ohne sie öffentlich sichtbar zu machen
• Preview — öffnet eine Live-Vorschau Ihrer Seite in einem neuen Tab
• Publish/Update — macht die Seite auf Ihrer Website live

Veröffentlichung aus dem Block Editor

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

1. Klicken Sie auf Save Draft, um ohne Veröffentlichung zu speichern
2. Klicken Sie auf Preview, um zu überprüfen, wie die Seite auf der Vorderseite aussieht
3. Klicken Sie auf Publish, wenn Sie bereit sind, sie live zu schalten
4. Bestätigen Sie, indem Sie im Bestätigungsbereich erneut auf Publish klicken

> Wichtig: Zeigen Sie Ihre Seite immer auf Desktop und Mobilgeräten in der Vorschau an, bevor Sie sie veröffentlichen. Die responsiven Design-Tools von Divi sind leistungsstark, aber eine 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 Post-/Seitentypen zu erstellen. Dies gewährleistet Designkonsistenz auf Ihrer gesamten Website, ohne jede Seite manuell zu bearbeiten.

Speichern Sie Layouts in der Divi Library

Wenn Sie einen Abschnitt oder ein Layout entworfen haben, das Ihnen gefällt, speichern Sie es in der Divi Library zur Wiederverwendung auf anderen Seiten. Dies beschleunigt Ihren Workflow dramatisch.

Aktivieren Sie Divis A/B-Testing (Split Testing)

Divi enthält ein integriertes Split-Testing-Tool, mit dem Sie verschiedene Versionen eines Moduls, Abschnitts oder einer Seite gegeneinander testen können, um zu sehen, welche besser funktioniert — unbezahlbar für die Optimierung der Conversion Rate.

Sichern Sie Ihre Website mit SSL

Falls noch nicht geschehen, stellen Sie sicher, dass Ihre WordPress-Website über HTTPS läuft. Ein SSL-Zertifikat ist essentiell für Benutzervertrauen, Datensicherheit und Google-Rankings. AlexHost bietet SSL-Zertifikate, die einfach zu installieren und mit allen WordPress-Hosting-Umgebungen kompatibel sind.

Verwenden Sie eine benutzerdefinierte Domain

Ein professioneller Domainname stärkt Ihre Marke und verbessert die Klickrate in Suchergebnissen. Sie können Ihre Domain direkt über den Domain-Registrierungsservice von AlexHost registrieren und verwalten, mit Unterstützung für Hunderte von TLD-Erweiterungen.

Behebung häufiger Probleme

Fazit

Die Arbeit mit Seiten in WordPress mit dem Divi-Theme bietet dir ein außergewöhnlich leistungsstarkes und flexibles Toolkit zum Erstellen professioneller Websites – ohne Programmierung erforderlich. Indem du die Schritte in diesem Leitfaden befolgst, kannst du:

• Erstelle gut strukturierte WordPress-Seiten mit klaren Titeln und Inhalten
• Gestalte visuell ansprechende Layouts mit Divis Drag-and-Drop-Builder
• Organisiere deine Seiten in logische Hierarchien für bessere UX und SEO
• Konfiguriere wichtige Einstellungen wie Permalinks, Metadaten und Templates
• Veröffentliche mit Zuversicht nach der Vorschau auf allen Gerätetypen

Die Kombination aus WordPress-Content-Management-Leistung und Divis visuellen Designfähigkeiten ist schwer zu schlagen. Und mit der richtigen Hosting-Infrastruktur darunter wird deine Website schnell, sicher und skalierbar sein.

Für ressourcenintensive WordPress-Projekte, hochfrequentierte Websites oder Anwendungen, die dedizierte Rechenleistung benötigen, erkunde AlexHosts Dedicated Servers – mit Enterprise-Hardware, vollständiger Serverkustomisierung und maximaler Leistung für anspruchsvolle Workloads.

*Bereit, dein nächstes WordPress-Projekt zu starten? Beginne mit einer soliden Grundlage – wähle das richtige Hosting, installiere Divi und folge diesem Leitfaden, um Seiten zu erstellen, die großartig aussehen und noch besser ranken.*