Buttons auf Bottom fixieren

UMGG

Hallo liebe WPDE-Community,

ich versuche schon seit längerem ein Problem zu lösen und bin dabei auf euer Forum gestoßen. In der Suche habe ich leider keine Lösung gefunden.

Setup:
Wordpress 6.4.1
WP Bakery
Astra pro Theme

Auf der Seite https://umggwordpress.de/umgg-campus/seht ihr drei graue Kästchen. Die Position der Buttons soll nicht abhängig vom text sein, sondern immer in einer Linie. Also nicht so wie es jetzt aussieht sondern der link und der rechte Button auf selber höher wie der in der Mitte. Die Seite ist nur ein Beispiel, muss das selber dann auch auf weiteren Siten anwenden.

Ich hoffe, ihr könnt meine Gedanken verstehen.

Vielen Dank schon mal für eure Unterstützung.

Liebe Grüße
Abdullah

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

b3317133

Ein möglicher Ansatz auf Basis der Beispielseite:

Code

.vc_btn3-container.vc_btn3-center {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
}

UMGG

Hä, wie einfach! Vielen vielen Dank. Ich glaube ich hatte sowas ähnliches schon mal. Bei WP Bakery sind die Buttons auf dem Text, im "Front-End" aber genau richtig.

Vielen Dank :D

UPDATE:
Leider zu früh gefreut. Jetzt sind die Button auf dem Text...

threadi

Ergänze noch:

Code

.wpb_text_column.wpb_content_element {
  padding-bottom: 34px;
}

Dadurch wird unter dem Text immer ein Abstand eingefügt. Der o.g. Code schiebt die Buttons dann ausgehend von unten in diesen freien Bereich.

Achtung: das wirkt sich auch auf andere Elemente aus, die den gleichen Aufbau verwenden. Dort hast Du ggfs. keine Buttons. Optimaler wäre, wenn Du dem umgehenden Element eine Klasse gibst und die o.g. Eigenschaften an diese Klasse koppelst.

UMGG

Guten Morgen threadi,

vielen Dank für deine Hilfe. Die Auswirkung sehe ich schon sofort. Der Abstand zwischen dem oberen Bild und den drei Textfeldern mit den Buttons wird dann auch größer und unschöner.

Ich würde also der die CSS Klasse der Zeile z. B. CampusButtons --> Das bekomme ich hin. Aber wie kann dann koppeln?

Vielen Dank im Voraus und liebe Grüße

threadi

Kommt drauf an wo WPBakery diese Klassen dann im HTML-Code ergänzt. Ich sehe sie noch nicht, kanns dir daher nicht sagen. Normalerweise müsste es reichen die Klasse vor die beiden o.g. Selektoren zu schreiben. Ich würde die Klasse übrigens komplett klein schreiben.

UMGG

Ok, vielen Dank. Haben den Klassennamen "campusbuttons" nun an die Reihe gesetzt und probiere es mal aus vor
".wpb_text_column.wpb_content_element" zu setzen.

Vielen Dank

UMGG

Irgendwie bekomme ich das nicht hin. Die CSS Klasse ist vergeben, aber wenn ich sie vor ".wpb_text_column.wpb_content_element" setze passiert leider nur, dass der code quasi neutralisiert wird.

Habt ihr vielleicht noch eine Idee?

Bin euch sehr dankbar!

Liebe Grüße

b3317133

Wie genau hast Du die Klasse davorgesetzt? Evtl. den Punkt oder das Leerzeichen vergessen?

Versuche es damit:

Code

.campusbuttons .vc_btn3-container.vc_btn3-center {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
}
.campusbuttons .wpb_text_column.wpb_content_element {
    padding-bottom: 50px;
}

UMGG

:D
Vielen Dank b3317133. Fast schon peinlich aber ich habe es ohne Leerzeichen angegeben.
Jetzt funktioniert es 1A und ich habe verstanden wie das funktioniert.

Bin euch allen sehr dankbar :)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Buttons auf Bottom fixieren

Jetzt mitmachen!