Bild-Block bearbeiten
Der Bild-Block ist ein einfaches und vielseitiges Element zur Darstellung einzelner Bilder auf deiner Website. Er eignet sich perfekt für Produktfotos, Illustrationen, Logos oder andere visuelle Inhalte, die du prominent präsentieren möchtest. Du kannst die Größe und Ausrichtung des Bilds individuell anpassen.
Voraussetzungen
- Du befindest dich im Website-Editor
- Ein Bild-Block ist auf deiner Seite eingefügt
- Du hast die Berechtigung, Website-Inhalte zu bearbeiten
Aufbau der Bearbeitungsseite
Die Bearbeitungsseite enthält einen Hauptbereich:
ImageBlock
Hier findest du alle Einstellungen für deinen Bild-Block:
- Text zentrieren: Schalter zur Zentrierung des Bilds
- Bild-Upload: Bereich zum Hochladen und Auswählen des Bilds
- Größe: Eingabefeld zur Bestimmung der Bildgröße
So arbeitest du mit dieser Seite
Bild hochladen und auswählen
- Klicke auf den Bild-Upload-Bereich
- Wähle eine der folgenden Optionen:
- Neues Bild hochladen: Lade ein Bild von deinem Computer hoch
- Vorhandenes Bild wählen: Wähle ein bereits hochgeladenes Bild aus
- Empfohlene Bildformate: JPG, PNG, WebP
- Achte auf eine angemessene Dateigröße für schnelle Ladezeiten
Bildausrichtung anpassen
- Aktiviere Text zentrieren, um das Bild mittig auf der Seite zu positionieren
- Lasse den Schalter deaktiviert für linksbündige Ausrichtung
- Die Zentrierung wirkt sich auf die gesamte Darstellung des Blocks aus
Bildgröße festlegen
- Gib im Feld Größe die gewünschte Bildgröße ein
- Mögliche Eingaben:
- Pixel-Werte: z.B. "300px" für eine feste Breite von 300 Pixeln
- Prozent-Werte: z.B. "50%" für die Hälfte der verfügbaren Breite
- Relative Werte: z.B. "small", "medium", "large" (falls unterstützt)
- Lasse das Feld leer für die Originalgröße des Bilds
Tipps und Hinweise
- Bildqualität: Verwende hochwertige, scharfe Bilder für professionelle Darstellung
- Dateigröße optimieren: Komprimiere Bilder vor dem Upload für bessere Ladezeiten
- Seitenverhältnis: Achte auf ansprechende Seitenverhältnisse (z.B. 16:9, 4:3, 1:1)
- Alt-Text: Stelle sicher, dass deine Bilder beschreibende Alt-Texte haben (wird automatisch verwaltet)
- Mobile Optimierung: Der Block passt sich automatisch an verschiedene Bildschirmgrößen an
- Konsistenz: Verwende ähnliche Bildstile und -größen für ein harmonisches Erscheinungsbild
Verwendungszwecke
Produktpräsentation:
- Einzelne Produktfotos
- Zentrierte Ausrichtung
- Mittlere bis große Größe
Illustrationen:
- Erklärende Grafiken
- Je nach Kontext zentriert oder linksbündig
- Angepasste Größe je nach Detailgrad
Logos und Symbole:
- Firmenlogos oder Partner-Logos
- Meist zentrierte Ausrichtung
- Kleinere bis mittlere Größe
Dekorative Elemente:
- Trennelemente zwischen Abschnitten
- Oft zentrierte Ausrichtung
- Kleine bis mittlere Größe
Größenangaben verstehen
Pixel-Werte (px):
- Feste Größe unabhängig vom Bildschirm
- Beispiel: "400px" = 400 Pixel breit
- Gut für präzise Kontrolle
Prozent-Werte (%):
- Relative Größe basierend auf dem verfügbaren Platz
- Beispiel: "75%" = 75% der verfügbaren Breite
- Gut für responsive Designs
Ohne Angabe:
- Bild wird in Originalgröße dargestellt
- Passt sich automatisch an den verfügbaren Platz an
Häufige Probleme vermeiden
- Zu große Dateien: Komprimiere Bilder auf unter 1MB
- Verzerrte Darstellung: Verwende angemessene Größenangaben
- Schlechte Qualität: Nutze Bilder mit ausreichender Auflösung
- Langsame Ladezeiten: Optimiere Bildgrößen für das Web