Afbeelding altijd even groot als de tekst ernaast

Je kunt ervoor zorgen dat afbeeldingen altijd even hoog zijn als de tekst die ernaast staat. Er zijn wat verschillende instellingen voor nodig. In dit artikel laat ik zien hoe je dat kunt doen. Volg de stappen nauwkeurig!

LET OP: wanneer je de afbeeldingen op de onderstaande manier instelt kun je geen alt-teksten instellen voor de afbeeldingen. 

1. Om de afbeelding altijd even hoog te krijgen als de tekst ernaast, verwijder je de afbeelding als 'module'.
2. Dit doe je door op het 'Prullenbak' icoon te klikken in het grijze menu.

   

3. Open de ' Rij-instellingen' in het groene menu.

4. Het is heel belangrijk om eerst bij ' Ontwerp' onder 'Formaat wijzigingen' de 'Kolomhoogten gelijk maken' op 'Ja' te zetten! 

5. Ga nu terug naar ' Content' in de 'Rij-instellingen'.

6. Zoals je ziet zijn er 2 kolommen, in de eerste kolom staat de tekstmodule en in de tweede kolom hebben we net de afbeelding-module verwijderd.   

7. Open de instellingen van de tweede kolom.  

8. Voeg bij ' Achtergrond' een achtergrondafbeelding toe, en bepaal de juiste 'Achtergrond positie'. Bij deze foto wil ik dat het meisje constant zichtbaar is, dus de focus voor deze afbeelding is 'Midden links'. 

9. Klik op het groene vinkje om de wijzigingen op te slaan.   

10. Wanneer ik nu mijn scherm kleiner maak, zal de afbeelding even groot blijven als de kolom ernaast. Maar niet op mobiel en tablet...
    (JE BENT DUS NOG NIET KLAAR! GA DOOR MET DE STAPPEN HIERONDER!....)

11. We moeten nu nog een instellingen doen. Op mobiel of tablet zullen de kolommen namelijk onder elkaar komen te staan. Daardoor zal de afbeelding niet zichtbaar zijn omdat er in principe geen echte 'content' in de kolom staat behalve een 'achtergrond' afbeelding. Het zal er dus op mobiel en tablet zo uit zien: 

12. Klik op het grijze ' +' icoon en voeg een 'Scheidingslijn' toe in de kolom waar de afbeelding in staat.
    (LET OP: Het is belangrijk dat je op het '+' icoon in de kolom van de afbeelding klikt zoals hieronder!)

13. Onder ' Inhoud' bij 'Zichtbaarheid' zet je 'Laat scheidingslijn zien' op 'Nee'.
    

14. Klik nu op ' Ontwerp' en vervolgens op 'Maten'.

15. Beweeg je muis over ' Hoogte' en klik eerst op het 'mobiel' icoon.
    

16. Het is belangrijk om ' Desktop' op 'Auto' te laten staan! Anders is de afbeelding ook op dekstop maar 400px.

17. Klik op ' Tablet' en vul daar '400px' in. Op 'Tablet' is de afbeelding nu altijd 400px (Je kunt deze ook iets groter of kleiner maken).

18. Vul ook bij ' Telefoon' > '400px' in (Of het aantal px dat jij zichtbaar wilt op mobiel).

19. Klik op het groene vinkje om de wijzigingen op te slaan.

20. Vergeet niet om de pagina op te slaan wanneer je klaar bent!  

21. De afbeelding is nu altijd even hoog als de tekst ernaast en blijft de afbeelding zichtbaar op tablet en mobiel.
    NU BEN JE ECHT KLAAR! ;-)

    ---

    Mocht je nog meer vragen hebben of het is nog niet helemaal duidelijk? Neem dan contact op door hieronder op "Neem contact op" te klikken. Klopt deze informatie niet meer? Laat het ons dan ook weten!