—
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:
| Farbe | Hex-Code | Verwendung |
|—|—|—|
| Primary Blue | `#1A237E` | Header, Footer, Überschriften |
| Accent Magenta | `#D81B60` | Affiliate-Buttons, CTAs |
| Tech Cyan | `#00E5FF` | Hover-Effekte, Icons, Akzente |
| Light Gray | `#F5F5F7` | Sektionshintergründe |
| Dark Text | `#212121` | Fließtext |
| Profi-Tipp BG | `#f0f4ff` | Tipp-Boxen im Blog |
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
| Bereich | Status | Key-Setting |
|—|—|—|
| Farbpalette | ✅ | 8 Farben definiert |
| Typographie | ✅ | Montserrat + Open Sans, 17px Body |
| Primäre Menüleiste | ✅ | BG `#1A237E`, Text weiß |
| Sekundäre Menüleiste | ✅ | Rabatt-Streifen oder deaktiviert |
| Footer Widgets | ✅ | Weiß auf Dunkelblau |
| Footermenü | ✅ | Weiß, aktive Links Magenta |
| Untere Footerleiste | ✅ | Social Icons Magenta |
| Buttons (Normal) | ✅ | `#D81B60`, Radius 5px |
| Buttons (Hover) | ✅ | `#b0003a` + Schatten |
| Blog-Beiträge | ✅ | Titel 36px, Bold |
| Mobiles Menü | ✅ | Logo sichtbar, BG Blau |
| Custom CSS | ✅ | Alle Conversion-Elemente |
—
*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.*