Grundlage für die Erstellung einer Website ist eine intensive Geschichte aus Bildern und Fotos.

Bilder spielen eine wichtige Rolle in der grafischen Struktur der Website und tragen zum Navigationserlebnis des Nutzers bei.

Daher stehen dir verschiedene Bild-Komponenten mit unterschiedlichen Funktionen zur Verfügung, für jeden Bedarf:

- Einzelbild;
- Galerie;
- Karussell;
- Slideshow;

    Bild-Slideshow
    Bild-Vitrine
    Slider mit Text
    Hover-Bild
- Vitrine;
- Slider mit Text;
- Hover-Bild.

Ein Bild hinzufügen 

Über den Editor kannst du Bilder in deine Website einfügen.

1. Klicke links auf die Elementleiste;
2. Klicke auf Medien 
3. Klicke auf Bild 
4. Ziehe die Komponente in den Arbeitsbereich

Du kannst dein Bild ganz einfach hinzufügen oder bearbeiten.

1. Klicke auf das Bild 
2. Klicke auf Bild bearbeiten
3. Klicke auf Bild suchen, wenn du dein Bild hinzufügen oder ersetzen möchtest. Dir stehen drei Optionen zur Verfügung:

- Du kannst ein eigenes Bild direkt von deinem PC hochladen
- Du kannst ein Bild von Pixabay laden. Gib ein Keyword in die Suchleiste ein und wähle das Bild, das du bevorzugst
- Du kannst ein Bild aus deinem Facebook-Konto hochladen

Wissenswert: Wenn du beim Ändern der Bildgröße die Shift-Taste gedrückt hältst, behält das System die Proportionen des Bildes bei, ohne dass es versehentlich zugeschnitten wird.

Hinweis: Um Bilder mit Alt-Tags zu optimieren, musst du zu Website-Verwaltung->Website-Indexierung gehen. Der Alt-Tag ist ein sehr nützliches Tool zur Optimierung der Bilder deiner Website, da er das Bild und die Funktion beschreibt, die das Bild innerhalb der Seite erfüllt. Google misst dem Alt-Tag große Bedeutung bei, weil es Informationen über das Bild und die übrigen Inhalte der Seite daraus ableitet.
Um einen Alt-Tag zuzuweisen, findest du im Bereich Website-Indexierung auf jeder Seite die Bildoptimierung. Gib hier das Keyword im entsprechenden Feld jedes Bildes ein und klicke anschließend auf Speichern. Denke daran, dass du für jede Sprache deiner Website einen anderen Alt-Tag vergeben kannst.

Einen Link hinzufügen

1. Klicke auf die Bild-Komponente
2. Klicke auf Bild bearbeiten
3. Klicke auf das Kettensymbol
4. Du kannst vier Arten von Verknüpfungen hinzufügen:

- Du kannst das Bild mit einer bestehenden Seite deiner Website verknüpfen
- Du kannst das Bild mit einem externen Link verknüpfen
- Du kannst das Bild mit einer Komponente auf derselben Seite verknüpfen
- Du kannst das Bild mit einem Pop-up verknüpfen 

 
Wenn du das Bild mit einer Komponente auf derselben Seite verknüpfen möchtest, musst du aus der Liste die Komponente auswählen, die als Anker für deinen Link dienen soll. Ich empfehle dir die Funktion Ebenen zu nutzen, um sofort die richtige Komponente zu finden.

Parallax

Hier kannst du die Parallax-Option aktivieren, die die visuelle Wahrnehmung verbessert, indem sie beim Scrollen des Bildes eine gewisse Tiefenwirkung erzeugt.

1. Klicke auf die Bild-Komponente
2. Klicke auf das Zahnradsymbol
3. Klicke auf Parallax
4. Setze ein Häkchen bei Aktivieren

Effekte beim Überfahren mit der Maus

Du kannst einen Effekt auswählen, der beim Überfahren der Bilder mit der Maus angewendet wird.

1. Klicke auf die Bild-Komponente
2. Klicke auf das Zahnradsymbol
3. Klicke auf Effekt beim Überfahren mit der Maus
4. Wähle den Effekt beim Überfahren mit der Maus

Overlay

Du kannst eine Überlagerungsfarbe einfügen oder über die Overlay-Funktion einen Farbverlauf anwenden.

1. Klicke auf die Bild-Komponente
2. Klicke auf das Zahnradsymbol
3. Klicke auf Overlay

Rahmen

Du kannst einen Rahmen auf das Bild anwenden, indem du aus den vorgeschlagenen auswählst und die Farbe nach Wunsch änderst.

1. Klicke auf die Bild-Komponente
2. Klicke auf das Zahnradsymbol
3. Klicke auf Rahmen

Schatten

Du kannst einen Schatten hinzufügen und dabei Farbe und Position des Schattens festlegen.

1. Klicke auf die Bild-Komponente
2. Klicke auf das Zahnradsymbol
3. Klicke auf Schatten
 

Wissenswert: Wenn du das Bild im Vollbild anzeigen möchtest, findest du per Rechtsklick und unter Größe die Funktion Breite 100%, mit der du das Foto bildschirmfüllend anzeigen kannst. Geändert wird nur die Breite und nicht die Höhe, daher kann das Bild auf sehr großen Bildschirmen abgeschnitten wirken.