Einführung
Sitely nutzen
Elemente
Anleitung
Wenn wir an Boxen denken, stellen wir uns oft quadratische oder rechteckige Formen vor, die wir verwenden, um Inhalte auf einer Webseite zu trennen. Doch Boxen bieten mehr, als auf den ersten Blick ersichtlich ist. Sie gehören zu den grundlegenden Bausteinen des Webdesigns und bieten, wenn sie kreativ eingesetzt werden, eine große Flexibilität, um die Botschaft Ihrer Webseite optimal zu präsentieren. Sehen Sie sich das folgende Beispiel für einen Seitenheader an. Dieser besteht fast vollständig aus Boxen: Einige mit abgerundeten Ecken, einige mit Bildern gefüllt, andere mit einer Vollfarbe und darübergelegtem Text, und ein paar mit Symbolen.
In Sitely stehen Ihnen alle Styling-Tools zur Verfügung, die Sie sich für Boxen wünschen können, und alle sind bequem im Stil-Panel auf der rechten Seite der Sitely-Oberfläche zugänglich.
Thai Delights
Authentic Asian Dining Experience
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt lorem enim, eget fringilla turpis congue vitae. Phasellus aliquam nisi ut lorem vestibulum eleifend. Nulla ut arcu non nisi congue venenatis vitae ut ante. Nam iaculis sem nec ultrices
Button
Button
Check Out Our Menu
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:
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.
Styling-Optionen für Ihre Boxen
Unabhängig davon, wie Sie Ihre Boxen füllen, können Sie zusätzliche Styling-Optionen anwenden:
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.
Bitte melden Sie uns Mängel, die Ihnen in dieser Dokumentation auffallen, damit wir sie schnellstmöglich beheben können!
Aktualisiert für Sitely 5.6
This website makes use of cookies.
Please see our privacy policy for details.
It’s Okay
Deny