🖼️ Free Layer Bild-Upload Hilfe

So platzieren Sie Bilder frei auf Ihrer Website

Grundlagen Admin-Modus Bilder hochladen Bilder bearbeiten Tipps & Tricks

🎯 Was ist der Free Layer?

Schwebende Bildebene

Der Free Layer ist eine spezielle Ebene, die über dem normalen Website-Content schwebt. Hier können Sie Bilder frei positionieren, ohne das Hauptlayout zu beeinflussen.

Vollständige Positionierungsfreiheit
Platzieren Sie Bilder an beliebigen Positionen:
  • Über Navigationselementen
  • Neben Containern
  • Als dekorative Akzente
  • Für spezielle Aktionen und Events
  • Mit verlinkung zu externen Websites
Unabhängig vom Hauptdesign
Free Layer Bilder sind komplett unabhängig:
  • Eigene Positionierung (X/Y-Koordinaten)
  • Individuelle Größenanpassung
  • Keine Beeinflussung durch Container-Layout
  • Separate Verwaltung

Perfekt für temporäre Inhalte

Der Free Layer ist ideal für saisonale Aktionen, Sonderangebote oder temporäre Hinweise, die nicht dauerhaft im Layout verankert sein sollen.

🔧 Admin-Modus aktivieren

Schritt 1: Im Admin-panel einloggen
Die Seite lädt neu und zeigt jetzt die Admin-Funktionen.
Schritt 2: Upload-Panel erkennen
Im Admin-Modus erscheint unten auf der Index-Seite ein neues Panel:
  • Dateiauswahl: Wählen Sie ein Bild von Ihrem Computer
  • Link option: Fügen Sie ein link ein (Kann - kein muss)
  • Upload-Button: Lädt das Bild in den Free Layer
  • Automatische Positionierung: Neues Bild erscheint oben links

Wichtig: Admin-Modus verlassen

Um den Admin-Modus zu deaktivieren, ausloggen dann die Seite im Browser neu aufrufen. Die Free Layer Bilder bleiben erhalten!

1
URL mit ?admin=1 öffnen
2
Upload-Panel erscheint
3
Bilder hochladen & bearbeiten

📤 Bilder hochladen

Unterstützte Formate
Sie können folgende Bildformate hochladen:
  • JPG/JPEG: Für Fotos mit guter Komprimierung
  • PNG: Für Bilder mit Transparenz
  • GIF: Für animierte Grafiken
  • SVG: Für skalierbare Vektorgrafiken
Upload-Prozess
  1. Klicken Sie auf "Durchsuchen" oder "Datei auswählen"
  2. Wählen Sie ein Bild von Ihrem Computer
  3. Klicken Sie auf "Upload"
  4. Das Bild erscheint sofort im Free Layer

Automatische Benennung: Bilder erhalten automatisch einen eindeutigen Namen, um Konflikte zu vermeiden.

Optimale Bildgrößen

  • Maximale Dateigröße: Unter 2 MB pro Bild
  • Auflösung: 72-150 DPI für Web
  • Format-Empfehlung: PNG für Logos, JPG für Fotos
  • Transparenz: Nutzen Sie PNG-24 für echte Transparenz

✏️ Bilder bearbeiten

🖱️ Verschieben

Klicken Sie auf ein Bild und ziehen Sie es an die gewünschte Position. Die neue Position wird automatisch gespeichert.

  • Pixelgenaue Positionierung
  • Automatisches Snap-to-Grid
  • Echtzeit-Vorschau

📏 Größe ändern

Ziehen Sie den grünen Kreis in der unteren rechten Ecke, um die Bildgröße anzupassen.

  • Proportionale Skalierung
  • Mindestgröße: 50x50 Pixel
  • Seitenverhältnis beibehalten

🗑️ Löschen

Klicken Sie auf das "X" in der oberen rechten Ecke des Bildes, um es zu entfernen.

  • Sicherheitsabfrage vor Löschung
  • Endgültiges Entfernen
  • Bild wird aus Upload-Verzeichnis gelöscht
Bearbeitungsmodus erkennen
Im Admin-Modus haben Free Layer Bilder spezielle Steuerelemente:
  • Gestrichelter Rahmen: Zeigt bearbeitbare Bilder an
  • Grüner Resize-Handle: Zum Größe ändern
  • Rotes X: Zum Löschen des Bildes
  • Reduzierte Deckkraft: Beim Ziehen zur besseren Sichtbarkeit

Automatisches Speichern

Änderungen an Position und Größe werden automatisch gespeichert. Beim Löschen erfolgt eine Sicherheitsabfrage, da dieser Vorgang nicht rückgängig gemacht werden kann.

💡 Tipps & Best Practices

Optimale Nutzung des Free Layers

  • Transparente PNGs verwenden: Für beste Integration ins Design
  • Bilder voroptimieren: Komprimieren Sie Bilder vor dem Upload
  • Weniger ist mehr: 3-5 gut platzierte Bilder sind effektiver als viele
  • Responsive testen: Prüfen Sie die Darstellung auf verschiedenen Geräten
  • Zielgruppenorientiert: Platzieren Sie wichtige Elemente im Blickfeld
Kreative Anwendungsbeispiele
1. Saisonale Dekoration:
- Weihnachtssterne im Dezember
- Oster-Eier im Frühling
- Sommer-Sonne in warmen Monaten
- Herbstblätter im Oktober
2. Spezielle Aktionen:
- "Neu" Banner für neue Features
- "Sale" Grafiken für Angebote
- Countdown-Timer für Events
- Limited-Edition Hinweise
3. Persönliche Akzente:
- Handgeschriebene Notizen
- Persönliche Fotos
- Kreative Doodles
- Signaturen oder Logos

🔧 Technische Details

Speicherung und Verwaltung
  • Upload-Verzeichnis: uploads/DESIGNNAME/free/
  • Konfigurationsdatei: free_elements_DESIGNNAME.json
  • Automatische Namensvergabe: Zeitstempel + eindeutige ID
  • Design-spezifisch: Jedes Design hat eigene Free Layer Inhalte

Workflow für effizientes Arbeiten

  1. Admin-Modus aktivieren (?admin=1)
  2. Bilder hochladen über das Upload-Panel
  3. Position und Größe anpassen
  4. Auf verschiedenen Geräten testen
  5. Admin-Modus verlassen (URL ohne Parameter)
  6. Regelmäßig Backups erstellen

❓ Häufig gestellte Fragen

Sind Free Layer Bilder responsive?
Ja, die Positionierung ist relativ zum Inhaltsbereich. Bei Änderungen der Bildschirmgröße bleiben die Bilder proportional positioniert. Testen Sie jedoch immer auf verschiedenen Geräten.
Kann ich Bilder zwischen Designs übertragen?
Nicht automatisch. Sie müssen die Bilder im neuen Design erneut hochladen und positionieren. Die Free Layer Inhalte sind design-spezifisch gespeichert.
Werden die Bilder für Besucher sichtbar?
Ja! Free Layer Bilder sind für alle Besucher sichtbar. Der Admin-Modus zeigt nur zusätzliche Bearbeitungsfunktionen.
Wie viele Bilder kann ich hinzufügen?
Es gibt keine technische Begrenzung, aber aus Performance-Gründen empfehlen wir maximal 10-15 Bilder pro Seite.