Lesefortschritt:

    Spaltenzahl des Divi-Galerie-Moduls ändern

    29. Januar 2025 | CSS-Stylesheet, Divi-Theme

    Trick # 425 | Dieser Beitrag beinhaltet 347 Wörter. – Geschätzte Lesezeit: ca. 2 Minuten.

    Das Galerie-Modul des Divi-Themes zeigt in der Gitter- (oder Grid-)Ansicht eine fixe Anzahl Bilder nebeneinander an, die sich in den Einstellungen nicht beeinflussen lässt. Die Zahl der Spalten lässt sich dennoch beliebig ändern – mehr dazu im heutigen Trick.

    Um das Divi-Galerie-Modul mit mehr (oder auch weniger) Spalten anzuzeigen müssen Sie einige wenige Vorbereitungen treffen:

    • An gewünschter Stelle ein Galerie-Modul einfügen und mit Bildern bestücken
    • Das Grid- oder Gitter-Layout wählen (im Tab Design/Layout)
    • Titel und Caption ausschalten (im Tab Inhalt/Elemente)
    • Paginierung ausschalten (im Tab Inhalt/Elemente)
    • Zahl der Bilder von 4 auf 999 erhöhen (im Tab Inhalt/Bilder)

    Nun folgt ein CSS-Block, den Sie im Tab «Erweitert» unter «Benutzerdefiniertes CSS» ins Feld «Galerieobjekt» einfügen müssen:

    margin: 0 !important;
    width: 20% !important;
    clear: none !important;

    Mit der Prozent-Anweisung bei in Zeile 2definieren Sie die Anzahl der Spalten – in unserem Fall sind es bei 20% fünf Spalten. Für sechs Spalten wäre der Wert 16.66%, für drei 33.33%, etc.

    Unsere 5-Spalten-Galerie zeigt sich nun so:

    Et voilà.

    Werbung

    Im CSS-Code rechnen: Mit der calc()-Eigenschaft

    Vor allem im Responsive-Webdesign stellt uns der CSS-Code ein hilfreiches Utensil zur Seite: Die calc()-Eigenschaft. Werte müssen dabei nicht mehr in Pixel, em oder anderen Einheiten angegeben werden – stattdessen können wir den Code ganz ...
    Keine Inhalte gefunden.

    Werbung

     

    Pin It on Pinterest

    Share This