Einführung
Sitely verwenden
Elemente
Anleitungen
In Sitely sprechen wir bei Geräten davon, Seitenlayouts an unterschiedliche Geräte anzupassen. In vielen Webentwicklungsanwendungen werden Seitenlayouts häufig automatisch von der Software auf Basis eines zugrunde liegenden Frameworks geändert. Das kann für einige bequem sein, erweist sich jedoch als einschränkend für diejenigen, die bei der Gestaltung für Geräte mit unterschiedlichen Bildschirmabmessungen kreativer vorgehen möchten. Das führt oft dazu, dass Webentwickler unter die Haube greifen müssen, um Feinabstimmungen an den von solchen Apps erzeugten Layouts oder am Code vorzunehmen. In Sitely verfolgen wir einen anderen Ansatz, der auf der freien Formatierung des Sitely-Webdesigns basiert. Die Verwendung mehrerer Geräteleayouts erzeugt Seiten, die gemeinhin als „responsive“ bezeichnet werden.
Wenn Sie die Geräteauswahl von Sitely öffnen, erhalten Sie Informationen zum aktuell ausgewählten Gerät. Standardmäßig ist „Desktop-PC“ mit einer Breite von 1200 Pixeln eingestellt. Das sieht so aus.
Dies sollte Ihr Ausgangspunkt für alle neuen Projekte sein. Fügen Sie einfach Inhalte hinzu und ordnen Sie sie auf Ihrer Seite an, um mit der Erstellung der Standard-Desktop-Version Ihrer Webseite zu beginnen. Versuchen Sie bei einem neuen Projekt nach Möglichkeit, die integrierten Textstile von Sitely zu verwenden. Nutzen Sie beispielsweise den Stil „Title“ für Hauptüberschriften, den Stil „Body“ für Fließtext usw. Sie können Schriftart, Größe und Farben jedes Stils anpassen, während Sie Ihre Inhalte erstellen, und anschließend die entsprechenden Stile aktualisieren, indem Sie im Stil-Panel auf die Schaltfläche „Änderungen übernehmen“ unter dem Stilnamen klicken.
Stile auf diese Weise zu erstellen und zu verwenden, ist später sehr hilfreich, wenn Sie Ihr Seitenlayout für verschiedene Geräte anpassen. Arbeiten Sie so lange am Desktop-Layout, bis es genau Ihren Vorstellungen entspricht. An diesem Punkt können Sie erwägen, Ihre Seite in Layout-Blöcke zu unterteilen – zum Beispiel einen Block für die Navigation, einen für den Hero-Bereich und weitere für jede visuell abgrenzbare Sektion der Seite. Um einen Layout-Block zu erstellen, wählen Sie alle einzelnen Seitenelemente aus, die in den Block aufgenommen werden sollen, klicken Sie mit der rechten Maustaste und wählen Sie im Kontextmenü die Option „In Layout-Block verschieben“.
Dadurch werden alle ausgewählten Elemente bequem in einen Block gepackt, der sich auf der Seite nach oben oder unten verschieben lässt, ohne die Position der einzelnen Elemente innerhalb des Blocks zu verändern. Außerdem kann der Layout-Block alle darunterliegenden Layout-Blöcke mit nach unten verschieben, wenn Sie Elemente auf der Seite umordnen. Auch dies erweist sich als hilfreich, wenn Sie Seiten für andere Gerätegrößen anlegen. Hinweis: Beim Erstellen eines Layout-Blocks wird er zunächst mit einer der Wireframe-Farben von Sitely gestaltet. Das dient lediglich dazu, Ihnen zu zeigen, dass Sie einen Layout-Block erstellt haben, und macht ihn sofort auf der Arbeitsfläche sichtbar. Sie können die Farbe jederzeit entfernen oder ändern, indem Sie die Füllung im Stil-Panel anpassen.
Sobald Ihre Desktop-Seite fertig ist, können Sie ein neues Geräteleayout hinzufügen. Wir empfehlen, mit weiteren Geräteleayouts erst zu beginnen, wenn die Desktop-Seite abgeschlossen ist. Klicken Sie, sobald Sie bereit sind, oben auf das Symbol für die Geräteauswahl und anschließend auf die Schaltfläche „Geräte-Layouts anpassen“. Daraufhin erhalten Sie eine Liste weiterer Geräte, für die Sie gestalten können. Unsere Empfehlung: Beginnen Sie mit der Option „Smartphone Hochformat“ mit einer Breite von 320 Pixeln.
Klicken Sie auf die Dropdown-Liste „Nicht vorhanden“ und wählen Sie die Option „Benutzerdefiniertes Layout“. Dadurch wird eine neue Arbeitsfläche erstellt, auf der alle Inhalte skaliert werden, sodass sie auf den Bildschirm des neuen Geräts passen.
Als Erstes fällt wahrscheinlich auf, dass der Text extrem klein und kaum lesbar ist. Außerdem wurden alle Bilder proportional skaliert. Offensichtlich braucht diese Seite nun eine Neuordnung, damit sie sich für die Anzeige auf einem Smartphone-Bildschirm eignet. Wenn Sie jedoch unserem früheren Rat zur Verwendung von Textstilen gefolgt sind, lässt sich alles durch Anpassungen Ihrer Textstile im Stil-Panel auf eine akzeptablere Größe hochskalieren.
Denken Sie daran: Textstile werden gerätespezifisch angewendet. Das bedeutet, dass Änderungen an einem Textstil nur für das Gerät gelten, an dem Sie gerade arbeiten. In unserem Beispiel war der Stil „Body“ auf der Desktop-Variante auf 15pt gesetzt. Beim Wechsel zum Smartphone-Layout wurde er auf 4pt reduziert. Jetzt können wir diesen Textstil z. B. auf 12pt ändern und den Stil erneut aktualisieren, indem wir im Stil-Panel auf die Schaltfläche „Änderungen übernehmen“ klicken. Dadurch wird die Schriftgröße ALLER Body-Texte im Smartphone-Layout auf 12pt geändert. Genauso verfahren wir mit allen anderen verwendeten Textstilen. Beispielsweise können unsere Desktop-Titel auf 28pt festgelegt sein, während sie im Smartphone-Layout auf 18pt eingestellt sind.
Diese Änderungen wirken sich sofort auf unser Smartphone-Layout aus. Es sieht jetzt etwa so aus.
Der gesamte Text wurde nun auf eine lesbare Größe gebracht, aber die Textboxen müssen angepasst werden, um den vergrößerten Text aufzunehmen. Darauf weisen die roten Umrandungen der Textboxen hin. Sie zeigen an, dass sich in den Boxen mehr Text befindet, als auf dem Bildschirm zu sehen ist. Das lässt sich mit ein paar einfachen Handgriffen leicht beheben.
Als Erstes verlängern wir die Smartphone-Seite, um ausreichend Arbeitsraum zu schaffen. Im nächsten Schritt ziehen wir den unteren Größenänderungsgriff des obersten Layout-Blocks, um ihn zu vergrößern und die Größe seines Inhalts anpassen zu können. Durch das Ziehen des unteren Griffs werden alle anderen Layout-Blöcke nach unten geschoben, sodass ein großer Bereich entsteht, in dem wir am Inhalt des ersten Layout-Blocks arbeiten können.
Nun müssen Sie nur noch die Größenänderungsgriffe jeder Textbox greifen und ziehen, bis die rote Umrandung verschwindet. Sie können die Elemente innerhalb des Blocks verschieben, damit sie besser in den verfügbaren Raum passen. Wenn Sie mehr Platz benötigen, vergrößern Sie den Layout-Block einfach weiter. Hier beginnt unsere Mobilseite Gestalt anzunehmen.
In den meisten Fällen genügt es, eine Desktop- und eine Smartphone-Version Ihrer Webseite zu gestalten, damit Sitely die dazwischenliegenden Größen für Sie handhabt. Wenn Sie weitere Geräte zwischen Desktop und Smartphone hinzufügen, kann Sitely die unterschiedlichen Varianten einfach automatisch skalieren. Stellen Sie dazu bei jeder Gerätevariante die Option „Automatisch skaliert“ ein.
Natürlich können Sie jedes Gerät auch auf „Benutzerdefiniertes Layout“ setzen, wenn es Ihr Seitendesign erfordert. Beispielsweise möchten Sie vielleicht eine Webseite erstellen, die der unten gezeigten ähnelt.
In diesem Beispiel basiert die Desktop-Site überwiegend auf einer 2-Spalten-Struktur, wobei einige Layout-Blöcke in einer 4-Spalten-Struktur aufgebaut sind. In der Tablet-Version gibt es überwiegend 2- und 3-spaltige Rasterlayouts, während die mobile Version überwiegend einspaltig ist und einige Blöcke in einer 2-Spalten-Struktur aufgebaut sind. Die Wahl der zugrunde liegenden Rasterstruktur hängt im Wesentlichen von der Textmenge und der Bilddichte der Seite ab. Glücklicherweise unterstützt Sie Sitely bei der Gestaltung für verschiedene Geräte auf diese Weise.
Die standardmäßige zugrunde liegende Rasterstruktur für die Desktop-Version einer Website umfasst typischerweise 12 Spalten. Dadurch lässt sich die Seite in 2, 3 und 4 Spalten unterteilen, zusätzlich zur vollen Breite von 12 Spalten. Bei zwischenliegenden Gerätegrößen kann es jedoch sinnvoll sein, die Rasterstruktur zu ändern, um das geplante Seitenlayout besser zu unterstützen. Im obigen Beispiel bietet es sich an, die Tablet-Seite auf einem 4- oder 8-Spalten-Raster zu organisieren, während die mobile Version eher zu einem 2-Spalten-Raster passt.
Um diesem Bedarf gerecht zu werden, bietet Sitely eine gerätespezifische Rasterstruktur. So können Sie Ihre Desktop-Seite mit den standardmäßigen 12 Spalten einrichten, während Tablet- und Mobilseiten je nach Bedarf mit 2, 4 oder 8 Spalten konfiguriert werden können. Das Geräte-Raster stellen Sie über den Layout-Rasterwähler oben im Sitely-Fenster ein.
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.
