Was ist vertical-alignment und wann brauche ich das?

Vertical-alignment bedeutet das vertikale ausrichten von Inhalt. In Divi haben wir leider keine eingebaute Funktion, die das durch einfaches Klicken ausführt. Darum müssen wir mit ein wenig CSS-Code und einigen Anpassungen nachhelfen. Aber keine Angst. Hast du das einmal gemacht, wirst du es immer und immer wieder brauchen.

Hier zeige ich dir, anhand eines einfachen Beispiels, was diese Ausrichtung bewirkt.

Inhalt nicht ausgerichtet

Inhalt ausgerichtet

Wie du siehst, ist die ausgerichtete Variante viel schöner. Klar könntest du das auch mit Abständen (Margin und Padding) lösen. Aber diese passen sich nicht automatisch an, sobald die du Seite mit anderen Bildschirmgrössen anschaust! Oder wenn du deine Browser-Fenster vergrösserst oder verkleinerst!

Ich zeige dir nun wie du deinen Inhalt vertikal ausrichten kannst.

1. Öffne das WordPress-Menu «Divi» >> «Divi-Theme Options».

2. Scrolle auf dieser Seite bis ganz nach unten zum Bereich «Eigene CSS». Füge in das Feld rechts folgenden CSS-Code ein und speichere diese Änderung mit «Änderung speichern».

.vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
} 

3. Navigiere zu deiner Seite, die du ändern möchtest und aktiviere den Visual Builder.

4. Erstelle eine neue Zeile mit zwei Spalten. (Die Spaltengrösse spielt keine Rolle.)

5. Füge nun deinen Inhalt in die zwei neuen Spalten ein. Bei mir ist das ein Bild (in der linken Spalte) und einen Text (in der rechten Spalte). Das Ziel ist es, den Text anhand dem Bild, mittig zu zentrieren. Öffne danach die Zeileneinstellungen, indem du oben links auf das Zahnrad klickst.

6. Klicke nun auf den Reiter „Design“, in dem neu geöffneten Fenster.

7. Falls der Bereich „Grösse einstellen“ nicht bereits geöffnet ist, klickst du auf den Titel „Grösse einstellen“. Danach klickst du auf den Regler unterhalb des Titels „Spaltenhöhen ausgleichen“. Dies bedeutet, dass alle Spalten in dieser Zeile,die gleiche Höhe wie die höchste Spalte haben. Klicke danach auf den Reiter „Inhalt“.

8. Wähle nun das Zahnrad der Spalte aus, dessen Inhalt (!) du vertikal ausrichten möchtest. In unserem Beispiel ist das die rechte Spalte. Also ist das in der Auswahl unten die zweite (!) Spalte.

9. Öffne nun den Reiter „Erweitert“. (8-ung! jetzt bist du in den „Spalte Einstellungen“)

10. Falls der Bereich „CSS-ID & Klassen“ noch nicht geöffnet ist klicke auf den Titel „CSS-ID & Klassen“. Danach gibst du den Text „vertical-align“ ein. Du solltest nun bereits sehen das sich der Text in der rechten Spalte vertikal ausgerichtet hat. Speichere diese Einstellungen nun indem du zwei Mal auf die grüne Fläche untern rechts drückst. (Einmal um die „Spalte Einstellungen“ zu speicher und einmal um die „Zeile Einstellungen“ zu speichern.)

11. Gratulation! Der Inhalt in der rechten Spalte ist nun vertikal ausgerichtet. (Vergiss nicht deine Seite nun noch zu speichern!)

Preise für Webseiten

Die Frage: «Was kostet eine Webseite», kann erst dann beantwortet werden, wenn der Umfang und damit der Aufwand geklärt ist. Lese hier nach, was das genau bedeutet.

Wordpress Logo

Servicepläne

Deine Investition schützt du durch Pflege und Sicherheit. Damit du aber mehr Zeit für dein Unternehmen hast, nehme ich dir diese Aufgaben gerne ab. Lese hier nach, was ich dir bieten kann.

Notebook-Arbeitsplatz mit Text

SEO-Deinstleistungen

SEO bedeutet Content Marketing. Und Content Marketing erreicht man mit Zeit oder Geld. Hier findest du alle Angaben, wie ich dich bei deinem SEO-Ziel unterstützen kann.

Ähnlich Artikel

Wie platziere ich zwei Knöpfe nebeneinander

Der Page-Builder von Divi kann leider nicht alles. Teilweise fehlen gewisse Funktionen, die wir gerne hätten. Hier gehört auch dazu wie man zwei Knöpfe nebeneinander darstellen kann. Klar, man könnte zwei Spalten nebeneinandersetzen und je einen Knopf einsetzen. Aber das ist meistens nicht das, was wir wollen. Daher zeige ich dir hier, ganz kurz und einfach, was du machen musst.