Bild-/Videoraster | Sitely-Dokumentation

Dies ist ein spezieller Layoutblock, der für das einfache Hinzufügen von Video- und Bildinhalten zu Ihrer Seite in einer rasterartigen Struktur entwickelt wurde.

Fügen Sie zunächst das Element zu Ihrer Sitely-Arbeitsfläche hinzu und fügen Sie dann den Bild- oder Videoinhalt hinzu. Dies geschieht über das Stil-Panel, während das Bild-/Videorasterelement auf der Arbeitsfläche ausgewählt ist. Die Option sieht wie folgt aus:

Obwohl das Raster beim ersten Platzieren auf der Leinwand nur ein einzeiliges Raster mit drei Platzhaltern anzeigt, wächst es, um so viel Inhalt aufzunehmen, wie Sie hinzufügen. Wenn Sie beispielsweise sechs Bilder hinzufügen, wird das Raster auf drei Spalten und zwei Zeilen erweitert. Wenn Sie zwölf Bilder hinzufügen, wird Ihr Raster auf drei Spalten und vier Zeilen erweitert. Um Inhalte von Ihrer Festplatte hinzuzufügen, klicken Sie auf die Schaltfläche „Bild/Videos hinzufügen“. Um gehostete Inhalte von YouTube oder Vimeo hinzuzufügen, klicken Sie auf die entsprechenden Schaltflächen. Sie haben auch die Möglichkeit, PDF-Seiten hinzuzufügen – mehr zu dieser Option gleich. Nachdem Sie einige Inhalte hinzugefügt haben, sieht das Raster in etwa so aus:

Erstellen einer Diashow
Standardmäßig wird ein Bild durch Klicken auf ein beliebiges Bild im Raster in einem Leuchtkasten geöffnet. In der Regel wird das Bild über einen abgeblendeten Hintergrund gezoomt, der durch Klicken auf eine beliebige Stelle im Hintergrund oder durch Klicken auf eine Schaltfläche zum Schließen des Bildes (genau wie bei den Bildern auf dieser Seite) geschlossen werden kann. Mit dem Bild-/Videoraster haben Sie jedoch auch die Möglichkeit, eine Diashow aus Ihrem Rasterinhalt zu erstellen. Das bedeutet im Wesentlichen, dass durch Klicken auf einen beliebigen Inhalt im Raster wie gewohnt eine Lightbox geöffnet wird, mit der zusätzlichen Möglichkeit, durch den gesamten Rasterinhalt zu blättern, während die Lightbox geöffnet ist. So sieht es auf einer Webseite aus:

Im obigen Beispiel wurde die erste Zelle so eingestellt, dass sie sich über 2 Spalten und 1 Zeile erstreckt. Gehen Sie weiter jede Zelle durch, bis Ihr Raster nach Ihren Wünschen gestaltet ist. In unserem Beispielraster unten haben wir das Raster geändert und es mit Hintergrundfarben und Rahmen so gestaltet, dass es so aussieht – wir haben die Zellbereiche für jede Rasterzelle angezeigt, damit Sie besser verstehen können, wie es erstellt wurde.

Wenn die Zelle ausgewählt ist, gehen Sie zum Stil-Panel und legen Sie die Anzahl der Zeilen und/oder Spalten fest, die diese Zelle umfassen soll. So sieht die Option aus:

Sie können nun einzelne Rasterzellen anpassen, um Ihrem Raster ein ästhetischeres Aussehen zu verleihen. Wählen Sie jede Rasterzelle nacheinander aus, entweder direkt auf der Leinwand oder über das Ebenen-Bedienfeld. Achten Sie darauf, die Rasterzelle und nicht das Bild selbst auszuwählen. Der Unterschied ist unten zu sehen. Die weißen Begrenzungsgriffe zeigen an, dass das Bild ausgewählt wurde. Die blassen grauen „X“ zeigen an, dass die Zelle ausgewählt ist.

Sehen Sie die Pfeile zum Scrollen nach links und rechts? Diese werden durch die Einstellung der Diashow-Optionen im Stil-Panel hinzugefügt. Achten Sie darauf, dass das Bild-/Videoraster auf der Leinwand ausgewählt ist, und aktivieren Sie die entsprechenden Optionen, damit diese Funktion funktioniert. Das Stil-Panel bietet viele Optionen für die Gestaltung Ihres Rasters, der Zellen und der Lightbox. Sehen Sie sich also alle an.

Werden Sie kreativ mit PDFs

Dank der Möglichkeit von Sitely, PDF-Dokumente in den Bild-/Video-Layoutblock zu importieren, können Sie jetzt Dinge tun, die bisher nur schwer zu realisieren waren. Sie können beispielsweise eine mehrseitige Broschüre oder eine PDF-Kopie einer Keynote-Präsentation importieren. Dadurch wird Ihr Raster mit jeder Seite Ihres Dokuments (1 Seite pro Rasterzelle) gefüllt. Dies kann natürlich dazu führen, dass viele Rasterzellen entstehen, die Ihre Website-Besucher nicht unbedingt sehen sollen. Stattdessen möchten Sie vielleicht, dass sie nur die erste Seite sehen und dann die Diashow öffnen, um die anderen Seiten zu sehen. Dies ist in Sitely ganz einfach. Unten sehen Sie ein Beispiel für eine 20-seitige Präsentation, die aus Keynote als mehrseitige PDF-Datei exportiert wurde. Wir möchten, dass Benutzer nur die Eröffnungsfolie sehen und den Rest erst, wenn sie die Diashow öffnen. Dazu ändern wir die Rastergrößen und das Layout. So sieht unser Raster nach einer kleinen Anpassung aus.

Dies wurde erreicht, indem die Zellen auf 50 Pixel Breite und 50 Pixel Höhe eingestellt und vertikal und horizontal mit einem Abstand von 10 Pixel angeordnet wurden. Dies wurde alles im Stil-Panel eingestellt.

Die erste Zelle wurde ausgewählt und so eingestellt, dass sie 20 Spalten und 9 Zeilen umfasst. Dadurch entsteht die Illusion eines Hauptbildes mit einer Reihe von Miniaturansichten darunter, wie oben dargestellt. Die Miniaturansichten können zwar sichtbar bleiben, Sie können sie aber auch ausblenden, sodass nur das Hauptbild sichtbar ist. Personen, die die Miniaturansichten sehen, könnten annehmen, dass sich das Hauptbild ändert, wenn auf eine Miniaturansicht geklickt wird, was möglicherweise nicht der Eindruck ist, den Sie vermitteln möchten. Um die Miniaturansichten auszublenden, wählen Sie jede Miniaturansicht nacheinander aus und legen Sie im Bereich „Anordnen“ fest, dass sie auf diesem Gerät NICHT angezeigt werden soll. Wenn nun auf das Hauptbild geklickt wird, startet die Diashow, sodass Benutzer sich durch die Präsentation bewegen können.

Der Grund, warum wir die Größe der Miniaturansichten reduzieren, besteht darin, den Layoutblock einfach auf eine Höhe zu beschränken, die es uns ermöglicht, Inhalte unterhalb der Präsentation hinzuzufügen, ohne dass sich diese Inhalte innerhalb des Layoutblocks selbst überlappen. Stattdessen bleibt die Präsentation in ihrem eigenen Layoutblock, der auf der Seite verschoben werden kann, ohne dass die umgebenden Elemente beeinträchtigt werden. Wenn die Miniaturansichten nicht verkleinert würden, könnte der Layoutblock außerdem eine Höhe erreichen, die weit über den Seiteninhalt hinausgeht, sodass am unteren Rand Ihrer Webseite viel Leerraum entsteht.

Diese Technik kann auch für die Anzeige einer mehrseitigen PDF-Broschüre verwendet werden. Natürlich möchten Sie nicht, dass Benutzer ein ganzes Raster einzelner Broschürenseiten sehen. Wenn Sie also die zusätzlichen Seiten effektiv verschwinden lassen, erhalten Sie nur ein Broschüren-Cover, auf das Benutzer klicken können, um die gesamte Publikation zu lesen. Ebenso haben Sie vielleicht eine große Anzahl von Videos, die Sie der Welt zeigen möchten, aber nicht unbedingt als großes Raster einzelner Videos auf der Seite anzeigen möchten. In diesem Fall würden Sie in der Regel ein großes Video-Posterbild erstellen, das die Benutzer dazu einlädt, Ihre Videogalerie anzusehen. Dieses Bild würde als Ihre erste große Folie festgelegt werden und eine größere Anzahl von Rasterspalten umfassen. So bleibt Ihre Seite übersichtlich, und die Benutzer haben dennoch Zugriff auf eine ganze Bibliothek von Videoinhalten. Wenn Sie die individuelle Auswahl von Videos und/oder Bildern zulassen möchten, können Sie größere Miniaturansichten erstellen und diese auf der Seite sichtbar lassen. Diese werden in einer oder mehreren Zeilen unter dem größeren Bild auf der Seite angezeigt.

Wichtige Hinweise

Die Größe der Rasterzellen wird für jedes Gerät einzeln festgelegt. Daher müssen Sie die Größen höchstwahrscheinlich für jedes Gerät, für das Sie ein Design erstellen, entsprechend anpassen. Es ist auch erwähnenswert, dass auf Smartphones keine Pfeile an den Seiten der Diashow-Präsentation angezeigt werden. Stattdessen verwenden Benutzer die übliche Wischgeste, um durch Ihre Präsentation zu navigieren. Es ist kaum notwendig, speziell für ein Smartphone im Querformat zu entwerfen. Durch Drehen des Telefons wird die Präsentation automatisch vergrößert, um sie an das Querformat anzupassen.