Boxen | Sitely-Dokumentation

Zwei Arten von Boxen

Die erste Art ist die Standardbox – sie sieht so aus:

Die zweite Art ist die Weitbox, die so aussieht:

Die Standardbox ist für Boxen gedacht, die innerhalb der linken und rechten Ränder Ihrer Webseite bleiben, während die Weitbox dafür ausgelegt ist, über die Ränder hinaus die volle Breite des Browserfensters zu nutzen.

Wenn eine Standardbox auf die Leinwand gezogen wird, kann sie nach Belieben in Größe und Position angepasst werden. Darüber hinaus kann die Box so gestaltet werden, dass sie genau den gewünschten Effekt erzielt. Im Stil-Panel stehen folgende Optionen zur Verfügung:

Füllung: Hier können Sie eine Farbe für die Box auswählen. Zudem haben Sie die Möglichkeit, andere Fülltypen aus dem Dropdown-Menü „Inhalt“ auszuwählen.

Verlauf: Bei der Auswahl dieser Option wird eine Verlaufsfarbleiste angezeigt, in der Sie zwei Farben sowie einen Winkel für den Verlauf wählen können. Klicken Sie einfach auf beide Enden der Leiste, um Ihre Farben auszuwählen, und wenden Sie dann einen Winkel an.

SVG: Diese Option ist besonders für Webdesigner nützlich. SVGs (Scalable Vector Graphics) können in jeder Größe eingefügt werden und behalten ihre Schärfe, unabhängig davon, wie stark sie vergrößert werden. In unserem Seitenheader-Beispiel wurden drei Sternsymbole verwendet, die alle dieselbe SVG-Grafik sind, nur in unterschiedlichen Größen dargestellt.

Bild: Sie können ein Bild von Ihrem Computer auswählen, um die Box damit zu füllen. Dabei haben Sie die Wahl, ob das Bild die Box füllen oder nur passen soll. Wenn Sie die Option „Strecken“ auswählen, wird das Bild vergrößert, um die Box vollständig zu füllen – was zu einem Beschnitt des Bildes führen kann. Wählen Sie „Anpassen“, wird das Bild so skaliert, dass es in die Box passt, ohne beschnitten zu werden. Dies kann je nach Seitenverhältnis des Bildes zu einem Briefkasten-Effekt führen – dabei bleiben möglicherweise Lücken an den Seiten oder oben und unten.

Beachte, dass es schwarz ist. Dies unterstreicht einen weiteren Vorteil der Verwendung von SVG-Grafiken. Du kannst die Farbe/Schattierung der Grafik ändern, indem du die Option „Farbüberlagerung“ im Stil-Bedienfeld verwendest. Wenn du diese Option aktivierst, kannst du eine Farbe auswählen und auf die SVG anwenden. Hinweis: Die SVG muss nicht in einem Rahmen enthalten sein, damit diese Option funktioniert. Du kannst die SVG einfach auf die Leinwand ziehen, wo sie als Bild und nicht als Rahmen platziert wird.

Stockbild: Diese Option funktioniert genauso wie die normale Bild-Option, mit dem Unterschied, dass Sie ein Bild aus einer der unterstützten Stockbild-Bibliotheken von Sitely auswählen.

Mit den Optionen „Integriertes Muster“ und „Benutzerdefiniertes Muster“ wird dein Feld mit einem der vielen Muster gefüllt, die Sitely bietet. Diese Muster funktionieren genauso wie bei der Verwendung als Seitenhintergrundfüllung. Du kannst die Größe des Musters an dein Design anpassen.

Styling-Optionen für Ihre Boxen

Unabhängig davon, wie Sie Ihre Boxen füllen, können Sie zusätzliche Styling-Optionen anwenden:

Rand: Diese Option erlaubt es Ihnen, der Box einen Rand hinzuzufügen. Sie können für alle Seiten denselben Randstil festlegen oder unterschiedliche Stile, Dicken und Farben für jede Seite wählen.

Abrundung: Hiermit können Sie die Ecken Ihrer Box abrunden. Sie können entweder alle vier Ecken gleichmäßig abrunden oder festlegen, welche Ecken abgerundet werden sollen. Wenn Ihre Box quadratisch ist, kann eine Abrundung aller Ecken sie in einen Kreis verwandeln.

Schatten: Sie können Ihrer Box einen Schatten hinzufügen. Die Intensität des Schattens kann durch Verschieben des kleinen Punktes im Kreis oder durch Eingabe präziser Maße angepasst werden.

Deckkraft: Hier können Sie die Deckkraft der Box reduzieren. Obwohl Sie einfach die Farbe der Box ändern könnten, um eine hellere Nuance zu erhalten, ist die Deckkraft-Option besonders nützlich, wenn Sie einen Effekt erzeugen möchten, bei dem die darunterliegenden Elemente durch die Box hindurch sichtbar sind.

Hintergrundfilter: Diese Filter bestimmen, wie die Elemente hinter Ihrer Box dargestellt werden. Zum Beispiel können Sie eine transparente oder halbtransparente Box über ein Hintergrundelement legen und dann einen Unschärfe-Filter anwenden, um einen „milchglasartigen“ Effekt zu erzielen.

Da Boxen so einfach zu erstellen sind, eignen sie sich ideal als grundlegendes Element beim Entwurf einer Webseitenstruktur (Wireframing). Sobald Ihr grundlegendes Wireframe-Design steht, können Sie Ihre Boxen in gängige Seitenelemente umwandeln, ohne von vorne beginnen zu müssen. Dazu können Sie einfach mit der rechten Maustaste auf eine Box klicken und im Kontextmenü eine der Umwandlungsoptionen auswählen.

Das Kontextmenü bietet auch eine nützliche Funktion, mit der Sie den Stil eines Elements kopieren und auf ein anderes Element anwenden können. Das ist besonders hilfreich, um einheitliche Designs auf Ihrer Seite zu gewährleisten.