Einführung
Sitely verwenden
Elemente
Anleitungen
Wenn wir an Boxen denken, haben wir meist diese quadratischen oder rechteckigen Formen im Kopf, mit denen wir Inhalte auf einer Webseite voneinander trennen. Doch in Boxen steckt mehr, als man auf den ersten Blick sieht. Sie gehören zu den grundlegenden Bausteinen des Webdesigns und bieten, kreativ eingesetzt, große Flexibilität, um die Botschaft Ihrer Webseite zu vermitteln. Werfen Sie einen Blick auf die Beispielseitenkopfzeile unten. Sie besteht fast vollständig aus Boxen. Einige mit abgerundeten Ecken, einige mit Bildern gefüllt, einige in Volltonfarbe und mit Text überlagert und ein paar nur mit Icons.
In Sitely stehen Ihnen für Boxen alle gewünschten Gestaltungstools zur Verfügung – und alle befinden sich praktisch im Stil-Panel auf der rechten Seite der Sitely-Oberfläche.
Thai Delights
Authentisches asiatisches Restauranterlebnis
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
Schaltfläche
Schaltfläche
Unsere Speisekarte ansehen
Die erste Art ist die einfache Standardbox – sie sieht so aus:
Die zweite Art ist die Breite Box, die so aussieht:
Die Standardbox ist dafür gedacht, Boxen zu erstellen, die innerhalb der linken und rechten Seitenränder Ihrer Webseite bleiben, während die Breite Box über die linken und rechten Seitenränder hinaus bis zur vollen Browserbreite reicht.
Wenn eine Standardbox zur Arbeitsfläche hinzugefügt wird, können Sie sie nach Wunsch skalieren und positionieren. Außerdem lässt sich die Box so gestalten, dass genau der gewünschte Effekt entsteht. Hier sind die im Stil-Panel verfügbaren Optionen.
Wenn Sie die Option Verlauf wählen, erscheint eine Verlaufsfarbleiste, auf der Sie zwei Farben sowie einen Winkel für den Verlauf auswählen können. Klicken Sie einfach auf jedes Ende der Farbleiste, um Ihre Farben zu wählen, und geben Sie anschließend einen Winkel an.
Die erste Option ist die Füllung. Hier können Sie eine Farbe auswählen, mit der Ihre Box gefüllt wird. Über das Dropdown „Inhalt“ haben Sie außerdem die Möglichkeit, andere Fülltypen zu erstellen.
Wenn Sie die Option Bild wählen, können Sie ein Bild von Ihrem Laufwerk auswählen, um Ihre Box zu füllen. Dadurch erhalten Sie weitere Optionen, ob das Bild die Box ausfüllen oder in sie eingepasst werden soll. Aktivieren Sie einfach das Kontrollkästchen „Strecken“ und treffen Sie Ihre Wahl. Beim Ausfüllen wird das Bild so vergrößert, dass es die gesamte Box bedeckt – das kann zu einem Beschnitt des Bildes führen. Entscheiden Sie sich für Einpassen, wird das Bild nicht beschnitten – es wird vergrößert oder verkleinert, sodass es vollständig in die Box passt. Abhängig vom Seitenverhältnis des Bildes kann diese Option einen Briefkasten-Effekt erzeugen – also Freiräume links/rechts bzw. oben/unten. Wenn Sie die Option Ausfüllen wählen, können Sie das Bild innerhalb der Box außerdem ausrichten – links, rechts oder zentriert sowie oben, unten oder mittig.
Die SVG-Option ist für Webdesigner besonders hilfreich. Dabei handelt es sich um skalierbare Vektorgrafiken, die in jeder Größe auf der Arbeitsfläche platziert werden können und unabhängig vom Grad der Vergrößerung gestochen scharf bleiben. In der Beispiel-Kopfzeile oben haben wir SVG-Grafiken verwendet. Die drei Stern-Icons sind tatsächlich dasselbe Icon, dupliziert und in unterschiedlichen Größen auf der Seite platziert. Das eigentliche Icon sieht so aus.
Beachten Sie, dass es schwarz ist. Das unterstreicht einen weiteren Vorteil von SVG-Grafiken. Sie können die Farbe bzw. den Farbton der Grafik über die Option Farbüberlagerung im Stil-Panel ändern. Wenn Sie diese Option aktivieren, können Sie eine Farbe auswählen und auf das SVG anwenden. Hinweis: Das SVG muss sich nicht in einer Box befinden, damit diese Option funktioniert – Sie können das SVG auch einfach auf die Arbeitsfläche ziehen, wo es als Bild und nicht als Box platziert wird.
Die Option Stockbild funktioniert genauso wie die normale Bild-Option. Der einzige Unterschied ist, dass Sie ein Bild aus einer der von Sitely unterstützten Stockbild-Bibliotheken auswählen. Sobald Ihre Box mit einem Bild gefüllt ist, stehen Ihnen dieselben Gestaltungsoptionen zur Verfügung.
Die Optionen Eingebautes Muster und Benutzerdefiniertes Muster füllen Ihre Box mit einer der vielen von Sitely angebotenen Musterfüllungen. Diese Muster funktionieren genauso wie beim Einsatz als Seitenhintergrund. Sie können den Maßstab des Musters so anpassen, dass er am besten zu Ihrem Design passt.
Unabhängig davon, wie Sie Ihre Boxen füllen, können Sie zusätzliche Stiloptionen hinzufügen.
Rand: Mit dieser Option fügen Sie Ihrer Box einen Rand hinzu. Sie können den Rand auf allen Seiten gleich einstellen oder für jede Seite Ihrer Box einen eigenen Stil/Dicke/Farbe wählen.
Abrundung: Diese Option verleiht Ihrer Box abgerundete Ecken. Sie können alle vier Ecken identisch abrunden oder gezielt festlegen, wie und welche Ecken abgerundet werden. Ist die Box ein perfektes Quadrat, kann eine starke Abrundung aller vier Ecken Ihre Box in einen Kreis verwandeln.
Schatten: Diese Option fügt Ihrer Box einen Schatten hinzu. Den Effekt passen Sie an, indem Sie den kleinen Punkt im Kreis verschieben oder präzise Maße eingeben. Die Schattenfarbe können Sie durch Klick auf das Farbfeld ändern.
Deckkraft: Hier können Sie die Deckkraft Ihrer Box verringern. Zwar könnten Sie die Farbe Ihrer Box auch einfach auf einen helleren Ton ändern, doch die Deckkraft-Option ist oft vorzuziehen, wenn bestimmte Effekte gewünscht sind, bei denen darunterliegende Elemente der Seite durch die Box hindurchscheinen sollen.
Hintergrundfilter: Diese Filter bestimmen, was passiert, wenn sich hinter Ihrer Box andere Seitenelemente befinden. Während die Deckkraft darunterliegende Elemente durchscheinen lässt, fügen Hintergrundfilter dem Hintergrund eine gewisse Verzerrung hinzu. Platzieren Sie zum Beispiel eine vollständig oder teilweise transparente Box über einem Hintergrundelement und wenden Sie dann einen Weichzeichner als Hintergrundfilter an, entsteht der Effekt einer Milchglas-Box, die über dem Hintergrund schwebt. Solche Effekte wirken besonders eindrucksvoll, wenn Ihre Box eine Scroll-Animation hat. Beim Scrollen der Seite kann Ihre Box über andere Seitenelemente gleiten und der Seite so eine stärker dreidimensionale Wirkung verleihen.
Da Boxen sehr einfach zu erstellen sind, eignen sie sich ideal, um zunächst das Layout Ihrer Webseite anzulegen (Wireframing). Sie können Bilder, Hintergrundbereiche, Buttons und Formularfelder nachahmen und geben Ihnen so schnell einen Überblick darüber, wie Ihre Seite wirken wird. Sobald Ihr grundlegendes Wireframe steht und Sie mit echten Inhalten beginnen, wäre es praktisch, Ihre Boxen in gängige Elemente umwandeln zu können, ohne von vorn anfangen zu müssen. Keine Sorge – Sitely hat dafür eine Lösung. Klicken Sie mit der rechten Maustaste auf eine Box und wählen Sie eine der Umwandlungsoptionen im Kontextmenü.
Das Kontextmenü bietet außerdem eine weitere hilfreiche Funktion: Sie können den Stil eines Elements kopieren und anschließend auf ein anderes Element einfügen. So könnten Sie z. B. eine Schaltfläche auf Ihrer Seite gestalten – inklusive Hover- und Klickzustand. Möchten Sie weiter unten eine weitere Schaltfläche hinzufügen, kopieren Sie einfach den Stil der ursprünglichen Schaltfläche und fügen ihn bei der neuen ein. So bleibt Ihr Design auf der gesamten Seite konsistent.
Bitte melden Sie uns alle Mängel in dieser Dokumentation, wir beheben sie so schnell wie möglich!
Aktualisiert für Sitely 6
Diese Website verwendet Cookies.
Bitte lesen Sie unsere Datenschutzerklärung für weitere Details.
