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 diesem Blog erfahren Sie mehr über die neuen Optionen, die der Elementor-Flexbox-Container zum Erstellen einer Website bietet So verwenden Sie den Elementor Flexbox Container in einer Schritt-für-Schritt-Anleitung.

Lesen Sie also weiter…

Was ist ein Elementor-Flexbox-Container?

Der Elementor-Flexbox-Container bringt alle CSS-Flexbox-Funktionen in Ihren Elementor-Editor. Mit der neuen Ergänzung können Sie ganz einfach erweiterte Layouts erstellen, um sicherzustellen, dass Webseiten unabhängig von der Größe auf allen Geräten gut aussehen.

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.

Und wenn es um den Elementor-Flexbox-Container geht, müssen Sie keine Abschnitte mehr verwenden. Sie können Widgets innerhalb eines Containers ohne Abschnitt hinzufügen. Sie können dem Container auch eine unbegrenzte Anzahl von Containern hinzufügen.

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

Sie fragen sich bestimmt, was die Unterschiede zwischen Containern und Abschnitten sind. Nun, es gibt einige Unterschiede. Dies sind einige wesentliche Unterschiede:

• Du kannst Fügen Sie mit Flexbox Widgets zu Containern hinzu 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 reduziert die Anzahl der Elementor-Flexbox-Spalten und Innenabschnitte. Dadurch wird weniger Code im Backend produziert. Und ichess DOM führt zu einer besseren Geschwindigkeit 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

Zunächst benötigen Sie eine Flexbox-Container-Funktion, um den Flexbox-Container in Elementor nutzen zu können. 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 Wählen Sie „Aktiv“ aus dem Dropdown-Menü, um den Elementor-Flexbox-Container zu aktivieren. Scrollen Sie abschließend nach unten und Klicken Sie auf „Änderungen speichern“.”, um den Status zu speichern.

Schritt 2: Erstellen Sie eine neue Seite

Nachdem Sie den Flex-Container aktiviert haben, ist es an der Zeit, eine neue Seite zu erstellen, damit Sie diese Funktion nutzen können. Navigieren Sie dazu zu Seiten ⇒ Alle Seiten und dann Klicken Sie auf Neu hinzufügen. Geben Sie nun einen Titel an und Klicken Sie auf Mit Elementor bearbeiten

Schritt 3: Fügen Sie einen Container hinzu

Anstelle eines Abschnitts müssen Sie nun einen Container hinzufügen. Dafür,  Klicken Sie auf das +-Symbol und wählen Sie dann die Struktur aus, die Ihnen gefällt.

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: Sie können den Überlaufwert als Standard, ausgeblendet oder automatisch auswählen.
• HTML-Tag: Sie können auch das HTML-Tag des Containers ändern. Sie erhalten Optionen wie „div“, „Kopfzeile“, „Fußzeile“, „Hauptzeile“, „Artikel“, „Abschnitt“ usw. Es wurde ein Tag hinzugefügt. Auf diese Weise können Sie ein egesamten Container in einen Link mit einem Tag umwandeln.

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.

Schritt 4: Widgets hinzufügen

Der Vorgang zum Hinzufügen von Widgets ist derselbe wie bei der Spaltenabschnittsstruktur. Du brauchst Suchen Sie nach dem Widget und ziehen Sie es dann per Drag & Drop auf das +-Symbol jedes Containers. Ich werde zum Beispiel eine Überschrift, ein Video und ein Social-Share-Symbol hinzufügen.

Schritt 5: Containerinhalte anpassen 

Jetzt ist es an der Zeit, die Container-Widgets anzupassen. Bearbeiten Sie dazu den Container. Gehen Sie dann im linken Bereich zu „Layout“ und erweitern Sie die Option „Elemente“. Hier sind die Optionen, mit denen Sie spielen können:

• 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.

So konvertieren Sie eine abschnittsbasierte Elementor-Seite in einen 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:

Schritt 1: Wählen Sie den Abschnitt aus, den Sie konvertieren möchten

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).

Schritt 2: Klicken Sie auf „Konvertieren“, um die Konvertierung durchzuführen

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

Schritt 3: Löschen Sie den vorherigen Abschnitt

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

Sie können die Schritte 1 bis 3 für alle Abschnitte Ihrer Seite wiederholen. Wenn Sie mit der Konvertierung aller Abschnitte in das Flexbox-Container-Layout fertig sind, klicken Sie auf 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.

Kann ich Elementor-Zusatzfunktionen mit dem neuen Flexbox-Container nutzen?

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 Über 500 fertige Abschnitte, über 35 fertige Seiten und über 85 benutzerdefinierte Add-ons Funktionen, die Ihnen das Leben erleichtern. Das können Sie ganz einfach Erstellen Sie eine komplette Website mit der vorgefertigten ElementsKit-Vorlage in nur wenigen Minuten.

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

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.