🎨 Design-Modus

Der Design-Modus ist der Styling-Editor in PS Padma. Hier gibst du deinem Layout den visuellen Feinschliff — Farben, Fonts, Abstände, Effekte und vieles mehr.

📍 Wie aktiviere ich den Design-Modus?

Visual Editor » Design-Tab (oben links)

Im Design-Modus siehst du:

• ✅ Normale Website-Ansicht (keine Grid-Linien)
• ✅ Klickbare Elemente mit Hover-Effekt
• ✅ Property Inspector (rechts) für Styling
• ✅ Instant Live-Preview aller Änderungen

🎯 Was macht man im Design-Modus?

Hauptaufgaben

1. Elemente auswählen — Klick auf beliebiges Element im iFrame
2. Properties anpassen — Farben, Fonts, Abstände, etc.
3. CSS schreiben — Für fortgeschrittene Anpassungen
4. States stylen — Hover, Active, Focus
5. Responsive optimieren — Mobile, Tablet, Desktop

🖱️ Element-Selektor

Element auswählen

Klick-Modus (Standard):

1. Element im iFrame anklicken
2. Property Inspector (rechts) öffnet sich
3. Zeigt alle verfügbaren Properties für dieses Element

Was ist auswählbar?

• 🏷️ Default-Elemente: Body, Headings (H1-H6), Links, Paragraphs
• 🧩 Block-Elemente: Content-Blöcke, Navigation, Widgets
• 📦 Wrapper-Elemente: Container, Backgrounds
• 🔧 Spezifische Elemente: Post Title, Meta Info, etc.

Element-Hierarchie

Breadcrumbs (oben rechts im Inspector):

Zeigt die hierarchische Struktur des gewählten Elements:

Body » Wrapper » Block: Content » Entry Title

Nutzen:

• Schnell zu Parent-Element wechseln
• Verständnis der Verschachtelung
• Vererbung nachvollziehen

Inspector-Modi

Element Tab:

• Styling des aktuell gewählten Elements
• Properties nach Gruppen sortiert
• Live-Preview bei jeder Änderung

States Tab:

• :hover — Element beim Überfahren mit Maus
• :active — Element beim Klick
• :focus — Element bei Fokus (z.B. Formular-Inputs)

🎨 Property-Gruppen

Der Property Inspector organisiert CSS-Properties in thematischen Gruppen:

1. 🔤 Fonts

Schriftarten & Textstyling

Text Shadow:

• Horizontal Offset
• Vertical Offset
• Blur
• Shadow Color

💡 Tipp: Für Site-Wide Font-Änderungen: “Default” oder “Body” Element stylen!

2. 🎨 Background

Hintergründe & Bilder

Beispiel: Full-Width Hero mit Parallax

Background Image: hero.jpg
Background Size: Cover
Background Position: Center Center
Background Behavior: Fixed
Parallax: Enable
Parallax Ratio: 0.5

3. 🖼️ Borders

Rahmen & Linien

Box Model Control:

• 🔒 Lock: Alle Seiten gleich
• 🔓 Unlock: Jede Seite individuell

Beispiel: Feine obere Linie

Border Style: Solid
Border Color: #cccccc
Border Width: Top = 1px, Rest = 0px

4. 🔘 Outlines

Außenlinien (außerhalb des Border)

Ähnlich wie Borders, aber:

• Nehmen keinen Platz ein
• Gut für Fokus-Styles (Accessibilität)
• Können nicht pro Seite gesetzt werden

5. 📏 Padding

Innenabstand (zwischen Content und Border)

Box Model UI:

┌─────────────────┐
│   Padding Top   │
│ P │ Content │ P │  ← P = Padding Left/Right
│   Padding Bot   │
└─────────────────┘

💡 Tipp: Lock-Icon nutzen für gleichmäßiges Padding!

6. 📐 Margins

Außenabstand (außerhalb des Border)

Funktioniert wie Padding, nur außen:

Negative Margins:

• ✅ Erlaubt (z.B. -20px für Overlays)
• Nützlich für spezielle Layouts

7. 🔲 Corners (Rounded Corners)

Abgerundete Ecken

Beispiele:

• Leicht abgerundet: 5px
• Button: 20px
• Kreis: 50% (bei quadratischen Elementen)
• Pill-Shape: 999px

8. 🔲 Box Shadow

Schatten um Elemente

Beispiel: Subtiler Card-Shadow

Horizontal: 0px
Vertical: 2px
Blur: 8px
Spread: 0px
Color: #000000 (Opacity: 10%)

9. ↔️ Nudging

Micro-Positioning

Feinjustierung der Position ohne Layout zu brechen:

Wann nutzen?

• ✅ Fein-Tuning von Icons/Texten
• ✅ Kleine Positionsanpassungen
• ❌ Nicht für große Layout-Änderungen (nutze Grid-Modus!)

10. 📱 Responsive

Geräte-spezifische Anpassungen

Nicht eine Property-Gruppe, sondern ein Kontext-Switch:

Device-Buttons (oben im Editor):

• 🖥️ Desktop: > 1024px
• 📱 Tablet: 768px - 1024px
• 📱 Mobile: < 768px

Workflow:

1. Device-Button wählen
2. Element stylen
3. Änderungen gelten nur für gewähltes Gerät

→ Mehr zu Responsive Design

11. ⚡ Effects

CSS-Transformationen & Effekte

Beispiel: Hover-Animation

Element:
  Transition: all 0.3s ease

Element:hover:
  Transform: scale(1.05)
  Box Shadow: Erhöht

12. 🎬 Animations

CSS-Keyframe-Animationen

Für fortgeschrittene Animationen:

• Fade In/Out
• Slide In
• Bounce
• Custom Keyframes

→ Wird über Custom CSS konfiguriert

🎯 Element-Typen

Default-Elemente

Globale Styling-Basis

💡 Wichtig: Default-Elemente werden von allen Seiten geerbt!

Best Practice:

1. Body stylen: Basis-Font, Farbe, Hintergrund
2. Headings stylen: Hierarchie aufbauen (H1 > H2 > H3)
3. Links stylen: Normal, Hover, Active states

Block-spezifische Elemente

Pro Block-Typ verfügbar

Beispiel: Content-Block

• Entry Title
• Entry Meta
• Entry Content
• Read More Link

Beispiel: Navigation-Block

• Menu Item
• Sub Menu Item
• Active Menu Item

→ Alle Block-Elemente

Wrapper-Elemente

Container-Styling

Wozu?

• Full-Width Backgrounds
• Innere Breiten-Begrenzungen
• Multi-Layer-Effekte

💻 Custom CSS

CSS-Editor

Für fortgeschrittene Anpassungen:

Wo: Design-Modus » Element auswählen » “CSS”-Tab

Features:

• Syntax-Highlighting
• Auto-Completion
• Live-Preview
• Pro Element oder Global

Beispiel: Gradients

background: linear-gradient(
  135deg, 
  #667eea 0%, 
  #764ba2 100%
);

Beispiel: Custom Hover

.my-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

Live CSS

Site-Wide Custom CSS

Wo: Visual Editor » Options Panel » “Live CSS”-Tab

Nutzen:

• Eigene CSS-Klassen
• Vendor-spezifische Properties
• Custom Animations
• Media Queries

Beispiel: Custom Animation

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-element {
  animation: fadeInUp 0.6s ease-out;
}

🎨 Color System

Farbwähler

Features:

• Hex: #FF5733
• RGB: rgb(255, 87, 51)
• RGBA: rgba(255, 87, 51, 0.8) — mit Opacity!
• HSL: hsl(360, 100%, 50%)

Eyedropper:

• Farbe vom Bildschirm aufnehmen
• Aus bestehendem Design kopieren

Color Palette

Häufig verwendete Farben speichern:

1. Farbe wählen
2. “Save to Palette” klicken
3. Wiederverwendbar in allen Elementen

💡 Tipp: Markenfarben in Palette speichern für Konsistenz!

🔄 States stylen

Verfügbare States

:hover — Maus über Element

• Links
• Buttons
• Cards
• Bilder

:active — Klick-Moment

• Buttons
• Links

:focus — Fokussiert (Keyboard/Tab)

• Formular-Inputs
• Buttons
• Links

:visited — Besuchte Links

• Nur für <a>-Tags

State-Workflow

1. Element wählen (z.B. Link)
2. Normal State stylen (Base-Styling)
3. :hover State wählen (oben im Inspector)
4. Hover-spezifische Properties setzen
5. Repeat für andere States

Beispiel: Button-Hover

Normal:
  Background: #3490dc
  Color: #ffffff
  Padding: 12px 24px

:hover:
  Background: #2779bd (dunkler)
  Transform: translateY(-2px)
  Box Shadow: 0 4px 6px rgba(0,0,0,0.2)

💡 Best Practices

1. Von Allgemein zu Spezifisch

✅ Richtige Reihenfolge:

1. Body — Basis-Font, Farbe
2. Default-Elemente — Headings, Paragraphs, Links
3. Wrapper — Container-Styles
4. Blöcke — Block-spezifische Anpassungen
5. Spezifische Elemente — Feintuning

❌ Falsch:

• Einzelne Elemente stylen, ohne Basis zu setzen
• Überall individuelle Styles, keine Konsistenz

2. Konsistentes Spacing

Spacing-Scale nutzen:

4px  — Minimal (Icon-Padding)
8px  — Small (Between Elements)
16px — Medium (Paddings)
24px — Large (Section Spacing)
32px — XL (Wrapper Padding)
48px — XXL (Section Margins)

Vorteil: Harmonisches, professionelles Design

3. Typografie-Hierarchie

Heading-Größen progressiv:

H1: 36px — Hauptüberschrift
H2: 28px — Sektionsüberschrift
H3: 22px — Untertitel
H4: 18px — Kleine Überschrift
H5: 16px — Label
H6: 14px — Caption
Body: 16px — Fließtext (Basis)

Line Heights:

• Headings: 1.2-1.3
• Body Text: 1.6-1.8

4. Farb-Konsistenz

Brand Color Palette:

• Primary: Haupt-Call-to-Action
• Secondary: Akzente
• Neutral: Grautöne (Text, Borders)
• Success: Grün (Bestätigungen)
• Warning: Gelb/Orange (Warnungen)
• Error: Rot (Fehler)

60-30-10 Regel:

• 60% Neutral/Background
• 30% Primary
• 10% Accent/Secondary

5. States nicht vergessen

Checklist für alle interaktiven Elemente:

• ✅ Normal State
• ✅ Hover State (visuelles Feedback!)
• ✅ Active State
• ✅ Focus State (Accessibilität!)

🆘 Häufige Probleme

Änderungen werden nicht sichtbar

Mögliche Ursachen:

1. Höhere Spezifität: Anderes CSS überschreibt dein Styling
   • Lösung: Custom CSS mit !important oder spezifischere Selektoren
2. Cache: Browser zeigt alte Version
   • Lösung: Cache leeren, Strg+F5
3. Falsches Element gewählt: Du stylst ein Parent statt Child
   • Lösung: Element-Hierarchie (Breadcrumbs) prüfen

Farben sehen anders aus

Ursachen:

1. Opacity: Transparenz macht Farben heller/dunkler
2. Parent-Background: Durchscheinend durch transparente Elemente
3. Monitor-Kalibrierung: Unterschiedliche Geräte

Lösung:

• Farbwerte mit 100% Opacity testen
• Auf mehreren Geräten prüfen
• Hex-Werte dokumentieren

Hover funktioniert nicht auf Mobile

Grund: Touch-Geräte haben kein “Hover”-Konzept

Lösungen:

• Focus-State statt Hover auf Mobile
• Touch-Event-spezifisches Styling
• Active-State für Touch nutzen

CSS-Trick:

@media (hover: hover) {
  /* Hover nur auf Geräten mit Maus */
  .element:hover {
    background: blue;
  }
}

Fonts laden nicht

Ursachen:

1. Google Fonts: DSGVO-Einstellungen
2. Custom Fonts: Falsche Dateipfade
3. Font-Family-Name: Falsch geschrieben

Lösung:

1. Dashboard » Optionen » Fonts: Google Fonts aktiviert?
2. Custom Fonts: In /wp-content/themes/ps-padma/assets/fonts/ hochladen
3. Font-Name: Exakt wie in Font-Datei

🔗 Siehe auch

• 🎨 Visual Editor Übersicht
• 🧱 Grid-Modus
• 📱 Responsive Design
• 🧩 Blöcke
• ⚙️ Optionen

📚 Weiterführende Themen

• CSS Customization (folgt bald)
• Advanced Animations (folgt bald)
• Typography Best Practices (folgt bald)
• Color Theory (folgt bald)

Navigation:

• ← Grid-Modus
• Responsive Design →