Afbeelding altijd even groot als de tekst ernaast

Staat er een blok met tekst naast een afbeelding, dan wil je vaak dat beide altijd even hoog blijven — ongeacht hoeveel tekst er staat of welke verhouding de afbeelding heeft. Wat wil je precies bereiken?

• Wil je dat de afbeelding zich aanpast aan de hoogte van het tekstblok ernaast? Kies dan Methode 2: zet de afbeelding als achtergrond van die kolom en zet de rij op Flex-indeling.
• Wil je dat de kolommen zich aanpassen aan de kolom met de grootste hoogte? Kies dan Methode 1: gebruik de Flex-instellingen om beide blokken even hoog te maken als het langste blok.

Methode 2 — de afbeelding als achtergrond van de kolom

Je past deze instelling toe op de rij en de kolom die de afbeelding als achtergrond krijgt (niet op de tekst zelf). Zie de uitleg over de Flex-indeling voor een volledig overzicht van alle layout-opties op een rij of kolom.

1. Open de pagina in de Visual Builder
   Ga naar de pagina met de rij van twee kolommen en klik in de balk bovenaan op Visual Builder inschakelen. De pagina laadt opnieuw in de bewerkweergave.

   

2. Zet de rij op Flex
   In de instellingen van de rij die de kolom met tekst en de kolom met de afbeelding bevat, zet je met Layoutstijl de rij op Flex: de twee kolommen worden dan flex-items van de rij, en de kortste kolom wordt automatisch even hoog gemaakt als de langste.

   

3. Wijs de achtergrondafbeelding van de kolom aan
   In de instellingen van de kolom naast de tekst — de kolom die geen los tekst- of afbeeldingsblok bevat — wijs je bij Achtergrondafbeelding de gewenste afbeelding aan: die afbeelding wordt de achtergrond van de kolom en volgt daardoor automatisch de hoogte van de tekstkolom ernaast.

   

4. Sla de pagina op
   Klik bovenin de Visual Builder op Opslaan om de nieuwe achtergrond vast te leggen.

   

De afbeelding blijft nu altijd even hoog als de tekstkolom ernaast, op elk schermformaat — zonder dat je de afbeelding zelf hoeft bij te snijden.

Methode 1 — twee losse blokken in dezelfde kolom even hoog maken

Staan de tekst en de afbeelding niet in twee aparte kolommen, maar als twee losse blokken naast elkaar in één kolom? Dan pas je de instelling toe op die ene kolom (niet op de tekst of de afbeelding zelf).

1. Open de pagina in de Visual Builder
   Ga naar de pagina met de kolom en klik in de balk bovenaan op Visual Builder inschakelen. De pagina laadt opnieuw in de bewerkweergave.

   

2. Zet de kolom op Flex
   Met Layoutstijl schakel je de flex-instellingen in voor de kolom waarin de twee blokken naast elkaar staan. Kies Flex; zonder deze stap werken de instellingen hieronder niet.

   

3. Zet de blokken naast elkaar
   Met Layoutrichting bepaal je of de blokken naast elkaar in een rij komen of onder elkaar in een kolom. Kies de rij-richting, zodat het ene blok links en het andere rechts komt te staan — precies zoals tekst en afbeelding naast elkaar.

   

4. Rek de blokken uit tot dezelfde hoogte
   Met Items uitlijnen bepaal je hoe de twee blokken ten opzichte van elkaar in hoogte staan: bovenaan, gecentreerd, onderaan, of uitgerekt tot dezelfde hoogte. Kies de optie 'uitgerekt': het kortste blok wordt automatisch net zo hoog gemaakt als het langste blok ernaast, ongeacht hoeveel tekst of welke afbeeldingsverhouding je gebruikt.

   

5. Sla de pagina op
   Klik bovenin de Visual Builder op Opslaan om de nieuwe indeling vast te leggen.

   

De afbeelding en de tekst ernaast blijven nu altijd even hoog, op elk schermformaat — zonder dat je iets aan de afbeelding zelf hoeft te veranderen.