Einführung von Elementor 3.6: Nutzen Sie Flexbox-Container, um leistungsstarke und reaktionsschnelle Designs zu erstellen

In Elementor 3.6 führen wir Flexbox-Container ein, eine neue schlanke Layoutstruktur, die CSS Flexbox in den Editor bringt. Diese Struktur ermöglicht es Ihnen, pixelgenaue responsive Designs und hochentwickelte Layouts schnell und mit einem viel schlankeren Markup zu erreichen, was die Leistung erheblich verbessert. Diese Funktion markiert eine transformative Veränderung in der Art und Weise, wie Websites mit dem Builder von Elementor erstellt werden, und ist die Grundlage für eine Vielzahl zusätzlicher, erweiterter Funktionen.

Flexbox Containers ist ein neuer Baustein in Elementor, mit dem Sie Elemente in einem Container auf einfache und reaktionsschnelle Weise effizient anordnen, ausrichten und verteilen können. Mit Flexbox-Containern können Sie Widgets direkt im Container platzieren und Container unendlich verschachteln. Dann können Sie das Layout und die Verteilung von Widgets innerhalb des Containers steuern und Ihre Inhalte an jede Bildschirmgröße anpassen, was zu einer besseren Reaktionsfähigkeit führt, ohne Kompromisse bei der Geschwindigkeit einzugehen und ohne eine einzige Codezeile zu schreiben.

Nach mehreren Monaten in der Dev Edition und nachdem wir viel Feedback aus der Community umgesetzt haben, stellen wir Flexbox-Container als Alpha-Experiment vor.

Wenn das Experiment aktiviert ist, können Sie einer Seite anstelle von Abschnitten, Spalten und inneren Abschnitten neue Container hinzufügen. Sie können auch Container zu einer vorhandenen Seite hinzufügen, die zuvor mit dem Abschnitt-Spalten-Layout erstellt wurde. Wenn der Test aktiviert ist, können Sie Ihren Seiten keine neuen Abschnitte oder Spalten hinzufügen.

Probieren Sie es zuerst im Flexbox Containers Playground aus

Da Container eine neue Methode zum Erstellen von Website-Strukturen in Elementor darstellen, wird diese Version von zusätzlichem Schulungsmaterial begleitet, einschließlich des Flexbox Containers Playground. Dieser Spielplatz umfasst 10 Lektionen, die Ihnen dabei helfen sollen, sich an das Entwerfen von Layouts mit Flexbox-Containern zu gewöhnen.

Bitte beachten Sie : Experimente sollten mit Vorsicht verwendet werden – Funktionen werden als Experimente eingeführt, wenn sie infrastrukturelle Änderungen beinhalten, die sich auf unvorhergesehene Weise auf Ihre Website auswirken können. Erfahren Sie hier mehr über Experimente.

Wenn Sie das Experiment deaktivieren, werden alle von Ihnen erstellten Container von Ihrer Website entfernt. Sie können sie wiederherstellen, wenn Sie das Experiment erneut aktivieren und zu einer früheren Version zurückkehren.

Wichtiger Hinweis zu Version 3.6 von Elementor

Als Elementor 3.6 zum ersten Mal am 22. März veröffentlicht wurde, stießen einige Benutzer auf technische Probleme aufgrund der Inkompatibilität von Plugins von Drittanbietern. Wir haben sofort einen Patch mit Elementor 3.6.1 veröffentlicht, der die meisten Vorkommen dieses Problems beheben sollte, indem er die Fehlerdurchsetzungsregeln reduziert und das Laden des Editors ermöglicht.

Was ist der Unterschied zwischen Containern und Abschnitten?

Wenn Sie das Container-Experiment aktivieren, können Sie Container zu Ihrer Seite hinzufügen sowie Container auf die Arbeitsfläche oder in einen anderen Container ziehen, indem Sie das Widget aus dem Editor-Panel verwenden. Sie werden auch feststellen, dass die Grenzen des Containers einen dunkleren Blauton haben als die Grenzen der Sektion.

Nachfolgend finden Sie einige zusätzliche technische Unterschiede zwischen Containern und Abschnitten.

Flexbox-Container verändern die Art und Weise, wie Sie Websites erstellen

Mit Flexbox Containers können Sie schnell einfache und erweiterte Layouts erstellen und die Benutzererfahrung und Leistung verbessern. Nachfolgend finden Sie einige Beispiele dafür, wie:

Erstellen Sie schnell pixelgenaue Layouts mit einem schlanken Markup

Wenn Sie bisher ein Website-Layout erstellen wollten, das eine Reihe von Widgets in einer Reihe enthielt, mussten Sie entweder die Breite jedes Widgets auf „Inline“ setzen, was einen redundanten Workflow erzeugt, oder einen Abschnitt mit einer Reihe von Spalten darin erstellen , was der Leistung schadet. Wenn Sie beispielsweise einen Logoabschnitt mit 4 Logos in einer Reihe mit Abschnitten und Spalten erstellen möchten, müssen Sie entweder die Breite jedes Logos auf Inline setzen oder einen Abschnitt mit 4 Spalten erstellen und in jeder ein Logo platzieren .

Mit Flexbox-Containern können Sie einen einzelnen Container verwenden, alle gewünschten Logos hinzufügen und die Richtung des Containers von Spalte zu Zeile ändern, um alle Ihre Logos mit einem einzigen Klick in einer Zeile anzuzeigen. Sie können auch das Justify Content-Steuerelement nutzen, um die Logos nach Belieben innerhalb des Containers zu verteilen.

Passen Sie Ihr Design vollständig an jeden Haltepunkt an

Bei der Gestaltung Ihrer Website ist es wichtig zu berücksichtigen, wie sie auf verschiedenen Geräten aussieht. Ein Design, das auf dem Desktop funktioniert, bietet möglicherweise nicht die gleiche Benutzererfahrung auf einem kleineren Bildschirm, wie z. B. auf Mobilgeräten. Durch die Nutzung der Leistungsfähigkeit von CSS Flexbox können Sie das Design Ihrer Website an jedes Gerät anpassen. Sie können die Richtung, Reihenfolge, Ausrichtung und Verteilung von Elementen in Ihrem Container für jedes Gerät ändern, ohne doppelte Container erstellen zu müssen. Dies führt zu einer verbesserten Benutzererfahrung, ohne die Leistung Ihrer Website zu beeinträchtigen.

Ermöglichen Sie intuitive Benutzererfahrungen mit anklickbaren Containern

Einige Designs lassen Besucher glauben, dass der gesamte Inhaltsbereich anklickbar sein wird – beispielsweise eine Karte. Wenn sie jedoch versuchen, darauf zu klicken, haben sie Schwierigkeiten, den Bereich der Karte zu finden, der tatsächlich anklickbar ist. Mit Containern können Sie den gesamten Container umhüllen und einen Link hinzufügen, wodurch der gesamte Container anklickbar wird, was eine äußerst intuitive Erfahrung für Ihre Besucher schafft.

Verschachteln Sie Container unendlich, um erweiterte Layouts zu erstellen

Mit Flexbox-Containern können Sie erweiterte Layouts schneller erstellen. Während Sie mit dem Abschnitt-Spalten-Layout nur einen einzigen inneren Abschnitt innerhalb einer Spalte platzieren können, können Sie mit Flexbox-Containern Container unendlich verschachteln. Durch das Verschachteln von Containern können Sie für jeden Container unterschiedliche Richtungen und Ausrichtungen festlegen, um schnell hochentwickelte Layouts zu erstellen.

Nutzen Sie die Leistungsfähigkeit von CSS Flexbox im Editor von Elementor

Die als Experiment eingeführten Flexbox-Container stellen einen Quantensprung in der Gestaltungsflexibilität dar. Wenn das Experiment aktiviert ist, können Sie alle Vorteile von CSS Flexbox im Editor von Elementor nutzen, wodurch Sie anspruchsvolle Designs viel schneller und mit viel weniger DOM-Ausgabe erstellen können. Abgesehen von den unmittelbaren Vorteilen der Designflexibilität sind Container auch die Grundlage für mehrere bevorstehende aufregende Funktionen, also bleiben Sie dran und probieren Sie es zuerst im Playground aus.