Zero Block: Responsive Design

Zero Block verfügt über zwei Arbeitsbereiche, die als Container bezeichnet werden. Der Rasterbereich wird als Rastercontainer bezeichnet, während der Fenstercontainer ein Bereich ist, der die Grenzen des Browserbildschirms angibt.

Der Grid-Container ist der Hauptarbeitsbereich. Es hat das gleiche Raster wie Tilda. Wenn Sie Elemente innerhalb des Rastercontainers platzieren, befinden sie sich unabhängig von der Bildschirmgröße innerhalb des zwölfspaltigen Rasters.

Auf der X-Achse ist der Rastercontainer immer zentriert.

Das Gleiche passiert mit den Versionen für verschiedene Geräte: Wenn Sie zwischen Bildschirmtypen wechseln, wird die Breite des Grid-Containers 980, 640, 480, 320 Pixel, er bleibt fest und zentriert.

Sie können die Höhe des Rastercontainers in den Artboard-Einstellungen festlegen oder indem Sie den Container mit der Maus nach oben/unten ziehen. Sie können die Höhe eines eindeutigen Rastercontainers für jede Auflösung festlegen. Die Höhe des Grid-Containers ist die Höhe des Blocks.

Wenn Sie möchten, dass ein Zero Block immer 100% der Bildschirmhöhe einnimmt, müssen Sie die Höhe des Fenstercontainers auf eine andere als die des Grid-Containers einstellen. Daher müssen Sie die Höhe des Fenstercontainers in den Zeichenflächeneinstellungen auf 100 % festlegen.

Wählen Sie danach die Ausrichtung des Rastercontainers auf dem Bildschirm aus: Oben, Mitte, Unten oder Strecken. Es ist standardmäßig zentriert.

Standardmäßig sind alle Elemente an den Grid-Container angehängt und der Ursprung befindet sich in der oberen linken Ecke.

Manchmal müssen Sie ein Element nicht an das Raster, sondern an den Bildschirm anhängen. Sie möchten beispielsweise, dass das Logo auf allen Bildschirmen in der oberen linken Ecke fixiert wird.

Öffnen Sie dazu das Einstellungsfenster des Elements und ändern Sie den Containertyp in Window Container. Der Ursprung verschiebt sich in die obere linke Ecke des Fenstercontainers.

Jetzt befindet sich das Logo in der oberen linken Ecke eines jeden Bildschirms.

Wenn Sie ein Element z.B. an die obere rechte Ecke anhängen möchten, können Sie die gleiche Methode verwenden: Wählen Sie "Fenstercontainer" und legen Sie den Ursprung der Elementkoordinaten wie folgt fest: X – rechts, Y – oben.

Jedes Element im Arbeitsbereich hat seine eigenen Koordinaten, die seine Position zum Ursprung auf der X-Achse und der Y-Achse angeben.

Wählen Sie ein Element aus, öffnen Sie das Einstellungsfenster, indem Sie die Tabulatortaste drücken, und Sie sehen die Koordinaten des Elements ganz oben im Fenster.

Der Standardursprung aller Elemente befindet sich in der oberen linken Ecke des Grid-Containers. Aber es kann verschoben und an einem der neun Punkte des Rechtecks platziert werden: rechts, oben, unten links usw.

Um die Position des Ursprungs zu ändern, öffnen Sie das +Container-Bedienfeld (standardmäßig ist es minimiert).

Wir haben vorgesehen, dass die Größe der Elemente ebenfalls in Prozent festgelegt wird. So können Sie "fließende" Elemente erstellen, deren Größe sich je nach Browserfenster ändert.

Beispielsweise möchten Sie, dass die Hälfte des Bildschirms immer gelb ist. Fügen Sie dazu eine Form hinzu und öffnen Sie das Einstellungsfenster des Elements. Stellen Sie den Containertyp auf Window Container, ändern Sie die Maßeinheiten für Breite und Höhe auf Prozent statt Pixel, stellen Sie die Bildschirmbreite auf 50 % und die Bildschirmhöhe auf 100 % ein. Sie können die Achsenwerte auch in Prozent festlegen. Wenn Sie möchten, dass das Element immer die rechte Hälfte des Bildschirms einnimmt, setzen Sie den Wert der X-Achse auf 50 %.

Das Video zeigt, dass die rechte Seite des Blocks immer die Hälfte des Bildschirms einnimmt.

Standardmäßig werden alle Elemente an einen Grid-Container angehängt. Dies ist ein Rechteck mit einer Breite von 1200 Pixeln auf dem Desktop. Es ist immer zentriert auf dem Bildschirm und hat unabhängig von der Displaybreite die gleiche Größe.

Mit Auto Scale können Sie alle Elemente, die zum Grid-Container gehören, proportional zur Breite des Bildschirms oder Browsers skalieren. Der Grid-Container nimmt keine feste Breite von 1200 Pixeln ein, sondern erstreckt sich über die volle Breite des Bildschirms. Alle hinzugefügten Elemente werden proportional vergrößert, um den gesamten Bildschirm einzunehmen.

Um die automatische Skalierung zu aktivieren, öffnen Sie die Zeichenflächeneinstellungen und suchen Sie die Option Rastercontainer skalieren. Wählen Sie die Option Automatisch auf Fensterbreite skalieren und speichern Sie Ihre Änderungen.

Diese Einstellung passt das Website-Design für jede Auflösung an, einschließlich HD-Bildschirme. Die Option hilft dabei, unnötigen leeren Platz auf Bildschirmen mit hoher Auflösung zu vermeiden und den Design-Workflow zu beschleunigen – Sie müssen keine Zeit mit dem adaptiven Layout verschwenden.

Bei Bedarf können Sie die automatische Skalierung für alle Bildschirmtypen einstellen, zB nur für Mobilgeräte, indem Sie nur einen bestimmten Bildschirmbreitenbereich einstellen. Der Container der Desktop-Version zoomt von 1200px auf 1920, 4K oder sogar 6K. Die mobile Version vergrößert sich von 320px.

Die Blockhöhe ist dynamisch: Sie ändert sich proportional zur Breite, wenn Sie den Block skalieren.

Tasten: Um die Schaltfläche im gewünschten Abstand von den Rändern des Browserfensters zu halten, aber nicht bei unterschiedlichen Auflösungen zu skalieren, legen Sie die Koordinaten dafür im Fenstercontainer fest. Verwenden Sie die Bindung an verschiedene Container, um einige Elemente innerhalb desselben Blocks zu skalieren und einige Elemente mit einem festen Abstand von den Browserkanten zu belassen, ohne jedoch die Größe zu ändern.

Bilder: Seien Sie vorsichtig beim Hochladen von Bildern: Sie sollten die richtige Größe haben, damit sie bei der Skalierung für größere Bildschirme nicht an Qualität verlieren.

Verwenden Sie Vektorbilder in .svg Format für Symbole und laden Sie Hintergrundbilder und Fotos mit Vorbehalt. Wenn Sie ein großes Bild hochladen, wird seine Breite standardmäßig auf 1680 Pixel verkleinert, aber wenn Sie beim Hochladen auf das Zahnradsymbol klicken, erhalten Sie die Möglichkeit, ein 1920px großes Bild hochzuladen. Schalten Sie den Schalter "Upload bis zu 1920px erlauben" um und laden Sie die Dateien hoch. Bilder, die größer als 1920px sind, können nicht hochgeladen werden, da diese Größe die Browserleistung und die Ladegeschwindigkeit der Website beeinträchtigt.

Lassen Sie uns versuchen, ein Cover mit den folgenden Funktionen zu erstellen:

— Das Hintergrundbild nimmt den gesamten Bildschirm ein.
— Überschrift, Unterüberschrift und Schaltfläche sind immer zentriert.
— Der Pfeil nach unten ist am unteren Bildschirmrand fixiert.

Schauen wir uns an, was wir haben: Das Hintergrundbild nimmt den gesamten Bildschirm ein; die Überschrift, der Text und die Schaltfläche werden zentriert; der Pfeil ist unten.