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.

Lees eventueel de onderstaande handleiding:

Afbeelding en tekst responsive goed uitlijnen (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:

• 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

Tekst uitlijnen in WordPress

Je kan de bovenstaande methode ook voor tekst gebruiken. Je kan ook de uitlijn optie gebruiken in de tekst editor van je Gutenberg blok:

Geavanceerde uitlijning tekst en typografie

Als je een maximumaantal karakters hebt aangegeven is de onderstaande code heel belangrijk voor je uitlijning. Anders wordt het een rommeltje.

.p {max-width: 25ch !important; margin-right: auto !important;

Tekst centreren met CSS

.gecentreerd {
	text-align: center; margin-right: auto !important; margin-left: auto !important;}
}

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

Div over de volledige breedte uitlijnen

Een Div over de volledige breedte uitlijnen met achtergrondkleur kan zo:

.wrapper {width:90%;margin:0 auto} // dit zal de div centreren en niet tegelijkertijd de hele breedte nemen

Dit staat hier mooi omschreven:
stackoverflow.com/questions/20239675/full-width-div-with-background-color