Kompatibilität:

WebSite X5 Evo und Pro

Ein Bild zerfällt in mehrere Panels, die nacheinander zur Seite gleiten und Platz für das nächste schaffen. Der Effekt ist dynamisch, eindrucksvoll, fast filmreif. Genau das ist die Stärke des Optionalen Objekts Sliding Panel: Eine einfache Bildabfolge in eine animierte und wirkungsvolle Galerie zu verwandeln. Sie können es verwenden, um einer Startseite Rhythmus zu verleihen, Produkte zu präsentieren oder eine Fotogalerie spannender zu gestalten. Die Übergänge übernehmen die ganze Arbeit – Sie müssen nur die Bilder auswählen und sich inspirieren lassen.


Möchten Sie den Effekt live sehen? Werfen Sie einen Blick auf die Beispiele auf der Vorschauseite.



Funktionsweise

Das Objekt Sliding Panels funktioniert einfach, aber wirkungsvoll: Alle Bilder, die in die Galerie eingefügt werden, werden automatisch in so viele Panels unterteilt, wie Bilder vorhanden sind. Wenn Sie zum Beispiel 5 Bilder in die Galerie einfügen, wird jedes davon in 5 Panels "aufgeteilt".


Jedes Panel entspricht einem Bild, und beim Klicken darauf wird eine animierte Übergangseffekt ausgelöst, der das entsprechende Bild anzeigt. Zur besseren Orientierung können die Panels nummeriert werden.


So entsteht eine unmittelbare und ansprechende Interaktion.


Erstellen Sie die Bilderliste

Jetzt, da Sie wissen, welches Ergebnis Sie erzielen können, beginnen Sie mit dem Aufbau Ihrer Galerie, indem Sie die Liste der anzuzeigenden Bilder definieren:

  • Doppelklicken Sie auf das Objekt Sliding Panel, um das Fenster mit allen Optionen zu öffnen.
  • Klicken Sie auf die Schaltfläche Hinzufügen, um Fotos und Videos zu importieren. Wenn Sie auf den Pfeil der Schaltfläche Hinzufügen klicken, können Sie wählen, ob Sie eine lokale Datei durchsuchen oder eine Online-Bibliothek verwenden möchten (weitere Informationen finden Sie unter Wie importiert man eine Datei?). Die importierten Dateien bilden eine Liste, die Sie frei sortieren und bearbeiten können.
#Tipp – Mehrfachauswahl. Halten Sie die STRG-Taste gedrückt und klicken Sie auf alle Dateien, die Sie in einem Schritt importieren möchten.
  • Mit den Schaltflächen  können Sie festlegen, ob die Vorschaubilder in kleiner oder mittlerer Größe angezeigt werden – das erleichtert die Arbeit.
  • Sobald die Liste erstellt ist, können Sie sie jederzeit bearbeiten: Fügen Sie neue Bilder hinzu, löschen Sie nicht mehr benötigte oder ändern Sie die Reihenfolge. Wählen Sie dazu einfach das Bild in der Liste aus und klicken Sie auf , um es zu entfernen, oder verwenden Sie die Pfeiltasten, um es zu verschieben.
  • Ebenso können Sie für jedes eingefügte Bild/Video die Schaltfläche verwenden, um einen Titel und einen Alternativtext einzugeben – wichtig sowohl für die Barrierefreiheit als auch für die SEO-Optimierung (siehe Barrierefreiheit von Bildern: Die Bedeutung des Alternativtextes).


Legen Sie den Stil der Galerie fest

Nun können Sie sich um einige grafische Aspekte kümmern:

  • Beginnen Sie mit der Definition des Effekts, mit dem die einzelnen Panels angezeigt werden sollen, in die das Bild unterteilt ist.
  • Nun müssen Sie die Maximale Größe festlegen, die die Galerie annehmen kann.
  • Sie können auch eine Rahmenfarbe definieren, um die Trennung zwischen den Panels mit einer feinen Linie in der gewünschten Farbe hervorzuheben. Wenn die Paneltrennung nicht sichtbar sein soll, lassen Sie die Rahmenfarbe transparent.
  • Aktivieren Sie die Option Nummern anzeigen, damit jedes Panel, in das das Bild unterteilt ist, automatisch nummeriert wird – so erkennen Besucher leichter, wo sie klicken müssen, um zwischen den Bildern zu wechseln.
  • Wenn Sie Nummern auf den Panels anzeigen lassen, können Sie außerdem zwei Hintergrundfarben festlegen, um die Zahlen zu gestalten und die aktive von den anderen zu unterscheiden.


Sie möchten dieses Objekt direkt auf Ihrer Website verwenden? Installieren Sie jetzt das Objekt Sliding Panel


Sie haben nicht genügend Credits, um dieses Objekt zu kaufen? Alle Credit-Pakete anzeigen