Abschnitte und Spalten in Elementor

Dieser Inhalt verwendet eine ältere Elementor-Struktur, die auf Abschnitten und Spalten basiert. Aktuell hat Elementor ein System von Containern eingeführt, was die Flexibilität und Organisation des Designs verbessert.

Schritt-für-Schritt-Video

Was ist ein Abschnitt?

Abschnitte in Elementor sind containerartige Bausteine. Innerhalb der Abschnitte befinden sich die Spalten, in denen wir schließlich unsere Design-Widgets platzieren. Ein Abschnitt hat immer mindestens eine Spalte.

Abschnitte können über die Optionen im Elementor-Panel auf der linken Seite oder durch Rechtsklick auf den Abschnitts-Handle und Auswahl aus dem angezeigten Kontextmenü bearbeitet und gestaltet werden.

Rechtsklick-Optionen

Wenn Sie einen Abschnitt duplizieren möchten, klicken Sie mit der rechten Maustaste auf dessen Abschnitts-Handle und wählen Sie Duplizieren aus dem Kontextmenü. Sie können einen Abschnitt auch an eine andere Stelle im selben Dokument, das Sie bearbeiten, oder sogar in ein anderes Dokument (Seite, Vorlage, …) kopieren und einfügen, sofern es sich um dieselbe Website handelt, indem Sie die Optionen Kopieren und Einfügen verwenden. Sie können auch nur den Stil (ohne Inhalt) eines Abschnitts kopieren und in einen anderen einfügen. Klicken Sie auf Als Vorlage speichern, um den Abschnitt als Vorlage zu speichern, die später an beliebiger Stelle eingefügt werden kann. Ein Klick auf Navigator öffnet den Navigator, der bereits für diesen bestimmten Abschnitt konfiguriert ist. Und natürlich wird der Abschnitt durch Klicken auf Löschen entfernt.

Wenn Sie auf Abschnitt bearbeiten klicken, werden die Spaltenoptionen im Elementor-Panel auf der linken Seite mit allen folgenden verfügbaren Optionen angezeigt.

Layout-Tab

Wenn Sie auf Abschnitt bearbeiten klicken, werden die Spaltenoptionen im Elementor-Panel auf der linken Seite mit allen folgenden Optionen angezeigt.

1. Inhaltsbreite: Legt die Inhaltsbreite auf Boxed oder Volle Breite fest. Wenn Sie Boxed auswählen, beträgt die Standardbreite für den Inhalt 1140px (dies kann über das Hamburger-Menü (oben links) geändert werden)

   

   > Website-Einstellungen > Layout), obwohl Sie den Schieberegler verwenden können, um Ihre bevorzugte Breite einzustellen.
2. Spaltenabstand: Der Standard-Spaltenabstand beträgt 20px, aber Sie können ihn über diesen Selektor ändern (Kein Abstand, Schmal, Erweitert, Breit, Breiter und Benutzerdefiniert).
3. Höhe: Standardmäßig passt der Abschnitt seine Höhe an den Inhalt an, bietet aber zwei weitere Optionen:
   • An Bildschirm anpassen: Der Abschnitt passt sich an, um den Bildschirm vollständig auszufüllen.
     • Spaltenposition: Wenn Sie „An Bildschirm anpassen“ auswählen, wird diese weitere Option angezeigt, mit der Sie die vertikale Ausrichtung der Spalte (Strecken, Oben, Mitte, Unten) festlegen können.
   • Mindesthöhe: Diese Option ermöglicht es Ihnen, eine Mindesthöhe über den Schieberegler festzulegen. Beachten Sie jedoch, dass sie keine Wirkung hat, wenn Sie einen Wert festlegen, der kleiner ist als die bereits vom Inhalt eingenommene Höhe.
     • Spaltenposition: Wenn Sie „An Bildschirm anpassen“ auswählen, wird diese weitere Option angezeigt, mit der Sie die vertikale Ausrichtung der Spalte (Strecken, Oben, Mitte, Unten) festlegen können.
4. Vertikale Ausrichtung: Ermöglicht Ihnen, die vertikale Ausrichtung der von Ihnen hinzugefügten Widgets festzulegen. Damit dies sinnvoll ist, muss die Höhe des Abschnitts auf „An Bildschirm anpassen“ oder eine Mindesthöhe eingestellt sein, die größer ist als die Höhe des vorhandenen Inhalts. Die Spalte verfügt jedoch über eine weitere, identische Steuerung für die vertikale Ausrichtung, die Vorrang hat. Daher empfehle ich, für die vertikale Ausrichtung die vertikale Ausrichtungssteuerung der Spalte zu verwenden.
5. Überlauf: Wählen Sie, wie mit Inhalt umgegangen werden soll, der Ihren Container überläuft. Standardmäßig ist Überlauf erlaubt. Wählen Sie Versteckt, um überlaufenden Inhalt auszublenden. Wenn Sie beispielsweise Bewegungseffekte aus dem Tab „Erweitert“ verwenden, kann der Inhalt durch eine Animation von außerhalb der Spalte eintreten. Wenn diese Steuerung auf Standard eingestellt ist, wird das animierte Element über seinen gesamten Verlauf angezeigt. Bei „Überlauf versteckt“ sehen wir das animierte Element jedoch nur im durch die Spalte begrenzten Bereich. Dies wird im Video-Tutorial zu diesem Thema viel deutlicher gezeigt.
6. Abschnitt strecken: Zwingt den Abschnitt, sich über JavaScript auf die volle Seitenbreite zu strecken. Diese Option verwenden wir nur, wenn wir die Steuerung am Anfang dieses Feldes Inhaltsbreite auf Volle Breite eingestellt haben und dies keine Wirkung zeigt.
7. HTML-Tag: Legt ein HTML-Tag für Ihren Abschnitt fest; dieser Punkt wird im Folgenden erläutert.

Wie man HTML-Tags zu meinem Abschnitt und meiner Spalte hinzufügt

HTML-Tags sind für die SEO Ihrer Website unerlässlich. Ihre korrekte Verwendung wird sich positiv auf den Traffic Ihrer Website auswirken.

Wenn Sie den Header bearbeiten, verwenden Sie den Header

1. Gehen Sie zu den Einstellungen Ihres Abschnitts oder Ihrer Spalte .
2. Klicken Sie unter Layout auf das Dropdown-Menü HTML-Tag.
3. Wählen Sie das gewünschte Tag aus.

Dies sind die verschiedenen Arten von HTML-Tags, die Sie auswählen können:

1. <div>: Definiert eine Division. Dieses Tag ermöglicht das Gruppieren mehrerer Blockelemente (Absätze, Überschriften, Listen, Tabellen, Divisionen usw.).
2. <header>: Definiert einen Header für ein Dokument oder einen Abschnitt. Dies ist nützlich, wenn Sie eine Header-Vorlage erstellen. Es kann Elemente enthalten, die mit dem Header einer Website zusammenhängen, wie das Logo, ein Navigationsmenü, ein Suchformular, …
3. <footer>: Definiert eine Fußzeile für ein Dokument oder einen Abschnitt. Dies ist nützlich, wenn Sie eine Fußzeilen-Vorlage erstellen. Es repräsentiert eine Fußzeile, die typischerweise Informationen über den Autor der Website, Links zu rechtlichen Texten und Copyright enthält.
4. <main>: Repräsentiert den Hauptinhalt eines Dokuments. Dieser Inhalt sollte einzigartig für das Dokument sein und alle Inhalte ausschließen, die sich in anderen Dokumenten wiederholen, wie Seitenleisten, Navigationslinks, Copyright-Informationen, Website-Logos und Suchformulare (es sei denn, die Hauptfunktion des Dokuments ist ein Suchformular).
5. <article>: Repräsentiert eine unabhängige und ergänzende Komposition des Hauptinhalts des Dokuments, zum Beispiel könnte es ein Forenbeitrag, ein Zeitschriften- oder Zeitungsartikel, ein Blog-Eintrag, ein Benutzerkommentar, ein interaktives Widget oder Gadget oder jedes andere unabhängige Inhaltselement sein.
6. <section>: Entwickelt, um einen thematisch definierten Teil eines Dokuments zu enthalten. Die Inhalte eines Section-Elements werden üblicherweise von einer Überschrift eingeleitet. Autoren greifen üblicherweise auf das Section-Element zurück, um ein umfangreiches Dokument in Kapitel zu unterteilen, um die verschiedenen Tabs in einer Anwendung zu trennen oder um die Abschnitte eines Dokuments thematisch zu gliedern (Anzeigenabschnitt, Abschnitt der neuesten Artikel, Abschnitt der verwandten Links usw.).
7. <aside>: Repräsentiert einen Abschnitt einer Seite, der aus Inhalten besteht, die indirekt mit dem Hauptinhalt des Dokuments zusammenhängen. Diese Abschnitte werden oft als Seitenleisten oder als Einschübe dargestellt und enthalten eine Randbemerkung wie eine Glossardefinition, indirekt verwandte Elemente wie Werbung.
8. <nav>: Repräsentiert einen Teil einer Seite, dessen Zweck es ist, Navigationslinks bereitzustellen, entweder innerhalb des aktuellen Dokuments oder zu anderen Dokumenten. Gängige Beispiele für Navigationsabschnitte sind Menüs, Inhaltsverzeichnisse und Indizes.

Struktur-Tab

Wenn ein Abschnitt mehr als eine Spalte hat, können wir diese vordefinierten Spaltenverteilungskonfigurationen verwenden. Die Zahlen geben den prozentualen Anteil der Breite jeder Spalte am Gesamtbetrag von 100 an.

Unabhängig von der von uns gewählten Struktur, die standardmäßig Spalten gleicher Breite ist, können wir die Spaltenbreite nach Belieben definieren, entweder durch Ziehen im Zwischenraum zwischen den Spalten oder durch Eingabe einer Zahl im Textfeld „Spaltenbreite“, das sich in den Optionen des Layout-Tabs einer Spalte befindet.

Was ist eine Spalte?

Eine Spalte in Elementor ist eine vertikale Unterteilung eines Abschnitts. Wie bereits erwähnt, sind Spalten Kinder von Abschnitten, und ein Abschnitt kann von einer bis zu mehreren Spalten enthalten. Spalten sind der endgültige Container für die Widgets, die das Design eines Dokuments in Elementor bilden.

Wenn ein Dokument mehr als eine Spalte hat, können diese gleiche oder unterschiedliche Breiten haben. Im Konfigurationsfeld eines Abschnitts befindet sich der Tab Struktur, wo wir zwischen verschiedenen vordefinierten Optionen wählen können. Wir können aber auch vordefinierte Breiten für jede Spalte in Prozent des Gesamtbetrags von 100% festlegen. Zum Beispiel haben wir drei Spalten und legen eine auf 22,5%, eine andere auf 27,5% und die letzte auf 50% fest.

Die Höhe einer Spalte wird durch die Größe des Abschnitts bestimmt. Damit eine Spalte eine größere Höhe als ihr Inhalt hat, müssen wir im Abschnitt eine Mindesthöhe oder eine

Rechtsklick-Optionen

Wenn Sie eine neue Spalte hinzufügen oder eine Spalte duplizieren möchten, klicken Sie mit der rechten Maustaste auf einen Spalten-Handle und wählen Sie +Neue Spalte hinzufügen oder Duplizieren aus dem Kontextmenü. Sie können eine Spalte auch in einen anderen Abschnitt kopieren und einfügen, indem Sie die Optionen Kopieren und Einfügen verwenden, oder Sie können nur den Stil (ohne Inhalt) einer Spalte in eine andere kopieren und einfügen.

Ein Klick auf Navigator öffnet den Navigator, der bereits für diese bestimmte Spalte konfiguriert ist. Und natürlich wird die Spalte durch Klicken auf Löschen entfernt. Wenn der Abschnitt nur eine Spalte hat und Sie diese löschen, wird sie entfernt, aber durch eine andere leere Spalte ersetzt.

Wenn Sie auf Spalte bearbeiten klicken, werden die Spaltenoptionen im Elementor-Panel auf der linken Seite mit den folgenden verfügbaren Optionen angezeigt.

Layout-Tab

1. Spaltenbreite (%): Legt die Breite Ihrer Spalten fest, wobei zu beachten ist, dass es sich um einen Prozentsatz des Gesamtbetrags von 100% handelt. Wenn die Größe einer Spalte erhöht wird, wird sie von der angrenzenden Spalte abgezogen.
2. Alineación vertical: establezca la alineación vertical de los widgets que contenga la columna. Para que esta alineación tenga sentido se tienen que pasar dos cosas. Una que el alto de la sección sea mayor que el espacio que ocupa el contenido y esto se estableciendo el alto de la sección a un tamaño mayor que el que ocupa el contenido, ya sea seleccionando la opción Ajustar a pantalla o Altura mínima. Y otra que tras establer Ajustar a pantalla o Altura mínima establezcamos la opción Posición de la columna en Estirar.
   • Standard: Die Widgets werden oben ausgerichtet.
   • Oben: Die Widgets werden oben ausgerichtet.
   • Mitte: Die Widgets werden in der Mitte ausgerichtet.
   • Unten: Die Widgets werden unten ausgerichtet.
   • Zwischenraum: Die Widgets beginnen und enden am Spaltenrand, mit gleichem Abstand dazwischen.
   • Abstand ringsum: Die Widgets haben den gleichen Abstand, und die Ränder sind halb so groß wie der Abstand zwischen den Widgets.
   • Gleichmäßiger Abstand: Die Widgets haben den gleichen Abstand zwischen, vor und nach ihnen.
3. Horizontale Ausrichtung: Dies erweitert die Fähigkeit der Inline-Positionierung und ermöglicht es Ihnen, die Inline-Widgets, die in derselben Zeile platziert sind, horizontal auszurichten. Damit diese Ausrichtung möglich ist, müssen die Widgets, die wir ausrichten möchten, im Tab Erweitert > Positionierung > Breite: Inline (Auto) eingestellt haben, damit die Widgets nicht die gesamte Bildschirmbreite einnehmen und horizontal ausgerichtet werden können.
4. HTML-Tag: Legt ein HTML-Tag für Ihre Spalte fest. Weitere Informationen zu HTML-Tags.