Ziel
In diesem Tutorial wollen wir mehrere Buttons nebeneinander darstellen. Dabei werden wir die Buttons alle im Pagebuilder untereinander anlegen und dann per CSS die Buttons in eine Reihe verschieben.
CSS-Klasse erstellen
Im ersten Schritt erstellen wir eine CSS-Klasse für unseren neuen Button. Der Name ist beliebig, sollte aber zusammengeschrieben sein und keine Sonderzeichen oder Umlaute enthalten. Ich nenne meine neue Klasse „button_nebeneinander“. Füge folgenden Code der Datei style.css hinzu:
.button_nebeneinander .et_pb_button_module_wrapper {
display: inline-block;
margin: 0 10px;
}
.button_nebeneinander {
text-align: center !important;
}
CSS-Klasse dem Button zuweisen
Fast geschafft. Jetzt müssen wir die neue CSS-Klasse nur noch unserem Button zuweisen. Dazu fügen wir die Klasse unserer ZEILE unter ERWEITERT > CSS-KLASSE hinzu.
Tipp
Im Beispiel habe ich die Buttons insgesamt mittig ausgerichtet: text-align: center !important; Natürlich könnt ihr die Buttons auch rechts (text-align: right !important;) oder links (text-align: left !important;) ausrichten.
Viel Spaß!
