Was ist Elementor Container

Elementor Container ist eine neue Funktion im Elementor Page Builder zur Erstellung hochflexibler und responsiver Seitenlayouts. Container bietet eine stärkere Kontrolle und mehr Layout-Optionen als herkömmliche Abschnittslayouts. Es unterstützt zwei Hauptlayout-Modi: Flexbox und Grid.

1. wie aktiviert man Elementor Container?

Zuerst müssen Sie Ihr Elementor Page Builder Plugin mit demElementor Pro PluginAktualisieren Sie auf die neueste Version.

Nachdem Sie das Plugin auf die neueste Version aktualisiert haben, navigieren Sie zuElementor>aufstellenSeite unter der Registerkarte Funktionen

In Stable Features setzenGitterrost-ContainerAktivierung:

aktivieren.Flexbox-ContainerWenn Sie das mit Elementor gelieferte Mega-Menü verwenden möchten, müssen Sie auch die Funktionen "Verschachtelte Elemente" und "Menü" aktivieren.

Sobald die Einstellungen abgeschlossen sind, ziehen Sie die Seite an den unteren Rand und klicken Sie auf die Schaltfläche Speichern.

2) Wie konvertiert man einen Abschnitt auf der Seite in einen Container?

Nachdem Sie den Seiteneditor aufgerufen haben, wählen Sie den Abschnitt aus, den Sie in einen Container umwandeln möchten, und ziehen den Container in den ausgewählten Schieberegler.

Nach der Konvertierung wird automatisch ein identisches Container-Modul unter das konvertierte Section-Modul kopiert. Nachdem Sie sich vergewissert haben, dass es keine Probleme mit dem Container-Modul gibt, können Sie das Abschnitt-Modul direkt löschen, um die Umwandlung von Abschnitt zu Container abzuschließen.

3. einige Vorteile des Elementor Containers gegenüber Section

3.1 Größere Reaktionsfähigkeit

Container nutzt die Steuerelemente im Layout vollständig aus, um automatisch responsive Anpassungen vorzunehmen. Das bedeutet, dass Sie in den meisten Fällen nicht viel tun müssen, um ein automatisches responsives Layout für Ihre Inhalte zu erreichen. Bei Section hingegen müssen Sie das Layout manuell konfigurieren und für verschiedene Geräte anpassen, um den perfekten responsiven Effekt zu erzielen.

Container ermöglicht es Ihnen auch, das responsive Layout für verschiedene Geräte anzupassen, um spezifische Anforderungen zu erfüllen.

3.2 Größere Kontrolle über das Layout

Container bietet mehr Freiheit und Flexibilität als Section. Sie können mehrere Ebenen von Containern verschachteln und ihre Breite und Höhe anpassen. Das macht die Erstellung funktionsreicher und komplexer Vorlagen viel schneller und einfacher. Container bieten mehr Flexibilität als herkömmliche Layouts, während bei Abschnittslayouts nur Widgets in Abschnitte und Spalten unterteilt werden können.

3.3 Verbesserung der Seitengeschwindigkeit

Sektionslayouts können für Sie etwas langsam sein, aber nicht Container!

Elementor Container verbessert die Seitengeschwindigkeit, indem es die Anzahl der verwendeten Trennlinien reduziert. Abschnitte hingegen enthalten in der Regel mehr Spalten und interne Abschnitte, und je mehr Trennzeichen vorhanden sind, desto größer wird das Document Object Model (DOM), was die Ladezeiten der Seite erhöht. Durch die Verwendung von Containern wird die Anzahl der Datenanforderungen reduziert und das DOM verkleinert, was zu einer erheblichen Steigerung der Ladegeschwindigkeit der Seite führt.

3.4 Direktes Hinzufügen von Links zum Container

Wenn Sie ein Schleifen-Element erstellen, können Sie einfach Links zum gesamten Container hinzufügen, anstatt Links zu jedem Element hinzuzufügen. Ändern Sie einfach den HTML-Tag des Containers so, dass er lautet<a>Tags, erreicht werden kann. Dies macht die Linkverwaltung einfacher und effizienter.

4 Grundeinstellungen von Elementor Container

4.1 FlexBox und Grid für Elementor Container

FlexBox und Grid sind zwei Layout-Modi für unterschiedliche Gestaltungsbedürfnisse. FlexBox ist für ein sehr freies Layout geeignet, während Grid einem Raster folgt. Sie können den geeigneten Layoutmodus entsprechend Ihren spezifischen Anforderungen wählen.

a. Was ist ein FlexBox-Container?

FlexBox Container ist ein flexibles Layout, das sehr freie Gestaltungsmöglichkeiten für Ihre Website bietet.

b. Was ist ein Grid Container?

Grid Container ist eine Raster-Layout-Methode, die die Anordnung von Elementen durch die Festlegung von Zeilen und Spalten steuert, um alle Raster in hohem Maße konsistent zu halten. Wenn Ihre Seite ein Rasterlayout erfordert, ist die Verwendung von Grid Container bequemer und effizienter.

4.2 Wie fügt man Container zu einer Seite hinzu?

a. Hinzufügen über die Leinwand

Dort, wo Sie den Container im Elementor-Canvas hinzufügen müssen, klicken Sie auf das +-Zeichen für das Modul unten und klicken Sie auf das +-Zeichen im Pop-up-Bereich.

Klicken Sie dann im Pop-up-Layout auf Flexbox oder Grid, um den entsprechenden Container zur Seite hinzuzufügen.

Diese Methode wird verwendet, um den obersten Container in die Seite einzufügen, der der äußerste Layout-Container der Seite ist. Der oberste Container befindet sich außerhalb des Seiten-Canvas und verschachtelt keine anderen Container.

Sie können mehrere Container auf einer Seite verwenden oder einen Container verwenden und andere Layout-Container darin verschachteln, je nach Ihrem Layoutplan.

b, durch Ziehen und Ablegen von Layout-Elementen hinzufügen

Das Hinzufügen eines verschachtelten inneren Containers wird durch Ziehen und Ablegen des Layout-Elements wie folgt erreicht: Suchen Sie in der Elementor-Elementbibliothek auf der linken Seite des Elementor-Canvas das Element Container unter Layout und ziehen Sie es in den entsprechenden Bereich.

Nach dem Ziehen und Ablegen können Sie den gezogenen Container auch über den Navigator beobachten, verschachtelt in einem Container.

Die unten hinzugefügten Container sind alle standardmäßigFlexbox-Modus, den Sie in den Layout-Einstellungen an Ihre Bedürfnisse anpassen können, umRasterModus.

4.3 Container-Layout-Einstellungen

1. allgemeine Container-Einstellungen

Gehen Sie folgendermaßen vor, um das Container-Layout einzustellen:

1. Wählen Sie den Container, den Sie einstellen möchten, mit der Maus aus.
2. Wechseln Sie im linken Fenster auf die Registerkarte "Layout".
3. Auf dieser Registerkarte können Sie Layout-Einstellungen für Container vornehmen, z. B. die Breite, Höhe und Ausrichtung anpassen.

Container-Layout wird verwendet, um das Layout des Containers zu wechseln. Es gibt zwei Optionen: Flexbox und Grid, die Standardoption ist Flexbox.

Inhalt BreiteDient zur Einstellung der Breite des Containers, Sie können "Boxed" oder "Full Width" wählen. Standardmäßig ist sie auf "Boxed" eingestellt, was bedeutet, dass die Breite des Inhalts auf einem festen Wert basiert. Sie können die globale Inhaltsbreite in den Site-Einstellungen von Elementor festlegen.

Die Standardbreite von Boxed ist die Breite des Inhalts, die Sie global in Site Setting eingestellt haben, und Sie können die Breite über den Schieberegler ändern.

Volle BreiteSeine Standardbreite wird auf der Grundlage des umschlossenen Containers verteilt, oder wenn es der oberste, äußerste Container im Canvas ist, wird die Breite standardmäßig auf der Grundlage des Browserfensters verteilt. Sie können die Breite mit dem Schieberegler anpassen.

Min. HöheDient zur Einstellung der Mindesthöhe des Containers. Wenn der Container keinen oder einen geringeren Inhalt hat, zeigt er die Mindesthöhe an; wenn der Container mehr Inhalt hat, wird er automatisch an die Höhe des Inhalts angepasst. Sie können die Höhe ändern, indem Sie den Balken verschieben oder einen Wert eingeben.

Das Container-Layout kann von Flexbox auf Grid umgestellt werden, wobei sich die Einstellungen für die Elemente zwischen Flexbox und Grid unterscheiden.

2、Einstellungen von Flexbox

Wenn Sie das Container-Layout auf Flexbox einstellen, können Sie die Elementeinstellungen wie folgt sehen:

Richtung steht für die Anzeigerichtung, es gibt 4 Optionen, je nach Pfeilrichtung: links nach rechts, oben nach unten, rechts nach links, unten nach oben.

Verwenden Sie Richtung, um die Richtung und Reihenfolge der Elemente zu ändern, die Sie im Container platzieren.

Inhalt rechtfertigenWird verwendet, um die Ausrichtung der Elemente innerhalb des Containers auf der Hauptachse festzulegen. Wenn Richtung auf Horizontal (links-nach-rechts oder rechts-nach-links) eingestellt ist, wird Inhalt ausrichten verwendet, um die Ausrichtung des Elements in horizontaler Richtung festzulegen; wenn Richtung auf Vertikal (oben-nach-unten oder unten-nach-oben) eingestellt ist, wird Inhalt ausrichten verwendet, um die Ausrichtung des Elements in vertikaler Richtung festzulegen.

Justify InhaltDient zum Einstellen der Ausrichtung der internen Elemente des Containers auf der Hauptachse und bietet die folgenden fünf Optionen:

1. StartAnordnen: Ordnet die Elemente vom Anfang der Container-Layoutrichtung aus an.
2. ZentrumZentrieren: Zentriert die Elemente im Container.
3. EndeAnordnen: Ordnet die Elemente vom Ende der Container-Layoutrichtung aus an.
4. Raum zwischenDas erste Element steht am Anfang, das letzte Element am Ende, und die übrigen Elemente sind gleichmäßig verteilt.
5. Raum umJedes Element hat den gleichen umgebenden Raum.
6. Raum gleichmäßig: Der Abstand zwischen den einzelnen Elementen ist gleich.

Elemente ausrichtenWird verwendet, um die Ausrichtung der internen Elemente des Containers in Richtung der Hauptachse festzulegen. Sie enthält die folgenden vier Optionen:

1. StartDirection: Richtet die Elemente innerhalb des Containers auf der Grundlage des Startpunkts der Layoutrichtung Direction aus.
2. ZentrumZentrales Ausrichten: Richtet die Elemente innerhalb des Containers anhand der Layout-Richtung Direction aus.
3. EndeDirection: Richtet die Elemente innerhalb des Containers anhand des Endpunkts der Layout-Richtung Direction aus.
4. DehnenStretch elements to fit the size of the container. Wenn Elemente eine 'auto'-Größe haben, werden sie an die Größe des Containers angepasst; wenn sie auf eine feste Größe eingestellt sind, werden sie nicht automatisch gestreckt.

4、Zusätzliche Optionen其他选项设置

Es gibt 2 Optionen in den Zusatzoptionen von Container.

Überlauf Überlaufeinstellungen

Steuert, ob der Inhalt des Containers nicht in das Browserfenster passt und ob der Überlauf versteckt oder sichtbar sein soll, was zu einem horizontalen Scrollen führt.

ÜberlaufEs gibt drei Möglichkeiten:

• Standardmäßig können Elemente außerhalb des Containers überlaufen.
• Versteckt Übergelaufene Elemente ausblenden, kein Zugriff auf übergelaufene Elemente.
• Auto Erzeugt eine Bildlaufleiste, um Elemente zugänglich zu halten, wenn der Inhalt überläuft, eine Einstellung, die es ermöglicht, den Inhalt in einer bewegten Ansicht zu verschieben.

Ausgeblendeter Zustand, wenn der Inhalt übergelaufen ist, können Sie den übergelaufenen Inhalt nicht sehen.

4.4 Container-Stil-Einstellungen

Wechseln Sie zur Registerkarte Stil des Containers, um den Stil des Containers festzulegen.

1）Hintergrund(background)

Sie können die Hintergrundfarbe für den Container über den Hintergrund festlegen.

Sie können auch ein Hintergrundbild für die Container festlegen.

(2) Hintergrundüberlagerung)

Mit der Hintergrundüberlagerung können Sie eine Farb- oder Bildmaske über den von Ihnen festgelegten Hintergrund legen und die Transparenz der Farbe oder des Bildes so einstellen, dass sie dem gewünschten Effekt entspricht.

3) Rand (Randeinstellung)

Border wird verwendet, um den Rahmen und den Projektionseffekt des Containers festzulegen.

4) Formteiler (Shape Divider)

Shape Split Line kann verwendet werden, um einige Container zwischen den Split-Effekt, der eine Funktion, die von der VAE-Plugin zur Verfügung gestellt wird, zu tun.

Sie können wählen, ob Sie die geteilte Form des oberen oder unteren Teils des Containers festlegen möchten, indem Sie oben und unten umschalten, und unter Typ können Sie eine Form wählen, die Ihnen gefällt (nur die mitgelieferten)

Zusammenfassung:

In diesem Artikel erfahren Sie, wie Sie Elementor Container aktivieren und einen Abschnitt auf einer Seite in einen Container konvertieren. Außerdem lernen Sie die Vorteile von Containern gegenüber Abschnitten kennen, wie z. B. eine bessere Reaktionsfähigkeit, eine flexible Layoutsteuerung und eine höhere Seitengeschwindigkeit. Das Tutorial behandelt auch Container-Layout-Einstellungen, einschließlich der Verwendung von Flexbox- und Grid-Layout-Modi, und wie man Links und benutzerdefinierte Stile zum Container hinzufügt. Egal, ob Sie ein Anfänger oder ein erfahrener Webdesigner sind, dieses Tutorial wird Ihnen helfen, die Möglichkeiten von Elementor Container voll auszuschöpfen, um die Effizienz und Effektivität des Webdesigns zu verbessern.