Anleitung: Unterseiten & Seitenverwaltung

🎯 Grundlagen: Was sind Unterseiten?

Neues Container-Reihen System

Unterseiten verwenden jetzt das gleiche leistungsstarke Container-System wie die Hauptseite. Jede Seite besteht aus Reihen (Rows) mit bis zu drei Containern (Links, Mitte, Rechts).

Reihen-basiertes Layout

Jede Unterseite besteht aus beliebig vielen Reihen:

Reihen: Horizontale Abschnitte der Seite
3-Positionen pro Reihe: Links, Mitte, Rechts
Flexible Container: Jede Position kann einen eigenen Container-Typ haben
Vollständige Design-Kontrolle: Jeder Container hat eigene Einstellungen

Vollständige Design-Unabhängigkeit

Jede Unterseite hat ihre eigenen Einstellungen für:

Seiten-Überschrift: Mit Größe, Farbe und Hintergrundbild
Container-Hintergründe: Transparent, Farbe oder animierter Gradient
Effekte & Rahmen: Glow, Dual-Glow, Border-Bilder
Text-Formatierung: Schriftarten, Größen, Farben und Spezialeffekte

Flexible URL-Struktur

Unterseiten sind unter eigenen URLs erreichbar: page.php?name=SEITENNAME

Perfekt für:

Kontaktseiten
Impressum & Datenschutz
Produktseiten
Spezielle Angebote
Blog-Beiträge
Teamvorstellungen

Keine Einschränkungen

Sie können beliebig viele Unterseiten erstellen. Jede Seite passt sich dem aktivierten Design an.

🚀 Neue Unterseite erstellen

Schritt 1: Tab "Unterseiten" öffnen

Klicken Sie in der Admin-Navigation auf den Button Unterseiten (Tab 6). Sie sehen eine Übersicht aller vorhandenen Seiten.

Schritt 2: Grunddaten eingeben

Seitenname (URL): Wird in der Adresse verwendet (nur Buchstaben, Zahlen, Bindestriche, Unterstriche)
Seitentitel: Erscheint im Browser-Tab
Überschrift: Hauptüberschrift der Seite (optional)

Beispiel:

Seitenname: kontakt
Seitentitel: Kontakt - Meine Webseite
Überschrift: Kontaktieren Sie uns!

➡️ URL: page.php?name=kontakt

Schritt 3: Überschrift-Einstellungen

Konfigurieren Sie die Seitenüberschrift (optional):

Größe: Schriftgröße in Pixel
Farbe: Textfarbe der Überschrift
Hintergrundbild: Optionales Bild hinter der Überschrift

Schritt 4: Seite speichern

Klicken Sie auf Unterseite erstellen. Die Seite ist sofort unter ihrer URL erreichbar!

Wichtig: Container können Sie nach dem Erstellen der Seite hinzufügen.

Schnellstart-Tipp

Erstellen Sie zunächst nur mit den Grunddaten. Reihen und Container können Sie später im Bearbeitungsmodus hinzufügen und anpassen.

📐 Container-System: Reihen & Positionen

Neue 3-Spalten-Struktur

Jede Unterseite besteht aus Reihen. Jede Reihe hat drei Positionen: Links, Mitte und Rechts. Sie können pro Reihe beliebige Positionen verwenden oder leer lassen.

👈 Links

🎯 Mitte

👉 Rechts

📋 Reihen-Verwaltung

Reihen hinzufügen und verwalten

Im Bearbeitungsmodus können Sie Reihen verwalten:

Neue Reihe hinzufügen: Erstellt eine leere Reihe mit drei Positionen
Reihe löschen: Entfernt eine gesamte Reihe mit allen Containern
Reihenfolge: Reihen werden von oben nach unten angezeigt
Flexible Nutzung: Nicht alle Positionen müssen befüllt sein

⚙️ Container-Einstellungen pro Position

Umfangreiche Gestaltungsmöglichkeiten

Jede Position (Links/Mitte/Rechts) bietet volle Kontrolle:

Fade-In Effekt: Sanftes Einblenden der Container
Container-Hintergrund: Transparent, Farbe oder animierter Gradient
Größen: Individuelle Breite und Höhe
Überschrift: Mit Schriftart, Größe und Farbe
Text-Inhalte: Vollformatierte Textbereiche
Spezial-Effekte: Gradient-Text, Bild-Text-Fill
Inhalts-Typen: Bilder, Text, Laufbänder, HTML, Mehrfach-Bilder
Effekte & Rahmen: Glow, Dual-Glow, Border-Bilder, Linien
Textlinks: Individuell formatierte Links

Typische Reihen-Konfiguration:
Reihe 1: [Teamfoto] [Willkommenstext] [Kontaktinfo]
Reihe 2: [Leer] [Produktbeschreibung] [Produktbild]
Reihe 3: [Bildergalerie] [Bildergalerie] [Bildergalerie]

Flexibilität: Jede Position kann einen anderen Inhaltstyp haben!

📦 Container-Typen für Inhalte

🖼️ Bild-Container

Zeigt einzelne Bilder mit optionaler Verlinkung

Bild hochladen oder URL verwenden
Optionaler Link auf das Bild
Individuelle Größen
Glow-Effekte und Rahmen

Perfekt für: Logos, Fotos, Produktbilder

📝 Text-Container

Vollformatierte Textinhalte

Freie Texteingabe
Verschiedene Schriftarten
Schriftgrößen und Farben
Textausrichtung
Zeilenhöhe anpassbar

Perfekt für: Beschreibungen, Artikel, Kontaktinfo

🖼️🔗 Mehrere Bilder mit Links

Mehrere Bilder mit individuellen Links und Titeln

Beliebige Anzahl an Bildern
Jedes Bild hat eigenen Link
Titel über jedem Bild
Individuelle Größen
Schriftart-Einstellungen für Titel

Perfekt für: Partnerlogos, Produktgruppen, Galerien

🏃‍♂️ Bilder-Laufschrift

Horizontales Laufband mit Bildern

Mehrere Bilder im Laufband
Geschwindigkeit einstellbar
Bildhöhe und Eckenradius
Automatische Animation

Perfekt für: Logos von Partnern, Produkt-Highlights

🌐 HTML (URL)

Bindet externe HTML-Seiten ein

Externe URLs einbetten
Vollständige HTML-Seiten
Responsive Anpassung

Perfekt für: Externe Widgets, Embed-Codes

🔗 Textlinks-Container

Liste formatierter Textlinks

Beliebige Anzahl an Links
Individuelle Farben
Hover-Effekte
Ziel (_blank/_self)

Perfekt für: Navigation, Quick-Links, Ressourcen

🎨 Spezial-Effekte für Container

Erweiterte Gestaltungsoptionen

Fade-In: Sanftes Einblenden der Container
Container-Hintergrund: Transparent, Farbe oder animierte Gradienten
Gradient-Text: Animierte Farbverläufe in Überschriften
Bild-Text-Fill: Bilder als Textfüllung für Überschriften
Trennlinien: Farbige oder Bild-Linien zwischen Elementen
Effekte: Glow, Dual-Glow (zwei Farben), Border-Bilder
Obere Bilder: Bilder innerhalb des Containers über dem Inhalt

Container-Strategie

Kombinieren Sie verschiedene Container-Typen für abwechslungsreiche Seiten. Nutzen Sie die 3-Positionen-Struktur für ausgewogene Layouts und interessante visuelle Hierarchien.

🔧 Seitenverwaltung & Bearbeitung

Vorhandene Seiten bearbeiten

In der Übersicht sehen Sie alle vorhandenen Seiten:

Bearbeiten-Button: Öffnet den Bearbeitungsmodus mit allen Reihen
Vorschau-Link: Zeigt die aktuelle Seite im neuen Tab
Löschen-Button: Entfernt die Seite permanent (mit Bestätigung)
Reihen-Anzahl: Zeigt wie viele Reihen die Seite hat

Reihen und Container verwalten

Im Bearbeitungsmodus können Sie komplette Reihen verwalten:

Neue Reihe hinzufügen: Fügt eine leere Reihe am Ende hinzu
Reihe löschen: Entfernt eine gesamte Reihe
Positionen bearbeiten: Jede Links/Mitte/Rechts Position einzeln
Container-Typ ändern: Wechsel zwischen allen verfügbaren Typen
Klappmenüs: Alle Einstellungen sind in übersichtlichen Klappmenüs organisiert

Wichtig: Speichern nicht vergessen!

Änderungen an Seiten, Reihen und Containern werden erst durch Klick auf "💾 Änderungen speichern" permanent übernommen. Vergessene Speichervorgänge führen zu Datenverlust!

Live-Vorschau und Tests

Nutzen Sie die integrierten Vorschau-Funktionen:

Text-Vorschau: Sieht Textänderungen sofort
Bild-Vorschau: Zeigt hochgeladene Bilder direkt an
Fade-In Vorschau: Demonstriert den Einblendeffekt
Seite ansehen: Öffnet die Seite im neuen Tab zur Kontrolle

📊 Seiten-Übersicht

Alle Seiten im Blick

Die Übersicht zeigt:

Seitenname: Identifikator und URL-Teil
Seitentitel: Angezeigter Titel im Browser
Reihen-Anzahl: Wie viele Reihen die Seite hat
Schnellaktionen: Ansehen, Bearbeiten, Löschen

💡 Tipps & Best Practices

Seiten-Struktur planen

Überlegen Sie vorher, welche Reihen Sie benötigen
Skizzieren Sie das Layout mit Links/Mitte/Rechts
Verwenden Sie aussagekräftige Seitennamen
Gruppieren Sie ähnliche Seiten thematisch
Erstellen Sie eine konsistente Navigationsstruktur

Design-Konsistenz

Verwenden Sie ein einheitliches Farbschema über alle Reihen
Wiederholen Sie Design-Elemente für Wiedererkennungswert
Passen Sie Unterseiten an das Hauptdesign an
Testen Sie Farbkombinationen auf Lesbarkeit
Nutzen Sie die Schriftart-Optionen konsistent

Performance-Optimierung

Bilder komprimieren: Unter 500 KB pro Bild
Reihenanzahl angemessen: 3-8 Reihen pro Seite
Externe Ressourcen minimieren: Reduziert Ladezeiten
Gradient-Animationen sparsam: Zu viele Animationen können langsam wirken

🎯 Häufige Anwendungsfälle

1. Kontaktseite:
Reihe 1: [Leer] [Kontakt-Überschrift] [Leer]
Reihe 2: [Kontaktformular-Bild] [Kontaktinformationen] [Teamfoto]
Reihe 3: [Öffnungszeiten] [Google Maps Embed] [Social Media Links]
Reihe 4: [Partnerlogos-Laufband] [Partnerlogos-Laufband] [Partnerlogos-Laufband]

2. Produktseite:
Reihe 1: [Produktfoto groß] [Produktbeschreibung] [Technische Daten]
Reihe 2: [Feature 1] [Feature 2] [Feature 3] (als Mehrfach-Bilder)
Reihe 3: [Kundenbewertungen] [Video-Embed] [Zertifikate]
Reihe 4: [Ähnliche Produkte] [Ähnliche Produkte] [Ähnliche Produkte]

3. About-Us Seite:
Reihe 1: [Firmenlogo] [Unternehmensgeschichte] [Mission Statement]
Reihe 2: [Teamfoto 1] [Teamfoto 2] [Teamfoto 3]
Reihe 3: [Werte] [Philosophie] [Ziele]
Reihe 4: [Partner] [Auszeichnungen] [Karriere-Links]

🔧 Problemlösungen

Problem: Seite wird nicht gefunden

Mögliche Ursachen:

Seitenname enthält ungültige Zeichen
JSON-Datei ist beschädigt
Seite wurde gelöscht
Falsche URL verwendet

Lösung: Überprüfen Sie den Seitennamen in der Übersicht und erstellen Sie die Seite ggf. neu.

Problem: Bilder werden nicht angezeigt

Mögliche Ursachen:

Bild wurde nicht hochgeladen
Falsche Bild-URL
Upload-Verzeichnis-Berechtigungen
Bild zu groß (Server-Limit)

Lösung: Laden Sie das Bild erneut hoch oder überprüfen Sie die URL. Komprimieren Sie große Bilder vor dem Upload.

Problem: Container werden nicht richtig angezeigt

Mögliche Ursachen:

Keine Speicherung nach Änderungen
Falsche Größenangaben
CSS-Konflikte
JavaScript-Fehler

Lösung: Speichern Sie die Seite, überprüfen Sie die Einstellungen und testen Sie in einem anderen Browser.

Workflow-Empfehlung

Effiziente Seiten-Erstellung:

Seitennamen und Grunddaten festlegen
Seite erstellen und URL testen
In den Bearbeitungsmodus wechseln
Erste Reihe hinzufügen und Positionen konfigurieren
Container-Typen und Inhalte festlegen
Design-Einstellungen anpassen
Weitere Reihen nach Bedarf hinzufügen
Finales Speichern und Freigabe

❓ Häufig gestellte Fragen

Kann ich Unterseiten in der Navigation verlinken?

Ja! Verwenden Sie in der Navigation einfach die URL: page.php?name=SEITENNAME

Beispiel: Für eine Kontaktseite mit Namen "kontakt":

Navigationseintrag: Kontakt|page.php?name=kontakt

Wie viele Reihen kann ich pro Seite erstellen?

Es gibt keine technische Begrenzung! Sie können beliebig viele Reihen erstellen. Aus Performance- und Usability-Gründen empfehlen wir jedoch maximal 8-10 Reihen pro Seite.

Kann ich Container zwischen Positionen kopieren?

Nicht direkt, aber Sie können:

Die Einstellungen manuell übertragen
Bilder erneut hochladen
Textinhalte kopieren und einfügen

Jeder Container wird separat gespeichert.

Werden gelöschte Seiten gesichert?

Nein! Gelöschte Seiten werden sofort und endgültig entfernt. Erstellen Sie vor dem Löschen ggf. ein Backup der JSON-Datei im pages/ Verzeichnis.

Kann ich HTML in den Text-Containern verwenden?

Ja, im Text-Container können Sie grundlegende HTML-Formatierung verwenden. Für komplexere Einbindungen nutzen Sie den HTML (URL) Container-Typ.

Sind Unterseiten suchmaschinenfreundlich?

Ja, die Seiten sind für Suchmaschinen zugänglich. Verwenden Sie aussagekräftige Seitentitel, Überschriften und Textinhalte für bessere SEO-Ergebnisse.

Kann ich eine Position in einer Reihe leer lassen?

Ja! Sie müssen nicht alle drei Positionen (Links/Mitte/Rechts) befüllen. Leere Positionen werden einfach nicht angezeigt, was flexible Layouts ermöglicht.

Was passiert bei sehr vielen Bildern im Laufband?

Das Laufband skaliert automatisch. Bei vielen Bildern wird die Animation etwas schneller, bleibt aber flüssig. Für optimale Performance empfehlen wir maximal 10-15 Bilder pro Laufband.

🎯 Schnellstart-Guide

In 5 Minuten zur ersten Unterseite mit Inhalt

Schritt 1: Neue Seite erstellen

Gehen Sie zu "Unterseiten" und füllen Sie aus:

Seitenname: kontakt
Seitentitel: Kontakt - Meine Webseite
Überschrift: Kontaktieren Sie uns!

Klicken Sie auf "Unterseite erstellen".

Schritt 2: In Bearbeitungsmodus wechseln

Klicken Sie in der Seitenliste auf "✏️ Bearbeiten" neben Ihrer neuen Seite.

Schritt 3: Erste Reihe hinzufügen

Klicken Sie auf "Neue Reihe hinzufügen".
In der mittleren Position:

Aktivieren Sie "Text-Inhalt" Klappmenü
Geben Sie einen Willkommenstext ein
Wählen Sie Schriftart und Größe

Schritt 4: Zweite Reihe hinzufügen

Fügen Sie eine weitere Reihe hinzu.
Konfigurieren Sie:

Links: Kontaktinformationen (Text-Container)
Rechts: Kontaktformular-Bild (Bild-Container)

Schritt 5: Speichern und testen

Klicken Sie auf "💾 Änderungen speichern" und besuchen Sie: page.php?name=kontakt

Ihre erste Unterseite mit Reihen ist live! 🎉

Nächste Schritte

Nach der Erstellung können Sie jederzeit zurückkehren und weitere Reihen hinzufügen, Container anpassen, Effekte hinzufügen oder das Design verfeinern.