Buttons (oder andere Module) gleichmäßig am unteren Spaltenrand ausrichten
Wir haben eine 3-spaltige Zeile, die jeweils mit einem Text- und Button-Modul aufgebaut ist. Die Inhalte der Texte sind unterschiedlich lang und somit schweben die Buttons in den Spalten auf unterschiedlicher Höhe:
Bild oben: Hier haben wir der Zeile selbst einen hellgrauen Hintergrund vergeben und für jede Spalte eine eigene Farbe, damit wir unsere spätere Umsetzung besser nachvollziehen können.
Ziel: Buttons auf gleicher Höhe ausrichten
Wir möchten aber, dass die Buttons alle gleichmäßig am unteren Spaltenrand ausgerichtet sind und somit sich schön auf einer Höhe befinden:
In dieser Anleitung erfährst du, wie du ganz ohne Codes mit ein paar Divi Zeilen- und Modul-Einstellungen dieses Vorhaben realisieren kannst.
INHALTSVERZEICHNIS
1. Schritt: Alle Spalten müssen gleich hoch sein
Alle Anpassungen nehmen wir im visuellen Builder von Divi vor. Diese Anleitung zeigt dir, wie du den visuellen Builder aktivierst.
Zuerst müssen wir die Option Spaltenhöhe ausgleichen aktivieren, damit alle Spalten die gleiche Höhe haben. Öffne dazu über das Zahnrad-Symbol die Einstellung der Zeile:
Gehe zum Reiter "Design" > Option "Größe einstellen" und aktiviere "Spaltenhöhe ausgleichen":
Bild oben: Durch die Hintergrundfarbe der einzelnen Spalten sehen wir, dass alle drei nun gleich hoch sind. Die anderen Spalten orientieren sich in ihrer Höhe also an der längsten Spalte (bei uns ist es die 2. Spalte). Die Buttons allerdings schweben immer noch in der Luft und orientieren sich somit an der Länge des Modul-Inhalts über ihnen.
TIPP: Wenn du deine Spalten mit einer Hintergrundfarbe einfärbst, kannst du die Schritte am besten nachvollziehen. Um die Hintergrundfarbe der Spalte 1 anzupassen, gehst du in die Zeilen-Einstellung und klickst bei der 1. Spalte auf das Zahnrad-Icon, um in die Spalten-Einstellung zu gelangen:
Nun befindest du dich in den "Spalten Einstellungen" deiner 1. Spalte und kannst unter dem Reiter "Inhalt" du dort bei der Option "Hintergrund" eine eigene Farbe der Spalte vergeben:
Klickst du auf Speichern (grünes Häkchen unten rechts), wirst du wieder in die Zeilen-Einstellungsübersicht zurückgeleitet.
Ändere nun auf dem gleichen Weg die Hintergrundfarbe für die 2. und 3. Spalte.
2. Schritt: Buttons unten mittig positionieren
Die folgende Einstellung musst du bei allen drei Button-Modulen entsprechend vornehmen.
Gehe in den Modul-Einstellung des Buttons zum Reiter "Erweitert" zur Option "Arbeitsstelle". Wähle nun bei "Arbeitsstelle" Absolute aus und darunter bei "Location" klickst du auf ein unteres Element. Soll der Button zentriert liegen, dann wählst du unten-mittig aus:
OBACHT:
Es kann unter Umständen sein, dass der aktivierte visuelle Divi Builder nach der oben genannten Einstellung die Buttons nicht unten mittig anzeigt. Das ist dann der Fall, wenn du in den Divi-Builder Einstellungen den Gitter-Modus aktivierst hast:
Befindest du dich im Hover- oder Klick-Modus, wird dir alles richtig angezeigt. Im Bild oben sind das die beiden Icons links neben dem Gitter-Modus. Dort siehst du übrigens auch, dass nach unseren Button-Einstellungen dieser (fälschlicherweise) außerhalb der Spalte platziert wird.
Haben wir bei allen drei Buttons nun die Abosulte-Positionierung vorgenommen, sieht unsere Zeile nun so aus:
Alle drei Buttons werden schön gleichmäßig auf einer Höhe unten mittig ausgerichtet.
Was jetzt noch nicht so schön ist: Zum einen sitzen alle drei Buttons ganz am unteren Spaltenrand. Gerade wenn du für deine Spalten eine Hintergrundfarbe verwenden möchtest, sieht das nicht so schön aus. Zudem sehen wir, dass in der 2. Spalte, in welcher unser Text am längsten ist, der Button auch nach oben hin zum Text ziemlich klemmt.
Diese beiden Punkte lösen wir jetzt im letzten Schritt.
3. Schritt: Äußeren Abstand um den Button herum optimieren
Damit die Buttons nicht zu sehr am Spaltenrand und Inhalt klemmen, müssen wir nur zwei Einstellungen vornehmen.
Zuerst fügen wir einer Spalte einen Abstand nach innen (= Padding) hinzu. Es reicht aus, diese Einstellung nur bei einer Spalte vorzunehmen, da wir ja als aller Erstes in diesem Tutorial die Option "Spaltenhöhe ausgleichen" aktiviert haben. Somit orientieren sich die anderen Spalten in ihrer Höhe immer an der Spalte mit dem längsten Inhalt.
Öffne dazu wieder die Zeilen-Einstellung und gehe in die Einstellung einer bestimmten Spalte. Wir setzen dies über die 2. Spalte um, weil diese den längsten Text halt:
Gehe zum Reiter "Design" > "Zwischenraum" und füge bei Innenabstand (Padding) einen relativ hohen Wert für den unteren Abstand ein, wie bspw. 50px:
Kleiner Reminder: Dadurch, dass wir für die komplette Zeile die "Spaltenhöhe ausgleichen" aktiviert haben, werden die Buttons wieder gleichermaßen ausgerichtet. Speicher die Anpassung und schließe die Zeilen-Einstellungen.
Gehe nun in die Modul-Einstellungen des Buttons zum Reiter "Erweitert" > Option "Arbeitsstelle" und füge einen positiven Wert bei Vertical Offset ein:
Achte darauf, dass der Wert aber nicht zu groß ist. Da wir vorhin der Spalte einen inneren Abstand von 50px gegeben haben, empfiehlt es sich hier beim Button-Modul max. einen Wert von 25px einzutragen. Denn durch diesen Wert verschieben wir den Button vertikal nach oben.
Speicher die Einstellung und schließe das Modul.
Nehme nun diese "Vertical Offset" Einstellung bei den beiden anderen Buttons vor. Achte darauf, dass du bei allen drei Buttons den gleichen Wert verwendest, damit diese auf der gleichen Höhe ausgerichtet sind.
Bist du mit der Einstellung fertig, speicherst du die Anpassungen im visuellen Builder und verlässt diesen.
Nun haben wir für unsere mehrspaltige und unterschiedliche Inhaltslänge ein Design geschaffen, bei welchem die letzten Module, nämlich die Buttons, alle schön gleichmäßig am unteren Spaltenrand ausgerichtet sind: