TemplateStudio Benutzerhandbuch

1. Installation

Erforderlich sind WordPress 6.4 oder neuer und PHP 7.4 oder neuer. Für HTML-Import muss PHP DOM, für ZIP-Import ZipArchive vorhanden sein. Bei einer normalen WordPress-Installation ist das meist bereits der Fall.

2. Ersteinrichtung

Beim ersten Start erscheint ein kurzer Drei-Schritt-Assistent. Gleichzeitig legt TemplateStudio einmalig die vollständige Startbibliothek an.

3. Header, Templates, Footer und Komponenten verwalten

Unter TemplateStudio → Bibliotheken wechselst du über die Reiter zwischen den fünf unabhängigen Typen. Jede Karte bietet:

• Bearbeiten: öffnet den visuellen Editor.
• Duplizieren: erzeugt einen Entwurf, damit das Original erhalten bleibt.
• Export: lädt ein strukturiertes APlug-Paket herunter.
• Neu erstellen: beginnt mit einem leeren, sicheren Dokument.

Eine Seite kann beispielsweise den Header „Sticky Business“, das Template „Dienstleistung“ und den Footer „Kontaktstark“ verwenden. Eine Änderung am Header wirkt auf alle Seiten, denen genau dieser Header zugewiesen wurde. Lokale Inhaltseinstellungen bleiben davon getrennt.

4. Der visuelle Editor

Beim direkten Aufruf von Visueller Editor erscheint zuerst eine Auswahl der zuletzt bearbeiteten Vorlagen sowie Neue Vorlage erstellen und Template importieren. Nach dem Öffnen einer Vorlage startet der Editor im geführten Modus Einfach. Die vier Arbeitsschritte stehen direkt oberhalb des Editors: Baustein hinzufügen, Element anklicken, rechts anpassen und speichern.

Der Editor besteht aus drei klaren Bereichen:

1. Links – Bausteine und Struktur: Elemente hinzufügen, anklicken und durch Ziehen sortieren.
2. Mitte – Vorschau: eine isolierte Darstellung, damit Theme-CSS den Editor nicht verfälscht.
3. Rechts – Hier bearbeiten: verständliche Inhalts- und Designfelder für das gewählte Element.

Mit Erweitert erscheinen alle zusätzlichen Bausteine, Revisionen, Zoom, Vollbild, responsive Detailabstände, CSS-Klasse und Zugangsregeln. Der Modus wird für den Browser gemerkt und verändert keine Template-Daten.

Element hinzufügen

Im Einfach-Modus genügt ein Klick auf einen Schnellbaustein. Ist ein Abschnitt, Inhaltsbereich, Spalten- oder Spaltenelement ausgewählt, wird das neue Element darin eingefügt; sonst am Dokumentende. Im erweiterten Modus stehen unter Weitere Bausteine sämtliche Typen bereit.

Bild hochladen

Der Button Bild hochladen ist ständig oben in der Werkzeugleiste sowie links bei den Schnellbausteinen sichtbar. Er öffnet die WordPress-Mediathek mit den Reitern zum Hochladen und Auswählen. Nach der Auswahl wird das Bild sofort eingefügt und rechts können Alternativtext sowie Bildunterschrift bearbeitet werden. Bei fehlender Mediathek oder fehlender WordPress-Uploadberechtigung zeigt der Editor eine konkrete Meldung statt eines wirkungslosen Buttons.

Typische Inhalte

Überschrift, Text, Bild, Galerie, Button, Liste, Abstand, Trennlinie, Menü, Website-Logo, Icon, sicheres HTML, Shortcode, Formularplatzhalter, verknüpfte Komponente, geschützter Download und vorhandener WordPress-Inhalt sind enthalten.

Speichern und Wiederherstellen

• Speichern hält den aktuellen Entwurf fest.
• Veröffentlichen macht das Bibliothekselement für Block, Shortcode und Zuweisung verfügbar.
• Undo/Redo arbeitet innerhalb der laufenden Editorsitzung.
• Autosave speichert standardmäßig alle 45 Sekunden, wenn Änderungen vorliegen.
• Revisionen stehen im erweiterten Modus bereit und stellen frühere Dokumentstände wieder her; vor dem Wiederherstellen wird der aktuelle Stand nochmals gesichert.

5. Globales und lokales Design

Global

Unter TemplateStudio → Globales Design stellst du Primär-, Sekundär- und Akzentfarbe, Flächen, Text, Überschriften, Links, Buttons, Rahmen, Schriften, Inhaltsbreite, Abstände und Rundungen ein. Schriftgrößen werden getrennt für Desktop, Tablet und Mobil gepflegt.

Lokale WOFF/WOFF2-Schriften können über eine URL der eigenen Website eingebunden werden. Fremde Font-Hosts werden aus Datenschutzgründen nicht als lokale Schrift akzeptiert.

Lokal

Im rechten Inspector kann jedes Element globale Werte gezielt überschreiben: Hintergrund, Textfarbe, Breite, Schriftgröße, Rundung, Spalten, Abstand und eigene CSS-Klasse. Innen-/Außenabstände, Schriftgröße und Sichtbarkeit können pro Gerät gesetzt werden.

Kontrast

Bei schwachem Kontrast zeigt der Editor eine Empfehlung. Er ändert Farben nie ungefragt. Im globalen Design wird der aktuelle Kontrast als Verhältnis angezeigt.

6. Bestehende WordPress-Seiten

Unter Seiten & Zuweisung zeigt A/B/C prüfen die technische Kompatibilität:

Im Studio bearbeiten erzeugt bei A/B einen neuen Template-Entwurf. Die Originalseite wird nicht verändert. Arbeitskopie dupliziert die WordPress-Seite als Entwurf.

7. Header, Inhalt und Footer zuweisen

In der Seitenübersicht wählst du pro Seite Header, Inhaltsvorlage, Footer und Modus:

• Theme: Ausgabe innerhalb des aktiven Themes.
• Landingpage: vollständige Canvas-Ausgabe mit TemplateStudio-Header und -Footer.

Vor jeder Zuweisung speichert TemplateStudio eine Momentaufnahme und eine WordPress-Revision. Der vorhandene Seiteninhalt bleibt in der Datenbank. Das Element „WordPress-Inhalt“ kann ihn innerhalb einer Vorlage platzieren.

Für mehrere Seiten setzt du die Häkchen, wählst die Kombination oben und klickst Auf Auswahl anwenden. Jede Seite erhält eine eigene Sicherung.

8. Seiten und Unterseiten erzeugen

Gliederung

Leistungen
  Beratung
    Erstgespräch
  Umsetzung
Über uns
Kontakt

Zwei Leerzeichen oder ein Tab bedeuten eine Hierarchieebene. Ein einzelner Titel erzeugt eine einzelne Seite; viele Zeilen erzeugen viele Seiten.

CSV

Spalten: Titel,Slug,Eltern-Referenz,Status,Template-ID. Eine Beispieldatei liegt unter docs/CSV-BEISPIEL.csv.

Ablauf

1. Struktur eingeben und Format wählen.
2. Status, Konfliktverhalten, Template und Darstellungsmodus einstellen.
3. Vorschau & Konflikte prüfen.
4. Erst dann Seiten jetzt erstellen.

Die Verarbeitung läuft in kleinen Schritten und zeigt Fortschritt. Sie kann abgebrochen werden. Gesamten Vorgang rückgängig verschiebt neu erstellte Seiten in den Papierkorb und stellt aktualisierte Seiten aus ihren Momentaufnahmen wieder her.

Konflikte können übersprungen, mit eindeutiger URL neu angelegt oder nach Sicherung aktualisiert werden. „Überspringen“ ist der sichere Standard.

9. Import und Export

Import

Unter Import & Export werden APlug/JSON, HTML und ZIP akzeptiert. Das System prüft Dateigröße, Pfade, Dateianzahl und Servercode. HTML wird über ein echtes Dokumentmodell gelesen. Externe Ressourcen werden aufgelistet, nicht automatisch heruntergeladen.

Ein fremdes Template bleibt vollständig im Editor aufrufbar und bearbeitbar, auch wenn Skripte gefunden wurden. Der grüne Sicherheitsstatus bedeutet nur, dass der fremde Code nicht ausgeführt wird. Unter Details → Importierten Code bearbeiten können externe Skriptadressen und Inline-Code separat bearbeitet werden. Beim Speichern einer Codeänderung bleibt die Ausführung automatisch deaktiviert. Nur Administratoren mit besonderer Berechtigung können sie nach Quellcode-, Herkunfts- und Datenschutzprüfung ausdrücklich aktivieren; die Entscheidung wird protokolliert.

Export

In der Bibliothek lädt Export Dokument, Typ, Titel und Sichtbarkeit als versioniertes APlug-Paket. Passwörter oder fremde Zugangsdaten werden nicht exportiert.

10. Zugangsstufen

Unter TemplateStudio → Zugänge heißen die drei Stufen standardmäßig Basis, Plus und Premium. Die Namen sind frei änderbar; höhere Stufen enthalten standardmäßig niedrigere. Die Stufe eines Benutzers wird in dessen WordPress-Profil zusammen mit Status sowie optionalem Start-/Ablaufdatum gepflegt.

Im Inspector kann ein gesamtes Dokument oder einzelnes Element sichtbar sein für: alle, angemeldete Benutzer, Stufe 1+, 2+, 3 oder ausgewählte Stufen. Bei fehlendem Zugang sind Ausblenden, Hinweis, Login, Teaser, Ersatzinhalt, Infoseite oder Upgrade-Hinweis möglich.

Downloads verwenden eine signierte URL und werden beim Abruf nochmals auf dem Server geprüft. Das Plugin wickelt keine Zahlung ab.

11. Gutenberg-Block und Shortcode

Gutenberg

1. Seite im Block-Editor öffnen.
2. Block APlug TemplateStudio einfügen.
3. Rechts eine veröffentlichte Inhaltsvorlage auswählen.

Shortcode

[aplug_template id="123"] – dabei 123 durch die ID der veröffentlichten Vorlage ersetzen.

12. Sicherheit, Datenschutz und Barrierefreiheit

• Keine Telemetrie und keine Übertragung von Templates an APlug.
• Nonce-, Rollen- und Rechteprüfung für Verwaltung und REST.
• Serverseitige Zugriffskontrolle für Inhalte und Downloads.
• Gesäubertes HTML, validierte URLs, Farben, Wertebereiche und Klassen.
• Responsive Menüs mit zugänglichem Schalter, Sprunglink im Canvas und Screenreader-Texte.
• Alternativtext-Feld für Bilder und Kontrastwarnung.
• Reduzierte Animation bei entsprechender Systemeinstellung.

Externe Links, eigene Schrift-URLs und ausdrücklich aktivierte Importskripte müssen durch den Website-Verantwortlichen datenschutzrechtlich geprüft werden.

13. Update, Migration und Deinstallation

Updates führen versionierte, wiederholbare Migrationen aus und erhalten Seiten, Vorlagen, Header, Footer, Komponenten, Zuweisungen, Design und Zugänge. Vor jedem Update wird trotzdem eine vollständige WordPress-Sicherung empfohlen.

Bei einer normalen Deinstallation bleiben Daten erhalten. Nur wenn unter Einstellungen die endgültige Datenlöschung vorher ausdrücklich aktiviert wurde, entfernt uninstall.php Inhalte, Optionen und Fähigkeiten.

14. Fehlerbehebung und Grenzen

• Editor lädt nicht: Die sichtbare Fehlermeldung notieren und Erneut versuchen anklicken. Der Skript-Sicherheitsstatus blockiert das Öffnen nicht.
• Import geht nicht: PHP DOM/ZipArchive und Größenlimit prüfen.
• Template erscheint nicht im Block: Vorlage veröffentlichen.
• Bild fehlt: gültige Mediathek-ID oder lokale HTTPS-URL wählen.
• Theme sieht anders aus: echte Seitenvorschau prüfen oder Landingpage-Modus verwenden.
• Formular sendet nicht: der Designbaustein benötigt ein kompatibles Formular-Plugin.
• Builder-Seite Stufe C: im Originalbuilder bearbeiten; TemplateStudio nimmt keine proprietäre Struktur auseinander.

Weitere technische Details stehen in ENTWICKLER.md, Sicherheitsinformationen in SICHERHEIT-DATENSCHUTZ.md und bekannte Grenzen in BEKANNTE-EINSCHRAENKUNGEN.md.