BLOGPOST

Elementor-Flexbox-Basisfunktionen

Picture of Claudia Frank
Claudia Frank

Autorin // Lovely Webdesign

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.

Elementor-Flexbox-Container
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.
Zusätzlich gibt es Optionen zum Umkehren der Reihenfolge der Elemente, was mehr Flexibilität im Layout bietet:
  • 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.
Elementor Flexbox - hier Funktion "Direction (Richtung" als GIF-Animation
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.
Elementor-Flexbox Funktion "Justify Content"
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.
Align Items - Elementor Flexbox
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.

Elementor Flexbox - Lücken - hier als GIF-Animation
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.
Elementor Flexbox - hier Funktion Wrap - als animierte GIF-Datei
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.

Größe (Grow, Shrink)

 

Grow (Flex-Wachsen)

Die Flex-Grow-Eigenschaft gibt an, wieviel ein Flex-Element relativ zu den anderen Flex-Elementen innerhalb desselben Containers wächst, wenn der verfügbare Platz verteilt wird. Ein Flex-Wachstumswert von 1 bedeutet, dass das Element wächst und jeden verbleibenden Platz im Container proportional ausfüllt. Wenn alle Elemente einen Flex-Wachstumswert von 1 haben, teilen sie den verbleibenden Platz gleichmäßig. Hat ein Element einen Flex-Wachstumswert von 2, nimmt es doppelt so viel Platz ein wie ein Element mit einem Flex-Wachstumswert von 1.

Shrink (Flex-Schrumpfen)

Die Flex-Shrink-Eigenschaft gibt an, wie viel ein Flex-Element relativ zu den anderen Flex-Elementen innerhalb desselben Containers schrumpft, wenn nicht genügend Platz vorhanden ist. Ein Flex-Schrumpfwert von 1 bedeutet, dass das Element gleichmäßig mit anderen Elementen schrumpft, die denselben Flex-Schrumpfwert haben. Wenn ein Element einen Flex-Schrumpfwert von 0 hat, schrumpft es nicht, während ein Element mit einem höheren Flex-Schrumpfwert mehr schrumpft.

Elementor Flexbox - Funktion Grow - hier als animierte GIF-Datei
GIF-Animation: Elementor-Flexbox - hier Funktion Grow

Zusammenfassung

Die Elementor-Flexbox bietet erweiterte Kontrolle und Flexibilität für das Layout und Design von WordPress-Websites. Im Kern steht das Konzept eines flexiblen Containers, der Sektionen, Spalten oder innere Sektionen beherbergt. Diese Container enthalten die eigentlichen Flexboxen, deren Verhalten gesteuert werden kann, um flexible und responsive Webdesigns zu erstellen. Die Hauptfunktionen der Elementor-Flexbox befinden sich dabei unter LAYOUT und ERWEITERT.

Nach oben scrollen