Layout-Raster | Sitely-Dokumentation

Das Layout-Raster von Sitely ist ein hervorragendes Tool zur Erstellung ansprechender Seiten- oder Abschnittslayouts. Es wird zwar häufiger für die Erstellung von Bildrastern für Galerien verwendet, kann aber auch für andere Inhalte wie Text, Schaltflächen und Felder verwendet werden. Tatsächlich bietet Sitely eine separate Layout-Rasteroption speziell für Bild- und Videoinhalte – das sogenannte Bild-/Videoraster. Dieses Element kann ein Raster über ein spezielles Inhaltsauswahlfeld automatisch mit Inhalten füllen. Das Standardraster, das wir hier besprechen, ist eine flexiblere Option für diejenigen, die benutzerdefinierte Inhalte zu Rasterzellen hinzufügen möchten. Abgesehen von diesen Unterschieden sind beide Rasteroptionen auf die gleiche Weise aufgebaut.

Sie beginnen damit, das Element zu Ihrer Arbeitsfläche hinzuzufügen. Beim ersten Hinzufügen enthält es die standardmäßige Struktur mit einer Zeile und drei Spalten – es sieht wie folgt aus:

Sobald es sich auf der Arbeitsfläche befindet, können Sie mit der Gestaltung beginnen und beliebige Inhalte hinzufügen. Die Einrichtung Ihres Rasters erfolgt über das Bedienfeld „Stil“ auf der rechten Seite des Bildschirms. Hier sehen Sie die Standardeinstellungen. Das Raster besteht aus drei Elementen (Zellen genannt). Jedes Element ist auf 300 x 300 Pixel eingestellt, wobei der horizontale und vertikale Abstand auf 20 px eingestellt ist. Durch Ändern der Rasternummer fügen Sie dem Raster weitere Zellen hinzu, die unter der ersten Zellenreihe angezeigt werden. Wenn Sie also die Anzahl der Elemente von drei auf beispielsweise sechs ändern, werden auf Ihrem Bildschirm zwei Zellenreihen angezeigt.

Sie können Ihr Raster aber noch weiter gestalten, indem Sie jede Rasterzelle auswählen und Sitely anweisen, ihre Größe und Form zu ändern. Im Stil-Panel sehen Sie wiederum eine Option, die Sitely mitteilt, wie viele Spalten und/oder Zeilen jede Zelle im Raster einnehmen soll. Die Option sieht wie folgt aus.

Wenn Sie beispielsweise festlegen, dass die erste Zelle Ihres Rasters zwei Spalten und zwei Zeilen umfassen soll, sieht Ihr Raster wie folgt aus.

Wenn Sie die Option „Rasterzelle“ nicht im Stil-Bedienfeld sehen, liegt das daran, dass Sie keine Zelle ausgewählt haben. Klicken Sie in eine Zelle, um sie zu markieren, dann erscheint die Option. Sie erkennen, dass die Zelle auf der Leinwand ausgewählt ist, weil sie Begrenzungsgriffe hat, die wie kleine X aussehen.

Arbeiten Sie sich nacheinander durch jede Zelle, um die Zellbereiche anzupassen, bis Ihr Raster so aussieht, wie Sie es möchten. Hier ist ein Beispiel für ein einfaches Raster, das Sie am Ende erhalten können. Wir haben die Spalten- und Zeilenbereiche hinzugefügt, damit Sie sehen können, wie das Raster erstellt wurde.

Ihr Raster kann nun mithilfe der verschiedenen Optionen im Stil-Panel gestaltet werden. Füllfarbe, Rahmen und Rundungen können angewendet werden. Beachten Sie, dass das Layout-Raster selbst sowie die Rasterzellen beim ersten Hinzufügen zur Leinwand mit Standard-Drahtgitterfarben gefüllt sind. Diese Farben können im Stil-Panel nach Belieben geändert werden.

Als Nächstes ist es an der Zeit, Inhalte hinzuzufügen. Im Grunde können Sie fast jedes Element in einer Zelle platzieren. Erstellen und gestalten Sie das Element einfach auf Ihrer Leinwand und ziehen Sie es dann über eine der Zellen, um es zu platzieren. Während Sie Elemente über das Raster ziehen, werden die Zellen hervorgehoben, um anzuzeigen, dass Sie sich in einer Ablagezone für diese Zelle befinden. Lassen Sie einfach die Maustaste los und das Element wird in die Zellen abgelegt. So sieht die Hervorhebung aus.

Wenn Ihr Inhalt größer als die Zelle ist, wird das Element beim Ablegen abgeschnitten, sodass es in die Begrenzung der Zelle passt. Dies kann dazu führen, dass Sie die Größe des Inhalts anpassen müssen, damit er besser zur Größe und Form der Zelle passt, sobald der Inhalt platziert ist. Sie können dies tun, indem Sie an dem Ziehpunkt zur Größenänderung des Elements ziehen oder, im Falle von Text, die Schriftgröße im Stil-Panel ändern.

Natürlich sind Sie nicht darauf beschränkt, nur ein einziges Element in einer Zelle zu haben. Wenn Ihre Zelle groß genug ist, können Sie ein Bild, Text und möglicherweise eine Schaltfläche in derselben Zelle platzieren. Sie haben die Wahl, also werden Sie so kreativ, wie Sie möchten.

Bei Rasterzellen ist zu beachten, dass sie alle gleich gestaltet sind. Wenn Sie beispielsweise eine Zelle auswählen und ihre Hintergrundfarbe ändern, erhalten alle Zellen im Raster dieselbe Farbe. Dies dient dazu, die Konsistenz und Symmetrie Ihrer Rasterdesigns sicherzustellen. Sie können Ihren Zellen jedoch unterschiedliche Farbhintergründe zuweisen, indem Sie ein Feld als Teil des Inhalts einfügen. Wenn ich beispielsweise möchte, dass das oben abgebildete Textfeld einen blauen Hintergrund hat, würde ich es als Teil des Inhalts erstellen, dann mit dem Text gruppieren und anschließend in eine Zelle einfügen – etwa so.

Sobald sich Ihr Inhalt in der Zelle befindet, können Sie die Größe des Hintergrunds und des Textes unabhängig voneinander anpassen, damit sie besser in den verfügbaren Platz passen.

Kreativ werden

Sie fragen sich vielleicht, wie diese Funktion von Sitely am besten in der modernen Welt der visuellen Kommunikation eingesetzt werden kann – insbesondere im Webdesign. Um diese Frage zu beantworten, müssen wir uns nur einige der neueren Trends im Webseitendesign ansehen – insbesondere Bento-Rasterdesigns. Dabei handelt es sich um Webseiten, die von der japanischen Bento-Lunchbox inspiriert sind. Wenn Sie diese nicht kennen, sehen sie so aus:

Das Konzept ist relativ einfach zu verstehen. Jedes Element der Mahlzeit befindet sich in einem eigenen Behälter. Beim Webdesign kommen ähnliche Konzepte zum Einsatz. Anstelle von Lebensmitteln enthält eine im Bento-Stil gestaltete Webseite eine Reihe von Zellen, die jeweils eine einzelne Idee oder Botschaft enthalten. Dieser Stil wird vor allem von Technologieunternehmen wie Apple bevorzugt. Im Grunde kann ein Benutzer die gesamte Seite schnell überfliegen, um sich ein Bild davon zu machen, worum es bei einem Produkt oder einer Dienstleistung geht. Jede Idee ist übersichtlich in einzelne Abschnitte unterteilt. Wenn man mit der Maus über einen Abschnitt fährt oder darauf klickt, erhält man oft weitere Informationen zu diesem bestimmten Aspekt des Produkts oder der Dienstleistung. Dieses Konzept des „schnellen Überfliegens“ ist in der heutigen schnelllebigen und größtenteils ungeduldigen Welt der digitalen Medien unverzichtbar geworden. Und so wurde der Bento-Box-Designtrend geboren.

Aber wo fängt man an, wenn man eine Webseite für diese Art von Design entwerfen möchte? Nun, als Erstes sollten Sie daran denken, dass Sie bei Ihrem Rasterdesign viel Flexibilität benötigen, um das Potenzial des Designkonzepts voll auszuschöpfen. Anstatt also 3-spaltige Raster zu verwenden, wie oben dargestellt, sollten Sie stattdessen ein Raster erstellen, das Ihnen viel mehr Platzierungsoptionen bietet. Ein guter Ausgangspunkt ist es, zu versuchen, Ihr Layout-Raster an das zugrunde liegende Spaltenraster Ihrer Sitely-Arbeitsfläche anzupassen.

Wenn wir die 12-Spalten-Rasterstruktur von Sitely für eine normale Desktop-Seite verwenden, können wir ein Layout-Raster einrichten, das dem gleichen Format folgt. Das Raster würde wie folgt aufgebaut sein:

Und auf der Arbeitsfläche würde es in etwa so aussehen.

Ein Layout-Raster wie dieses bietet Ihnen natürlich eine Vielzahl von Zeilen- und Spaltenauswahlmöglichkeiten für Ihre einzelnen Zellen. Unten sehen Sie ein Beispiel dafür, wie dieses Konzept genutzt werden kann, um den ungeduldigen Websurfern, die nicht gerne nach der Navigation oder anderen informativen Seiten suchen, eine visuelle Botschaft zu vermitteln. Stattdessen erhalten sie einen visuellen Eindruck von der Botschaft der Seite. Durch Bewegen des Mauszeigers über die verschiedenen Elemente oder durch Klicken/Tippen auf diese werden weitere Informationen oder größere Bilder des Produkts angezeigt. Sie können sogar zu anderen Webseiten weitergeleitet werden, um eine detailliertere Erklärung zu einem bestimmten Aspekt des Seitenangebots zu erhalten.