Layout-Blöcke | Sitely-Dokumentation

Layout-Blöcke sind eine praktische Funktion von Sitely, die Sie wann immer möglich nutzen sollten. Sie sorgen nicht nur für eine organisierte Struktur Ihrer Seiten, sondern erleichtern auch das Umorganisieren von Inhalten erheblich. Aber was ist ein Layout-Block?

Wenn Sie sich die folgenden Abbildungen eines typischen Webseiten-Wireframes ansehen, werden Sie feststellen, dass die Seitenelemente in visuell getrennte Abschnitte unterteilt sind – jeder Abschnitt vermittelt eine bestimmte Idee, ein Konzept oder eine Botschaft.

Durch Klicken auf dieses Element wird ein Layout-Block auf der Seite platziert, den Sie anpassen und mit Inhalten füllen können. Wenn er zum ersten Mal auf der Seite hinzugefügt wird, ähnelt er einer breiten Box mit einem Standard-Hintergrund. Sein Unterscheidungsmerkmal ist ein diamantförmiger unterer Ziehgriff.

Anstatt eine lange Seite zu haben, auf der der Inhalt durchgehend von Rand zu Rand angeordnet ist, haben wir eine visuell ansprechendere Struktur, bei der einige Abschnitte drei Spalten umfassen, andere zwei, einige eine Spalte und wieder andere vier Spalten. Dieses Konzept macht eine Seite weniger monoton und angenehmer zu betrachten – es gibt dem Auge eine Pause, während die Seite durchgesehen wird. Außerdem ermöglicht es, dass der Inhalt für den Benutzer leichter verdaulich ist, indem er in kleinere, leichter zu erfassende Abschnitte unterteilt wird.

Jedes dieser visuellen Informationselemente macht perfekte Layout-Blöcke aus, und sobald sie erstellt sind, können sie nach Bedarf nach oben oder unten auf der Seite verschoben werden, um den Inhalt neu anzuordnen. Außerdem wird beim Verschieben eines Layout-Blocks der gesamte Inhalt mitbewegt, ohne dass dessen Layout gestört wird.

Layout-Blöcke erstellen

Sitely hat ein Layout-Block-Element, das so aussieht:

Wenn Sie mit dem Mauszeiger über den Ziehgriff fahren, ändert sich der Cursor und zeigt an, dass es sich um einen Ziehgriff handelt. Indem Sie den Griff ziehen, werden alle Layout-Blöcke unter dem aktuellen Block nach unten verschoben, während der Block vergrößert wird.

Obwohl das Hinzufügen eines Blocks auf die Leinwand und das anschließende Befüllen mit Inhalten gut funktioniert, könnte ein einfacherer Ansatz darin bestehen, zunächst Ihren ersten Inhaltsbereich zu gestalten – vielleicht einen Hero-Bereich für Ihre Webseite. Sobald der Inhalt nach Ihren Wünschen gestaltet ist, können Sie alle Elemente, die Ihren Hero-Bereich ausmachen, auswählen, mit der rechten Maustaste klicken und im Kontextmenü die Option „In Layout-Block verschieben“ wählen.

Durch diese Aktion wird alles gruppiert und in einem Layout-Block zusammengefasst. Sie können Ihren Layout-Block nun überall auf der Seite verschieben, in dem Wissen, dass Ihr sorgfältig gestalteter Hero-Bereich intakt bleibt. So können Sie mit der Gestaltung des Inhalts für den nächsten Block beginnen. In vielerlei Hinsicht haben Layout-Blöcke die gleichen Styling-Möglichkeiten wie breite Boxen. Sie können eine Füllfarbe festlegen, dem Block ein Bild oder einen Farbverlauf hinzufügen, Ränder (oben und unten) anwenden, Schatten und Hintergrundfilter hinzufügen. Sie können auch festlegen, dass Ihr Layout-Block eine Scroll-Position darstellt, was es sehr einfach macht, die Navigation auf bestimmte Teile Ihrer Seite zu verlinken.

Andere Arten von Layout-Blöcken
Sitely hat noch ein paar weitere Layout-Blöcke in seiner Toolbox. Diese sind im Wesentlichen Layout-Blöcke, die für bestimmte Anwendungsfälle erstellt wurden. Zum Beispiel sind das „Bild/Video-Raster“ und das „Layout-Raster“ Layout-Blöcke, die für spezifische Zwecke entwickelt wurden. Sie funktionieren auf ähnliche Weise wie der Standard-Layout-Block, aber der Inhalt, den Sie hinzufügen, ist spezifischer. Weitere Informationen zur Verwendung dieser Raster finden Sie in der Dokumentation.

Sichtbarkeitsoptionen

Jeder Layout-Block kann so eingestellt werden, dass er zunächst ausgeblendet wird, was bedeutet, dass er nicht zu sehen ist, wenn eine Seite im Browser geladen wird. Damit ein Benutzer den Layout-Block sehen kann, müssten Sie ein interaktives Element auf der Seite bereitstellen, das den Block bei einem Klick sichtbar macht. Ein typisches Beispiel dafür ist ein Mega-Menü, das in Ihre Seite integriert wird. Diese Menüs werden häufig auf E-Commerce-Websites verwendet, wo Benutzer über ein Hauptnavigationsmenü schnellen Zugriff auf Produktgruppen erhalten. Hier ist ein Beispiel:

In diesem Beispiel sieht ein Benutzer, der auf einen Hauptnavigationslink klickt, einen Block mit Produktkategorien und Links, die zu bestimmten Seiten der Website führen. Natürlich wäre es für die Benutzer besser, wenn dieses Mega-Menü beim ersten Laden der Seite nicht sichtbar wäre, da es den Fluss des Hauptseitendesigns stören würde. Indem Sie das Mega-Menü in einem Layout-Block erstellen und diesen anfänglich ausblenden, bleibt die Seite klar und aufgeräumt. Ein Klick auf einen Link zeigt dann das Menü und alle seine Optionen an. Sie sehen die Option, einen Layout-Block auszublenden, im Stil-Panel, wenn Sie einen Layout-Block auf der Leinwand ausgewählt haben.

Wenn Sie diese Funktion nutzen, ist es eine gute Idee, Ihren Layout-Blöcken eine Gruppen-ID zuzuweisen – dies ist einfach eine Zahl, die angibt, dass der Layout-Block zu einer bestimmten Gruppe von Blöcken auf der Seite gehört. Der Standardwert ist null, aber Sie können jede beliebige Zahl verwenden. Der Grund, warum dies wichtig ist, liegt darin, dass Sie beim Erstellen eines Links zum Anzeigen des Blocks – sei es ein normales Menü oder eine Schaltfläche – die Option haben, andere Layout-Blöcke auf der Seite zu schließen, wenn auf den Link geklickt wird. Wenn ich beispielsweise zwei Mega-Menüs habe, die mit zwei verschiedenen Navigationslinks verknüpft sind, möchte ich, dass immer nur eines angezeigt wird. Wenn ich meine Navigationslinks erstelle, würde ich daher den Link so einstellen, dass er alle anderen Layout-Blöcke schließt, bevor er ein anderes öffnet. Indem ich meinen Mega-Menü-Layout-Blöcken eine gemeinsame ID zuweise, wird sichergestellt, dass nur Blöcke mit dieser ID geschlossen werden. Mit anderen Worten: Es wird immer nur ein Mega-Menü angezeigt. Wenn ich diese ID nicht einfüge, könnte das Klicken auf einen Mega-Menü-Link versehentlich alle Layout-Blöcke auf meiner Seite schließen. Daher sollte sichergestellt werden, dass alle anderen Layout-Blöcke eine andere Gruppen-ID haben.