Keine Zeit zum Lesen? Schau dir hier unser YouTube-Video dazu an:
1. Viele wollen zwei Buttons nebeneinander, aber Elementor macht’s nicht automatisch
Du kennst das vielleicht: Du möchtest auf deiner Website zwei Buttons einfügen, einen für den direkten Call to Action wie „Jetzt kaufen“ und einen für die, die noch etwas mehr Infos brauchen, zum Beispiel „Mehr erfahren“. Also ziehst du zwei Button-Widgets in deinen Abschnitt … und Elementor platziert sie – natürlich – untereinander.
Das sieht weder besonders elegant aus noch entspricht es dem, was du eigentlich erreichen wolltest. Gerade für Einsteiger kann das ziemlich frustrierend sein. Denn auf den ersten Blick ist nicht erkennbar, wie man das Layout so steuert, dass die Buttons nebeneinander erscheinen, sauber, mit Abstand, und idealerweise auch noch responsive.
In diesem Artikel zeigen wir dir Schritt für Schritt, wie du genau das umsetzt: mithilfe des modernen Container-Systems in Elementor. Und damit du auch weißt, warum sich dieser kleine Aufwand lohnt, schauen wir uns im nächsten Abschnitt an, warum zwei Buttons nebeneinander oft die bessere Wahl sind.
2. Warum zwei Buttons nebeneinander sinnvoll sind
Zwei nebeneinander platzierte Buttons bieten deinen Besuchern eine klare, aber dennoch flexible Handlungsaufforderung. Das hat gleich mehrere Vorteile: Du kannst einen primären Call to Action wie „Jetzt kaufen“ optisch hervorheben und gleichzeitig eine alternative, niedrigschwellige Option wie „Mehr erfahren“ anbieten.
Diese Kombination wirkt weniger aufdringlich, fördert aber trotzdem gezielte Klicks. Vor allem bei Nutzern, die noch unentschlossen sind. Die psychologische Wirkung: Man bekommt eine Wahl, fühlt sich nicht gedrängt und trifft die Entscheidung trotzdem schneller.
Typische Anwendungsbeispiele:
- „Kostenlos testen“ + „Alle Funktionen ansehen“
- „Termin vereinbaren“ + „Mehr Infos“
- „Ich bin neu hier“ + „Ich habe bereits ein Konto“
Kurz gesagt: Zwei Buttons nebeneinander sorgen für bessere Nutzerführung und können deine Conversion-Rate spürbar steigern.
3. Das richtige Layout: Container statt Spalten
Elementor setzt seit einiger Zeit auf das sogenannte Flexbox-Container-System. Im Vergleich zum alten Spalten-Layout bietet es deutlich mehr Flexibilität. Vor allem, wenn es um die präzise Ausrichtung von Elementen wie Buttons geht.
Wenn du zwei Buttons nebeneinander platzieren willst, gehst du am besten so vor:
1. Neuen Container anlegen, z. B. direkt unter deiner Überschrift.
2. Im Tab Layout stellst du die Richtung (Direction) auf horizontal (Row). Das sorgt dafür, dass Inhalte nebeneinander statt untereinander angezeigt werden.
3. Ziehe nun zwei Button-Widgets direkt in diesen Container. Elementor ordnet sie sofort nebeneinander an.
4. Um Luft zwischen den Buttons zu schaffen, stellst du einen Gap-Wert ein, z. B. 20 Pixel. Alternativ kannst du auch mit Padding oder Margin arbeiten.
Tipp: Wenn du mehr Kontrolle willst, kannst du jeden Button in einen eigenen inneren Container legen. Das ist besonders nützlich, wenn sich die Buttons stark unterscheiden sollen.
4. Button-Design: primär und sekundär unterscheiden
Zwei Buttons nebeneinander funktionieren nur dann gut, wenn sie auch visuell klar voneinander abgegrenzt sind. Dabei sollte immer erkennbar sein, welcher Button der Haupt-Call-to-Action ist und welcher eine alternative Option bietet.
Typischer Aufbau:
- Primärer Button: Auffällige Farbe (z. B. Türkis oder Blau), fester Hintergrund, klare Schriftfarbe
- Sekundärer Button: Dezente Optik – z. B. weiß mit Rahmen, leicht grauer Text, kein starker Hover-Effekt
Achte außerdem auf:
- einheitliche Größe, Höhe und Schriftart
- ausreichend Innenabstand (Padding) für bessere Klickbarkeit
- ein klares Labeling, z. B. „Jetzt kaufen“ statt „Weiter“
So bleibt die Nutzerführung klar und die Gestaltung wirkt trotz doppelter Buttons aufgeräumt und professionell.
5. Responsives Verhalten prüfen und anpassen
Was auf dem Desktop gut aussieht, kann auf dem Smartphone schnell problematisch werden. Vor allem, wenn zwei Buttons nebeneinander plötzlich zu klein oder unleserlich wirken.
Deshalb ist ein kurzer Check im Responsive-Modus von Elementor Pflicht:
- Klicke oben in der Mitte auf das Smartphone-Symbol, um die mobile Ansicht zu wählen.
- Falls die Buttons nebeneinander zu eng erscheinen, stelle im Container-Layout die Richtung auf „Column“. Alternativ kannst du auch einen “Umbruch” einstellen. So werden sie automatisch untereinander angeordnet.
- Überprüfe Abstände: Ggf. oben/unten etwas Margin ergänzen, damit die Buttons nicht direkt aufeinander sitzen.
- Optional kannst du auch für Mobilgeräte eine alternative Button-Anordnung gestalten, z. B. mit anderen Texten oder geänderter Reihenfolge.
Mit wenigen Klicks stellst du sicher, dass deine Buttons auf allen Geräten funktionieren und nicht nur am großen Bildschirm gut aussehen.
6. Bonus-Tipp: Buttons sauber ausrichten mit „Align Items“
Wenn du möchtest, dass beide Buttons wirklich exakt auf einer Linie stehen, zum Beispiel bei unterschiedlicher Textlänge oder vertikalem Versatz, lohnt sich ein Blick auf die Ausrichtungseinstellungen des Containers.
Gehe im Container zu „Align Items“ und stelle sicher, dass auf „Center“ gesetzt ist. So bleiben deine Buttons schön ausgerichtet, auch wenn du später Text oder Größe änderst.
Zusätzlich kannst du mit „Justify Content“ steuern, wie weit die Buttons auseinanderliegen:
- „Beginn“: Beide links
- „Zentriert“: Beide mittig
- „Ende“: Beide rechts
- „Zwischenraum“: Einer links, einer rechts, mit maximalem Abstand
- „Abstand im Umkreis“ oder „gleichmäßiger Abstand“: gleichmäßige Verteilung
So wirkt dein Layout nicht nur funktional, sondern auch visuell stimmig.
Fazit
Zwei Buttons nebeneinander sehen nicht nur besser aus, sie führen Besucher gezielter zur Aktion. Mit dem Container-System in Elementor ist das schnell und sauber umsetzbar. Sobald man weiß, wie. Ein bisschen Struktur, die richtige Ausrichtung… und deine Hero-Section wirkt sofort professioneller. Jetzt liegt’s an dir: ausprobieren, anpassen, live gehen, tracken, optimieren.