Responsive Elementor Flexbox Container
Umsetzung des Layouts mit Elementor Flexboxen.
Im Hintergrund zu sehen ist ein Layout Grid bestehend aus 12 Spalten zu je 75 px mit 20 px Abstand zueinander.
1
2
3
4
5
6
7
8
9
10
11
12
Globale Einstellungen
Layout:
- Breite: 1120 px
- Innenabstand 0 px
- Abstand zwischen Elementen: 20 px
Breakpoints:
- Mobile 767 px
- Tablet 1024 px
- Laptop: 1280 px
Sektion Container Einstellungen
Layout:
- Stil: „Boxed“
- Ausrichtung: „Horizontal“ ➡️
- Umbruch: Ja, Wrap ↩️
- Breite:
- 1120 px
- 80%
- 80%
- 90%
- 1120 px
- 80%
- 80%
- 90%
Container mit gleicher Breite
Innere Container Einstellungen
Breite in % angeben, damit der Inhalt anständig mit skaliert. Die entsprechende jeweilige Containerbreite am Desktop in Pixel ist mit angegeben.
Erweitert:
- Size: „Grow“
Layout:
- Breite:
6 Container
- 13,5% (entspricht 170 px)
- 25%
- 35%
1
2
3
4
5
6
7
8
9
10
11
5 Container
- 16.5% (entspricht 208 px)
- 25%
- 35%
1
2
3
4
5
6
7
8
9
4 Container
- 20% (entspricht 265 px)
- 35%
- 100%
1
2
3
4
5
6
7
3 Container
- 25% (entspricht 360 px)
- 35%
- 100%
1
2
3
4
5
2 Container
- 35% (entspricht 550 px)
- 100%
- 100%
1
2
3
Container mit unterschiedlicher Breite
Dies ist eine funktionierende Lösung für 12-Säulen-Designs (im Raster 1140/1120), bei denen die Container unterschiedliche Breiten haben. Auch auf Tablet und Handy habe ich alles auf 100% gestellt, aber Sie können dies natürlich nach Ihrem Design ändern.
Sollten die Container nicht dieselbe Breite haben, weichen die Prozentangaben ab. Ebenso muss der anschließende Container auf „grow“ gesetzt werden und min. 1 px Breite haben, da sonst „grow“ nicht angewendet wird. Abstand zwischen den Containern ist weiterhin immer 20 px.
Die Angabe in Pixeln entspricht der Containergröße am Desktop, würde man mit festen Breiten in Pixel arbeiten.