Trick # 499 | Dieser Beitrag beinhaltet 615 Wörter. – Geschätzte Lesezeit: ca. 4 Minuten.
Das Portfolio-Modul des Divi-Themes lässt einige Einstellungen zu; jedoch können Sie die Zahl der dargestellten Spalten nicht fix festlegen – es sei denn, Sie setzen CSS ein. Hier erklären wir Ihnen wie’s geht.
Standardmässig wird das Divi-Portfolio-Modul in der Grid- oder Gitter-Ansicht 4spaltig dargestellt:
Wenn Sie die Spaltenzahl stattdessen lieber auf deren 3 oder 5 festlegen möchten, können Sie aus einem der beiden nachfolgenden Codes auswählen. Kopieren Sie den gewünschten Code und fügen Sie ihn dem CSS-Stylesheet Ihrer Divi-Website hinzu – im Backend unter Design/Customizer/Zusätzliches CSS:
3spaltiges Portfolio
@media only screen and ( min-width: 768px ) {
.three-column-grid .et_pb_grid_item {
width: 28.333% !important;
margin: 0 7.5% 7.5% 0 !important;
}
.three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0 !important;
}
.three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
.three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset !important;
}
}5spaltiges Portfolio
@media only screen and ( min-width: 981px ) {
.five-column-grid .et_pb_grid_item {
width: 17.6% !important;
margin: 0 3% 3% 0 !important;
}
.five-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: unset !important;
}
.five-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset !important;
}
.five-column-grid .et_pb_grid_item:nth-child(5n) {
margin-right: 0 !important;
}
.five-column-grid .et_pb_grid_item:nth-child(5n+1) {
clear: left !important;
}
}Dem Portfolio-Modul selber müssen Sie noch eine CSS-Klasse zuweisen:
- «three-column-grid» für ein 3spaltiges Portfolio
- «five-column-grid» für ein 5spaltiges Portfolio
Die zutreffende Klasse geben Sie im Tab «Erweitert» unter «CSS-ID und Klassen» im Textfeld «CSS-Klasse» ein.
Das Portfolio wird damit entweder 3spaltig …
… oder eben 5spaltig dargestellt.
Werbung
Werbung
