ALLGEMEIN

Divi 4 Design-Setup für Affiliate-Websites: Komplette Anleitung

19. März 2026 · Wlad

—
slug: divi-4-design-setup-affiliate-website
kategorie: Tutorials, Divi, WordPress
tags: Divi, WordPress, Affiliate, Design, CSS, Typographie, Theme-Customizer
lesezeit: ~12 Minuten
—

# Divi 4 richtig einrichten: Komplettes Design-Setup für eine Affiliate-Website

Wer mit WordPress und Divi 4 eine Affiliate-Website aufbaut, steht oft vor der gleichen Frage: **Wo fange ich mit dem Design an, und wie stelle ich sicher, dass alles konsistent aussieht?** In dieser Anleitung zeige ich dir Schritt für Schritt, wie ich homelabguide.de von Grund auf gestaltet habe – mit einer klaren Farbpalette, optimierten Conversion-Elementen und einem Custom CSS, das alle wichtigen Design-Bausteine abdeckt.

—

## Die Farbpalette – Basis für ein konsistentes Design

Bevor du auch nur einen Schieberegler anfasst, definiere deine Farben. Für homelabguide.de basiert die Palette auf dem „Cloud Structure“-Logo:

Diese Farben trägst du direkt in die **Divi-Farbpalette** ein:
**Divi → Theme-Optionen → Allgemein → Farbpalette** – dort auf jedes der 8 Felder klicken und die Hex-Werte eintragen. Danach stehen sie dir im gesamten Visual Builder per Klick zur Verfügung.

—

## Schritt 1: Typographie einstellen

Gehe zu **Divi → Theme-Customizer → Allgemeine Einstellungen → Typographie**.

### Was einstellen:

– **Schriftart Kopfzeile:** Montserrat
– **Schriftstärke Kopfzeile:** Fett (700) für H1, Mittel (500) für H2–H4
– **Textfarbe für Überschriften:** `#1A237E`
– **Haupt-Schriftart:** Open Sans
– **Schriftstärke Textkörper:** Normal (400)
– **Schriftgröße im Body:** 17px (Standard 14px ist zu klein für lange Anleitungen!)
– **Zeilenhöhe im Body:** 1,75
– **Schriftfarbe im Body:** `#212121`
– **Verknüpfungsfarbe:** `#1A237E`

> **Warum Montserrat + Open Sans?** Montserrat wirkt geometrisch und technisch präzise – passend für ein Tech-Blog. Open Sans ermüdet das Auge bei langen Texten nicht, ideal für Guides und Anleitungen.

—

## Schritt 2: Primäre Menüleiste konfigurieren

Gehe zu **Theme-Customizer → Header & Navigation → Primäre Menüleiste**.

### Was einstellen:

– **Menü Höhe:** 80px
– **Schriftart:** Montserrat
– **Zeichenformat:** TT (Großbuchstaben aktivieren)
– **Textfarbe:** `#FFFFFF`
– **Farbe für aktiven Link:** `#D81B60`
– **Hintergrundfarbe:** `#1A237E`
– **Hintergrundfarbe Drop-Down:** `#1A237E`
– **Linienfarbe Drop-Down:** `#D81B60`
– **Schriftfarbe Drop-Down:** `#FFFFFF`

### Menüstruktur empfohlen:
`Home | Hosting | KI & Automation | Blog | Deals`

Rechts im Header kommt ein auffälliger Magenta-Button: **„Aktuelle Gutscheine“** – dazu später mehr im Custom CSS.

—

## Schritt 3: Sekundäre Menüleiste – Rabatt-Streifen oder deaktivieren

Gehe zu **Theme-Customizer → Header & Navigation → Sekundäre Menüleiste**.

Du hast zwei Optionen:

**Option A – Deaktivieren:** Unter **Divi → Theme-Optionen → Allgemein** die sekundäre Navigation ausschalten. Spart Platz, hält den Header clean.

**Option B – Als Rabatt-Streifen nutzen:**
– **Hintergrundfarbe:** `#D81B60`
– **Textfarbe:** `#FFFFFF`
– **Schriftart:** Montserrat

Dann ein kurzes Menü mit einem Eintrag wie *„🔥 n8n Cloud – 30% Rabatt sichern →“* anlegen. Das ist ein starkes Conversion-Element direkt oben auf jeder Seite.

—

## Schritt 4: Footer komplett gestalten

### 4a – Footer Widgets
**Theme-Customizer → Footer → Widgets**

– **Textfarbe für Widget:** `#FFFFFF`
– **Linkfarbe für Widgets:** `#00E5FF`
– **Headerfarbe für Widgets:** `#FFFFFF` + Fett aktivieren
– **Listenpunktfarbe für Widgets:** `#D81B60`
– **Body/Link Schriftgröße:** 15px

### 4b – Footermenü
**Theme-Customizer → Footer → Footermenü**

– **Schriftfarbe:** `#FFFFFF` (nicht `#bbbbbb` – Grau ist auf Dunkelblau unleserlich!)
– **Farbe für aktive Links:** `#D81B60`
– **Zeichenformat:** TT (Großbuchstaben)

> **Tipp:** Im Colorpicker siehst du unten deine 8 Palettenfarben als kleine Quadrate. Einfach auf das weiße Quadrat klicken – spart das manuelle Eintippen.

### 4c – Untere Footerleiste
**Theme-Customizer → Footer → Untere Footerleiste**

– **Hintergrundfarbe:** `#111a5e` (etwas dunkler als `#1A237E` – gibt eine schöne Abstufung)
– **Textfarbe:** `#FFFFFF`
– **Farbe von Socialicons:** `#D81B60`
– **Footer-Credits abschalten:** Aktivieren
– **Footer-Credits ändern:** `© 2025 homelabguide.de – Alle Rechte vorbehalten`

—

## Schritt 5: Buttons optimieren

**Theme-Customizer → Allgemeine Einstellungen → Buttons (Schaltfläche)**

### Normaler Button-Style:
– **Schriftgröße:** 15px
– **Textfarbe:** `#FFFFFF`
– **Hintergrundfarbe:** `#D81B60`
– **Breite der Umrandung:** 0
– **Radius der Umrandung:** 5px
– **Zeichenabstand:** 1
– **Schriftformat:** B (Fett)
– **Schriftart:** Montserrat
– **Icon hinzufügen:** Nein

### Hover-Style (zweite Seite nach unten scrollen):
– **Textfarbe:** `#FFFFFF`
– **Hintergrundfarbe:** `#b0003a`
– **Farbe der Umrandung:** `#b0003a`
– **Radius:** 5px
– **Zeichenabstand:** 1

> **Warum `#b0003a` beim Hover?** Ein zu starker Farbsprung wirkt billig. Das leicht dunklere Magenta ist subtil genug für Professionalität, aber deutlich genug, um Interaktion zu signalisieren.

—

## Schritt 6: Blog-Beiträge konfigurieren

**Theme-Customizer → Blog → Beitrag**

– **Metazeilenhöhe:** 1,5
– **Metaschriftformat:** I (Kursiv)
– **Textgröße im Header:** 36px
– **Zeilenhöhe im Header:** 1,2
– **Zeichenabstand im Header:** -0,5
– **Schriftformat im Header:** B (Fett)

—

## Schritt 7: Mobiles Menü

**Theme-Customizer → Mobile Designs → Menü für mobile Geräte**

– **Logobild verbergen:** Deaktivieren (Logo soll auf Mobilgeräten sichtbar bleiben!)
– **Textfarbe:** `#FFFFFF`
– **Hintergrundfarbe:** `#1A237E`

—

## Schritt 8: Custom CSS – Die wichtigste Datei

Alle Conversion-Elemente, die Divi 4 nicht nativ abbildet, kommen per Custom CSS. Gehe zu:

**Divi → Theme-Optionen → Allgemein → Benutzerdefiniertes CSS**

Oder alternativ: **Design → Zusätzliches CSS** im WordPress-Customizer.

Hier ist das komplette CSS für alle wichtigen Elemente:

### 8a – CSS-Variablen (einmal definieren, überall nutzen)
„`css
:root {
–color-primary: #1A237E;
–color-accent: #D81B60;
–color-cyan: #00E5FF;
–color-bg-light: #F5F5F7;
–color-text: #212121;
–color-tip-bg: #f0f4ff;
–color-border: #eeeeee;
–font-heading: ‚Montserrat‘, sans-serif;
–font-body: ‚Open Sans‘, sans-serif;
–font-code: ‚Fira Code‘, monospace;
}
„`

### 8b – Affiliate-Button (Primär)
„`css
.et_pb_button.affiliate-btn {
background-color: var(–color-accent) !important;
color: #FFFFFF !important;
border: none !important;
border-radius: 5px !important;
font-weight: 700 !important;
font-size: 15px !important;
padding: 14px 28px !important;
}
.et_pb_button.affiliate-btn:hover {
background-color: #b0003a !important;
box-shadow: 0 4px 15px rgba(216,27,96,0.4) !important;
}
„`

Die Klasse `affiliate-btn` trägst du im Divi Visual Builder bei jedem Affiliate-Button unter **Erweitert → CSS-Klasse** ein.

### 8c – Profi-Tipp Boxen
„`css
.profi-tipp-box {
background-color: var(–color-tip-bg) !important;
border-left: 4px solid var(–color-primary) !important;
border-radius: 0 6px 6px 0 !important;
padding: 18px 22px !important;
}
.profi-tipp-box h4 {
color: var(–color-primary) !important;
font-weight: 700 !important;
}
„`

### 8d – Affiliate-Box nach Anleitungen
„`css
.affiliate-post-box {
background-color: var(–color-bg-light) !important;
border-left: 4px solid var(–color-accent) !important;
border-radius: 6px !important;
padding: 20px 24px !important;
}
.affiliate-post-box h4 {
color: var(–color-primary) !important;
font-weight: 700 !important;
}
„`

### 8e – Code-Snippets (n8n JSON, Bash)
„`css
.et_pb_code_inner pre, code {
background-color: #1a1a2e !important;
color: var(–color-cyan) !important;
font-family: var(–font-code) !important;
font-size: 14px !important;
border-radius: 6px !important;
padding: 20px !important;
}
„`

—

## Schritt 9: Google Fonts einbinden

Damit Montserrat, Open Sans und Fira Code korrekt geladen werden, füge folgenden Import in **Divi → Theme-Optionen → Allgemein → Google Fonts** oder im „ via **Theme-Optionen → Integration → Code im head-Bereich hinzufügen** ein:

„`html „`

—

## Zusammenfassung: Was wurde eingestellt

—

*Dieser Guide ist Teil der homelabguide.de-Serie über WordPress, Divi und Affiliate-Optimierung. Im nächsten Teil: Wie du die Startseite mit Hero-Sektion und Affiliate-Karten im Divi Visual Builder aufbaust.*

Divi 4 Design-Setup für Affiliate-Websites: Komplette Anleitung

Schnelllinks

Rechtliches

Social