Automatisches Layout in Zero Block
Erweiterte Methoden zur Anordnung von Elementen innerhalb einer Gruppe
Sehen Sie sich das Video-Tutorial zur Verwendung der Auto-Layout-Funktion in Tilda's Zero Block an,
oder lesen Sie die ausführliche Anleitung mit Screenshots unten.
oder lesen Sie die ausführliche Anleitung mit Screenshots unten.
Auto-Layout ist ein Werkzeug, mit dem Sie responsive Layouts erstellen und Elemente innerhalb einer Gruppe effektiv anordnen können.
Es ist besonders nützlich für die Erstellung komplexer Designelemente wie Navigationsmenüs, Listen, Schaltflächen, Karten usw. Unabhängig davon, welche Änderungen Sie am Inhalt vornehmen, passt sich das Layout automatisch an, sodass keine manuellen Anpassungen erforderlich sind.
Es ist besonders nützlich für die Erstellung komplexer Designelemente wie Navigationsmenüs, Listen, Schaltflächen, Karten usw. Unabhängig davon, welche Änderungen Sie am Inhalt vornehmen, passt sich das Layout automatisch an, sodass keine manuellen Anpassungen erforderlich sind.
So verwenden Sie Auto-Layout
Um das automatische Layout zu aktivieren, rufen Sie die Gruppeneinstellungen auf. Stellen Sie sicher, dass die gruppierten Elemente als "Objekt" und nicht als "logische" Gruppe eingestellt sind. Sobald die Option "Objekt" unter Gruppe ausgewählt ist, wird der Abschnitt "Automatisches Layout" unten angezeigt.
Wählen Sie im Abschnitt "Automatisches Layout" die Option "Automatisch" für die Einstellung "Flex". Die Aktivierung von "Automatisches Layout" ermöglicht den Zugriff auf verschiedene Einstellungen, die steuern, wie Elemente auf Inhalts- oder Größenänderungen reagieren und sich innerhalb der Gruppe entsprechend ausrichten. Schauen wir uns diese Einstellungen an und lernen, wie man sie anpasst.
Einstellen der Höhe und Breite des Containers mit der Einstellung Hug
Bei aktiviertem Auto-Layout gibt es zwei neue Gruppeneinstellungen, mit denen Sie die Breite und Höhe des Containers mit gruppierten Elementen verwalten können.
Standardmäßig ist die Option Umarmung ausgewählt, mit der die Gruppengröße flexibel ist und auf der Grundlage der Größe der Elemente innerhalb des Containers und des Abstands zwischen ihnen angepasst wird.
Wenn Sie die Größe der Gruppe manuell ändern oder eine benutzerdefinierte Breite oder Höhe festlegen, wechselt Umarmung automatisch zu Fest. Die Option "Fest" bedeutet, dass die Gruppengröße benutzerdefiniert ist und auch dann unverändert bleibt, wenn Sie die Abstände zwischen den Elementen oder deren Größe ändern.
Standardmäßig ist die Option Umarmung ausgewählt, mit der die Gruppengröße flexibel ist und auf der Grundlage der Größe der Elemente innerhalb des Containers und des Abstands zwischen ihnen angepasst wird.
Wenn Sie die Größe der Gruppe manuell ändern oder eine benutzerdefinierte Breite oder Höhe festlegen, wechselt Umarmung automatisch zu Fest. Die Option "Fest" bedeutet, dass die Gruppengröße benutzerdefiniert ist und auch dann unverändert bleibt, wenn Sie die Abstände zwischen den Elementen oder deren Größe ändern.
Vielleicht fällt Ihnen auf, dass es eine weitere Hug-Einstellung gibt. Wenn sie aktiviert ist, berechnet sie die Werte für Breite und Höhe neu und setzt sie auf das Minimum, das möglich ist, um alle Elemente unter Berücksichtigung ihrer Größe und des in der Einstellung "Abstand" (die die Abstände steuert) festgelegten Wertes anzupassen. Wenn Sie die Größe der Elemente ändern, passt Hug automatisch die Breite oder Höhe entsprechend an.
Richtung
Die Einstellung Richtung steuert die Ausrichtung der Elemente innerhalb der Gruppe. Sie haben hier drei Optionen: Horizontal, Vertikal und Umbrechen (in die nächste Zeile verschieben).
Wenn die horizontale Richtung ausgewählt ist, werden alle Elemente entlang der X-Achse ausgerichtet. Dies ist ideal für die Anordnung von Elementen in einer Reihe, z. B. von Symbolen, Menüelementen oder Schaltflächen.
Wenn die horizontale Richtung ausgewählt ist, werden alle Elemente entlang der X-Achse ausgerichtet. Dies ist ideal für die Anordnung von Elementen in einer Reihe, z. B. von Symbolen, Menüelementen oder Schaltflächen.
Wenn die vertikale Richtung eingestellt ist, werden alle Elemente in der Gruppe entlang der Y-Achse ausgerichtet. Dies ist besonders nützlich bei der Gestaltung von Listen oder übereinander gestapelten Kartenelementen.
Wenn die Wrap-Richtung gewählt wird, werden die Elemente entsprechend der Breite des Containers in einer Reihe ausgerichtet. Wenn ein Element zu breit ist, um hineinzupassen, wird es in die nächste Reihe verschoben. Dies kann besonders nützlich für Fotogalerien, mehrzeilige Tag-Clouds und für die Anpassung von Websites an unterschiedliche Bildschirmauflösungen sein.
Lücke
Die Einstellung Abstand steuert den Abstand zwischen den Elementen innerhalb der Gruppe entsprechend der gewählten Ausrichtung. Bei der horizontalen Ausrichtung wird der Abstand der X-Achse angepasst, während bei der vertikalen Ausrichtung der Abstand der Y-Achse geändert wird. Wenn die Richtung "Umbruch" eingestellt ist, können Sie Abstände für beide Achsen festlegen.
Beachten Sie, dass sich die Einstellung "Abstand" auf die Breite oder Höhe des Containers auswirken kann, wenn die Option "Umfassen" für die gewählte Richtung aktiviert ist.
Beachten Sie, dass sich die Einstellung "Abstand" auf die Breite oder Höhe des Containers auswirken kann, wenn die Option "Umfassen" für die gewählte Richtung aktiviert ist.
Elemente ausrichten
Die Einstellung Elemente ausrichten passt die Ausrichtung der Elemente innerhalb einer Gruppe entlang der Hauptachse an - vertikal oder horizontal, je nach gewählter Richtung.
Wenn beispielsweise die Richtung Horizontal gewählt wird, werden die Elemente vertikal in der Mitte, oben oder unten des Containers ausgerichtet. Umgekehrt werden Elemente bei Auswahl der Richtung Vertikal horizontal an der Mitte, der linken oder der rechten Seite des Containers ausgerichtet. Wenn jedoch die Option Umfassen aktiviert ist und alle Elemente die gleiche Breite oder Höhe haben, ändert sich die Ausrichtung nicht.
Wenn beispielsweise die Richtung Horizontal gewählt wird, werden die Elemente vertikal in der Mitte, oben oder unten des Containers ausgerichtet. Umgekehrt werden Elemente bei Auswahl der Richtung Vertikal horizontal an der Mitte, der linken oder der rechten Seite des Containers ausgerichtet. Wenn jedoch die Option Umfassen aktiviert ist und alle Elemente die gleiche Breite oder Höhe haben, ändert sich die Ausrichtung nicht.
Inhalt rechtfertigen
Die Einstellung Inhalt ausrichten bietet alternative Ausrichtungsoptionen, wobei eine andere Achse als bei Elemente ausrichten verwendet wird. Diese Einstellung ist nur verfügbar, wenn für die Breite oder Höhe entlang der Achse nicht die Option "Umarmen" ausgewählt wurde.
Neben der grundlegenden mittigen oder seitlichen Ausrichtung stehen auch intelligente Ausrichtungsoptionen zur Verfügung:
Mit der Option " Abstand zwischen" werden die Elemente gleichmäßig innerhalb der Gruppe verteilt, wobei zwischen ihnen und dem Container kein Leerraum entsteht.
Die Option Abstand um verteilt die Elemente gleichmäßig innerhalb der Gruppe und stellt sicher, dass der Abstand zwischen den Elementen und dem Container die Hälfte des Abstands zwischen den Elementen beträgt.
Die Option Abstand gleichmäßig verteilt die Elemente gleichmäßig innerhalb der Gruppe und stellt sicher, dass der Abstand zwischen den Elementen und dem Container gleich dem Abstand zwischen den Elementen ist.
Neben der grundlegenden mittigen oder seitlichen Ausrichtung stehen auch intelligente Ausrichtungsoptionen zur Verfügung:
Mit der Option " Abstand zwischen" werden die Elemente gleichmäßig innerhalb der Gruppe verteilt, wobei zwischen ihnen und dem Container kein Leerraum entsteht.
Die Option Abstand um verteilt die Elemente gleichmäßig innerhalb der Gruppe und stellt sicher, dass der Abstand zwischen den Elementen und dem Container die Hälfte des Abstands zwischen den Elementen beträgt.
Die Option Abstand gleichmäßig verteilt die Elemente gleichmäßig innerhalb der Gruppe und stellt sicher, dass der Abstand zwischen den Elementen und dem Container gleich dem Abstand zwischen den Elementen ist.
Inhalt ausrichten
Die Einstellung Inhalt ausrichten ordnet die Elemente innerhalb der Gruppe an und ist nur verfügbar, wenn die Umbruchrichtung ausgewählt ist und mehrere Inhaltszeilen vorhanden sind. Sie richtet alle Zeilen vertikal am Container aus, es sei denn, Hug ist ausgewählt.
Mit Align Content können Sie Zeilen wie gewohnt mittig oder seitlich ausrichten. Ähnlich wie bei der vorherigen Einstellung können Sie auch eine der intelligenten Ausrichtungsoptionen wählen - Abstand zwischen (wodurch die Elemente ohne Abstand zum Container gleichmäßig verteilt werden), Abstand um (wodurch die Elemente gleichmäßig mit einem Abstand zum Container verteilt werden, der der Hälfte des Abstands zwischen den Elementen entspricht) und Abstand gleichmäßig (wodurch die Elemente gleichmäßig mit einem Abstand zum Container verteilt werden, der dem Abstand zwischen den Elementen entspricht).
Mit Align Content können Sie Zeilen wie gewohnt mittig oder seitlich ausrichten. Ähnlich wie bei der vorherigen Einstellung können Sie auch eine der intelligenten Ausrichtungsoptionen wählen - Abstand zwischen (wodurch die Elemente ohne Abstand zum Container gleichmäßig verteilt werden), Abstand um (wodurch die Elemente gleichmäßig mit einem Abstand zum Container verteilt werden, der der Hälfte des Abstands zwischen den Elementen entspricht) und Abstand gleichmäßig (wodurch die Elemente gleichmäßig mit einem Abstand zum Container verteilt werden, der dem Abstand zwischen den Elementen entspricht).
