Tekst afbeelding uitlijnen links rechts kolommen WordPress

Tekst en afbeelding goed uitlijnen, bijvoorbeeld links rechts is in WordPress vaak lastig en wordt snel een rommeltje.

Afbeeldingen plaatsen in WordPress

Hieronder staan de stappen om een afbeelding te plaatsen op een pagina of in een bericht.

  1. Plaats de muis cursor op de plaats in de tekst waar de afbeelding moet komen te staan.
  2. Klik op het plus-teken om een afbeelding blok toe te voegen.
  3. Klik op de gewenste afbeelding in de Mediabibliotheek of upload een nieuwe afbeelding zoals hierboven beschreven staat.
  4. In de rechterkolom staan nu een aantal opties voor het plaatsen van de afbeelding. Kies hier voor een gewenste uitlijning van de afbeelding, of het bestand een link is naar een groter formaat of andere pagina, en in welk formaat de afbeelding ingevoegd moet worden.

Afbeelding en tekst responsive goed uitlijnen in WordPress (Gutenberg)

Om de afbeelding en tekst responsive goed uit te lijnen adviseer ik om altijd kolommen te gebruiken in plaats van de bovenstaande manier van uitlijnen. Dit doe je met het kolommen-blok.

  • Maak 2 kolommen met het Gutenberg kolommen blok (zoek op columns)
  • Plaats in de kolom links de afbeelding en rechts de tekst (of andersom). Doe dit met het plus-teken om een blok toe te voegen

Je ziet dat dit responsive het beste werkt op Desktop, tablet en mobiel (smartphone)


Hoe tekst over een afbeelding plaatsen

Een tekst over een afbeelding plaatsen op je WordPress website kun je op verschillende manieren doen. Het is handig als je gebruik maakt van een page builder:


In dit voorbeeld ga ik uit van html en een div. Dan kun je het op elke pagebuilder en Gutenberg toepassen:

  • Links onder
  • Rechts onder
  • Links boven
  • Rechts boven
  • Gecentreerd

Lees hier de code om dit te doen:
www.w3schools.com/howto/howto_css_image_text.asp

Of lees onze handleiding:
calculaties berekenen calc() CSS | optellen aftrekken delen


Afbeelding uitlijnen met CSS

Voor gevorderden kun je de cals functie gebruiken. Calc() is een CSS manier om met wiskunde direct CSS te doen als vervanging voor elke lengte-waarde (of zowat elke getalwaarde). Het heeft vier eenvoudige wiskunde operatoren: optellen (+), aftrekken (-), vermenigvuldigen (*), en delen (/). Een uitgebreide handleiding over het responsie berekenen van afbeeldingen en uitlijnen met CSS:
css-tricks.com/a-couple-of-use-cases-for-calc/


Info afbeelding en tekst uitlijnen op WordPress.org

codex.wordpress.org/Wrapping_Text_Around_Images