📄 Unterseiten & Seitenverwaltung

Umfassende Anleitung zur Erstellung individueller Unterseiten

Grundlagen Seiten erstellen Seitendesign Container Verwaltung Tipps & Tricks

🎯 Grundlagen: Was sind Unterseiten?

Vollständig individuelle Seiten

Unterseiten sind eigenständige Seiten mit komplett unabhängigem Design und Inhalten. Jede Unterseite kann ihr eigenes Layout, ihre eigenen Farben und ihre eigenen Container haben.

Vollständige Design-Unabhängigkeit
Jede Unterseite hat ihre eigenen Einstellungen für:
  • Hintergrund (Gradient, Bild oder Farbe)
  • Wrapper/Inhaltsbereich
  • Rahmen und Glow-Effekte
  • Container-Layout und Inhalte
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

Keine Einschränkungen

Sie können beliebig viele Unterseiten erstellen. Jede Seite ist komplett unabhängig vom Hauptdesign und von anderen Unterseiten.

🚀 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)
  • Seitentitel: Erscheint im Browser-Tab
  • Überschrift: Hauptüberschrift der Seite

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

➡️ URL: page.php?name=kontakt
Schritt 3: Seitendesign konfigurieren
Legen Sie das grundlegende Design der Seite fest:
  • Hintergrund-Typ: Gradient, Bild oder einfarbig
  • Wrapper-Typ: Gestaltung des Inhaltsbereichs
  • Rahmenfarben: Start- und Endfarbe für den Rahmen
  • Größen: Breite und Höhe in % oder px
Schritt 4: Container hinzufügen
Fügen Sie Inhaltscontainer hinzu (optional - können auch später ergänzt werden):
  • Bild-Container für Grafiken und Fotos
  • iFrame-Container für externe Inhalte
  • HTML-Container für Texte und Listen
Schritt 5: Seite speichern
Klicken Sie auf Speichern. Die Seite ist sofort unter ihrer URL erreichbar!

Schnellstart-Tipp

Erstellen Sie zunächst nur mit den Grunddaten und dem Design. Container können Sie später jederzeit hinzufügen und anpassen.

🎨 Seitendesign im Detail

🌈 Hintergrund-Optionen

Gradient-Hintergrund
Animierter Farbverlauf als Hintergrund:
  • Startfarbe: Erste Farbe des Verlaufs
  • Endfarbe: Zweite Farbe des Verlaufs
  • Animation: Sanfte Farbübergänge
Perfekt für moderne, dynamische Designs.
Bild-Hintergrund
Vollflächiges Hintergrundbild:
  • Bild hochladen: Von Ihrem Computer
  • Bild-URL: Externe Bildquelle
  • Automatische Skalierung: Passt sich an alle Bildschirme an
Ideal für atmosphärische Designs.
Einfarbiger Hintergrund
Klare, einfarbige Hintergründe:
  • Farbe wählen: Beliebige Hintergrundfarbe
  • Maximale Lesbarkeit: Perfekt für Text-lastige Seiten
  • Schnelle Ladezeit: Keine großen Bilddateien

📦 Wrapper-Einstellungen

Inhaltsbereich gestalten
Der Wrapper ist der Bereich, in dem Ihre Container platziert werden:
  • Gradient: Farbverlauf für den Inhaltsbereich
  • Farbe: Einfarbiger Hintergrund
  • Bild: Hintergrundbild für den Wrapper
  • Transparent: Durchsichtig (Hintergrund scheint durch)

🎭 Rahmen & Größen

Rahmen mit Farbverlauf
Einzigartiger Rahmen mit animiertem Farbverlauf:
  • Rahmen Startfarbe: Erste Rahmenfarbe
  • Rahmen Endfarbe: Zweite Rahmenfarbe
  • Automatische Animation: Sanfte Farbübergänge
Größenanpassung
Passen Sie die Abmessungen der Seite an:
  • Breite: In % oder px (z.B. "90%" oder "1200px")
  • Höhe: In % oder px (oft leer lassen für automatisch)
  • Max. Breite/Höhe: Begrenzungen setzen
Empfehlung: Breite: 90-95% für responsive Design

📦 Container-Typen für Inhalte

🖼️ Bild-Container

Zeigt Bilder mit optionaler Verlinkung an

  • Bild hochladen oder URL verwenden
  • Optionaler Link auf das Bild
  • Glow-Effekt für Leuchten
  • Individuelle Größen
  • Überschrift möglich

Perfekt für: Logos, Fotos, Banner

🌐 iFrame-Container

Bindet externe Webinhalte ein

  • Externe URLs einbetten
  • YouTube-Videos
  • Google Maps
  • Social Media Feeds
  • Externe Formulare

Perfekt für: Karten, Videos, Widgets

📝 HTML-Container

Für Texte, Listen und eigene Inhalte

  • Freie HTML-Eingabe
  • Texte formatieren
  • Listen erstellen
  • Tabellen einfügen
  • Eigene Formatierung

Perfekt für: Beschreibungen, Artikel, Kontaktinfo

⚙️ Container-Einstellungen

Allgemeine Container-Optionen
Jeder Container bietet umfangreiche Gestaltungsmöglichkeiten:
  • Überschrift: Mit eigener Größe und Farbe
  • Größe: Individuelle Breite und Höhe
  • Glow-Effekt: Leuchten um den Container
  • Positionierung: Automatisches Layout

Container-Strategie

Kombinieren Sie verschiedene Container-Typen für abwechslungsreiche Seiten. Ein Wechsel zwischen Bildern, Texten und interaktiven Elementen hält Besucher länger auf der Seite.

🔧 Seitenverwaltung & Bearbeitung

Vorhandene Seiten bearbeiten
In der Übersicht sehen Sie alle vorhandenen Seiten:
  • Bearbeiten-Button: Öffnet den Bearbeitungsmodus
  • Vorschau-Link: Zeigt die aktuelle Seite an
  • Löschen-Button: Entfernt die Seite permanent
Container verwalten
Im Bearbeitungsmodus können Sie Container hinzufügen und anpassen:
  • Neuen Container hinzufügen: Erstellt einen leeren Container
  • Container-Typ ändern: Wechsel zwischen Bild, iFrame, HTML
  • Container löschen: Entfernt Container aus der Seite
  • Reihenfolge anpassen: Container werden von oben nach unten angezeigt

Wichtig: Speichern nicht vergessen!

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

📊 Seiten-Übersicht

Alle Seiten im Blick
Die Übersicht zeigt:
  • Seitenname: Identifikator und URL-Teil
  • Seitentitel: Angezeigter Titel
  • Container-Anzahl: Wie viele Inhaltsblöcke die Seite hat
  • Letzte Änderung: Zeitpunkt der letzten Bearbeitung

💡 Tipps & Best Practices

Seiten-Struktur planen

  • Überlegen Sie sich vorher, welche Seiten Sie benötigen
  • Verwenden Sie aussagekräftige Seitennamen
  • Gruppieren Sie ähnliche Seiten thematisch
  • Erstellen Sie eine konsistente Navigationsstruktur

Design-Konsistenz

  • Verwenden Sie ein einheitliches Farbschema über alle Seiten
  • Wiederholen Sie Design-Elemente für Wiedererkennungswert
  • Passen Sie Unterseiten an das Hauptdesign an
  • Testen Sie Farbkombinationen auf Lesbarkeit

Performance-Optimierung

  • Bilder komprimieren: Unter 500 KB pro Bild
  • iFrames sparsam einsetzen: Verlangsamen die Seite
  • Containeranzahl begrenzen: 5-10 Container pro Seite
  • Externe Ressourcen minimieren: Reduziert Ladezeiten

🎯 Häufige Anwendungsfälle

1. Kontaktseite:
- HTML-Container: Kontaktinformationen
- iFrame-Container: Google Maps Karte
- Bild-Container: Teamfoto
- Design: Professionell, gut lesbar
2. Produktseite:
- Bild-Container: Produktfotos (mehrere)
- HTML-Container: Produktbeschreibung
- HTML-Container: Technische Daten
- iFrame-Container: Produktvideo
- Design: Modern, fokussiert
3. About-Us Seite:
- Bild-Container: Firmenlogo
- HTML-Container: Unternehmensgeschichte
- Bild-Container: Teamfotos
- HTML-Container: Philosophie & Werte
- Design: Persönlich, einladend

🔧 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

Lösung: Überprüfen Sie den Seitennamen 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

Lösung: Laden Sie das Bild erneut hoch oder überprüfen Sie die URL.

Problem: iFrame-Inhalte erscheinen nicht

Mögliche Ursachen:

  • Externe Seite blockiert Einbettung
  • Falsche URL im Quellfeld
  • Browser-Sicherheitseinstellungen

Lösung: Testen Sie die URL direkt im Browser und prüfen Sie die Einbettungsrechte.

Workflow-Empfehlung

Effiziente Seiten-Erstellung:

  1. Seitennamen und Grunddaten festlegen
  2. Design-Einstellungen konfigurieren
  3. Seite speichern und URL testen
  4. Container hinzufügen und befüllen
  5. Feinabstimmung von Design und Inhalten
  6. 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 Unterseiten kann ich erstellen?
Es gibt keine technische Begrenzung! Sie können beliebig viele Unterseiten erstellen. Aus Usability-Gründen empfehlen wir jedoch maximal 10-15 Haupt-Unterseiten.
Kann ich Seiten zwischen Designs kopieren?
Nicht direkt, aber Sie können:
  • Die JSON-Datei manuell kopieren
  • Container-Einstellungen neu eingeben
  • Bilder erneut hochladen
Jede Seite ist unabhängig 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.
Kann ich HTML in den Containern verwenden?
Ja, im HTML-Container können Sie beliebigen HTML-Code eingeben. Achten Sie auf korrekte Syntax und testen Sie die Darstellung.
Sind Unterseiten suchmaschinenfreundlich?
Ja, die Seiten sind für Suchmaschinen zugänglich. Verwenden Sie aussagekräftige Seitentitel und Überschriften für bessere SEO-Ergebnisse.

🎯 Schnellstart-Guide

In 3 Minuten zur ersten Unterseite

Schritt 1: Neue Seite erstellen
Gehen Sie zu "Unterseiten" und füllen Sie aus:
  • Seitenname: kontakt
  • Seitentitel: Kontakt - Meine Webseite
  • Überschrift: Kontaktieren Sie uns!
Schritt 2: Design auswählen
Wählen Sie einfache Einstellungen:
  • Hintergrund: Gradient von #2c3e50 zu #3498db
  • Wrapper: Einfarbig #ffffff
  • Breite: 90%
Schritt 3: Speichern und testen
Klicken Sie auf "Speichern" und besuchen Sie: page.php?name=kontakt

Ihre erste Unterseite ist live! 🎉

Nächste Schritte

Nach der Erstellung können Sie jederzeit zurückkehren und Container mit Inhalten hinzufügen, das Design verfeinern oder weitere Seiten erstellen.