Tutorial: Medien­galerie & Slide­show

Wir erklären Ihnen in diesem Tutorial-Bereich, wo Sie Medien­galerien & Slide­shows erstellen und wie Sie diese bearbeiten. Für Ihre Website ergeben sich hier viel­fältige Gestaltungs­möglich­keiten. Und vergessen Sie nicht, ein Bild sagt oft mehr als Tausend Worte.

Wenn Sie dazu Fragen haben, melden Sie sich bei uns. Wir helfen gerne.

Mediengalerie

Slideshow

Beim Anlegen eines neuen Slides finden Sie bei Ausrichtung und Einpassung verschiedene Variations­möglichkeiten. Voraus­gewählt ist bei Ausrichtung genau die Mitte und bei Einpassung ausge­füllt.
Beim Hintergrund zeigen wir Ihnen die Einstellungen Ausrichtung und Eingepasst etwas genauer

1. Beispiel: Slide­shows mit ausgefüllten Bildern

  • Slideshow-Einstellung: Einpassung ausgefüllt

Ihre Bilder werden voll­flächig an die Bildschirm­breite ange­passt. Der gesamte Slide­show-Container ist gefüllt. Wählen Sie den Fokus und legen fest, welcher Teil des Bildes erscheint.

Das Bild in diesem Beispiel wurde in Originalgröße angelegt.

Arbeitsplatz mit Notitzbuch, Laptop im Hintergrund
Ausrichtung oben links - Einpassung ausgefüllt

Ausrichtung unten rechts - Einpassung ausgefüllt

Ausrichtung mittig mittig - Einpassung ausgefüllt

2. Beispiel: Bilder mit originaler Breite & ver­schiedenen Aus­richtungen

  • Slideshow-Einstellung: Einpassung original

Die originale Größe des Bildes bleibt immer gleich und wird so innerhalb des Slide­show-Bereiches auf dem jeweiligen Bild­schirm ausge­geben. Je nach horizontaler und vertikaler Aus­richtung positioniert sich das Bild unter­schiedlich.

Das ver­wendete Bild ist und bleibt 200 x 100 Pixel groß. Der bei diesem Beispiel dunkelgrau hinter­legte Slide­show-Container wird nicht ausge­füllt.

Arbeitsplatz mit Notitzbuch, Laptop im Hintergrund
Ausrichtung oben links - Einpassung original

Ausrichtung mittig rechts - Einpassung original

Ausrichtung unten links - Einpassung original

Ausrichtung unten rechts - Einpassung original

Ausrichtung mittig mittig - Einpassung original

Ausrichtung mittig links - Einpassung original

Ausrichtung unten mittig - Einpassung original

Ausrichtung oben mittig - Einpassung original

Ausrichtung oben rechts - Einpassung original

3. Beispiel: Slideshow mit einge­passten Bildern

  • Slideshow-Einstellung: Einpassung eingepasst

Mit dieser Einstellung werden Ihre Bilder inner­halb der Slide­show immer zur Gänze sicht­bar ange­zeigt. Dabei passt sich das Bild je nach Seiten­verhältnis entweder in der Höhe oder in der Breite an den Slide­show-Container an. Je nach Bildab­messungen wird es entweder vergrößert oder verkleinert.

Verwendet wird bei diesem Beispiel ein Bild mit 600 x 400 Pixel.

Arbeitsplatz mit Notitzbuch, Laptop im Hintergrund
Ausrichtung oben links - Eingepasst

Ausrichtung oben mittig - Eingepasst

Ausrichtung oben rechts - Eingepasst

Ausrichtung mittig links - Eingepasst

Ausrichtung mittig mittig - Eingepasst

Ausrichtung mittig rechts - Eingepasst

Ausrichtung unten links - Eingepasst

Ausrichtung unten mittig - Eingepasst

Ausrichtung unten rechts - Eingepasst

Ein paar Slide­show Ideen

Mit etwas Geschick können Sie die hinter­einander erscheinenden Bilder gezielt nutzen und es entstehen einzigartige Effekte. Beim ersten Beispiel haben wir ein Hinter­grund-Bild verbaut. Die zweite Slide­show präsentiert einige Team-Mitglieder.

Seien Sie kreativ und kombinieren die Variationen. Lassen Sie sich über­raschen, was so alles entsteht.

Ausrichtung mittig links - Einpassung ausgefüllt
Ausrichtung mittig links - Eingepasst

Ausrichtung mittig rechts - Einpassung original

Ein paar weitere Tipps...

  • Ausschlag­gebend für die Ausgabe Ihrer Bilder in der Slideshow ist auch das Layout Ihrer Inhalts­zeilen. Damit haben Sie noch mehr künstlerische Freiheiten bei der Gestaltung Ihrer Website, denn Slide­shows müssen nicht immer die gesame Fläche füllen.
  • Verbauen Sie nicht zu große Bilder (wir empfehlen maximal 2000 Pixel) in Ihrer Slide­show. Die Lade­zeit wird dadurch erhöht, was negative Aus­wirkungen auf die Such­maschinen-Optimierung hat.
  • Verwenden Sie maximal 7 Slides. Bei zu vielen Slides braucht Ihre Seite eben­falls länger zum Laden.