Knoppen in drie kolommen onderaan uitlijnen

Wanneer je in Bloomsite werkt met drie kolommen die elk een knop bevatten, kan het ontwerp soms wat asymmetrisch ogen doordat de knoppen op verschillende hoogtes staan. Met een kleine aanpassing in CSS kun je ervoor zorgen dat alle knoppen netjes onderaan worden uitgelijnd, ongeacht de hoogte van de inhoud erboven.

Stappenplan

1. Voeg een CSS-klasse toe aan de rij

Geef de rij waarin de drie kolommen zich bevinden een CSS-klasse, bijvoorbeeld:

buttons-onder

Vervolgens:

2. Voeg onderstaande CSS toe

Plaats deze code in Pagina's > [specifieke pagina waar het om gaat] > Pagina instellingen:

Ga vervolgens naar 'Geavanceerd' en plaats hier de aangepaste CSS:

Kopieer de volgende code:

/* Kolommen als flex containers */
.buttons-onder .et_pb_column {
  display: flex;
  flex-direction: column;
}

/* Duw het laatste module in de kolom naar beneden */
.buttons-onder .et_pb_module:last-child {
  margin-top: auto;
}

/* Optioneel: richt specifiek de Button Module */
.buttons-onder .et_pb_button_module_wrapper,
.buttons-onder .et_pb_button_module {
  /* Voor de zekerheid, schaadt niet */
  margin-top: auto;
}

/* Kleine ruimte boven de knop */
.buttons-onder .et_pb_button_module_wrapper {
  padding-top: 0.75rem;
}

Resultaat

De knoppen in de drie kolommen worden nu visueel gelijk uitgelijnd aan de onderkant van de rij. Dit zorgt voor een symmetrischer en professioneler uiterlijk van de sectie, ongeacht de hoeveelheid tekst of andere modules erboven.