Bildergalerien

Sitelys Bildgalerie ist mehr als nur ein Bild-Slider – ihre Einsatzmöglichkeiten gehen weit über das Anzeigen einer Bildersammlung hinaus. Sie ist eines der neuesten Features von Sitely und stellt einen großen Sprung nach vorn dar, wie Informationen auf einer Sitely-Seite präsentiert werden können. Das Bildgalerie-Element unterstützt jetzt sowohl Bilder als auch PDFs. Eine der häufigsten Fragen von Nutzerinnen und Nutzern ist, wie sich ein PDF-Dokument in eine Sitely-Webseite einbetten lässt. Traditionell lautete die Antwort – wie bei nahezu jeder anderen Webdesign-Anwendung –, der Seite etwas Code hinzuzufügen, damit das PDF in einem iframe angezeigt werden kann. Offensichtlich war das nicht die Idee der Entwickler, als sie Sitely als codefreies Webdesign-Tool konzipierten. Nun, all das gehört der Vergangenheit an. Das neue Galerie-Element übernimmt das Einbetten von PDF-Dokumenten in Ihre Webseite mit Leichtigkeit und fügt Verfeinerungen hinzu, die das Betrachten von Bildern oder PDF-Seiten für Nutzer zum Vergnügen machen.

Wenn das Galerie-Element erstmals zu einer Seite hinzugefügt wird, sieht es so aus. Es ist ein ziemlich standardmäßig aussehender Slider, der darauf wartet, dass Sie Inhalte hinzufügen.

Wenn es als klassische Bildgalerie verwendet wird, fügen Sie JPG- oder PNG-Bilder über den Bereich ‚Bildgalerie‘ im Stil-Panel hinzu. Das sieht so aus.

Ein Klick auf die Schaltfläche Bearbeiten öffnet ein Bildauswahlfenster, in dem Sie Ihre Inhalte hinzufügen können. Klicken Sie einfach auf Hinzufügen, um auf Ihrer Festplatte nach Bildern zu suchen.

Sie können auch PDF-Seiten hinzufügen. Dies können ein- oder mehrseitige PDF-Dateien sein. Wenn Sie PDFs hinzufügen, konvertiert Sitely jede Seite in ein hochwertiges Bild, das in die Galerie eingebettet wird. So lassen sich Präsentationen oder Broschüren ganz einfach in Ihre Webseite einbetten, und Ihre Dokumente sind vollständig schriftartenunabhängig. In Kombination mit der Lightbox-Funktion der Galerie werden Seiten für eine einfache Lesbarkeit auf dem Bildschirm vergrößert. Im folgenden Beispiel wurde eine Keynote-Präsentation als PDF exportiert und zur Bildgalerie hinzugefügt. Klicken Sie auf die Galerie, um zu sehen, wie einfach sich Präsentationsmaterial auf einer Webseite darstellen lässt.

Es gibt viele kreative Möglichkeiten, das neue Bildgalerie-Element zu nutzen. Sie könnten beispielsweise eine einfache Zwei-Bild-Galerie erstellen und die Slideshow automatisch abspielen lassen, um einen aufmerksamkeitsstarken Call-to-Action auf Ihrer Seite zu erzeugen. Hier ein Beispiel.

‍In diesem Beispiel könnten Sie für jedes Bild unterschiedliche On-Click-Aktionen festlegen – eine, um ein Anmeldeformular in einem Pop-up zu öffnen, die andere, um ein anderes Pop-up zu öffnen, das das Angebot ausführlicher erklärt. Probieren Sie es an diesem Beispiel aus. – Warten Sie, bis die Bilder wechseln, und klicken Sie dann darauf.

‍Sie müssen keine Grafikerin oder kein Grafiker sein, um einfache Banner wie dieses zu erstellen. Nutzen Sie einfach die Apple-Tools, die Ihnen zur Verfügung stehen. Dieses Beispiel wurde als zweiseitige Keynote-Präsentation (benutzerdefinierte Größe) erstellt und anschließend wurde jede Folie als Bild exportiert. Sie könnten die beiden Folien auch als eine einzige PDF-Datei exportieren und diese zum Befüllen der Bildgalerie verwenden.

Nachdem Sie gesehen haben, was die neue Bildgalerie kann, schauen wir uns an, wie Sie sie einrichten und gestalten. Wie bei fast allen Elementen in Sitely wird alles im Stil-Panel eingerichtet. Oben haben wir gesehen, wie einfach es ist, Inhalte hinzuzufügen, also weiter zu Styling und Optionen. Der zweite Abschnitt des Stil-Panels ermöglicht es Ihnen, für jedes einzelne Bild eine On-Click-Aktion festzulegen. Das ist eine sehr flexible Option, mit der Sie verschiedenen Bildern unterschiedliche Aktionen zuweisen können. Jede in Sitely unterstützte Aktion kann gesetzt werden. Die wohl häufigste Aktion für eine Galerie ist die Option ‚Bild in Lightbox zoomen‘. Dadurch werden die Bilder vergrößert vor einem abgedunkelten Hintergrund angezeigt, damit Nutzern mehr Details zur Verfügung stehen. Möchten Sie dieselbe On-Click-Aktion auf alle anderen Bilder anwenden, klicken Sie auf das Einstellungssymbol (drei Punkte im Kreis) Dies wird Ihnen die Option bieten, die Aktion auf alle Bilder anzuwenden. Wenn die Option ‚Beschriftung anzeigen‘ aktiviert ist, wird Ihre Folie mit einer Textbeschriftung überlagert. Diese kann nach Wunsch gestaltet und verschoben werden – bei Bedarf sogar unter die Folie.

Wenn als On-Click-Aktion die Lightbox gewählt wird, bietet Ihnen das Stil-Panel eine Reihe zusätzlicher Optionen. Diese sind unten dargestellt und weitgehend selbsterklärend.

‍Der nächste Optionssatz ermöglicht es Ihnen, die verschiedenen Elemente der Slideshow-Navigationsschaltflächen zu gestalten, einschließlich der Standardfarbe der Pfeile sowie der Farben bei Mouseover und beim Klicken.

‍Die Schließen-Schaltfläche ist das Symbol oben rechts in der Slideshow, mit dem Nutzer die Slideshow verlassen und zur Seite zurückkehren können. Sie haben die Wahl zwischen mehreren Stilen, denen je nach Buttonzustand unterschiedliche Farben zugewiesen werden können.

‍Das Aktions-Overlay ist der Ort, an dem Sie ein Symbol auswählen, das über Ihre Galerie-Bilder gelegt wird, um anzuzeigen, dass die Bilder zoombar sind. Dieses Overlay kann folienweise festgelegt werden und enthält sowohl eine schwarze als auch eine weiße Variante – je nach Hintergrundfarbe Ihrer Bilder. Wenn alle Ihre Bilder einen ähnlichen Hintergrund haben, wie in unserer oben gezeigten Keynote-Präsentation, können Sie ein Aktions-Overlay nur auf die erste Folie anwenden und dann neben der Option ‚Bild in Lightbox zoomen‘ ‚Aktion auf alle Bilder anwenden‘ einstellen.

Wenn Sie das Kontrollkästchen Slideshow deaktivieren, werden die linken und rechten Pfeile sowohl auf dem Canvas als auch beim Öffnen der Slideshow in einer Lightbox entfernt. Sobald die Lightbox geöffnet ist, können die Folien jedoch weiterhin per Wischgeste weitergeschaltet werden. Dies kann nützlich sein, wenn Sie erzwingen möchten, dass Nutzer die Galerie zuerst in einer Lightbox öffnen, bevor sie durch die Bilder scrollen können. Faktisch bleibt das erste Bild auf der Seite statisch. Natürlich sollten Sie ein Aktions-Overlay auf dem Bild hinzufügen, um darauf hinzuweisen, dass es vergrößert werden kann.

‍Die letzten Optionen geben Ihnen Kontrolle darüber, wie Ihre Galerie angezeigt wird. Die Letterbox-Option ist dafür gedacht, Bilder mit unterschiedlichen Seitenverhältnissen zu berücksichtigen. Wenn Ihre Bilder auf ‚FIT‘ eingestellt sind, wird ihre Größe so angepasst, dass sie innerhalb der Galeriebegrenzung passen. Dadurch kann ein Letterbox-Effekt entstehen – entweder links und rechts bei hohen Bildern oder oben und unten bei breiten Bildern. Mit dieser Option können Sie eine Hintergrundfarbe für den Leerraum um Ihre Bilder festlegen. Wenn diese Option auf ‚FILL‘ gesetzt ist, werden Ihre Bilder herangezoomt, um den Galerierahmen auszufüllen. Dies kann zum Beschnitt einiger Bilder führen.

‍Die Optionen für Rand, Abrundung und Schatten wirken auf alle Folien, jedoch nicht auf die Vorschaubilder, falls vorhanden.

‍Die Übergangsoption erlaubt es Ihnen, die Geschwindigkeit der Übergänge Ihrer Slideshow festzulegen. Die Optionen erlauben auch das Überblenden von Bildern oder einen Slide-Effekt. Hinweis, dass die Überblend-Option nur in der Canvas-Version der Galerie funktioniert – die Lightbox-Version wird immer einen Slide-Übergang haben.

‍Wenn Sie das Kontrollkästchen Vorschaubilder aktivieren, erhalten Sie zusätzliche Optionen, um ein Raster von Vorschaubildern unterhalb oder oberhalb Ihrer Galerie anzuzeigen. So können Nutzer durch Klicken auf Vorschaubilder durch Ihre Galerie navigieren. Alternativ können Sie stattdessen Punkte verwenden.

‍Die Funktion Automatische Slideshow lässt Ihre Slideshow ohne Benutzerinteraktion automatisch fortlaufen. Folien können für einen bestimmten Zeitraum angehalten werden, bevor zur nächsten gewechselt wird. Sie können die Slideshow auch bei Mouseover pausieren lassen.

Farben und Farbverläufe