Mit Abstand ausgerichtet

Elementor mit Abstand ausgerichtet

tl;dr: Abstände und Ausrichtungen sind nur am ersten Blick einfache Dinge. Wie man mit Elementor die richtige Einstellung findet um zu seinem Wunschdesign zu gelangen ist Inhalt dieses Artikels. Ein Grundlagen Artikel zur Arbeit mit Elementor.

Inhalt

Oben – Mitte – Unten. Eigentlich ganz einfach. Zu erst muß man folgendes wissen: HTML ist so aufgebaut, dass im Normalfall (also wenn nichts anderes definiert wurde) jedes Ding seinen Platz bekommt, den es braucht. Also auch die Höhe, die es braucht. Wie hoch also zB. ein Abschnitt ist hängt einfach davon ab, wie hoch die Inhalte darinnen (und deren Abstände zueinander und zum Rand) sind.

Eine vertikale Ausrichtung kann also erst wirksam werden, wenn die umgebende Layout-Struktur höher als die Summe ihrer Inhalte ist. Dies kann man erreichen, wenn man die Höhe des Abschnittes verändert. 

Die einfachste Lösung ist es, den Abschnitt so hoch zu machen wie der Bildschirm ist. Die Option kann man bei Höhe angeben. Alternativ dazu kann man auch eine Min. Höhe angeben, also eine Minimale Höhe. Wenn man hier die Einheit VH auswählt kann man damit die prozentuelle Höhe des Abschnittes in Bezug auf die Bildschirmhöhe angeben.

Wenn jetzt der Abschnitt höher als die darin befindlichen Spalten sind, kann man auch die vertikale Spaltenposition angeben. Diese kann Oben, Mitte oder Unten gewählt werden. Und wenn man will, dass die Spalte so hoch wie der Abschnitt werden soll, gibt es zusätzlich die Option Dehnen.

Abschnitt Höhe und Position
Bei aktiviertem Abschnitt kann man dessen Höhe (Pfeil in Pink) und die Position der darin befindlichen Spalten (blau) angeben.

Man kann also die einzelnen Spalten innerhalb eines (höheren) Abschnittes vertikal ausrichten. Man kann aber auch den Inhalt innerhalb der Spalten ausrichten. Und zwar kann man diese Einstellung für den Abschnitt treffen: damit werden alle Spalten so ausgerichtet. Man kann aber auch jeder einzelnen Spalte die vertikale Ausrichtung anordnen.

Ausrichtung im Abschnitt
Im Abschnitt wird die vertikale Ausrichtung aller Spalten definiert.
Ausrichtung einzelner Spalte
Die einzelne Spalte kann eine vom Abschnitt abweichende vertikale Ausrichtung bekommen.
Gleiche Höhe alles Spalten
In diesem Beispiel sind die 2 x 3 Spalten auf den ersten Blick alle gleich. Das liegt aber nur daran, dass die Inhalte in jeder Spalte die Höhe des umgebenden Abschnittes bestimmen.
6 Spalten unterschiedlich hoch
Wenn die Spalten aber höher als die Inhalte sind erkennt man sofort die unterschiedlichen vertikalen Ausrichtungen. Beide Abschnitte in diesem Beispiel haben die Höhe 50 VH eingestellt, also 50 % Viewport Height (=halbe Fensterhöhe)

Vertikale Ausrichtung kann bei Layout-Objekten angewandt werden, also bei Abschnitten, Inneren Abschnitten und Spalten. Eingestellt werden können 1 + 6 verschiedenen Werte. 

Vorgabe (also die Grundeinstellung) bedeutet, dass kein Wert eingetragen wird. Daher wird der Inhalt oben ausgerichtet.

Die ersten 3 Werte sind einfach zu verstehen:

  1. Oben
  2. Mitte
  3. Unten

bedeuten, dass alle Elemente innerhalb der Spalte(n) (auch wenn die Einstellung im darüber liegenden Abschnitt vorgenommen wurden) von oben nach unten, um die vertikale Mitte herum oder von unten nach oben ausgerichtet werden.

3 x vertikal ausgerichtet
Oben

Der Spalteninhalt wurde oben ausgerichtet.

Mitte

Der Spalteninhalt vertikal zentriert.

Unten

Der Aufbau erfolgt von unten nach oben.

Die weiteren Optionen erfordern ein wenig mehr Aufmerksamkeit, sie heißen:

  1. Zwischenraum: das erste Element wird oben, das letzte unten ausgerichtet. Der verbleibende vertikale Platz wird gleichmäßig auf alle Zwischenräume aufgeteilt.
  2. Abstand im Umkreis: der verbleibende vertikale Platz wird zwischen den Elementen verteilt, über dem ersten und unter dem letzten Element wird ein halber Abstand gelassen.
  3. Gleichmäßiger Abstand: alle Abstände (von oben, zwischen den Elementen und unten) sind gleich hoch.
Untere Hälfte
Zwischenraum

Bei Zwischenraum werden die Elemente so verteilt, dass oben (erstes) und unten (letztes) Element ausgerichtet wird. 

Abstand im Umkreis

Vertikale Verteilung der Elemente mit Umkreis.

Gleichmäßger Abstand

Alle Abstände sind gleich hoch.

Damit kann man festlegen, wie die einzelnen Widgets vertikal zueinander angeordnet werden – völlig unabhängig von der Art des verwendeten Widgets. Bei all den Beispielen bisher sieht man um die Spalten jeweils einen Rahmen. Zwischen diesen Rahmen und den Widgets sind Abstände, die auf unterschiedliche Weise eingestellt werden können.

Spaltenabstand Vorgabe
Die Voreinstellung des Spaltenabstandes entspricht der Voreinstellung des Widgetabstandes.

Der Spaltenabstand wirkt innerhalb der Spalte quasi als Rahmen, dh oben, rechts, unten und links. Stossen nun 2 Spalten aneinander wirken die Abstände beider Spalten auf die Widgets. Also: Am Rand eines Abschnittes ist der Abstand der Widgets zwischen Rand und Widgets halb so breit wie der Abstand zweier Widgets nebeneinander in benachbarten Spalten. 

Einfacher: der Standardabstand zwischen Widgets beträgt 20 px, der Spaltenabstand 10 px. Damit sind alle Spalten im Endeffekt gleich breit.

Wenn dieser Spaltenabstand geändert werden soll bietet Elementor verschiedene Vorgaben. Wenn der Abstand Keine Lücke gewählt wird passiert genau das: die Inhalte werden bis zum Spaltenrand geführt. 

SpaltenAbstand keine Lücke
Zwischen den Widgets und dem Spaltenrand ist keine Lücke mehr (Pfeile!), zwischen den Widgets schon.

Die weiteren Einstellungsmöglichkeiten heißen wenig aussagekräftig Schmal, Erweitert, Breit und Breiter. Dahinter verbergen sich verschiedene starre Pixelwerte. Genauere Möglichkeiten bietet die letzte Option: Individuell. Damit kann der Spaltenabstand (responsiv!) in %, px, VH und VW angegeben werden.

Individueller Spaltenabstand
In diesem Beispiel wurde der relative Wert 3 VH, also 3 % der Bildschirmhöhe, als Spaltenabstand gewählt.
Harry Martin
Harry hilft
bei der Arbeit mit Elementor - auch wenn es um Kleinigkeiten wie Abstände geht. Frag einfach. Auch einzelne Nachhilfestunden.
Nachhilfe

Die Horizontale Ausrichtung

Bei ganz vielen Widgets (zB. bei Überschriften, Bildern, …) kann man einstellen, ob die Ausrichtung Links, Zentriert der Rechts erfolgen soll. Dabei handelt es sich um Blöcke denen man sagt „sei links” oder „sei rechts”. Man kann aber auch Inline-Elemente ausrichten. In dem Beispiel hier wurden die Bilder in Inline-Elemente umgewandelt. Damit fliessen sie durch die Spalte genauso, wie Buchstaben durch eine Textbox. 

Man kann jedes Widget in ein Inline-Element Umwandeln, und zwar unter 

… > Erweitert > Positionierung > Breite > Inline (auto)

Ab sofort fliesst das Element, oder eben auch mehrere hintereinander.

Die Logik dieser horizontalen Ausrichtung, die eben nur auf Spalten angewandt werden kann, ist genauso wie bei der vertikalen Ausrichtung. Es gibt

  1. Beginn
  2. Center (sic! – wieder Mal die Übersetzung weit hinten)
  3. Ende

Und dann gibt es auch noch

  1. Zwischenraum
  2. Abstand im Umkreis
  3. Gleichmäßiger Abstand

In diesem Beispiel wurde die vertikale Ausrichtung Mitte gewählt, man könnte sie aber auch (siehe oben) anders vertikal ausrichten.

Logische horizontale Ausrichtungen
Man kann einstellen, ob die Inline-Elemente am Beginn, in der Mitte oder am Ende der Spalte ausgerichtet sein sollen.
Verteilte Horizontale Ausrichtung
Die Elemente wurden unterschiedlich horizontal verteilt.

Abstände der Widgets

Zusätzlich zu den Spaltenabständen gibt es in jede Spalte die Möglichkeit, den Widget-Abstand zu verändern. Dieser wird in den Elementor Einstellungen im Bereich Layout für die ganze Website voreingestellt (in px, 20 px ist der default Wert).

 

Widget Abstand Grundwert
Die Voreinstellung der Abstände der Widgets zueinander wird in den Website-Einstellungen getroffen.
Eigene Widgetabstände nach Spalte
In diesem Beispiel wurden in 3 Spalten 3 unterschiedliche Widget-Abstände eingetragen. 0 - 20 - 60 px.

Die Werte können zwar für die unterschiedlichen Responsive Modi angegeben werden, jedoch nur in der Einheit px.

Fazit

Bevor man also im einzelnen Widget mit Margin, Padding oder – noch riskanter – Position Einstellungen hantiert kann man auf der Layout Ebene mit Abschnitten und Spalten experimentieren. Elementor hilft dabei und ist – bis auf die üblichen Übersetzungs-Mankos – auch recht logisch aufgebaut.