🎨 Visual Editor

Der Visual Editor ist das Herzstück von PS Padma. Hier gestaltest du deine Website visuell — ohne Code, mit voller Kontrolle über Design und Layout.

📍 Wo finde ich den Visual Editor?

Dashboard » PS Padma » Visual Editor

Oder direkt: /wp-admin/admin.php?page=padma-visual-editor

🎯 Was ist der Visual Editor?

Der PS Padma Visual Editor ist ein Drag-and-Drop Page Builder, der direkt in WordPress/ClassicPress integriert ist:

• ✅ Kein separates Plugin nötig
• ✅ Zwei Modi: Grid (Struktur) & Design (Styles)
• ✅ Live-Vorschau: Siehst sofort, was du änderst
• ✅ Template-basiert: Layouts gelten für mehrere Seiten
• ✅ Responsive: Mobile, Tablet, Desktop

🔀 Die zwei Editor-Modi

1. 🧱 Grid-Modus

Strukturieren & Bauen

Hier legst du das Layout-Grundgerüst fest:

• Wrappers (Container/Zeilen)
• Blöcke (Content-Elemente)
• Grid-Spalten (Responsive Struktur)
• Reihenfolge (Drag & Drop)

→ Grid-Modus Dokumentation

2. 🎨 Design-Modus

Stylen & Gestalten

Hier gibst du deinem Layout den visuellen Feinschliff:

• Fonts (Schriftarten, Größen, Weights)
• Farben (Text, Hintergründe, Borders)
• Abstände (Margins, Paddings)
• Effekte (Shadows, Borders, Transitions)

→ Design-Modus Dokumentation

🖥️ Editor-Oberfläche

Der Visual Editor besteht aus drei Hauptbereichen:

Links: Layout-Selector

Was ist das? Zeigt alle verfügbaren Layouts deiner Website:

• 🏠 Homepage (Front Page)
• 📄 Einzelseiten (Pages)
• 📝 Blog-Posts (Post Types)
• 📁 Archive (Kategorien, Tags)
• 🔍 Suche, 404, etc.

Funktionen:

• Layout wählen zum Bearbeiten
• Neues Layout erstellen
• Layout-Hierarchie (Parent/Child)

→ Layout-System Dokumentation

Mitte: Live-Preview (iFrame)

Was ist das? Echtzeit-Vorschau deiner Website:

• Zeigt dein Layout 1:1, wie es Besucher sehen
• Im Grid-Modus: Sichtbare Grid-Linien, Hover-Effekte
• Im Design-Modus: Klickbare Elemente zum Stylen

Interaktionen:

• Hover: Zeigt Element-Namen
• Klick: Öffnet Einstellungen
• Drag & Drop: Blöcke verschieben (Grid-Modus)
• Responsive Preview: Gerätegrößen wechseln

Rechts: Options Panel

Was ist das? Das Einstellungs-Panel — ändert sich je nach Kontext:

Im Grid-Modus:

• Block-Einstellungen
• Wrapper-Einstellungen
• Grid-Setup
• Layout-Optionen

Im Design-Modus:

• Property Inspectors (Farbe, Font, etc.)
• Element-Selektoren
• CSS-Anpassungen
• Responsive Settings

→ Options Panel Dokumentation

🚀 Quick Start: Deine erste Seite

Schritt 1: Layout wählen

1. Visual Editor öffnen
2. Layout-Selector (links): Gewünschtes Layout wählen
3. z.B. “Homepage” oder “Einzelseiten » Beispielseite”

Schritt 2: Grid-Modus aktivieren

1. Oben: “Grid”-Tab klicken
2. Jetzt siehst du Grid-Linien und Wrappers

Schritt 3: Wrapper hinzufügen

1. ”+ Wrapper”-Button klicken
2. Wrapper wird am Ende hinzugefügt
3. Per Drag & Drop Position ändern

Schritt 4: Block hinzufügen

1. ”+ Block” im Wrapper klicken
2. Block-Typ wählen (z.B. “Content” oder “Image”)
3. Block erscheint im Wrapper

Schritt 5: Block konfigurieren

1. Auf Block klicken
2. Options Panel (rechts): Einstellungen anpassen
3. z.B. bei Content-Block: Post Content, Excerpt, etc.

Schritt 6: Design anpassen

1. Oben: “Design”-Tab klicken
2. Element im iFrame klicken
3. Property Inspector (rechts): Farben, Fonts, etc. ändern

Schritt 7: Speichern

1. “Save”-Button (oben rechts)
2. ✅ Änderungen sind live!

📋 Visual Editor Bereiche

🧱 Grid-Modus

Strukturierung & Layout-Aufbau:

• Wrappers & Container
• Blöcke hinzufügen
• Grid-System
• Drag & Drop

🎨 Design-Modus

Styling & Visuelle Gestaltung:

• Element-Selektor
• Property Inspectors
• CSS Customization
• Responsive Design

📐 Layout-System

Layout-Hierarchie & Vererbung:

• Layout-Typen
• Layout-Hierarchie
• Template Inheritance
• Customized vs. Mirrored

🧩 Blöcke

Alle verfügbaren Content-Blöcke:

• Standard-Blöcke
• Advanced Blöcke
• Block-Optionen

🎓 Konzepte verstehen

Was ist ein Layout?

Ein Layout ist eine Design-Vorlage für einen bestimmten Seitentyp:

• Homepage: Nur für die Startseite
• Einzelseiten: Für alle Pages
• Einzelseiten » Kontakt: Nur für die “Kontakt”-Seite
• Blog-Posts: Für alle Post-Artikel

Vererbung: Child-Layouts erben von Parent-Layouts (z.B. “Kontakt” erbt von “Einzelseiten”).

→ Mehr zu Layouts

Was ist ein Wrapper?

Ein Wrapper ist eine horizontale Container-Zeile:

• Umschließt Blöcke
• Definiert Breite (fluid vs. fixed)
• Hat eigenes Grid-System
• Kann Hintergrund, Border, Padding haben

Beispiel-Struktur:

Wrapper 1 (Header)
  └─ Block: Logo, Navigation

Wrapper 2 (Content)
  └─ Block: Content, Sidebar

Wrapper 3 (Footer)
  └─ Block: Footer-Text, Social Icons

→ Mehr zu Wrappers

Was ist ein Block?

Ein Block ist ein Content-Element innerhalb eines Wrappers:

• Content-Block: Zeigt Post/Page-Inhalt
• Image-Block: Zeigt Bilder
• Navigation-Block: Zeigt Menüs
• Custom Code-Block: Eigener HTML/PHP-Code
• Viele weitere…

→ Alle Blöcke

Grid-System

PS Padma nutzt ein flexibles Spalten-Grid:

• Standard: 12 Spalten
• Anpassbar pro Wrapper
• Blöcke belegen X Spalten
• Automatisches Responsive Verhalten

Beispiel:

• Block 1: 8 Spalten (Hauptcontent)
• Block 2: 4 Spalten (Sidebar)
• Zusammen: 12 Spalten = 100% Breite

→ Grid-System Details

💡 Best Practices

1. Layout-Hierarchie nutzen

✅ Gut:

• “Einzelseiten” für alle Pages stylen
• “Einzelseiten » Kontakt” nur für spezielle Anpassungen

❌ Schlecht:

• Jede Seite einzeln anpassen
• Keine Vererbung nutzen

Vorteil: Änderungen am Parent wirken auf alle Child-Layouts.

2. Sinnvolle Wrapper-Struktur

✅ Gut:

Header-Wrapper
Content-Wrapper
Footer-Wrapper

❌ Schlecht:

Wrapper 1
Wrapper 2
Wrapper 3
Wrapper 4
Wrapper 5

Tipp: Wrapper benennen! (Grid-Modus » Wrapper » Einstellungen » Alias)

3. Design-Modus sinnvoll nutzen

✅ Effizient:

• Globale Styles zuerst (Headings, Body-Text, Links)
• Dann spezifische Elemente

❌ Ineffizient:

• Jedes Element einzeln stylen
• Keine Konsistenz

Trick: “Default” und “Global” Elemente nutzen für site-wide Styles.

4. Speichern, Speichern, Speichern

• ✅ Regelmäßig während der Arbeit speichern
• ✅ Vor großen Experimenten: Snapshot erstellen
• ✅ Änderungen testen, bevor du weitermachst

Auto-Save: PS Padma speichert automatisch, aber nicht nach jeder Änderung!

🔄 Workflow-Tipps

Typischer Workflow

1. Grid-Modus: Struktur aufbauen (Wrappers, Blöcke)
2. Grid-Modus: Grid anpassen (Spalten, Breiten)
3. Design-Modus: Globale Styles setzen (Fonts, Farben)
4. Design-Modus: Spezifische Elemente anpassen
5. Speichern & Testen: In verschiedenen Browsern/Geräten
6. Wiederholen: Iterativ verfeinern

Responsive Design Workflow

1. Desktop-Ansicht: Haupt-Design erstellen
2. Tablet-Ansicht: Anpassungen für mittlere Bildschirme
3. Mobile-Ansicht: Mobile-optimiertes Layout
4. Testen: Alle Breakpoints durchgehen

→ Responsive Design Details

🆘 Häufige Probleme

Visual Editor lädt nicht

Symptome:

• Weißer Bildschirm
• Endloses Laden
• JavaScript-Fehler

Lösungen:

1. Cache leeren: Tools » Cache leeren
2. Browser-Cache: Strg+F5
3. Plugins deaktivieren: Konflikte prüfen
4. Memory Limit: Mind. 256M (System-Info prüfen)

Änderungen werden nicht gespeichert

Prüfen:

1. Gibt es eine Fehlermeldung?
2. Browser-Konsole: F12 » Console-Tab
3. PHP-Limits: Post Max Size ausreichend?
4. Berechtigungen: Schreibrechte für Datenbank?

Quick-Fix:

• Cache leeren
• Browser neu laden
• Nochmal speichern

Block lässt sich nicht verschieben

Mögliche Ursachen:

1. Falsch zugeordnet: Block gehört zu anderem Wrapper
2. Grid-Konflikt: Keine Spalten frei
3. JavaScript-Fehler: Browser-Konsole checken

Lösung:

• Block in neuen Wrapper verschieben
• Grid-Einstellungen anpassen
• Browser neu laden

🔗 Siehe auch

• 📋 Dashboard — Templates, Optionen, Tools
• 🧩 Blöcke — Alle Content-Blöcke
• 🏠 Zurück zur Dokumentation

📚 Weiterführende Themen

• Grid-Modus im Detail
• Design-Modus im Detail
• Layout-Hierarchie verstehen
• Responsive Design
• Advanced Techniken (folgt bald)

Navigation:

• 🏠 Dokumentations-Übersicht
• Grid-Modus →