Elementor CSS Flexbox - Elementor wird zum Profi Tool!

May 2, 2022
Marc Heine Webdesign Profil Foto
deine website selbst erstellen? titelbild

Mit Elementor 3.6 macht Elementor einen riesen Schritt in die richtige Richtung und ist dabei die gesamte Infrastruktur umzukrempeln. So mausert sich Elementor zu einem echten Profi Tool. Durch die Flexbox-Container ist es nun möglich flexible, responsive und pixel genaue Designs zu erstellen die vorher nur mit einigen Umwegen möglich waren.

Der Flexbox Container ist ein neuer Baustein in Elementor, der es nun ermöglicht, Elemente in einem Container effizient anzuordnen, auszurichten und zu verteilen, und zwar auf eine leichtgewichtige und reaktionsfähige Weise. Das wird positive Auswirkungen auf den Pagespeed der Website haben.

Mit den Flexbox Containern kannst du Widgets & Elemente direkt innerhalb des Containers platzieren und Container unbegrenzt verschachteln. Anschließend kann das Layout und die Verteilung der Widgets innerhalb des Containers gesteuert werden und die Inhalte an jede Bildschirmgröße angepasst werden, was zu einer besseren Reaktionsfähigkeit führt, ohne Kompromisse bei der Geschwindigkeit einzugehen und ohne eine einzige Zeile Code zu schreiben.

Aktuell steht die Funktion als Experiment in der Alpha Phase zur Verfügung, daher sollte hiermit noch mit Vorsicht gearbeitet werden.

Wenn das Experiment aktiviert ist, kannst du neue Container anstelle von Abschnitten (Sections), Spalten (Columns) und inneren Abschnitten (Inner Sections) zu einer Seite hinzufügen. Du kannst auch Container zu einer vorhandenen Seite hinzufügen, die zuvor mit dem Layout "Abschnitte-Spalten" erstellt wurde. Wenn das Experiment aktiviert ist, kannst du keine neuen Abschnitte oder Spalten zu deiner Seite mehr hinzufügen.

Quelle: Elementor

Flexbox-Container verändern die Art und Weise, wie Websites in Elementor erstellt werden.

Mit Flexbox-Containern kannst du einfache und komplexe Layouts erstellen, die Benutzerfreundlich sind und sehr gute Performance liefern. Im folgenden findest du ein paar Beispiele dafür:

Quelle: Elementor

Erstelle pixel-genaue Layouts mit einem schlanken Markup

Wenn du bisher mit Elementor ein Website-Layout mit mehreren Widgets in einer Reihe erstellen wolltest, musstest du entweder die Breite jedes Widgets auf Inline einstellen, was zu einem redundanten Arbeitsablauf führte, oder einen Abschnitt mit mehreren Spalten darin erstellen, was die Leistung beeinträchtigte. Wenn du z. B. einen Logobereich mit 4 Logos in einer Reihe erstellen wolltest, musstest du entweder die Breite jedes Logos auf Inline setzen oder einen Bereich mit 4 Spalten erstellen und in jeder ein Logo platzieren.

Mit Flexbox-Containern kannst du hierfür einen einzigen Container verwenden, alle gewünschten Logos hinzufügen und die Richtung des Containers von Spalte zu Zeile ändern, um mit einem einzigen Klick alle Logos in einer Zeile anzuzeigen. Du kannst auch das Steuerelement "Inhalt ausrichten" verwenden, um die Logos wie gewünscht innerhalb des Containers zu verteilen.

Quelle: Elementor

Vollständige Anpassung des Designs an jeden Breakpoint

Bei der Gestaltung deiner Website ist es wichtig zu berücksichtigen, wie sie auf verschiedenen Geräten aussieht. Ein Design, das auf dem Desktop funktioniert, bietet auf einem kleineren Bildschirm, z. B. auf einem Handy, möglicherweise nicht dasselbe Benutzererlebnis. Dank der Leistungsfähigkeit von CSS Flexbox kannst du das Design deiner Website an jedes Gerät anpassen. Du kannst die Richtung, die Reihenfolge, die Ausrichtung und die Verteilung der Elemente innerhalb des Containers für jedes Gerät ändern, ohne doppelte Container erstellen zu müssen. Dies führt zu einer verbesserten Benutzerfreundlichkeit, ohne die Leistung deiner Website zu beeinträchtigen.

Quelle: Elementor

Intuitive Benutzererfahrungen mit anklickbaren Containern vereinfachen

Manche Designs lassen die Besucher glauben, dass der gesamte Inhaltsbereich anklickbar ist - z. B. eine Karte. Wenn die Benutzer jedoch versuchen, darauf zu klicken, haben sie Schwierigkeiten, den Bereich der Karte zu finden, der tatsächlich klickbar ist. Mit Containern kannst du den gesamten Container umhüllen und einen Link hinzufügen, so dass der gesamte Container anklickbar ist, was für deine Besucher eine äußerst intuitive Erfahrung darstellt.

Container unendlich verschachteln, um erweiterte Layouts zu erstellen

Mit Flexbox-Containern kannst du hochkomplexe Layouts schneller erstellen. Während du beim Abschnitts-Spalten-Layout nur einen einzigen inneren Abschnitt innerhalb einer Spalte platzieren kannst, kannst du mit Flexbox-Containern, Container unbegrenzt verschachteln. Durch das Verschachteln von Containern kannst du verschiedene Richtungen und Ausrichtungen für jeden Container festlegen, um schnell komplexe Layouts zu erstellen.

Quelle: Elementor

Nutze die Leistungsfähigkeit von CSS Flexbox im Editor von Elementor

Die Flexbox-Container, die als Experiment eingeführt wurden, stellen einen Quantensprung in der Designflexibilität dar. Wenn das Experiment aktiviert ist, kannst du alle Vorteile von CSS Flexbox im Elementor-Editor nutzen, was dich in die Lage versetzt, anspruchsvolle Designs viel schneller und mit viel weniger DOM-Ausgabe zu erstellen.

Fazit:

Ich selber freue mich sehr, dass Elementor nun auch auf das CSS Flexbox System setzt. Andere Pagebuilder wie Webflow setzen schon lange auf dieses Konzept. Nun ist es in Elementor und Wordpress mit einer selbst gehosteten Website auch möglich hochkomplexe Layouts umzusetzen und dies mobil responsive zu machen. Außerdem wird es spannend, welche auf dem System aufbauenden Add Ons Elementor noch bringen wird. Ich hoffe ja noch auf die CSS-Grid Funktion.

Elementor kannst du hier kostenlos ausprobieren:

https://bit.ly/3HGELga *

  • Affiliate Link

Das könnte dich auch interessieren:
Blog Übersicht