Wie kann ich zwei Button Module nebeneinander ausrichten?
Standardmäßig nehmen die Module in Divi immer die gesamte Breite der Spalte einer Zeile ein. Somit werden bspw. zwei Button-Module innerhalb einer Spalte immer untereinander dargestellt. Mit einem einfachen CSS-Trick kannst du zwei oder mehrere Buttons nebeneinander platzieren.
Standardmäßig werden die Buttons in der Spalte 2 untereinander dargestellt.
Mit einem einfachen CSS-Trick lassen sich die Buttons nebeneinander platzieren.
Und so geht's:
Als erstes fügen wir einen CSS-Code hinzu. Kopiere dazu den unten stehenden Code und gehe in das Backend deiner Spreadmind Plattform zu "Design" > "Theme Optionen" > "Allgemein" ans Ende der Seite zu "Eigenes CSS" und füge diesen dort ein:
/* Button-Module nebeneinander */
.inline-buttons .et_pb_button_module_wrapper { display: inline-block; margin: 0 10px; }
/* Ausrichtung der Button-Module – Linksbündig */
.inline-buttons { text-align: left !important; }
/* Ausrichtung der Button-Module – Zentriert */
.inline-buttons.align-center { text-align: center !important; }
/* Ausrichtung der Button-Module – Rechtsbündig */
.inline-buttons.align-right { text-align: right !important; }
Der erste Code-Schnipsel bewirkt, dass später die Button-Module nebeneinander dargestellt werden und jeweils links und rechts einen Abstand von 10px haben. Die darunter folgenden Code-Schnipsel bestimmen die Ausrichtung der Buttons. Standardmäßig werden die Buttons immer nebeneinander linksbündig dargestellt.
Im nächsten Schritt weisen wir die CSS-Klasse inline-buttons der Spalte zu, in welcher die beiden Button-Module hinzugefügt sind. Öffne dazu die Einstellungen der Zeile (grün) über das Zahnrad-Symbol.
Bei einer 1-spaltigen Zeile klickst du wiederum bei "Spalte" auf das Zahnrad-Icon. Bei einer mehrspaltigen Zeile (in unserem Beispiel ist die Zeile 2-spaltig) musst du die Spalte 2 auswählen, bzw. jene, in welcher sich die Button-Module befinden:
Zeile 1-spaltig mit zwei Buttons.
Zeile 2-spaltig mit zwei Buttons in der Spalte 2.
Gehe dann zum Tab "Erweitert" und füge bei der Option "CSS-ID & Klassen" > "CSS Klasse" inline-buttons ein:
Speicher die Modul-Einstellungen sowie auch die Seite selbst (im Backend über die Optionen-Box "Veröffentlichen" > "Aktualisieren" und im visuellen Divi Builder rechts über den Button "Speichern").
Es ist gut möglich, dass diese Anpassung nicht sofort im aktivierten visuellen Builder erkennbar ist. Deaktivierst du diesen, werden die Buttons nun nebeneinander linksbündig und mit einem Abstand von 10px links und rechts dargestellt:
Ausrichtung der Buttons
Du kannst nun über eine weitere CSS-Klasse zusätzlich die Ausrichtung der beiden Buttons bestimmen, sodass diese bspw. zentriert oder sogar rechtsbündig angezeigt werden.
Öffne dazu wie oben beschrieben die Spalten-Einstellung und füge unter "Erweitert" > "CSS-ID & Klassen" zusätzlich die CSS-Klasse align-center für die zentrierte oder align-right für die rechtsbündige Ausrichtung ein:
align-center für die zentrierte Ausrichtung – achte auf die richtige Schreibweise: Zwischen inline-buttons und align-center muss ein Leerzeichen stehen.
Ergebnis:
Zeile 1 Spalte 2 mit CSS-Klasse align-right für rechtsbündige Ausrichtung. Darunter Zeile 2 (1-spaltig) mit align-center für eine zentrierte Ausrichtung der Buttons.
Zum Schluss noch ein kleiner Trick:
Arbeitest du im visuellen Builder, kann es nun ein wenig mühsam sein, die Modul-Einstellungen der Buttons zu öffnen, da diese nun ja nebeneinander dargestellt werden.
Wechsle einfach in die "Drahtgitter-Ansicht", um den Aufbau der Sektionen, Zeilen und Module sozusagen als Baukasten-Elemente zu sehen. Die Buttons werden in dieser Ansicht untereinander dargestellt. Du kannst jetzt aber problemlos die Einstellungen der Module öffnen:
Wechsle danach einfach wieder in die visuelle Ansicht zurück:
