In EverWeb gibt es vier Möglichkeiten, Fotos nacheinander zu zeigen. Für eine Diashow, die von selbst über die ganze Seite läuft, verwenden Sie das Widget Bild-Slider (Image Slider). Für Slides, die auf einer responsiven Seite Fotos, Text, Buttons oder Videos kombinieren, verwenden Sie das Widget Karussell (Carousel). Damit Fotos hinter Ihrem Text oder in einem beliebigen Feld wechseln, verwenden Sie eine Diashow-Füllung (Slide Show Fill). Wenn Besucher alle Ihre Fotos als Miniaturansichten sehen und per Klick auf eines eine Vollbild-Diashow öffnen sollen, verwenden Sie eine Galerie.
Wann Sie das brauchen
- Ein Hotel möchte auf seiner Startseite Fotos seiner Zimmer durchlaufen lassen, jedes mit einem Link zur Seite des jeweiligen Zimmers: Bild-Slider.
- Ein Café möchte eine Reihe von Karten, jede mit einem Foto, einer Zeile Text und einem Button Bestellen, durch die Besucher wischen können: Karussell.
- Eine Malerin, die von iWeb umsteigt, möchte jede Bilderserie auf einer eigenen Seite, mit einer Diashow, die startet, wenn jemand auf ein Gemälde klickt: eine Galerie.
Was Sie verwenden sollten
| Bild-Slider | Karussell | Diashow-Füllung | Responsive Bildergalerie / Bildgalerie | |
|---|---|---|---|---|
| So sieht es aus | Ein Foto nach dem anderen, auf Wunsch mit Miniaturansichten darunter | Slides mit beliebigem Inhalt: Fotos, Text, Buttons, Video. Kann mehrere gleichzeitig zeigen | Fotos, die hinter einer TextBox, einer Form, einem Bild oder einem Container wechseln | Ein Raster aus Miniaturansichten. Ein Klick darauf öffnet eine große Diashow über der Seite |
| Seitentyp | Responsiv und Zentriertes Layout | Für responsive Seiten gemacht | Responsiv und Zentriertes Layout | Responsive Bildergalerie für responsive Seiten, Bildgalerie für Zentriertes Layout |
| Bildunterschriften | Ein Untertitel für jedes Foto | Fügen Sie dem Slide eine TextBox hinzu | Der Text, den Sie eingeben, bleibt über jedem Foto stehen | Ein Untertitel für jedes Foto |
| Ein Link auf jedem Slide | Ja, eine URL: für jedes Foto | Ja, jedes Objekt kann einen eigenen Link haben | Nein, das Feld wechselt die Fotos, nicht die Links | Nein, ein Klick öffnet das große Foto |
| Läuft von selbst | Ja, von Anfang an eingeschaltet | Nur wenn Sie Autoplay aktivieren | Ja, mit Dias automatisch wechseln | Sobald die Diashow geöffnet ist |
| Auf dem Handy | Passt sich an, wenn Volle Breite eingestellt ist | Passt sich an, wenn Volle Breite eingestellt ist | Richtet sich nach der Größe des Felds | Die Spalten ordnen sich passend neu an (Responsive Bildergalerie) |
Einen Bild-Slider hinzufügen
- Klicken Sie auf den Tab Widgets und ziehen Sie Bild-Slider auf die Seite. Auf einer responsiven Seite legen Sie ihn direkt auf die Seite oder in einen Container, nicht in eine Dynamische Reihe (Responsive Row).
- Damit er von Rand zu Rand reicht, gehen Sie zu Inspektor > Maße und aktivieren Sie Volle Breite.
- Gehen Sie zu Inspektor > Widget-Einstellungen und fügen Sie Ihre Fotos mit Wählen… hinzu.
- Wählen Sie jedes Foto in der Liste aus und geben Sie seinen Untertitel, seinen ALT Text (eine Beschreibung für Suchmaschinen und Screenreader) und, wenn Sie möchten, eine URL: ein, auf die es verlinkt.
- Lassen Sie unter Diashow-Optionen die Option Diashow automatisch abspielen aktiviert und stellen Sie Diashow-Geschwindigkeit: in Tausendstelsekunden ein (4000 sind 4 Sekunden). Wählen Sie einen Übergang: wie Überblenden oder Schieben.
- Deaktivieren Sie unter Aussehen die Option Miniaturansichten anzeigen für ein schlichtes Banner und wählen Sie eine Option unter Bild zuschneiden:. Fill (Füllen) füllt den Rahmen aus und kann die Ränder abschneiden. Fit (Einpassen) zeigt das ganze Foto.
- Aktivieren Sie unter Verhalten bei Bedarf Beim Hovern pausieren oder Klicken Sie, um das Bild zu vergrößern.
Ein Karussell hinzufügen
- Ziehen Sie Karussell aus dem Tab Widgets auf eine responsive Seite.
- Ziehen Sie Fotos, TextBoxen oder Container hinein. Jedes davon ist ein Slide. Für ein Foto mit Text und Button legen Sie diese zuerst in eine Container-Spalte.
- Stellen Sie unter Inspektor > Widget-Einstellungen im Bereich Slider-Optionen die Slides pro Ansicht ein (bei 0 entscheidet das Karussell selbst), eine Slide-Animation wie Fade, Coverflow oder Cards, und Schleife.
- Aktivieren Sie unter Autoplay-Einstellungen die Option Autoplay, stellen Sie die Geschwindigkeit ein (3000 sind 3 Sekunden) und aktivieren Sie Stop on mouseover (bei Mauszeiger anhalten), wenn es pausieren soll.
Eine Diashow-Füllung verwenden
- Wählen Sie eine TextBox, eine rechteckige Form, ein Bild oder einen Container aus.
- Gehen Sie zu Inspektor > Formoptionen und wählen Sie im Menü Füllung die Option Diashow.
- Klicken Sie auf Wählen… und wählen Sie Ihre Fotos aus. Bei einem Bild fügen Sie das ursprüngliche Foto ebenfalls der Liste hinzu.
- Stellen Sie Animation, Geschwindigkeit der Diashow (ms) und Dias automatisch wechseln ein. Lassen Sie Pfeile anzeigen während der Arbeit auf Immer, damit Sie die Slides durchblättern können. Stellen Sie es am Ende auf Nie, wenn Sie keine Pfeile möchten.
Galerien
Ziehen Sie Responsive Bildergalerie (Responsive Image Gallery, für responsive Seiten) oder Bildgalerie (Image Gallery, für Seiten mit zentriertem Layout) auf die Seite und fügen Sie Ihre Fotos hinzu. Ein Klick auf eine Miniaturansicht öffnet eine Diashow, die von selbst laufen kann, wie „Diashow abspielen“ in iWeb. Siehe Wie öffne ich ein Popup-Fenster oder vergrößere ein Foto, wenn jemand darauf klickt?
Ihre Fotos vorbereiten
- Bringen Sie alle auf dieselbe Form und Größe, zum Beispiel alle 1600 x 900 Pixel. Fotos mit unterschiedlichen Formaten hinterlassen weiße Lücken oder lassen die Diashow ihre Höhe ändern.
- Halten Sie jedes Foto unter 500KB, sonst lädt die Diashow auf Handys langsam. Ein kostenloses Tool wie squoosh.app kann sie verkleinern.
- Aktivieren Sie Optimierte Bilder exportieren unter Datei > Veröffentlichungseinstellungen bearbeiten, damit EverWeb kleinere WebP-Kopien veröffentlicht.
Häufige Probleme
| Was Sie sehen | Was Sie tun können |
|---|---|
| Fotos ändern ihre Größe oder lassen weiße Flächen frei | Bringen Sie alle auf dieselbe Pixelgröße. Stellen Sie in einem Bild-Slider Bild zuschneiden: auf Fill |
| Eine Reihe kleiner Fotos unter dem Slider | Deaktivieren Sie Miniaturansichten anzeigen |
| Das Karussell bewegt sich nicht von selbst | Autoplay ist anfangs ausgeschaltet. Aktivieren Sie es unter Autoplay-Einstellungen |
| Sie möchten, dass Fotos ohne anzuhalten durchlaufen | Das kann keine der eingebauten Diashows: Jede hält bei jedem Slide kurz an |
| In einer Galerie sind hinter dem großen Foto andere Fotos zu sehen | Verwenden Sie die Responsive Bildergalerie und stellen Sie Hintergrundfarbe für die Diashow ein |
| Auf dem Handy zu breit | Aktivieren Sie Volle Breite unter Inspektor > Maße und nehmen Sie das Widget aus jeder Dynamischen Reihe heraus |
Verwandte Artikel
- Wie öffne ich ein Popup-Fenster oder vergrößere ein Foto, wenn jemand darauf klickt?
- Eine Portfolio-Website für Fotografie oder Kunst mit EverWeb erstellen
- Mit Containern eine responsive Seite erstellen, die sich auf dem Smartphone sauber stapelt
- Text auf einem Foto lesbar machen: Überlagerungen, Masken und Optionen für Bildfüllungen