Divi Buttons nebeneinander platzieren – 1min Anleitung 2024

Divi Buttons nebeneinander platzieren - deutsche Anleitung
Lukas Fischer

Geschrieben von Lukas Fischer

c

Divi Buttons nebeneinander platzieren ist einfach und geht auch für Anfänger in weniger als 60 Sekunden!

Alles, was man benötigt, um in Divi zwei Buttons nebeneinander zu platzieren, ist eine zusätzliche CSS-Klasse für die Reihe bzw. Spalte, in der sich die Buttons befinden und den entsprechenden CSS-Code für die Klasse, welcher wie folgt lautet:

.buttons-nebeneinander .et_pb_button_module_wrapper {
    display: inline-block;
}

.buttons-nebeneinander {
text-align: center !important;
}

Wie du diesen CSS-Code explizit einsetzt, zeige ich dir in diesem Artikel – natürlich für Anfänger verständlich!

Und für alle, die leichter per Video lernen, habe ich parallel zu diesem Artikel folgendes YouTube Video aufgenommen, welches du dir gerne anschauen kannst:

Hinweis: Mit Aktivierung des Videos wird YouTube im Erweiterten Datenschutzmodus aktiviert. Mit Aktivierung stimmst du den Datenschutzbestimmungen von YouTube zu.

Divi Buttons nebeneinander platzieren – Wichtige Hinweise

Damit du Divi Buttons nebeneinander platzieren kannst, benötigst du zwei Dinge:

  • Zusätzliche CSS-Klasse
  • Zusätzlichen CSS-Code für diese Klasse

Damit der zusätzliche Code später überhaupt aktiv werden kann, musst du zuerst eine neue Klasse deiner Reihe bzw. Spalte hinzufügen, in welcher die Buttons zu finden sind.

Das Ergebnis, was wir anpeilen, wird später so aussehen:

Divi Buttons nebeneinander platzieren - Anleitung
Divi Buttons nebeneinander platzieren – Anleitung

1. Divi Reihe bzw. Spalte mit CSS-Klasse versehen

Damit Divi Buttons nebeneinander platziert werden können, benötigen wir eine CSS-Klasse, um darüber zusätzlichen Code mit unseren Buttons zu verknüpfen.

Hinweis: Solltest du nur eine durchgängige Spalte verwenden, dann füge die Klasse in den Einstellungen der Reihe ein. Solltest du mehrere Spalten verwenden, dann füge die Klasse in den Einstellungen der Spalte ein, in welcher sich deine Buttons befinden.

Divi Buttons mit CSS Klasse versehen
Divi Buttons mit CSS Klasse versehen

Um in Divi eine Klasse hinzuzufügen – und dabei ist es egal ob es sich um eine Spalte oder eine Reihe handelt -, öffne die Einstellungen des entsprechenden Elementes, navigiere in den Erweitert-Tab und füge bei CSS-ID & Klassen folgende CSS-Klasse ein:

buttons-nebeneinander

Danach klickst du auf Speichern. Bei dir sollte jetzt noch nichts passiert sein.

Das liegt daran, dass wir jetzt noch den CSS-Code für diese Klassen hinzufügen müssen.

2. CSS Code hinzufügen, um Divi Buttons nebeneinander zu platzieren

Um zwei (oder mehr) Divi Buttons nebeneinander zu platzieren, benötigst du folgenden CSS-Code:

.buttons-nebeneinander .et_pb_button_module_wrapper {
    display: inline-block;
}

.buttons-nebeneinander {
text-align: center !important; /* sorgt dafür, dass die Buttons zentriert ausgerichtet werden! Wenn du die Buttons linksbündig möchtest, dann ersetze center durch left */
}

Diesen Code fügst du nun in die CSS-Datei deines Child-Themes ein.

Falls du kein Child-Theme verwendest, dann navigiere in WordPress zu Divi und klicke auf Theme Optionen. Scrolle hier nach ganz unten bis zum Punkt Eigene CSS und füge den Code dort ein.

Falls du ein Cache-System verwendest, leere jetzt einmal den Cache und teste, ob deine Änderungen übernommen wurden.

Abstände zwischen zwei nebeneinander platzierten Buttons anpassen

Was man jetzt auf jeden Fall abschließend noch machen sollte, ist es, den Abstand zwischen den Buttons zu verändern.

Denn standardmäßig kleben diese jetzt direkt nebeneinander.

Dazu kannst du beispielsweise einfach in die Einstellungen des ersten Buttons hineingehen und unter Design, Zwischenraum, “margin-right” (oder auf deutsch: Außenabstand rechts), einen Abstand von 20px eingeben.

Theoretisch hättest du dies auch mit dem anderen Button machen können, dann hättest du jedoch anstatt margin-right den Befehl margin-left bzw. auf deutsch Außenabstand links nehmen müssen.

Falls du auf der Suche nach weiteren Anpassungen für Divi bzw. Divi Buttons bist, dann lies gerne auch diese Artikel:

Wenn es nicht funktioniert

Wenn es nicht funktioniert, hier noch 3 Tipps:

  • Stelle sicher, dass deine Buttons in Divi die Klasse bekommen haben OHNE den vorangestellten Punkt (s. Screenshot hier)
  • Zusätzlicher CSS-Code ist über dein Child Theme oder die Divi Theme Optionen hinzugefügt UND gespeichert
  • Alle Änderungen speichern und danach Cache leeren

Falls es danach immer noch nicht klappen sollte, hast du womöglich einen Konflikt mit anderem Code auf deiner Seite. Dann schau gerne in diesen Artikel, bei welchem ich gängige Problemlösungen für Divi Fehler erläutert habe.

Ansonsten, falls du meine persönliche Hilfe benötigst, dann schau dir gerne auch meine WordPress Hilfe an oder schreib deine Frage in die Kommentare.

Mit * gekennzeichnete Links sind Empfehlungslinks. Wenn du über diesen Link einen Kauf tätigst, erhalte ich ein bisschen Geld für meinen nächsten Kaffee ☕

Für dich verändert sich der Preis dadurch natürlich nicht und du unterstützt damit kostenlos meinen Blog/YouTube Kanal. Selbstverständlich empfehle ich nur Produkte, die ich selbst nutze und getestet habe.

Lukas Fischer

Hey, ich bin Lukas Fischer und auf meinem Blog schreibe ich über WordPress und das Divi Theme! Vielen Dank, dass du da bist!

14. Mai 2024

YouTube Kanal

Auf meinem YouTube Kanal findest du zu jedem meiner Artikel das entsprechende Video sowie zusätzliche Inhalte.

Borlabs Cookie Gutschein Code LUKASFISCHER

Spare 5% auf Borlabs Cookie – Das beste Cookie Consent Tool auf dem Markt

Top 11 Divi Plugins - E-Book von Lukas Fischer
Lukas Fischer Newsletter Anmeldung

Bleib in Kontakt und trage dich in meinen Newsletter ein:

Abonniere gerne meinen 0€ Newsletter und erhalte Tipps zu WordPress, Divi, Webdesign und der DSGVO.

0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert