Layout-Raster

Das Layout-Raster von Sitely ist ein hervorragendes Werkzeug, um ansprechende Seiten- oder Abschnitts-Layouts zu erstellen. Zwar wird es häufiger für Bildraster in Galerien verwendet, es eignet sich jedoch ebenso für andere Inhalte wie Text, Buttons und Boxen. Tatsächlich bietet Ihnen Sitely eine separate Layout-Raster-Option speziell für Bild- und Videoinhalte – sie heißt Bild-/Video-Raster. Dieses Element kann ein Raster über ein spezielles Inhaltsauswahlfenster automatisch mit Inhalten füllen. Das Standardraster, um das es hier geht, ist eine flexiblere Option für alle, die benutzerdefinierte Inhalte zu Rasterzellen hinzufügen möchten. Abgesehen von diesen Unterschieden werden beide Rasteroptionen weitgehend auf die gleiche Weise eingerichtet..

Beginnen Sie, indem Sie das Element auf Ihrer Arbeitsfläche platzieren. Beim ersten Hinzufügen enthält es standardmäßig eine Struktur mit einer Zeile und drei Spalten – so sieht das aus:

Sie können Ihr Raster noch weiter gestalten, indem Sie jede Rasterzelle auswählen und Sitely anweisen, deren Größe und Form zu ändern. Ebenfalls im Stil-Panel finden Sie eine Option, mit der Sie festlegen, wie viele Spalten und/oder Zeilen jede Zelle im Raster einnehmen soll. Die Option sieht so aus.

Wenn Sie die Option Rasterzelle im Stil-Panel nicht sehen, haben Sie keine Zelle ausgewählt. Klicken Sie in eine Zelle, um sie zu markieren; dann erscheint die Option. Auf der Arbeitsfläche erkennen Sie eine ausgewählte Zelle daran, dass sie Rahmenanfasser zeigt, die wie kleine X‑Zeichen aussehen.

Arbeiten Sie nacheinander jede Zelle durch und passen Sie deren Zellspannweiten an, bis das Raster so aussieht, wie Sie es wünschen. Hier ist ein Beispiel für ein einfaches Raster, das dabei herauskommen könnte. Wir haben die Spalten- und Zeilenspannen ergänzt, damit Sie sehen können, wie das Raster aufgebaut wurde.

Ihr Raster kann nun mit allen verfügbaren Optionen im Stil-Panel gestaltet werden. Füllfarbe, Rahmen und Abrundungen lassen sich anwenden. Zu beachten ist, dass das Layout-Raster selbst sowie die Rasterzellen beim ersten Hinzufügen zur Arbeitsfläche mit standardmäßigen Wireframe-Farben gefüllt sind. Diese Farben können im Stil-Panel nach Ihrem Geschmack geändert werden.

Als Nächstes fügen Sie Inhalte hinzu. Grundsätzlich können Sie fast jedes Element in einer Zelle platzieren. Erstellen und gestalten Sie das Element einfach auf Ihrer Arbeitsfläche und ziehen Sie es dann über eine der Zellen, um es dort abzulegen. Während Sie Elemente über das Raster ziehen, werden die Zellen hervorgehoben, um anzuzeigen, dass Sie sich im Ablagebereich dieser Zelle befinden. Lassen Sie die Maustaste los, und das Element wird in der Zelle abgelegt. So sieht die Hervorhebung aus.

Wenn Ihr Inhalt größer ist als die Zelle, wird das Element beim Ablegen zugeschnitten, sodass es innerhalb der Zellgrenzen passt. Möglicherweise müssen Sie den Inhalt anschließend in Größe und Form an die Zelle anpassen. Ziehen Sie dazu am Größenänderungsgriff des Elements oder ändern Sie bei Text die Schriftgröße im Stil-Panel.

Natürlich sind Sie nicht auf ein einzelnes Element pro Zelle beschränkt. Ist Ihre Zelle groß genug, können Sie Bild, Text und möglicherweise auch einen Button in derselben Zelle platzieren – ganz nach Ihrem Geschmack, werden Sie ruhig kreativ.

Beachten Sie, dass alle Rasterzellen auf die gleiche Weise gestylt werden. Wenn Sie beispielsweise eine Zelle auswählen und deren Hintergrundfarbe ändern, übernehmen alle Zellen im Raster dieselbe Farbe. Das soll Konsistenz und Symmetrie Ihres Rasterdesigns sicherstellen. Sie können Ihren Zellen jedoch unterschiedliche Hintergrundfarben geben, indem Sie eine Box als Teil des Inhalts hinzufügen. Wenn ich dem oben dargestellten Text-Baustein beispielsweise einen blauen Hintergrund geben möchte, erstelle ich ihn als Bestandteil des Inhalts, gruppiere ihn mit dem Text und lege ihn dann in einer Zelle ab – so.

Sobald sich Ihr Inhalt in der Zelle befindet, können Sie die Größe von Hintergrund und Text unabhängig voneinander anpassen, damit alles besser in den verfügbaren Raum passt. 

Kreativ werden

Vielleicht fragen Sie sich, wie sich dieses Sitely-Feature in der modernen Welt der visuellen Kommunikation – insbesondere im Webdesign – am besten einsetzen lässt. Um diese Frage zu beantworten, genügt ein Blick auf einige der jüngsten Webdesign-Trends, insbesondere Bento-Grid-Designs. Diese Webseiten sind vom japanischen Bento-Lunchbox-Prinzip inspiriert. Falls Ihnen das nicht geläufig ist – so sehen sie aus:

Das Konzept ist leicht zu verstehen: Jeder Bestandteil der Mahlzeit befindet sich in seinem eigenen Behälter. Im Webdesign greifen ähnliche Ideen. Statt Lebensmitteln enthält eine Bento-gestaltete Webseite eine Reihe von Zellen, die jeweils eine einzelne Idee oder Botschaft transportieren. Diese Stilrichtung wird vor allem von Tech-Unternehmen wie Apple bevorzugt. Im Grunde kann ein Nutzer die gesamte Seite schnell überfliegen, um ein Gefühl dafür zu bekommen, worum es bei einem Produkt oder Service geht. Jede Idee ist ordentlich gekapselt. Beim Überfahren oder Klicken einer Kachel werden oft weiterführende Informationen zu diesem Aspekt des Produkts oder Services eingeblendet. Dieses „Quick-Scan“-Prinzip ist in der heutigen, schnelllebigen und weitgehend ungeduldigen digitalen Welt essenziell geworden. So entstand der Bento-Box-Designtrend. 

Aber wo fängt man bei der Gestaltung einer Webseite in diesem Stil an? Merken Sie sich vor allem, dass Sie für dieses Konzept viel Flexibilität in Ihrem Raster benötigen, um das Potenzial optimal auszuschöpfen. Anstatt also mit 3-Spalten-Rastern zu arbeiten, wie oben gezeigt, erstellen Sie ein Raster, das Ihnen deutlich mehr Platzierungsoptionen bietet. Ein guter Startpunkt ist, Ihr Layout-Raster am zugrunde liegenden Spaltenraster Ihrer Sitely-Arbeitsfläche auszurichten. 

Nehmen wir Sitelys 12‑Spalten-Rasterstruktur für eine normale Desktop-Seite, können wir ein Layout-Raster im gleichen Format einrichten. Das Raster würde so eingestellt werden:

Und auf der Arbeitsfläche sähe es in etwa so aus.

Offensichtlich bietet Ihnen ein solches Layout-Raster eine große Auswahl an Zeilen- und Spaltenspannen für die einzelnen Zellen. Unten finden Sie ein Live-Beispiel dafür, wie sich dieses Konzept nutzen lässt, um ungeduldigen Websurfern, die ungern nach Navigation oder anderen Infoseiten suchen, eine wirkungsvolle visuelle Botschaft zu vermitteln. Stattdessen erfassen sie den Kern der Seite visuell. Durch Überfahren bzw. Klicken/Tippen auf die verschiedenen Elemente erhalten sie mehr Informationen oder größere Produktbilder. Sie können sogar zu anderen Seiten der Website geführt werden, die einen bestimmten Aspekt des Angebots detaillierter erklären. Erkunden Sie das Raster unten, um sich inspirieren zu lassen.