Seite wählen

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 Mobile Verschiebung

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

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: