Zum Inhalt springen

WordPress Layout & Design

Du hast WordPress installiert, Inhalte erstellt, Bilder optimiert? Jetzt kommt der Teil, der darüber entscheidet, ob Besucher bleiben oder sofort wieder verschwinden: Struktur, Design und Benutzererfahrung.

Diese drei Dinge gehören zusammen wie das Fundament, die Wände und das Dach eines Hauses. Du kannst nicht eins weglassen und erwarten, dass es trotzdem funktioniert.

Navigation ist dein Wegweiser. Ohne klare Struktur verlaufen sich Besucher. Egal wie toll dein Content ist – wenn niemand ihn findet, war’s umsonst.

Design ist dein Aushängeschild. Dein Theme bestimmt den ersten Eindruck, die visuelle Identität, und ob Menschen dir vertrauen oder sofort auf „Zurück“ klicken.

UX/UI ist das, was wirklich zählt. Eine schöne Website, die nicht funktioniert, ist wie ein Auto ohne Motor. Sieht gut aus, bringt dich aber nirgendwo hin.

In diesem Guide schauen wir uns alle drei Bereiche an – nicht als Theorie, sondern als praktische Schritte, die du sofort umsetzen kannst. Bereit? Dann leg los.

Navigation & Struktur: Damit Besucher nicht die Orientierung verlieren

Du hast Content erstellt, Bilder optimiert, alles sieht gut aus. Aber wenn deine Besucher nicht finden, was sie suchen, war alles umsonst. Navigation ist unsexy, aber essentiell. Lass uns das richtig machen.

Erst denken, dann bauen

Bevor du anfängst, Menüs zu erstellen, halt kurz inne. Drei Fragen:

  • Was suchen die User? Informationen? Ein Produkt? Unterhaltung? Den Weg zu einer Community?
  • Was ist für sie wichtig? Nicht für dich – für sie. Deine Auszeichnungen interessieren vielleicht weniger als deine Preise oder Kontaktdaten.
  • Wie hängen meine Seiten zusammen? Gibt es eine logische Struktur? Eine Geschichte, die du erzählst?

Plan deine Hierarchie, bevor du entwickelst. Deine URL-Struktur sollte dieser Hierarchie folgen. Das ist nicht Dekoration – das ist Fundament.

Die 3-Klick-Regel (und warum sie Sinn macht)

Eine alte Faustregel: Jede wichtige Information sollte mit maximal drei Klicks erreichbar sein. Nicht weil Menschen nach drei Klicks aufgeben (das ist ein Mythos), sondern weil eine flache Struktur zeigt, dass du nachgedacht hast.

Flache Navigation bedeutet:

  • Keine endlosen Untermenüs
  • Keine verschachtelten Ebenen, die niemand durchschaut
  • Direkter Zugang zu wichtigen Inhalten

Beispiel einer guten Struktur:

  • Startseite
  • Über uns
  • Leistungen (mit 3-5 Unterpunkten max.)
  • Blog
  • Kontakt

Klar. Einfach. Logisch.

Was deine Website eigentlich tun soll

Bevor du navigierst, kläre den Zweck:

Sichtbarkeit schaffen – Zeigen, dass dein Unternehmen existiert.

Interesse wecken – Menschen dazu bringen, über deine Marke nachzudenken.

Zur Handlung bewegen – Kauf, Anfrage, Anmeldung.

Loyalität aufbauen – Besucher zu wiederkehrenden Kunden machen.

Jeder Menüpunkt ist eine Entscheidung: Führt das näher ans Ziel oder lenkt es ab?

Welche Art von Website brauchst du?

Das beeinflusst massiv, wie du navigierst:

  • Landing Page – eine Seite, ein Ziel, minimale Navigation (One Page Themes)
  • Blog – chronologisch, kategorie-basiert (Blog Themes)
  • Magazin – viele Inhalte, mehrere Kategorien (Magazin Themes)
  • Portfolio – projekt-fokussiert, visuell (Portfolio Themes)
  • E-Commerce – produkt-zentriert, conversion-optimiert (E-Commerce Themes)
  • Community oder Verzeichnis – nutzer-generiert, durchsuchbar

Jede hat eigene Navigations-Anforderungen.

Geh zu Design → Menüs (bei klassischen Themes) oder nutze den Site Editor (bei Block Themes).

Hauptmenü erstellen

  1. Klick Erstelle ein neues Menü
  2. Gib einen Namen ein (z.B. „Hauptmenü“)
  3. Füge Seiten hinzu aus der linken Spalte
  4. Zieh die Punkte per Drag & Drop in die richtige Reihenfolge
  5. Erstelle Untermenüs durch Einrücken nach rechts
  6. Weise das Menü einer Position zu (z.B. „Primäres Menü“)

Pro-Tipp: Benenne Menüpunkte klar. Nicht „Services“, sondern „Webdesign & Beratung“. Nicht „Info“, sondern „Über uns“. Sei konkret.

Erstelle ein zweites Menü für den Footer:

  • Impressum
  • Datenschutzerklärung
  • AGB (falls zutreffend)
  • Kontakt

Rechtlich relevante Seiten müssen von jeder Seite aus mit einem Klick erreichbar sein. Der Footer ist der klassische Ort dafür.

Mobile-Menü

Die meisten modernen Themes erstellen automatisch ein responsives Menü – das berühmte Hamburger-Icon (☰) auf Smartphones.

Teste es. Öffne deine Site auf dem Handy. Ist das Menü lesbar? Funktioniert es? Falls nicht: Kürze das Menü oder nutze ein Plugin wie WP Mobile Menu.

Interne Verlinkung: Unterschätztes SEO-Gold

Navigation ist nicht nur das Menü. Es ist jeder Link auf deiner Site.

Interne Links verbinden Inhalte und helfen:

  • Besuchern, verwandte Informationen zu finden
  • Suchmaschinen, deine Struktur zu verstehen

Beispiel: In einem Artikel über WordPress-Sicherheit verlinkst du zu deinem Backup-Guide. Hilfreich und SEO-smart.

Anker-Links springen zu einer bestimmten Stelle auf derselben Seite.

  1. Klick auf einen Block (z.B. Überschrift)
  2. Öffne rechts die Block-Einstellungen
  3. Unter Erweitert → HTML-Anker
  4. Gib einen Namen ein (z.B. preise)
  5. Verlinke mit #preise

Perfekt für Inhaltsverzeichnisse.

Wichtige Layout-Bestandteile

Gute Navigation ist Teil eines durchdachten Layouts.

Header – Logo (linksoben, verlinkt zur Startseite) und Hauptnavigation. Halte es clean.

Navigation – Klar, konsistent, logisch. Selbsterklärende Labels. „Was wir machen“ ist besser als „Solutions“.

Content-Bereich – Visuelle Hierarchie mit Überschriften, Absätzen, Listen. Weißraum gibt dem Auge Ruhe.

Sidebar (optional) – Verwandte Artikel, CTAs, Newsletter. Nur nutzen, wenn sie Mehrwert bietet.

Footer – Wichtige Links, Social Media, optional Sitemap. Gut strukturierte Footer sind unterschätzte Navigations-Helfer.

Unterm Strich

Plan deine Struktur, bevor du baust. Halte Menüs einfach. Verlink intern clever. Teste auf allen Geräten.

Navigation ist das Rückgrat deiner Website. Toller Content ohne klare Navigation ist wie ein Buchladen ohne Beschilderung – frustrierend.

Jetzt bau eine Navigation, die funktioniert.

Themes & Design: Deine Website zum Leben erwecken

Du hast Inhalte, du hast Navigation. Jetzt wird’s visuell. Dein Theme bestimmt den ersten Eindruck deiner Website – und ob Besucher bleiben oder sofort wieder verschwinden.

Warum Themes wichtig sind

Themes steuern das Design deiner WordPress-Site. Sie bestimmen Layout, Farben, Schriften, und wie Inhalte präsentiert werden.

Aber hier ist der Knackpunkt: Bevor du ein Theme installierst, frag dich:

  • Unterstützt es die Erfahrung, die wir für unsere Nutzer anstreben?
  • Hilft es uns, unsere Geschäftsziele zu erreichen?

Ein hübsches Theme bringt nichts, wenn es nicht funktioniert.

Klassische Themes vs. Block Themes vs. Hybrid

WordPress hat sich weiterentwickelt, und damit auch Themes.

Klassische Themes

Der altbewährte Ansatz, vor Gutenberg (dem Block-Editor).

Struktur: header.php, footer.php, sidebar.php, functions.php – alles PHP-basiert.

Anpassung: Über den Customizer und Widgets.

Beispiele: Twenty Seventeen, GeneratePress.

Einschränkung: Keine native Unterstützung für Full Site Editing (FSE).

Block Themes (FSE Themes)

Vollständig auf dem Block-Editor aufgebaut.

Struktur: JSON-basiert (theme.json) statt vieler PHP-Templates.

Editor: Komplette Website kann über den Site Editor gestaltet werden.

Funktionen: Templates, Template Parts, Global Styles – alles über Blöcke.

Beispiele: Twenty Twenty-Four, Frost, Bricksy, Ollie.

Technologie: HTML + Block-Komposition (kein klassisches PHP-Templating).

Hybrid Themes

Kombination aus klassischem Theme + Block-Funktionalität.

Unterstützen Blöcke (z.B. Block Patterns, Block Styles), aber kein komplettes FSE.

Beispiele: Kadence, Neve.

Nutzen theme.json teilweise, behalten aber PHP-Templates.

Vergleich

Theme-TypStrukturEditorFSE-UnterstützungBeispielKlassischPHP-TemplatesCustomizer/WidgetsNeinTwenty SeventeenBlock (FSE)theme.json/HTMLSite EditorJaTwenty Twenty-FourHybridPHP + theme.jsonCustomizer + BlöckeTeilweiseKadence, Neve

Welches ist richtig für dich? Wenn du volle Kontrolle über jedes Detail willst: FSE. Wenn du es einfach magst: Hybrid oder Klassisch.

Themes installieren

Drei Wege:

1. Aus dem WordPress-Backend Geh zu Design → Themes → Installieren. Such nach einem Theme, klick Installieren, dann Aktivieren.

2. Als Datei-Upload Hast du ein Premium-Theme gekauft? Geh zu Design → Themes → Installieren → Theme hochladen. Wähl die .zip-Datei, installieren, aktivieren.

3. Mit FTP-Client Entpacke das Theme und lade den Ordner per FTP nach /wp-content/themes/. Dann im Dashboard aktivieren.

Sorgfältige Prüfung vor der Installation

Nicht jedes Theme ist gut. Bevor du installierst:

Wie alt ist das Theme? Themes, die seit Jahren nicht aktualisiert wurden, können Sicherheitslücken haben.

Wie beliebt? Schau auf die Bewertungen und aktiven Installationen.

Was braucht das Theme? Manche Themes zwingen dir Plugins auf, die du nicht brauchst. Lies die Beschreibung.

Ist es responsive? Teste auf verschiedenen Geräten.

Ist es barrierefrei? Manche Themes haben schlechte Kontraste oder keine Screen-Reader-Unterstützung.

Tools wie WP Theme Detector zeigen, welches Theme eine Website nutzt – praktisch für Inspiration.

Themes anpassen

Classic Themes über den Customizer

Geh zu Design → Customizer. Hier kannst du anpassen:

  • Site-Identität – Logo, Titel, Tagline
  • Farben – Primärfarben, Hintergründe
  • Schriften – falls das Theme es unterstützt
  • Menüs – Header, Footer
  • Widgets – Sidebars, Footer-Bereiche
  • Zusätzliches CSS – für eigene Anpassungen

Änderungen siehst du live. Klick Veröffentlichen, wenn’s passt.

Block Themes über den Site Editor (FSE)

Geh zu Design → Editor (nur bei FSE-Themes).

Hier gestaltest du:

  • Templates – Startseite, Einzelbeiträge, Archiv-Seiten
  • Template Parts – Header, Footer
  • Global Styles – Farben, Schriften, Abstände site-weit

Alles funktioniert wie der Block-Editor. Jedes Element ist ein Block. Du kannst alles verschieben, ändern, löschen.

Child-Themes: Updates ohne Verlust

Praxis Tipp: Child Theme erstellen und einbinden am Beispiel Divi

Wenn du direkt im Theme-Code änderst, gehen deine Anpassungen beim nächsten Update verloren.

Lösung: Child-Themes.

Ein Child-Theme erbt alle Funktionen des Haupt-Themes (Parent Theme), aber deine Änderungen bleiben sicher.

Erstellen eines Child-Themes:

  1. Erstelle einen Ordner in /wp-content/themes/ (z.B. mein-theme-child)
  2. Erstelle eine style.css:

css

/*
Theme Name: Mein Theme Child
Template: mein-theme
*/
  1. Erstelle eine functions.php:

php

<?php
function mein_theme_child_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'mein_theme_child_styles');
?>
  1. Aktiviere das Child-Theme im Dashboard.

Jetzt kannst du anpassen, ohne Angst vor Updates zu haben.

Mehr Infos: WordPress.com – Child Themes

Kostenlose vs. Premium Themes

Kostenlose Themes findest du im WordPress-Repository. Sie sind sicher (geprüft), aber oft eingeschränkt.

Premium Themes kosten Geld (meist 30-100€), bieten aber:

  • Mehr Funktionen
  • Besseren Support
  • Regelmäßige Updates
  • Professionellere Designs

Brauchst du ein Premium-Theme? Kommt drauf an. Für einen Blog: nein. Für ein Business: oft ja.

Typografie: Größen & Hierarchie

Konsistente Schriftgrößen verbessern Lesbarkeit.

ElementpxremH148 px3 remH236 px2.25 remH330 px1.875 remH424 px1.5 remH520 px1.25 remH616 px1 remBody16 px1 remSmall Text14 px0.875 remTiny Text12 px0.75 rem

Nutze rem statt px – dann können Nutzer die Schriftgröße im Browser anpassen.

Google Fonts lokal einbinden

Seit Januar 2022 ist es aus Datenschutzgründen empfohlen, Google Fonts lokal zu hosten.

So geht’s:

  1. Schriftart auswählen Geh zu fonts.google.com, wähl deine Schrift, klick „Download family“.
  1. Hochladen Entpacke die ZIP. Lade die Dateien per FTP in /wp-content/uploads/fonts.
  1. CSS anpassen Geh zu Design → Customizer → Zusätzliches CSS:

css

@font-face {
  font-family: 'Open Sans';
  src: url('/wp-content/uploads/fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'Open Sans', Arial, sans-serif;
}

Alternativ: Plugin Local Google Fonts automatisiert das.

Page Builder: Elementor & Otter Blocks

Manchmal reicht der Standard-Editor nicht.

Elementor: Der visuelle Kraftprotz

Elementor ist ein eigenständiger Page Builder mit Drag-and-Drop.

Installation:

  1. Plugins → Installieren, such „Elementor“
  2. Installieren, aktivieren
  3. Bei Seiten siehst du „Mit Elementor bearbeiten“

Was macht Elementor besonders?

  • Live-Vorschau beim Bearbeiten
  • Hunderte Vorlagen
  • Container-basiertes Layout
  • Pro-Version: Theme Builder, Popups, WooCommerce

Nachteil: Etwas ressourcenintensiv.

Otter Blocks: Gutenberg erweitern

Otter Blocks erweitert den Block-Editor, ersetzt ihn aber nicht.

Installation:

  1. Plugins → Installieren, such „Otter Blocks“
  2. Aktivieren
  3. Neue Blöcke im Editor verfügbar

Was bietet Otter?

  • Testimonials, Preistabellen, Tabs, Akkordeons
  • Sichtbarkeitsbedingungen
  • Animationen, Custom CSS
  • Vorlagenbibliothek

Vorteil: Leichter, nutzt Core-Editor.

Vergleich

AspektElementorOtter BlocksBauweiseEigenständiger Page BuilderGutenberg-ErweiterungOberflächeDrag-and-Drop, Live-VorschauNative BlockbearbeitungVorlagenGroße Bibliothek, Theme BuilderBlock-TemplatesPerformanceRessourcenintensiverLeichterIdeal fürVolle DesignkontrolleGutenberg-Fans

Probier beide. Elementor ist mächtiger, Otter schlanker.

Design-Übungen: Learning by Doing

1. Farbpalette erstellen Wähl max. 3 Hauptfarben. Tools wie Coolors.co helfen. Passe sie im Customizer an.

2. Schriftarten wählen Zwei Schriften: eine für Überschriften, eine für Text. Lade sie lokal hoch.

3. Startseite bauen Erstelle:

  • Hero-Bereich (Titel + Button)
  • Drei Vorteile
  • Call-to-Action

4. Layout-Varianten testen Erstelle zwei Versionen:

  • Einspaltig
  • Zweispaltig (Bild + Text)

Welche wirkt besser?

5. Responsive-Check Teste auf Smartphone, Tablet, Desktop. Passe an.

Unterm Strich

Dein Theme ist nicht nur Dekoration. Es ist Funktion, Nutzererfahrung, erster Eindruck.

Wähl sorgfältig. Pass an, was nötig ist. Nutze Child-Themes für Sicherheit. Und vergiss nicht: Design folgt Funktion.

Jetzt hol das Beste aus deinem Theme raus.

UX/UI: Damit deine Website wirklich funktioniert

Eine Website bringt nichts, wenn sie nicht benutzerfreundlich ist. Egal wie schön, egal wie viel Content – wenn Nutzer sich ärgern, sind sie weg.

UX vs. UI: Der Unterschied

  • UX (User Experience) = Wie fühlt es sich an, die Site zu nutzen? Die Summe aller Gefühle bei der Interaktion.
  • UI (User Interface) = Wie sieht es aus? Wie funktioniert die Interaktion? Buttons, Farben, Layout.

Beides gehört zusammen. Gutes UI ohne gutes UX ist wie ein schönes Auto mit leerem Tank.

Die drei Säulen guter UX

1. Die richtigen Funktionen Biete, was Nutzer brauchen. Nicht, was du cool findest.

2. Die passenden Inhalte Relevant, prägnant, fokussiert.

3. Ein benutzerfreundliches Design Intuitiv, zugänglich, schnell.

Grundprinzipien für gute Usability

Intuitive Navigation – Besucher sollten nie überlegen müssen, wo sie klicken.

Schnelle Ladezeiten – Teste mit web.dev/measure. Langsame Sites verlieren Besucher.

Mobile First – Die Mehrheit surft mobil. Deine Site muss auf dem Smartphone perfekt funktionieren.

Klare Call-to-Actions (CTAs) – „Jetzt anfragen“, „Mehr erfahren“, „Kostenlos testen“ müssen hervorstechen.

Breadcrumbs (Brotkrümel-Navigation) – Zeigt den Pfad: Startseite > Blog > Artikel. Hilft bei der Orientierung.

Suchfunktion – Bei größeren Sites unverzichtbar.

Barrierefreiheit – Kontrastreiche Farben, klare Schriften, Alt-Texte. Deine Site sollte für alle nutzbar sein.

Weißraum als Werkzeug – Lass Inhalte atmen. Vollgestopfte Seiten sind anstrengend.

Durchdachte Farbwahl – Max. 3 Hauptfarben. Sie sollten gut lesbar sein.

Die richtige Schriftart – Lesbar, professionell, passend. Keine Comic Sans (außer du machst Kinderpartys).

Conversion-Optimierung: Vom Besucher zum Kunden

Landing Pages sind zielgerichtet. Eine Botschaft, ein Angebot, ein CTA.

Conversion-Ziele können sein:

  • Kontaktformular ausfüllen
  • Newsletter-Anmeldung
  • Download
  • Kauf
  • Anruf

Warum ist die Startseite keine gute Landing Page?

Stell dir vor, du gibst eine Adresse ins Navi ein, aber es bringt dich nur bis zum Ortsschild. Frustrierend, oder?

Landing Pages führen direkt zum Ziel. Keine Ablenkung, keine Navigation, kein Chichi.

Startseiten-Design: Die wichtigsten Sektionen

Hero-Bereich – Großes Bild oder Video, prägnanter Titel, klarer Button. Das ist der erste Eindruck.

Drei Vorteile/Leistungen – Warum sollte jemand bleiben? Zeig es schnell und visuell.

Call-to-Action – „Jetzt Kontakt aufnehmen“, „Kostenloses Angebot“. Ein klarer nächster Schritt.

Above the Fold – Alles ohne Scrollen sichtbar muss überzeugen. Danach entscheiden viele, ob sie bleiben.

Performance & Nachhaltigkeit

Wie schnell ist deine Site? Teste mit web.dev/measure. Unter 3 Sekunden ist okay. Unter 1 Sekunde ist super.

Wie umweltfreundlich? Website Carbon zeigt den CO2-Fußabdruck deiner Site. Optimierte Bilder und schlanker Code helfen.

Responsive Design: Auf allen Geräten gut

Teste auf Smartphone, Tablet, Desktop.

So testest du:

  • Browser öffnen
  • F12 drücken (Chrome DevTools)
  • Smartphone-Icon klicken
  • Verschiedene Bildschirmgrößen testen

Achte auf:

  • Lesbarkeit
  • Button-Größe
  • Abstände
  • Bilder

Think in Blocks: Seiten strukturieren

Jede Seite besteht aus Bausteinen:

  • Header
  • Hero-Bereich
  • Text-Block
  • Bild-Text-Kombination
  • Call-to-Action
  • Footer

Plane erst die Blöcke, dann bau sie.

Übung: Öffne eine gut gestaltete Website. Rechtsklick → „Seitenquelltext“. Such nach <!-- wp:. Du siehst die Blöcke.

Lerne, Websites zu „lesen“. Das macht dich besser im Bauen.

Praktische UX-Übungen

1. Layout-Struktur analysieren Öffne 5 Websites deiner Branche. Wo ist das Menü? Wie viele Klicks bis zur wichtigsten Info?

2. „Above the Fold“ optimieren Was siehst du auf deiner Startseite ohne zu scrollen? Ist es überzeugend?

3. Mobile-Test Öffne deine Site auf dem Handy. Ist alles lesbar? Funktionieren Buttons?

4. Ladezeit messen Teste mit web.dev/measure. Unter 3 Sekunden?

5. User Flow skizzieren Zeichne den Weg eines Nutzers: Startseite → Leistungen → Kontakt. Ist er logisch?

Nützliche Ressourcen

Unterm Strich

Design folgt Funktion. Deine Website ist nicht für dich – sie ist für die Menschen, die sie nutzen.

Konzentriere dich aufs Wesentliche. Und auf das Warum.

Schnelle Ladezeiten, intuitive Navigation, klare CTAs, barrierefrei, mobilfreundlich. Das sind keine Nice-to-haves. Das sind Basics.

Jetzt geh und bau eine Website, die wirklich funktioniert.

Nächster Schritt? In Teil 4 schauen wir uns Plugins an – wie du deine Site erweiterst, ohne sie zu überladen.

Fragen? Die WordPress-Community hilft. Oder schau auf meinem Blog vorbei.

Step 1

Dein WordPress-Setup: So startest du richtig durch

Step 2

Inhalte erstellen in WordPress

Step 4

Plugins & Funktionalität: WordPress erweitern