So verwenden Sie den Elementor Flexbox Container in 6 einfachen Schritten

Hast du das Neue ausprobiert?  Elementor Flexbox-Container Besonderheit?

Die Gerüchteküche ist eine großartige Ergänzung, um Ihre Website für alle Geräte zu optimieren und das Laden Ihrer Website zu beschleunigen.

Wie? 

Nun, der neue Flex-Container funktioniert etwas anders (sowohl Front-End als auch Backend) als die vorherigen Abschnitte/inneren Abschnitte. Und diese neuen und unterschiedlichen Arbeitsweisen machen den Zauber aus.

In this blog, you will learn about the new options Elementor Flexbox-Container brings to the table to build a responsive website and follow a complete Elementor Flexbox Container tutorial to create modern layouts using flexbox elementor features.

Lesen Sie also weiter…

Was ist ein Elementor-Flexbox-Container?

Elementor Flexbox Container brings all the CSS Flexbox facilities to your Elementor editor and helps users create advanced responsive layouts using a modern flexbox container system. With the new addition, you can easily create advanced layouts to ensure that web pages look great on all devices irrespective of size.

Notiz: Der CSS-Flexbox-Container bietet Ihnen, wie der Name schon sagt, erweiterte Flexibilität bei der Erstellung eines auf Geräte reagierenden Designs. Vor der Einführung von Flexbox war es ziemlich kompliziert, responsives Design mit mehreren Layoutmodi wie Block, Inline, Tabelle und Position zu erstellen. Mit Flexbox-Containern benötigen Sie jedoch nicht mehr mehrere Layoutmodi.

And when it comes to the Elementor flexbox container, you won’t have to use sections anymore. You can add widgets within a container without any section. This nested container Elementor structure gives you more flexibility than traditional sections and columns.

Sobald Sie Widgets und Container hinzugefügt haben, können Sie die Verteilung der Widgets innerhalb des Containers sowie das Layout für jedes Gerät steuern. Außerdem erhalten Sie für jeden Container separate Anpassungseinstellungen (sogar für Container innerhalb eines Containers). Dies bietet Ihnen die größtmögliche Flexibilität, um Ihr Designgerät responsiv zu gestalten. 

Unterschied zwischen neuen Elementor Flex-Containern und -Abschnitten

Understanding Elementor section vs container layouts is important because containers provide lighter code structure, better responsiveness, and more design flexibility compared to older sections.

. Well, there are quite a few differences. These are some key differences :

• Du kannst add widgets to containers with Elementor flexbox Bei Abschnitten hingegen müssen Sie Spalten und dann Widgets hinzufügen.
• Im Flex-Container, die Widget-Breite ist standardmäßig inline Bei der Spaltenabschnittsstruktur ist die Widget-Breite hingegen standardmäßig die volle Breite.
• Früher konnten Sie innerhalb eines Abschnitts nur einen inneren Abschnitt hinzufügen, jedoch mit Mit den neuesten Flex-Containern können Sie so viele Container hinzufügen, wie Sie möchten.
• Mit der Spaltenabschnittsstruktur können Sie die Widget-Richtung mithilfe der Spalten- oder Inline-Positionierung ändern. Mit dem neuesten Flex-Container können Sie jetzt die Widget-Richtung mithilfe von „Spalte“, „Zeile“, „Spaltenumkehr“ oder „Zeilenumkehr“ ändern.
• In der Spaltenabschnittsstruktur wurden Reverse Column oder Duplicate Sections verwendet, um Webseiten responsiv zu gestalten. Bei der neuesten Flex-Container-Methode können Sie a verwenden Benutzerdefinierte Reihenfolge von Widgets oder Containern für jedes Gerät.
• Die Ausrichtungsoptionen in der Abschnitts-/Spaltenstruktur sind Links, Mitte und Rechts. Andererseits erhalten Sie bei Flex-Containern Ausrichtungsoptionen wie Flex-Start, Flex-Center und Flex-End.

Jetzt müssen Sie darüber nachdenken, welchen Nutzen diese Veränderungen für Sie haben können. Um mehr darüber zu erfahren, fahren Sie mit dem nächsten Abschnitt fort.

Vorteile der Verwendung des Elementor Flexbox-Containers

Bevor einem Plugin eine neue Funktion hinzugefügt wird, wird viel recherchiert, um sicherzustellen, dass die Funktion für die Kunden nützlich ist. Das Gleiche gilt für den Elementor-Flex-Container. Das Elementor Die Funktion wurde hinzugefügt, da sie den Benutzern in großem Maße zugute kommen wird.

Hier sind einige der Vorteile, die Sie genießen werden, wenn Sie den Elementor-Flexbox-Container verwenden:

• Da Abschnitt und Innenabschnitt durch Flexcontainer ersetzt werden, können Sie bauen optimiertere Websites.
• Flexbox will reduce the number of Elementor Flexbox columns and inner sections. As a result, less code will be produced in the backend. And less DOM will result in better speed für Ihre WordPress-Site.
• Mit den Flexbox-Containereinstellungen können Sie dies tun Erstellen Sie auf Geräte reagierende Websites mit mehr Flexibilität als zuvor.
• Jetzt kannst du Einen kompletten Abschnitt mit einem Hyperlink versehen. Früher konnten Sie nur Widgets per Hyperlink verknüpfen.
• Wenn Sie vorher unzufrieden waren, weil Sie in einem Abschnitt nur einen Innenabschnitt hinzufügen konnten, dann ist der Flex-Container genau das Richtige für Sie. Mit Flexcontainern ist das möglich Hinzufügen von Containern innerhalb des Containers auf unbestimmte Zeit.

So verwenden Sie den Elementor Flexbox-Container in 6 Schritten

Befolgen Sie die folgenden Schritte, um zu erfahren, wie Sie den Elementor Flexbox-Container auf Ihrer Website verwenden, um ein optimierteres Erscheinungsbild zu erzielen. Der Prozess besteht aus 6 einfachen Schritten:

Schritt 1: Aktivieren Sie den Flexbox-Container in Elementor Experiments

First, you need to enable the Elementor Flexbox Container feature to start using Elementor containers inside the editor.

Dafür, Navigieren Sie zu Elementor ⇒ Einstellungen aus dem WordPress-Dashboard. Wechseln Sie nun zur Registerkarte Experimente und Scrollen Sie nach unten, um die Option „Flexbox-Container“ zu finden.

Nachdem Sie die Option gefunden haben choose Active from the dropdown menu to enable flexbox container elementor support on your website. Scrollen Sie abschließend nach unten und Klicken Sie auf „Änderungen speichern“.”, um den Status zu speichern.

Step 2: Create a New Page

After activating the flex container, it’s time to create a new page so you can use this feature. This is the starting point for any beginner following an Elementor container tutorial or learning how to use Elementor’s flexbox containers effectively.

For that, Navigate to Seiten ⇒ Alle Seiten und dann Klicken Sie auf Neu hinzufügen. Geben Sie nun einen Titel an und Klicken Sie auf Mit Elementor bearbeiten.

Step 3: Add a Container

Now, instead of a section, you need to add container layouts using the new Elementor container flexbox system. If you are wondering how to add a container in Elementor, simply click the plus icon and select your preferred structure.

Notiz: Wenn Sie die Struktur im Navigator bemerken, werden Sie feststellen, dass es sich bei der Struktur tatsächlich um einen Container handelt, der anstelle von Spalten andere Container enthält. Du kannst auch Ziehen Sie einen einzelnen Container per Drag & Drop aus dem Menü auf der linken Seite. 

Sie können viele Optionen für den Container anpassen, z

• Behälterbreite: Sie können die Containerbreite als „Boxed“ oder „Volle Breite“ wählen.
• Breite: Wenn Sie „Boxed“ als Containerbreite wählen, beträgt die Breite 928Px. Wenn Sie hingegen „Volle Breite“ wählen, beträgt die Containerbreite 100% der Breite des Ansichtsfensters. Sie können jedoch beide Breitenwerte ändern.
• Überlauf: You can choose overflow value as Default, hidden, or auto. Advanced users often use Elementor container overflow hidden settings to improve animation and scrolling effects.
• HTML-Tag: You can also create an Elementor container link by assigning clickable HTML tags. You get options such as div, header, footer, main, article, section, etc. There is a new addition of a tag.

Notiz:  Auch unter „Artikel“ stehen Ihnen viele Optionen zur Verfügung (mehr dazu später). Darüber hinaus können Sie Passen Sie alle oben genannten Einstellungen für jeden Innenbehälter an sowie.

Step 4: Add Widgets

Der Vorgang zum Hinzufügen von Widgets ist derselbe wie bei der Spaltenabschnittsstruktur. Du brauchst search for the widget then and drag widgets directly into the Elementor-widget-container area inside each container. This makes Elementor widget container management easier compared to older section-based layouts.

For example, I am going to add one heading, one video, and one social share icon.

Step 5: Customize Container Contents 

The Flexbox controls are the core of Flexbox WordPress layouts inside Elementor. For this, edit the container. Then, go to Layout on the left panel and expand the Items option. Here are the options you get to play with:

• Richtungen: Die Standardrichtung ist Zeile. Sie erhalten jedoch vier Optionen wie „Zeile“, „Spalte“, „Umgekehrte Zeile“ und „Umgekehrte Spalte“. Wenn Sie die Spalte oder die umgekehrte Spalte auswählen, werden alle Container im Hauptcontainer als unterschiedliche Elementor-Flexbox-Spalten angezeigt.

Hinweis: Wenn Sie eine Säule auswählen, müssen Sie die Breite der Innenbehälter anpassen.

• Behälter ausrichten: Sie können die Ausrichtung auf „Flex Start“, „Mitte“, „Flex-Ende“ und „Scratch“ festlegen. Flex beginnt mit der Platzierung Ihres Containerelements am Startpunktt, und mit einem Flex-Center-Wert können Sie die Elemente in der Mitte platzieren. Andererseits, Mit dem Flex-Ende können Sie alle Innenbehälter auf der Unterseite präsentieren. Und mit der Stretch-Option nehmen die Innenbehälter bei entsprechender Zuweisung zusätzlichen Platz ein. All dies gilt, wenn Sie die Richtung als Reihe wählen.

Wenn Sie sich hingegen für das entscheiden Richtung als Spalte, dann funktionieren die Flex-Start- und Center-Werte genauso wie die Zeile. Aber mit dem Flex-End, die Behälter werden nach rechts und mit Kratzer verschoben, nimmt es den gesamten Platz auf der linken Seite ein.

• Inhalt begründen:  Sie haben sechs Möglichkeiten, Inhalte zu rechtfertigen: Flex-Anfang, Mitte, Flex-Ende, Abstand dazwischen, Abstand rundherum und gleichmäßiger Abstand. Mit „Leerzeichen dazwischen“ wird zwischen den einzelnen Elementen der gleiche Abstand hinzugefügt. Es wird jedoch kein Platz oben oder unten auf den Elementen hinzugefügt.

Mit der Option „Abstand“ wird sowohl oben als auch unten an jedem Behälter Platz geschaffen. Und mit der Option „Platz gleichmäßig verteilen“ wird um alle Widgets und Innencontainer herum der gleiche Platz hinzugefügt.

• Elementlücke:  Mit dieser Option können Sie Platz zwischen Elementen (Widgets und inneren Abschnitten) hinzufügen.

• Wickeln: Wählen Kein Wrap stellen alle Elemente in einer einzigen Zeile Und Umbrechen, damit der Inhalt in mehreren Zeilen fließen kann.

Schritt 6: Veröffentlichen und Vorschau

Sie können Schritt 4 wiederholen, um alle Ihre Containereinstellungen anzupassen. Wenn Sie mit der Anpassung fertig sind, klicken Sie auf die Schaltfläche „Veröffentlichen“, um die Seite zu veröffentlichen. Anschließend können Sie auf die Schaltfläche „Vorschau“ klicken, um Ihre Seite mit der neuen Flex-Container-Struktur anzuzeigen.

How to Convert Section-based Elementor Page to Flexbox Container

Das Konvertieren einer abschnitts-/spaltenbasierten Struktur in den neuen Elementor Flex-Container ist super einfach. Sie können dies tun, indem Sie die folgenden 4 einfachen Schritte ausführen:

Step 1: Select the Section you Want to Convert

Sie müssen jeden Abschnitt separat konvertieren. Wählen Sie also zunächst den Abschnitt aus, den Sie konvertieren möchten. Du kannst Klicken Sie auf die sechs Punkte um einen Abschnitt auszuwählen oder Wählen Sie im Navigator einen Abschnitt aus (Sie finden die Option in der unteren linken Ecke).

Step 2: Click on Convert to Make the Conversion

Um nun zu konvertieren, finden Sie im linken Bereich eine Option „In Container konvertieren“ unter dem Layout. Klicken auf der KONVERTIEREN Taste.

Step 3: Delete the Previous Section

Nachdem der Konvertierungsprozess abgeschlossen ist, finden Sie Folgendes: zwei Versionen desselben Abschnitts. Eine ist abschnittsbasiert und eine andere ist containerbasiert. Die Version oben ist abschnittsbasiert. Löschen Sie die vorherige/Originalversion.

Schritt 4: Aktualisieren und Vorschau

You can repeat steps 1 to step 3 for all the sections of your page. Once you are done with converting all the sections into WordPress Flexbox container layout, click on the Klicken Sie zum Speichern auf die Schaltfläche „Aktualisieren“.. Jetzt können Sie auf die Vorschau-Schaltfläche klicken, um dieselbe Seite anzuzeigen, jedoch mit einem Container-Layout.

Können Sie in Elementor einen horizontalen und vertikalen Flexbox-Container erstellen?

Ja, Elementor unterstützt die Erstellung horizontaler und vertikaler Flexbox-Container in weniger als wenigen Sekunden. Sie müssen lediglich die sechs Punkte des Elementor-Containers auswählen und auf der Registerkarte „Layout“ die horizontale oder vertikale Richtung auswählen. So können Sie Ihren Flexbox-Container problemlos herstellen.

Can You Use Elementor Add-on Features with the New Flexbox Container?

Ja. Das kannst du absolut. 

Sie können verwenden ElementsKit – das ultimative Add-on für Elementor um dem Elementor-Seitenersteller zusätzliche Widgets und andere Funktionen hinzuzufügen. Dieser Elementor hinzufügen Auf Ist 100% kompatibel mit dem neuen Flexbox-Container von Elementor.

Sie können den gleichen Prozess zum Konvertieren eines beliebigen Elementor-Abschnitts in ein Container-Layout (siehe Abschnitt oben) verwenden, um ElementsKit-Abschnitte/-Seiten zu konvertieren. 

ElementsKit wird mitgeliefert 90+ advanced widgets, 20+ modules, and 1,000+ professional templates. It extends the Elementor page builder with multilevel mega menus, custom headers & footers, versatile content elements, and trendy animations like liquid glass oder Parallaxe to build powerful WordPress websites. You can easily Erstellen Sie eine komplette Website using the ElementsKit premade template in just a few minutes.

Hier ist ein Beispiel, an dem Sie sehen können, wie reibungslos vorgefertigte ElementsKit-Seiten in den Elementor Flexbox Container konvertiert werden.

FAQs

What is the difference between flexbox vs grid Elementor layouts?

Flexbox is a one-direction layout that allows you arrange items in a row or column. Whereas, Elementor grid is a two-dimentional layout where you can arrange items both in columns or rows at the same time.

Why Elementor flexbox container not showing?

Elementor flexbox container might not show due to plugin conflict, browser cache, outdated Elementor version, disabled flexbox container, etc. So, if you encounter such error, check and resolve the issue related to it.

How to reduce space between container in Elementor?

You can reduce space between Elementor container by adjusting padding and margin settings. Besides, you can also edit column gaps and container layout controls to reduce space between containers in Elementor.

Einpacken

Ich bin mir sicher, dass Ihnen jetzt klar wird, warum hinter dieser neuen Ergänzung von Elementor so viel steckt. Der Elementor Flex-Container ist wirklich ein Segen für alle WordPress-Website-Ersteller, die nach Möglichkeiten zum Erstellen von Websites gesucht haben optimierter, Schneller und reaktionsschnell unabhängig von der Gerätegröße.

Und das Tüpfelchen auf dem i ist, dass Sie Ihre zuvor erstellte Website im Handumdrehen in eine Container-basierte optimierte Website umwandeln können. Allerdings befindet sich der Flex-Container noch im experimentellen Modus. Es wird daher nicht empfohlen, es auf einer Live-Website zu verwenden, bis es als aktive Funktion veröffentlicht wurde

Bis dahin können Sie gerne mit dem Elementor-Flex-Container auf Ihrer Staging-Site experimentieren. Und probieren Sie es aus ElementsKit um mehr Flexibilität bei der Gestaltung einer fantastisch aussehenden Website zu erhalten, die die Aufmerksamkeit Ihrer Kunden fesselt und den Erfolg Ihrer Website steigert.