Bildgalerien | Sitely-Dokumentation

Die Bildgalerie von Sitely ist mehr als nur ein Bild-Slider – ihre Einsatzmöglichkeiten gehen weit über die Anzeige einer Bildergalerie hinaus. Sie ist eine der neuesten Funktionen von Sitely und stellt einen großen Fortschritt in der Art und Weise dar, wie Informationen auf einer Sitely-Seite präsentiert werden können. Das Element der Bildgalerie unterstützt jetzt sowohl Bilder als auch PDFs. Eine der Fragen, die von Benutzern häufig gestellt wird, ist, wie man ein PDF-Dokument in eine Sitely-Webseite einbettet. Bisher lautete die Antwort, dass man das tun sollte, was jede andere Webdesign-Anwendung auch tut – der Seite Code hinzufügen, der die Anzeige der PDF-Datei in einem Iframe ermöglicht. Das war natürlich nicht das, was die Entwickler im Sinn hatten, als sie Sitely als codefreies Webdesign-Tool entwickelten. Nun, all das gehört der Vergangenheit an. Das neue Galerieelement ermöglicht die einfache und unkomplizierte Einbettung von PDF-Dokumenten in Ihre Webseite und fügt einige Verbesserungen hinzu, die das Anzeigen von Bildern oder PDF-Seiten für Benutzer zum Vergnügen machen.

Wenn das Galerieelement zum ersten Mal zu einer Seite hinzugefügt wird, sieht es so aus. Es handelt sich um einen Schieberegler mit einem relativ standardmäßigen Aussehen, der darauf wartet, dass Sie Inhalte hinzufügen.

Bei Verwendung als herkömmliche Bildergalerie würden Sie JPG- oder PNG-Bilder über den Abschnitt „Bildergalerie“ im Stil-Panel hinzufügen. Dies sieht dann so aus.

Durch Klicken auf die Schaltfläche „Bearbeiten“ wird ein Bildauswahlfenster angezeigt, in dem Sie Ihre Inhalte hinzufügen können. Klicken Sie einfach auf die Schaltfläche „Hinzufügen“, um nach Bildern auf Ihrer Festplatte zu suchen.

Sie können auch PDF-Seiten hinzufügen. Dabei kann es sich um ein- oder mehrseitige PDF-Dateien handeln. Wenn Sie PDFs hinzufügen, konvertiert Sitely jede Seite in ein hochwertiges Bild, das in die Galerie eingebettet wird. Dadurch können Sie Präsentationen oder Broschüren ganz einfach in Ihre Webseite einbetten und Ihre Dokumente sind völlig schriftartenunabhängig. In Kombination mit der Lightbox-Funktion der Galerie werden die Seiten auf dem Bildschirm vergrößert, um das Lesen zu erleichtern. Im folgenden Beispiel wurde eine Keynote-Präsentation als PDF-Datei exportiert und zur Bildergalerie hinzugefügt.

Es gibt viele kreative Möglichkeiten, wie Sie das neue Bildgalerie-Element verwenden können. Sie könnten beispielsweise eine einfache Galerie mit zwei Bildern erstellen und die Diashow automatisch abspielen lassen, um einen auffälligen Aufruf zum Handeln auf Ihrer Seite zu erstellen. Hier ist ein Beispiel.

In diesem Beispiel können Sie für jedes Bild verschiedene Aktionen beim Klicken festlegen – eine, um ein Anmeldeformular in einem Pop-up zu öffnen, und eine andere, um ein anderes Pop-up zu öffnen, in dem das Angebot ausführlicher erläutert wird. Probieren Sie es mit diesem Beispiel aus: Warten Sie, bis sich die Bilder ändern, und klicken Sie dann darauf.

Sie müssen kein Grafikdesigner sein, um einfache Banner wie dieses zu erstellen. Sie können einfach die Apple-Tools verwenden,

‍ die Ihnen zur Verfügung stehen. Dieses Beispiel oben wurde als zweiseitige Keynote-Präsentation (benutzerdefinierte Größe) erstellt und dann wurde jede Folie als Bild exportiert. Sie können die beiden Folien auch als einzelne PDF-Datei exportieren und diese zum Auffüllen der Bildergalerie verwenden.

Nachdem wir nun gesehen haben, was die neue Bildergalerie kann, werfen wir einen Blick darauf, wie Sie sie einrichten und gestalten. Wie bei fast allen Elementen in Sitely wird alles im Stil-Panel eingerichtet. Wir haben oben gesehen, wie einfach es ist, Inhalte hinzuzufügen. Kommen wir also zum Design und den Optionen. Im zweiten Abschnitt des Stil-Panels können Sie eine Aktion für jedes einzelne Bild festlegen, die bei einem Klick ausgeführt wird. Dies ist eine sehr flexible Option, mit der Sie verschiedenen Bildern unterschiedliche Aktionen hinzufügen können. Jede Aktion, die derzeit in Sitely unterstützt wird, kann eingestellt werden. Die häufigste Aktion für eine Galerie wäre wahrscheinlich die Option „Bild in Lightbox vergrößern“. Dadurch werden die Bilder in einem größeren Maßstab über einem abgedunkelten Hintergrund angezeigt, um den Benutzern ein größeres Bild zu bieten. Wenn Sie dieselbe Aktion auf alle anderen Bilder anwenden möchten, klicken Sie auf das Einstellungssymbol (drei Punkte in einem Kreis). Dadurch wird die Option angezeigt, 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 oder neben das Bild.

Wenn die Lightbox-Option als Aktion bei Mausklick ausgewählt wird, werden im Stil-Panel eine Reihe zusätzlicher Optionen angezeigt. Diese werden unten dargestellt und sind weitgehend selbsterklärend.

Mit den nächsten Optionen können Sie die verschiedenen Elemente der Navigationsschaltflächen der Diashow gestalten, einschließlich der Standardfarbe der Pfeile sowie der Farben für Mauszeiger und Mausklicks.

Die Schaltfläche „Schließen“ ist das Symbol, das oben rechts in der Diashow angezeigt wird und es Benutzern ermöglicht, die Diashow zu verlassen

und zur Seite zurückzukehren. Sie haben die Wahl zwischen verschiedenen Stilen , von denen jeder je nach Schaltflächenstatus unterschiedliche Farben aufweisen kann.

Im Aktions-Overlay wählen Sie ein Symbol aus, das Sie über Ihre Galeriebilder legen können, um die Benutzer darauf hinzuweisen, dass

die Bilder vergrößert werden können. Diese Überlagerung kann für jede Folie einzeln eingestellt werden und enthält sowohl Schwarz-Weiß-Versionen als auch Versionen in Farbe, je nach Hintergrundfarbe Ihrer Bilder. Wenn alle Ihre Bilder einen ähnlichen Hintergrund haben, wie in unserer Keynote-Präsentation oben, können Sie eine Aktionsüberlagerung nur auf die erste Folie anwenden und dann neben der Option „Bild in Lightbox vergrößern“ die Option „Aktion auf alle Bilder anwenden“ auswählen.

Wenn Sie das Kontrollkästchen „Diashow“ deaktivieren, werden die Pfeile nach links und rechts sowohl auf der Leinwand als auch beim Öffnen der Diashow in einem Leuchtkasten entfernt. Wenn der Leuchtkasten jedoch geöffnet ist, können die Folien weiterhin durch Wischen vor- und zurückgeblättert werden. Dies kann eine nützliche Option sein, wenn Sie Benutzer dazu zwingen möchten, die Galerie in einem Leuchtkasten zu öffnen, bevor sie durch die Bilder blättern können. Das erste Bild bleibt auf der Seite statisch. Natürlich müssen Sie eine Aktionsüberlagerung auf dem Bild hinzufügen, um die Benutzer darauf hinzuweisen, dass es vergrößert werden kann.

Mit den letzten Optionen können Sie steuern, wie Ihre Galerie angezeigt wird. Die Option „Letterbox“ ist so konzipiert, dass Bilder mit unterschiedlichen Seitenverhältnissen einbezogen werden können. Wenn Ihre Bilder auf „FIT“ eingestellt sind, wird ihre Größe so angepasst, dass sie in die Galerie passen. Dies kann zu einem Letterbox-Effekt führen, entweder links und rechts von hohen Bildern oder über und unter breiten Bildern. Mit dieser Option können Sie eine Hintergrundfarbe für den leeren Bereich um Ihre Bilder herum festlegen. Wenn diese Option auf „FÜLLEN“ eingestellt ist, werden Ihre Bilder so vergrößert, dass sie die Galeriebox ausfüllen. Dies kann dazu führen, dass einige Bilder abgeschnitten werden.

Mit der Option „ÜBERGANG“ können Sie die Geschwindigkeit der Übergänge festlegen, die Sie auf Ihre Diashow anwenden. Die Optionen ermöglichen auch das Überblenden von Bildern oder einen Dia-Effekt. Beachten Sie, dass die Option „Überblenden“ nur in der Canvas-Version der Galerie funktioniert – die Lightbox-Version hat immer einen Dia-Effekt.

Wenn Sie das Kontrollkästchen „Miniaturansichten“ aktivieren, erhalten Sie zusätzliche Optionen, um ein Raster von Miniaturansichten unter oder über Ihrer Galerie anzuzeigen. So können Benutzer auf Miniaturansichten klicken, um durch Ihre Galerie zu navigieren. Alternativ können Sie auch Punkte auswählen.

Die Funktion „Automatische Diashow“ schaltet Ihre Diashow automatisch weiter, ohne dass der Benutzer eingreifen muss. Die Dias können für einen bestimmten Zeitraum angehalten werden, bevor das nächste angezeigt wird. Sie können die Diashow auch anhalten, wenn der Mauszeiger darüber bewegt wird.