Anleitung: Designvorlagen & Themes

🎯 Grundlagen: Was sind Designvorlagen?

Vollständige Design-Pakete

Designvorlagen sind komplette Erscheinungsbilder Ihrer Website, die Sie speichern und bei Bedarf mit einem Klick aktivieren können. Jedes Design enthält alle Farben, Bilder, Container und Navigationseinstellungen.

🎨

Komplette Designs

Speichern Sie verschiedene Looks für verschiedene Anlässe oder Jahreszeiten

✏️

Einfache Bearbeitung

Ändern Sie Farben, Bilder und Layouts für jedes gespeicherte Design

👁️

Vorschau-Funktion

Testen Sie Designs, bevor Sie sie für alle Besucher aktivieren

🔄

Schneller Wechsel

Wechseln Sie mit einem Klick zwischen verschiedenen Designs

Was wird gespeichert?

Jedes Design speichert vollständig alle Einstellungen:

Hintergrund (Gradient, Bild oder Farbe)
Banner-Einstellungen (Text, Glow, Bild)
Container-Layout und alle Inhalte
Navigation (Farben, Schriftgröße, Menüpunkte)
Laufschrift-Einstellungen
Alle Bilder und Uploads
Wrapper- und Rahmen-Einstellungen

Perfekt für saisonale Designs

Erstellen Sie Designs für Weihnachten, Halloween, Sommer, etc. und wechseln Sie sie je nach Jahreszeit oder Anlass!

🚀 Neue Designvorlage erstellen

1

Tab öffnen

Wechseln Sie zum Tab Designvorlagen (Tab 7)

2

Namen vergeben

Geben Sie einen beschreibenden Design-Namen ein

3

Vorlage wählen

Optional: Wählen Sie eine bestehende Vorlage

4

Speichern

Klicken Sie auf Design speichern

Design-Namen vergeben

Wählen Sie aussagekräftige Namen für Ihre Designs:

Beschreibend: "Weihnachtsdesign", "Sommerlook", "Dunkles Theme"
Eindeutig: Vermeiden Sie generische Namen wie "Design1"
Praktisch: Namen, an die Sie sich später erinnern können

Beispiele:

🎄 Weihnachtsdesign
🎃 Halloween-Special
🌞 Sommer-Frische
🌙 Dunkles-Nacht-Theme
🚀 Modern-Clean

Vorlagen nutzen

Sparen Sie Zeit mit Vorlagen:

Aktuelle Konfiguration: Speichert Ihr aktuelles Design
Bestehende Designs: Nutzen Sie vorhandene als Basis
Bearbeitete Designs: Auch Designs im Bearbeitungsmodus

Tipp: Erstellen Sie ein "Basis-Design" und verwenden Sie es als Vorlage für alle weiteren Designs.

Strategie für Design-Erstellung

Beginnen Sie mit einem vollständig konfigurierten Basis-Design. Erstellen Sie davon abgeleitete Designs für spezielle Anlässe, indem Sie nur die notwendigen Änderungen vornehmen (Farben, Bilder, etc.).

✏️ Designs bearbeiten

Bearbeitungsmodus starten

Klicken Sie in der Designliste auf Bearbeiten. Sie erkennen den Bearbeitungsmodus am orangefarbenen Banner oben:

🔶 Sie bearbeiten das Design: Weihnachtsdesign
| Zurück zur Designübersicht | Bearbeitungsmodus beenden |

Im Bearbeitungsmodus gelten alle Änderungen nur für dieses spezifische Design!

Design anpassen

Nutzen Sie die verschiedenen Tabs zur Gestaltung:

Hintergrund & Banner: Grundlegendes Design
Container: Inhalte und Layout anpassen
Navigation: Menü und Buttons gestalten

Alle Änderungen werden automatisch dem aktuellen Design zugeordnet.

Design-spezifische Uploads

Jedes Design hat sein eigenes Upload-Verzeichnis: uploads/DESIGNNAME/

Das bedeutet:

Bilder werden design-spezifisch gespeichert
Keine Konflikte zwischen verschiedenen Designs
Automatische Organisation der Dateien

Wichtig: Bearbeitungsmodus beachten

Solange der orangefarbene Banner sichtbar ist, bearbeiten Sie ein spezifisches Design. Um zum normalen Modus zurückzukehren, klicken Sie auf "Bearbeitungsmodus beenden" oder "Zurück zur Designübersicht".

🔧 Design-Verwaltung

👁️ Vorschau anzeigen

Design testen ohne Aktivierung

Klicken Sie auf Vorschau in der Designliste:

Öffnet die Vorschau-Seite in neuem Tab
Zeigt das Design in Aktion
Ändert NICHT das aktive Design
Perfekt zum Testen vor der Aktivierung

URL: preview.php?preview_design=DESIGNNAME

🔄 Design aktivieren

Design live schalten

Klicken Sie auf Aktivieren in der Designliste:

Das Design wird sofort auf der Hauptseite aktiv
Alle Besucher sehen das neue Design
Das vorherige Design bleibt gespeichert
Wechsel ist sofort sichtbar

Technisch: Wird in config.json als active_design gespeichert.

📋 Als Vorlage nutzen

Bestehende Designs wiederverwenden

Klicken Sie auf Als Vorlage nutzen:

Füllt automatisch das Vorlagen-Feld aus
Springt zum Erstellungsformular
Setzt den Fokus auf das Namensfeld
Spart Zeit bei ähnlichen Designs

🗑️ Design löschen

Unerwünschte Designs entfernen

Klicken Sie auf Löschen in der Designliste:

Entfernt das Design permanent
Löscht die Design-Konfiguration
Design-spezifische Uploads bleiben erhalten
Bestätigungsdialog verhindert versehentliches Löschen

Achtung beim Löschen!

Gelöschte Designs können nicht wiederhergestellt werden! Stellen Sie sicher, dass Sie das Design nicht mehr benötigen.

💡 Tipps & Best Practices

Design-Strategie entwickeln

Erstellen Sie ein konsistentes Basis-Design
Planen Sie saisonale Wechsel im Voraus
Testen Sie Designs mit der Vorschau-Funktion
Halten Sie Backup-Kopien wichtiger Designs

Effiziente Design-Erstellung

Nutzen Sie Vorlagen für ähnliche Designs
Speichern Sie Zwischenversionen mit aussagekräftigen Namen
Testen Sie auf verschiedenen Geräten und Browsern
Behalten Sie eine übersichtliche Anzahl an Designs

🎯 Typische Anwendungsfälle

1. Saisonale Designs:
🎄 Weihnachtsdesign (Dezember)
🎃 Halloween (Oktober)
🌞 Sommer-Frische (Juni-August)
🍂 Herbstlich (September-November)

2. Spezielle Anlässe:
🎂 Geburtstags-Special
🚀 Produkt-Launch
🏆 Gewinnspiel-Aktion
📢 Wichtige Ankündigung

3. Design-Varianten:
🌙 Dunkles Theme (Abends/Nacht)
☀️ Helles Theme (Tagsüber)
🎨 Kreativ-Modus
📱 Mobile-Optimiert

⚙️ Technische Optimierung

Performance-Tipps

Bilder optimieren: Komprimieren Sie Bilder vor dem Upload
Designs bereinigen: Löschen Sie ungenutzte Designs
Upload-Ordnung: Jedes Design hat eigenen Upload-Ordner
Regelmäßige Backups: Sichern Sie die designs.json Datei

❓ Häufig gestellte Fragen

Kann ich Designs zwischen verschiedenen Installationen übertragen?

Ja, durch Kopieren der designs.json Datei und der entsprechenden Upload-Verzeichnisse. Achten Sie auf konsistente Pfade und Berechtigungen.

Wie viele Designs kann ich erstellen?

Es gibt keine technische Begrenzung! Aus Performance- und Übersichtlichkeitsgründen empfehlen wir maximal 10-15 Designs.

Werden gelöschte Designs komplett entfernt?

Die Design-Konfiguration wird aus designs.json entfernt, aber die Upload-Verzeichnisse (uploads/DESIGNNAME/) bleiben erhalten. Diese können manuell gelöscht werden.

Kann ich ein Design umbenennen?

Nicht direkt. Erstellen Sie ein neues Design mit dem gewünschten Namen (mit der alten Version als Vorlage) und löschen Sie dann das alte Design.

Was passiert mit aktiven Designs bei Updates?

Designs sind von System-Updates unabhängig. Bei größeren Änderungen am System sollten Sie jedoch wichtige Designs vorher sichern.

Können mehrere Designs gleichzeitig aktiv sein?

Nein, immer nur ein Design kann aktiv sein. Die Hauptseite (index.php) zeigt das in config.json definierte active_design an.

🔄 Optimaler Design-Workflow

Professioneller Design-Management

1

Basis erstellen

Entwickeln Sie ein vollständiges Basis-Design

2

Vorlagen nutzen

Erstellen Sie spezielle Designs aus dem Basis-Design

3

Vorschau testen

Nutzen Sie die Vorschau vor der Aktivierung

4

Aktivieren

Schalten Sie getestete Designs live

Backup-Strategie

Sichern Sie regelmäßig:

designs.json: Enthält alle Design-Konfigurationen
config.json: Speichert das aktive Design
uploads/ Verzeichnis: Alle design-spezifischen Bilder

🔧 Fehlerbehebung

Problem: Design wird nicht angezeigt

Mögliche Ursachen:

Design wurde nicht aktiviert (prüfen Sie config.json)
JSON-Syntaxfehler in designs.json
Fehlende Dateiberechtigungen

Problem: Bilder werden nicht geladen

Mögliche Ursachen:

Upload-Verzeichnis existiert nicht
Falsche Dateiberechtigungen
Bildpfade wurden nicht korrekt gespeichert

Problem: Design lässt sich nicht löschen

Mögliche Ursachen:

Design ist aktuell aktiv (erst anderes Design aktivieren)
Dateiberechtigungen für designs.json

🎯 Schnellstart-Guide

In 5 Minuten zum ersten Design

Schritt 1: Basis-Design erstellen

Konfigurieren Sie Ihre Seite wie gewünscht und speichern Sie sie als "Basis-Design".

Schritt 2: Saisonales Design anlegen

Nutzen Sie "Basis-Design" als Vorlage und erstellen Sie "Weihnachtsdesign". Ändern Sie nur die Farben und Bilder.

Schritt 3: Vorschau testen

Klicken Sie auf "Vorschau" für "Weihnachtsdesign" und prüfen Sie das Ergebnis.

Schritt 4: Design aktivieren

Klicken Sie auf "Aktivieren" - fertig! Ihre Seite zeigt jetzt das Weihnachtsdesign. 🎉

Einfache Rückkehr

Um zum Basis-Design zurückzukehren, aktivieren Sie einfach wieder "Basis-Design". Alle speziellen Designs bleiben gespeichert!