Zero Block: Reaktionsfähiges Design
Der zweite Teil des Leitfadens ist den komplexeren Einstellungen von Zero Block im Zusammenhang mit dem responsiven Webdesign gewidmet. Die wichtigsten Einstellungen und Grundfunktionen von Zero Block wurden im ersten Teil des Leitfadens behandelt.
Sie sind hier!
Nach unten scrollen und lesen
Einführung in Container
Zero Block hat zwei Arbeitsbereiche, die als Container bezeichnet werden. Der Rasterbereich wird als Raster-Container bezeichnet, während der Fenster-Container ein Bereich ist, der die Grenzen des Browser-Bildschirms angibt.
Der Grid-Container und seine Position auf der X-Achse
Der Grid Container ist der Hauptarbeitsbereich. Er hat das gleiche Raster wie Tilda, 1200 px. Wenn Sie Elemente innerhalb des Raster-Containers platzieren, befinden sie sich unabhängig von der Bildschirmgröße innerhalb des zwölfspaltigen Rasters.
Auf der X-Achse ist der Raster-Container immer zentriert.
Auf der X-Achse ist der Raster-Container immer zentriert.
Dasselbe geschieht mit den Versionen für verschiedene Geräte: Wenn Sie zwischen den Bildschirmtypen wechseln, wird die Breite des Raster-Containers 980, 640, 480, 320px, er bleibt fest und zentriert.
Sie können die Höhe des Raster-Containers in den Artboard-Einstellungen oder durch Ziehen des Containers mit der Maus nach oben/unten einstellen. Sie können für jede Auflösung eine eigene Höhe für den Raster-Container festlegen. Die Höhe des Raster-Containers entspricht der Höhe des Blocks.
Sie können die Höhe des Raster-Containers in den Artboard-Einstellungen oder durch Ziehen des Containers mit der Maus nach oben/unten einstellen. Sie können für jede Auflösung eine eigene Höhe für den Raster-Container festlegen. Die Höhe des Raster-Containers entspricht der Höhe des Blocks.
Position der Container zueinander auf der Y-Achse
Wenn Sie möchten, dass Zero Block immer 100 % der Bildschirmhöhe einnimmt, müssen Sie für den Fenster-Container eine andere Höhe als für den Raster-Container festlegen. Sie müssen also die Höhe des Fenster-Containers in den Zeichenflächeneinstellungen auf 100 % setzen.
Wählen Sie anschließend die Ausrichtung des Raster-Containers auf dem Bildschirm: Oben, Zentriert, Unten oder Gestreckt. Standardmäßig ist er zentriert.
So ändern Sie den Container und den Ursprung für ein Element
So wechseln Sie den Behälter
Standardmäßig sind alle Elemente mit dem Raster-Container verbunden und der Ursprung liegt in der oberen linken Ecke.
Manchmal müssen Sie ein Element nicht an das Raster, sondern an den Bildschirm binden. Sie möchten zum Beispiel, 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 Fenster-Container. Der Ursprung wird in die linke obere Ecke des Fenster-Containers verschoben.
Öffnen Sie dazu das Einstellungsfenster des Elements und ändern Sie den Containertyp in Fenster-Container. Der Ursprung wird in die linke obere Ecke des Fenster-Containers verschoben.
Das Logo befindet sich nun in der oberen linken Ecke eines jeden Bildschirms.
Wenn Sie ein Element z. B. an der oberen rechten Ecke anbringen möchten, können Sie die gleiche Methode anwenden: Wählen Sie "Fenster-Container" und legen Sie den Ursprung der Elementkoordinaten wie folgt fest: X-rechts, Y-oben.
Element-Koordinaten
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 durch Drücken der Tabulatortaste, und Sie sehen die Koordinaten des Elements ganz oben im Fenster.
Wählen Sie ein Element aus, öffnen Sie das Einstellungsfenster durch Drücken der Tabulatortaste, und Sie sehen die Koordinaten des Elements ganz oben im Fenster.
Der Standardursprung aller Elemente liegt in der oberen linken Ecke des Raster-Containers. Er kann jedoch 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-Panel (standardmäßig ist es minimiert).
Wenn Sie den Ursprung auf "Zentriert" setzen, können Sie leichter eine adaptive Version für verschiedene Bildschirme erstellen.
Wie man fließende Elemente erstellt
Wir haben vorgesehen, dass die Größe der Elemente auch in Prozent angegeben werden kann. So können Sie "fließende" Elemente erstellen, die ihre Größe je nach Browserfenster ändern.
Sie möchten zum Beispiel, dass die Hälfte des Bildschirms immer gelb ist. Fügen Sie dazu eine Form hinzu und öffnen Sie das Einstellungsfenster des Elements. Setzen Sie den Containertyp auf Fenster-Container, ändern Sie die Maßeinheiten für Breite und Höhe auf Prozent statt auf Pixel, setzen Sie die Bildschirmbreite auf 50 % und die Bildschirmhöhe auf 100 %. Sie können auch die Achsenwerte in Prozent angeben. Wenn Sie möchten, dass das Element immer die rechte Hälfte des Bildschirms einnimmt, setzen Sie den Wert der X-Achse auf 50 %.
Sie möchten zum Beispiel, dass die Hälfte des Bildschirms immer gelb ist. Fügen Sie dazu eine Form hinzu und öffnen Sie das Einstellungsfenster des Elements. Setzen Sie den Containertyp auf Fenster-Container, ändern Sie die Maßeinheiten für Breite und Höhe auf Prozent statt auf Pixel, setzen Sie die Bildschirmbreite auf 50 % und die Bildschirmhöhe auf 100 %. Sie können auch die Achsenwerte in Prozent angeben. 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.
Die Einstellungen des gelben Rechtecks: Container-Fenster-Container, Breite-50%, Höhe-100%, X-Achsen-Versatz-50%.
Beispiel: Wie man ein Vollbild-Cover erstellt
Versuchen wir, ein Cover mit folgenden Merkmalen zu erstellen:
- Das Hintergrundbild nimmt den gesamten Bildschirm ein.
- Überschrift, Untertitel und Schaltfläche sind immer zentriert.
- Der Abwärtspfeil ist am unteren Rand des Bildschirms fixiert.
- Das Hintergrundbild nimmt den gesamten Bildschirm ein.
- Überschrift, Untertitel und Schaltfläche sind immer zentriert.
- Der Abwärtspfeil ist am unteren Rand des Bildschirms fixiert.
1
Laden Sie in den Artboard-Einstellungen ein Hintergrundbild hoch und setzen Sie die Höhe des Fenster-Containers auf 100%.
2
Setzen Sie den Ursprung für die Überschrift, die Unterüberschrift und die Schaltfläche auf "Zentriert" und "Zentriert". Geben Sie bei Bedarf auch den Y-Achsenversatz an.
3
Setzen Sie den Container des Pfeils auf Window Container, setzen Sie seinen Ursprung auf "Center" und "Bottom" und verschieben Sie ihn um 70px nach oben. Auf diese Weise wird die Schaltfläche immer 70px höher sein als die untere Ecke des Browserfensters.
Schauen wir uns an, was wir haben: Das Hintergrundbild nimmt den gesamten Bildschirm ein; die Überschrift, der Text und die Schaltfläche sind zentriert; der Pfeil befindet sich am unteren Rand.
Skalierung von Elementen zur Anpassung an die Breite des Bildschirms
Standardmäßig sind alle Elemente mit dem Raster-Container verbunden. Dies ist ein Rechteck mit einer Breite von 1200 Pixeln auf dem Desktop. Es wird immer auf dem Bildschirm zentriert und hat unabhängig von der Anzeigebreite die gleiche Größe.
Mit der automatischen Skalierung können Sie alle Elemente, die zum Grid-Container gehören, im Verhältnis zur Breite des Bildschirms oder Browsers skalieren. Der Grid-Container nimmt nicht eine feste Breite von 1200 Pixeln ein, sondern dehnt sich auf die volle Breite des Bildschirms aus. Alle hinzugefügten Elemente werden proportional vergrößert, so dass sie den gesamten Bildschirm einnehmen.
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.
Mit der automatischen Skalierung können Sie alle Elemente, die zum Grid-Container gehören, im Verhältnis zur Breite des Bildschirms oder Browsers skalieren. Der Grid-Container nimmt nicht eine feste Breite von 1200 Pixeln ein, sondern dehnt sich auf die volle Breite des Bildschirms aus. Alle hinzugefügten Elemente werden proportional vergrößert, so dass sie den gesamten Bildschirm einnehmen.
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.
Mit dieser Einstellung wird das Design der Website an jede Auflösung angepasst, auch an HD-Bildschirme. Die Option hilft, unnötigen Leerraum auf hochauflösenden Bildschirmen zu vermeiden und den Design-Workflow zu beschleunigen - Sie müssen keine Zeit mit dem adaptiven Layout verschwenden.
Falls erforderlich, können Sie die automatische Skalierung für alle Bildschirmtypen oder z. B. nur für mobile Geräte einstellen, indem Sie nur einen bestimmten Bereich der Bildschirmbreite festlegen. Der Container der Desktop-Version zoomt von 1200px auf 1920, 4K oder sogar 6K. Die mobile Version zoomt von 320px.
Die Höhe des Blocks ist dynamisch: sie ändert sich im Verhältnis zur Breite, wenn Sie den Block skalieren.
Falls erforderlich, können Sie die automatische Skalierung für alle Bildschirmtypen oder z. B. nur für mobile Geräte einstellen, indem Sie nur einen bestimmten Bereich der Bildschirmbreite festlegen. Der Container der Desktop-Version zoomt von 1200px auf 1920, 4K oder sogar 6K. Die mobile Version zoomt von 320px.
Die Höhe des Blocks ist dynamisch: sie ändert sich im Verhältnis zur Breite, wenn Sie den Block skalieren.
Wichtiger Hinweis: Diese Option wirkt sich nur auf die Elemente aus, die mit dem Raster-Container verbunden sind, und hat keine Auswirkungen auf die Elemente, die mit dem Fenster-Container verbunden sind.
Einige Merkmale der automatischen Skalierung
Schaltflächen: Um die Schaltfläche im gewünschten Abstand zu den Rändern des Browserfensters zu halten, aber nicht bei verschiedenen Auflösungen zu skalieren, legen Sie die Koordinaten für sie im Fenster-Container fest. Verwenden Sie die Bindung an verschiedene Container, um einige Elemente innerhalb desselben Blocks zu skalieren und einige Elemente mit einem festen Abstand zu den Browserrändern 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 für Symbole Vektorbilder im .svg-Format und laden Sie Hintergrundbilder und Fotos größer als nötig hoch. Wenn Sie auf Tilda ein großes Bild hochladen, wird es standardmäßig auf eine Breite von 1680 Pixeln verkleinert. Wenn Sie jedoch beim Hochladen auf das Zahnradsymbol klicken, erhalten Sie die Möglichkeit, ein 1920 Pixel breites Bild hochzuladen. Aktivieren Sie den Schalter "Enable 1920px wide image uploading" und laden Sie die Dateien hoch. Bilder, die größer als 1920 Pixel sind, können nicht hochgeladen werden, da diese Größe die Browserleistung und die Ladegeschwindigkeit der Website beeinträchtigt.
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 für Symbole Vektorbilder im .svg-Format und laden Sie Hintergrundbilder und Fotos größer als nötig hoch. Wenn Sie auf Tilda ein großes Bild hochladen, wird es standardmäßig auf eine Breite von 1680 Pixeln verkleinert. Wenn Sie jedoch beim Hochladen auf das Zahnradsymbol klicken, erhalten Sie die Möglichkeit, ein 1920 Pixel breites Bild hochzuladen. Aktivieren Sie den Schalter "Enable 1920px wide image uploading" und laden Sie die Dateien hoch. Bilder, die größer als 1920 Pixel sind, können nicht hochgeladen werden, da diese Größe die Browserleistung und die Ladegeschwindigkeit der Website beeinträchtigt.
