Divi | vertical align Text und Bild

Schritt 1: CSS-Code einfügen

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

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

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

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

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

Schritt 5: weiteren CSS-Code einfügen

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:

Weitere Divi-Tipps findest Du hier!