vorher nacher

Schritt 1: CSS-Code einfügen

divi1
  1. Klick auf das lila Einstellungssymbol (Zahnrad)
  2. Klick auf den Reiter „Advanced“
  3. CSS einfügen:

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

Schritt 2: Die Höhe der beiden Module ausgleichen

divi2
  1. „Row Settings“ auswählen
  2. Tab „Design“
  3. Unter „Sizing“ – Die Höhe ausgleichen

Schritt 3: CSS-Klasse dem Bild-Module hinzufügen

divi3

  1. „Column Settings“ auswählen (für das Bild)
  2. Reiter „Advanced“ auswählen
  3. Unter „CSS-Class“ die folgende Klasse eingeben: vertical-align

Schritt 4: CSS-Klasse dem Text-Module hinzufügen

divi3
  1. „Column Settings“ auswählen (für das Textmodul)
  2. Reiter „Advanced“ auswählen
  3. Unter „CSS-Class“ die folgende Klasse eingeben: vertical-align

Schritt 2-4 für jede Zeile (Row, grüner Bereich) wiederholen.

Part 2: Divi Mobile Verschiebung

vorher nacher mobil
Damit die Reihenfolge am Handy und Tablett nicht Bild, Text, Text, Bild … solltest du

Schritt 5: weiteren CSS-Code einfügen

divi5
  1. Klick auf das lila Einstellungssymbol (Zahnrad)
  2. Reiter „Advanced“ auswählen
  3. CSS einfügen:

@media (max-width:980px) {.center-text-mobile,.center-text-mobile .et_pb_text_inner,.center-text-mobile .et_pb_social_media_follow {text-align: center!important;}}@media (max-width:980px) {.reverse-columns-mobile {display: flex;flex-direction: column-reverse;}}@media only screen and (max-width: 479px) {.three-columns .et_pb_column {width: 50%!important;}}

Schritt 6:

divi6

Weitere Divi-Tipps findest Du hier!