Lesefortschritt:

    Seiten mit mehr als 6 Spalten im Divi-Builder bauen

    12. Juni 2024 | CSS-Stylesheet, Divi-Theme

    Trick # 352 | Dieser Beitrag beinhaltet 1159 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.

    Wieviele Spalten benötigen Sie auf Ihrer Divi-Website? 4, 5 oder 6? Der Builder bietet von Haus aus etwa alle Spalten-Variationen, welche das Herz begehrt. Doch bei 6 ist Ende Gelände. Ausser Sie greifen zu unserem heutigen Trick. Dann können es gerne auch 7, 8 oder 9 Spalten – allenfalls sogar deren 12 sein.

    Im Divi-Theme können Sie standardmässig 1- bis maximal 6-spaltige Zeilen anlegen. Hier ein 6-Spalten-Design:

    1

    2

    3

    4

    5

    6

    Doch da geht noch mehr. 7-, 8-, 9-, 10-, 11-  oder 12-spaltige Designs lassen sich einrichten. Dafür benötigen Sie einen kleinen Block CSS-Code für das CSS-Stylesheet Ihrer Website. Sie können diesen unter Design/Customizer/Zusätzliches CSS einfügen:

    .twelve-columns .et_pb_module {width: 8.33%; float: left;}
    .eleven-columns .et_pb_module {width: 9.09%; float: left;}
    .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;}

    Nun fügen Sie eine einspaltige Zeile hinzu. Bearbeiten Sie die Zeile, wechseln Sie auf den Tab «Erweitert», dann auf «CSS-ID und Klassen» und fügen Sie den gewünschten Klassennamen aus dem CSS-Code ins Textfeld «CSS-Klasse» ein. Für ein 10-spaltiges Design etwa «ten-columns», für ein achtspaltiges «eight-columns».

    Nun fügen Sie die passende Anzahl Module untereinenader in die Divi-Zeile ein. Also 8 Module bei einem 8-Spalten-Design, 9 für 9-spaltige Ansichten usw.

    Voilà das war’s auch schon: Wir haben hier ein Muster für eine 10-Spalten-Ansicht parat:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    Recht einfach. Oder?

    Werbung

    Mobilmenü im Divi-Footer deaktivieren

    Standardmässig macht das Divi-Theme aus jedem Menü auch eine mobile Variante für Tablets und Mobiltelefone. Das ist meist patent - oft braucht man auf diesen Geräten aber kein Footer-Menu. Wenn Ihnen das Standardmenu im Header auf Mobilgeräten ...
    Keine Inhalte gefunden.

    Werbung

     

    Pin It on Pinterest

    Share This
    Überblick über den Datenschutz

    Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.