Inhalte vertikal in Spalten zentrieren oder unten ausrichten mit DIVI

Divi Code Snippets & Tutorials | 0 Kommentare

Notwendige Einstellungen im DIVI Builder

  1. Öffnet die Einstellungen der Zeile, die ihr bearbeiten möchtet
  2. Im Design Tab den Schalter „Zeilenhöhe anpassen“ aktivieren
  3. Im Erweitert Tab fügt ihr bei bei den gewünschten Spalten1-x CSS-Klasse die gewünschte Klasse ein (dyw-vertical-align-center oder dyw-vertical-align-bottom)
  4. Fügt den folgenden CSS Code eurem Custom CSS Code hinzu.
    /* Vertikal zentrieren*/
    .dyw-vertical-align-center {  
      display: flex;  
      flex-direction: column;  
      justify-content: center; 
    }
    
    /* Vertikal unten ausrichten */
    .dyw-vertical-align-bottom {  
      display: flex;  
      flex-direction: column;  
      justify-content: flex-end; 
    }
     

Demo Standard Divi Zeile

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,

Demo Inhalte Mittig

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,

Demo Inhalte unten ausgerichtet

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a,

Du hast noch kein DIVI Theme? Dann hol dir jetzt das Theme mit 10 - 20% Rabatt!

Was sind eure Erfahrungen und Fragen? Schreibt uns!

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht.

Unsere Divi Plugin Empfehlungen - macht euch das Leben leichter!

~|plug~|font-awesome~|solid

DIVI Header nach Wunsch mit MHMM

~|plug~|font-awesome~|solid

DIVI anpassen bis es nicht mehr geht mit DIVI Hacks

~|plug~|font-awesome~|solid

Blog Darstellung ganz anders mit Divi Blog Extras