TEXT HORIZONTALLY CENTERED (in Menu Row)

To make sure all column content is centered vertically, we’ll add three lines of CSS code to each column’s main element.

01
02
03

CSS:
display: flex;
flex-direction: column;
justify-content: center;

SPALTEN IM MENU BEIBEHALTEN

In Row CSS Mainelement eingeben.

CSS:
Display: flex;

oder wenn nicht klappt:

CSS für Anzahl Kolonnen

1) Give Row a Class  – z.B. „four-columns“

2) das wären dann im CSS 100/4 = 25%

3) CSS Snippet erfassen bei Divi/Theme Options

/*Icon Kolonnen beibehalten*/

.four-columns .et_pb_column {

    width:25%!important;

}

Siehe Video von Josh – falls Kolonnenanpassungen für Devices notwendig:

VERTICALLY CENTERED – Variante 1

CSS:
Align-items: center;

( in row settings: gutter width = 1 / same height)

VERTICALLY CENTERED – Variante 1

Wenn z.B. 3 Tex-Module nebeneinander sind mit unterschiedlich langen Texten:

CSS für jedes einzelne Text-Modul:

display; flex;
flex-wrap: wrap;
align-content: center;

Siehe auch Video:

Using Divi’s New Height & Width Options to Create Responsive Design

MEHR SPALTEN (> 6) 

How to Add More Columns to Your Divi Builder Posts or Pages

CSS Snippet für mehr Spalten – TSC Menu oben auf 8 Spalten erweitert:

Desktop: —> CSS beim Theme Options eingegeben

.ten-columns .et_pb_module {width: 10%; float: left;}

.nine-columns .et_pb_module {width: 11.11%; float: left;}

.eight-columns .et_pb_module {width: 12.5%; float: left;}

.seven-columns .et_pb_module {width: 14.28%; float: left;}

.six-columns .et_pb_module {width: 16.66%; float: left;}

.five-columns .et_pb_module {width: 20%; float: left;}

CSS, dass alles auf einer Linie bleibt in Reihe mit mehreren Spalten.

(Normalerweise Probleme bei Devices)  CSS direkt in Row Module – main element eingeben:
display: flex;

Kreiertes Menu fixieren when scrolling:

CSS für Section Module:
position: fixed;
top: 0;
left: 0;
right: 9;

Dass ein Menu über allem ist, was auf der Webseite ist:

Module – Visibility – Z Index auf maximum setzen

Alle Elemente nebeneinander:

And complete the module settings by assigning a custom display property to the module’s CSS in the advanced tab. This, in combination with the adjusted width, will allow several modules to show up next to each other. (4 Text-Tabs z.B. jedes Element auf 22% breite setzen)
01
display: inline-block;