Die Elementor-Flexbox bietet Elementor-Benutzern eine verbesserte Kontrolle und Flexibilität über das Layout und Design von WordPress-Websites. In diesem Video und begleitenden Artikel führe ich Sie durch die Hauptfunktionen der Elementor-Flexbox und erläutere, wie Sie die Flexbox-Funktionen effektiv nutzen können, um flexible und responsive Webdesigns zu erstellen.
Das Video ist der dritte Teil einer fünfteiligen Video-Serie zur Elementor-Flexbox.
Flexbox-Container
Im Kern der Elementor-Flexbox steht das Konzept eines flexiblen Containers. In Elementor kann ein Container jede Sektion, Spalte oder innere Sektion sein, die andere Elemente (Widgets) beherbergt. Die Elemente innerhalb des Containers sind dabei die eigentlichen Flexboxen. Innerhalb eines Containers kann es nur eine Richtung – horizontal oder vertikal. Wenn die Flexbox in Elementor aktiviert ist, können Sie mit den entsprechenden Funktionalitäten der Elementor-Flexbox das Verhalten der im Container enthaltenen Elemente steuern. Die Flexbox ermöglicht verschachtelte Flex-Container, was es einfach macht, komplexe Layouts zu erstellen, indem ein Flex-Container in einen anderen eingebettet wird.Abbildung: Flexbox-Container
Funktionen unter LAYOUT
Richtung (Direction)
Die Richtungssteuerung ist ein grundlegender Aspekt von Flexbox und ermöglicht es, die Richtung zu spezifizieren, in der Elemente innerhalb eines Containers angeordnet werden. Diese Richtungssteuerungen sind essentiell für das Design von Layouts, die sich dynamisch an den Inhalt und die Bildschirmgröße anpassen müssen. Elementor bietet zwei Hauptoptionen:- Reihe (Row): Die enthaltenen Elemente werden in einer horizontalen Linie angeordnet.
- Spalte (Column): Die enthaltenen Elemente werden in einer vertikalen Linie angeordnet.
- Reihe-Umgekehrt (Row reversed): Die enthaltenen Elemente werden in einer horizontalen Linie von rechts nach links angeordnet.
- Spalte-Umgekehrt (Column reversed): Die enthaltenen Elemente werden in einer vertikalen Linie von unten nach oben angeordnet.
Praktische Anwendungsmöglichkeiten
- Horizontale Menüs: Verwenden Sie die Richtung Row, um horizontale Navigationsmenüs zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen.
- Umgekehrte Reihenfolge: Nutzen Sie Row-Reversed oder Column-Reversed, um die Reihenfolge der Elemente dynamisch basierend auf Benutzerinteraktion oder Bildschirmgröße beim responsiven Design zu ändern.
- Vertikale Stapel: Verwenden Sie die Richtung Column, um Elemente vertikal zu stapeln, wie z.B. in Seitenleistenlayouts oder Listen.
GIF-Animation: Elementor-Flexbox - hier Funktion Richtung
Ausrichtung (Justify Content)
Richtet die enthaltenen Elemente entlang der Hauptachse (horizontal oder vertikal) des Containers aus. Dies ist besonders nützlich, um die Abstände und die Verteilung von Elementen innerhalb eines Containers zu steuern. Die Optionen umfassen:- Beginn (flex-start): Richtet die Elemente am Anfang des Containers aus und lässt zusätzlichen Platz am Ende.
- Zentriert (center): Zentriert die Elemente innerhalb des Containers und verteilt den zusätzlichen Platz gleichmäßig auf beiden Seiten.
- Ende (flex-end): Richtet die Elemente am Ende des Containers aus und lässt zusätzlichen Platz am Anfang.
- Zwischenraum (space-between): Verteilt die Elemente gleichmäßig mit gleichem Abstand dazwischen, ohne Platz am Anfang und Ende.
- Abstand im Umkreis (space-around): Verteilt die Elemente mit gleichem Abstand um sie herum, einschließlich Platz am Anfang und Ende.
- Gleichmäßiger Abstand (space evenly): Verteilt alle Elemente gleichmäßig, mit Platz am Anfang und Ende.
Abbildung: Justify Content - Elementor-Flexbox
Align Items
Die Align-Items-Eigenschaft richtet Flex-Elemente entlang der Querachse des Containers aus. Diese Eigenschaft ist entscheidend für die Ausrichtung von Elementen in mehrzeiligen Flex-Containern. Die Optionen umfassen:- Beginn (flex-start): Richtet die Elemente am Anfang der Querachse aus.
- Ende (flex-end): Richtet die Elemente am Ende der Querachse aus.
- Zentriert (center): Zentriert die Elemente entlang der Querachse.
- Dehnen (stretch): Dehnt die Elemente aus, um den Container auszufüllen.
Praktische Anwendungsbereiche
- Zentrierung von Inhalten: Verwenden Sie Justify-Content und Align-Items mit dem Wert Zentriert, um Inhalte sowohl horizontal als auch vertikal zu zentrieren.
- Gleicher Abstand bei Navigationen und Galerien: Verwenden Sie Zwischenraum oder Abstand im Umkreis, um Layouts mit gleichmäßigen Abständen zwischen den Elementen zu erstellen, wie z.B. bei Navigationsleisten oder Galerien.
Abbildung: Align Items - Elementor Flexbox
Lücken
Die Eigenschaft Lücken definiert die Größe der Lücke zwischen den Zeilen und/oder zwischen den Spalten.GIF-Animation: Elementor-Flexbox - hier Funktion Lücken
Zeilenumbruch (Wrap)
Die Eigenschaft Wrap ermöglicht es Flex-Elementen, sich auf mehrere Zeilen zu verteilen, wenn nicht genügend Platz im Flex-Container vorhanden ist. Wrap ist eine Umbruchfunktion, die es den Elementen ermöglicht, sich auf mehrere Zeilen zu verteilen, wodurch ein flexibleres und responsiveres Design gewährleistet wird. Hier sind die Optionen im Detail:- Kein Umbruch (nowrap): Alle Elemente werden in einer einzigen Zeile platziert, und es erfolgt kein Umbruch. Dies ist das Standardverhalten.
- Umbruch (wrap): Elemente werden bei Bedarf auf mehrere Zeilen umgebrochen und behalten ihre Reihenfolge bei.
Praktische Anwendungen
- Responsive Layouts: Verwenden Sie Wrap, um responsive Layouts zu erstellen, die sich an verschiedene Bildschirmgrößen anpassen.
- Inhaltssektionen: Verwenden Sie Wrap, um sicherzustellen, dass Inhaltssektionen nicht über ihren Container hinausragen und sich innerhalb des verfügbaren Raums sauber verteilen.
GIF-Animation: Elementor-Flexbox - hier Funktion Wrap
Funktionen unter ERWEITERT
Order
Gibt die Reihenfolge einzelner Elemente innerhalb eines Containers an. Elemente mit einem niedrigeren Ordnungswert erscheinen vor denen mit einem höheren Wert. Dies ist nützlich für responsives Design, bei dem Sie die Reihenfolge der Elemente je nach Bildschirmgröße ändern möchten. Der Standardwert für die Order ist 0, und Elemente mit niedrigeren Werten erscheinen vor denen mit höheren Werten.
Praktische Anwendungen
- Responsive Neuanordnung: Verwenden Sie die Order-Eigenschaft, um die Reihenfolge der Elemente je nach Bildschirmgröße zu ändern und so eine bessere Benutzererfahrung auf verschiedenen Geräten zu gewährleisten.
Align Self
Die Align-Self-Eigenschaft ermöglicht es einzelnen Flex-Elementen, die Align-Items-Eigenschaft ihres übergeordneten Containers zu überschreiben und sich anders als der Rest des Containers auszurichten. Dies ist nützlich, um ein bestimmtes Element anders als die anderen Elemente auszurichten. Hier sind die Optionen:- Beginn (flex-start): Richtet das Element am Anfang der Querachse aus.
- Ende (flex-end): Richtet das Element am Ende der Querachse aus.
- Zentriert (center): Zentriert das Element entlang der Querachse.
- Dehnen (stretch): Dehnt das Element aus, um den Container entlang der Querachse auszufüllen.
Praktische Anwendungen
- Benutzerdefinierte Ausrichtung: Verwenden Sie Align-Self, um spezifische Elemente anders als die anderen auszurichten, wie z.B. ein hervorgehobenes Element in einer Liste.