WPLounge
man voor whiteboard design
Home » WordPress Gutenberg » Hoe gebruik je het Gutenberg Media en tekst blok

Hoe gebruik je het Gutenberg Media en tekst blok

Het Media en tekst blok is er om bijvoorbeeld een afbeelding of video met daarnaast tekst te plaatsen. Maar dit kan natuurlijk ook met een los Afbeelding blok en een Paragraaf blok. Het Media en tekst blok heeft echter wat extra mogelijkheden om je het leven wat makkelijker te maken. Tekst naast een afbeelding komt natuurlijk heel vaak voor. Met dit blok kun je bijvoorbeeld heel makkelijk een afbeelding met tekst ernaast en afwisselend daaronder een blok eerst met tekst en dan de afbeelding ernaast maken voor een wat speelser effect:

Affiliate disclaimer:
In onze artikelen en op onze pagina's staan affiliate links. Wanneer je via één van deze links een aankoop doet, ontvangen wij een (meestal kleine) commissie van de verkoper. Wij geven altijd onze eerlijke mening over producten. Klik hier voor meer informatie.
Voorbeeld om-en-om content blok
Voorbeeld van om-en-om indeling van content met Media en tekst blok

Het blok toevoegen aan pagina of bericht

Ga in je bericht of pagina naar de Gutenberg editor en klik op het plusje om een blok toe te voegen:

Blok toevoegen

Het uitkapje verschijnt nu:

TIP VAN WPLOUNGE
Divi theme & Divi Builder
Bij Elegant Themes ontvang je meer dan
85 premium WordPress themes (waaronder Divi!) voor maar 89 dollar!

Bekijk de themes »»
Lees meer over Divi.
Blok toevoegen uitklapje

Typ in ‘Media …’ als het Media & tekst blok nog niet bovenaan staat in het scherm. Het Media & tekst blok verschijnt nu direct bovenaan. Selecteer deze. Dat komt er dan ongeveer zo uit te zien:

Blok toevoegen uploaden
Links staat standaard de afbeelding of video, rechts de tekst

Je kunt rechstreeks via de knop ‘Uploaden’ een afbeelding of video toevoegen, of via de Mediabibliotheek. Na het plaatsen van een voorbeeld afbeelding en dummy tekst ziet het er zo uit:

voorbeeld media & tekst

Merk op dat de tekst als losstaand blok is te bewerken. Je kunt hem omzetten naar andere tekst georienteerde blokken of kolommen. De afbeelding of video maakt onderdeel uit van het Media en tekst blok en is niet als losstaand blok te wijzigen of transformeren naar een ander type blok. Dat kan alleen voor het gehele blok en is beperkt tot transformatie naar een Kolommen, Afbeelding of Groep blok.

Dan kijken we nu naar de mogelijke opties en instellingen van dit blok.

Media en tekst blok instellingen en opties

Voor ieder blok is er een toolbar en blok instellingen paneel (aan de rechter kant, onder het Instellingen tandwieltje). Dat zijn 2 blokken en dus vier plaatsen om instellingen te doen. Eentje gaat over het gehele Media en tekst blok, de andere over de paragraaf met de tekst. Met ieder een toolbar en Blok paneel. We beginnen bij het Media en tekst blok. Hiervoor klik je op de afbeelding of video:

Toolbar instellingen

Media en tekst blok toolbar instellingen

In de toolbar vind je volgende instellingen:

  1. Transformatie naar een ander element
  2. Horizontale uitlijning: wijde breedte of volledige breedte
  3. Verticale uitlijning: naar boven, naar het midden of naar onder uitlijnen
  4. Media links of
  5. Media rechts plaatsen (van de tekst)
  6. Link toevoegen of bewerken (als je op de media klikt)
  7. Vervangen van de media
Media rechts
Media rechts van de tekst geplaatst met optie (5)

Voor de toolbar van het tekst gedeelte klik je op de tekst. WordPress gebruikt voor de tekst standaard een Paragraaf blok. Deze kan echter zoals bij ieder paragraaf blok getransformeerd worden naar een ander type. Het Media en tekst blok heeft echter geen toolbar instellingen voor de afbeelding of video op zich.

tekst gedeelte media en tekst blok
Paragraaf blok met de standaard toolbar

Blok instellingen

Media en tekst blok instellingen

Als de blok instellingen nog niet zichtbaar zijn aan de rechterkant, dan klik je op het tandwieltje helemaal rechtsboven in je scherm. Onder de tab Blok vind je de blok instellingen voor het op dat moment actieve blok. Voor het Media en tekst blok kun je onder het uitklapje Kleur de kleur van de tekst en de achtergrond instellen zoals bij de meeste andere blokken.

Kleuren panel

Onder Media & tekstinstellingen kun je de volgende opties instellen:

voorbeeld mobiele weergave bij stapel op mobiel
Weergave op mobiel apparaat met ‘Stapel op mobiel’ aan
  • Stapel op mobiel: de kolommen worden op een mobiel apparaat als rijen onder elkaar getoond.
  • Afbeelding bijsnijden om de gehele kolom te vullen: de afbeelding wordt bijgesneden en kolomvullend weergegeven. Zet je deze optie aan dan komen deze instellingen tevoorschijn waarmee de manier van bijsnijden bijgestuurd kan worden. Het focuspunt is het middelpunt van de foto na bijsnijden, Links bepaalt de
opties voor bijsnijden
  • Alt tekst: geef een beschrijving van de afbeelding of laat leeg als het een puur decoratieve afbeelding is.
  • Grootte afbeelding: bepaalt de resolutie waarop de foto wordt getoond. Hoe kleiner de foto bij gelijkblijvende afmeting van de weergave, hoe waziger de afbeelding zal zijn. De maximale resolutie wordt bepaald door de afmeting waarop de afbeelding is geupload.
  • Breedte media: percentage van de breedte van het blok. In het voorbeeld staat hij op 30 ingesteld, wat wil zeggen dat 30% van de breedte van (tekst + de afbeelding=100%) ingenomen wordt door de afbeelding.

Tips & tricks voor media en tekst

  • Het content format van afbeelding of video met tekst komt ontzettend vaak voor op websites. Daarom is dit een erg handig blok om te gebruiken hoewel je dit ook kunt maken met lossen blokken. Gebruik dan een Kolommen blok, Afbeelding blok en Paragraaf blok. Dit heb je echter niet vaak nodig, maar bijvoorbeeld wel als je meer aan het font van de tekst wilt aanpassen.
  • Let erop dat er bij het ontwerpen evenwicht zit in het visuele ontwerp. De ‘zwaarte’ van de tekst ten opzichte van de afbeelding moeten in evenwicht zijn. Dus niet enkele woorden tekst naast een rijk gevulde afbeelding.
  • Ook bij afbeeldingen die je gebruikt in het Media en tekst blok houd je je in principe aan de SEO basis richtlijnen.
  • Het tekst gedeelte kan vervangen worden door andere blokken op de standaard manier.
  • Je kunt een bestaand blok splitsen in een los tekst en los afbeelding blok (met behoud van layout) door deze te transformeren naar een Kolommen blok.

Conclusie

Het gebruik van het Media en tekst blok is na enig oefenen en experimenteren verrassend eenvoudig en kan een mooi resultaat geven. Let op dat je het ook voor video kunt gebruiken. Verder kun je het tekst gedeelte vervangen door andere tekst gerelateerde blokken uit de Gutenberg (en/of thema) blokken bibliotheek, wat behoorlijk wat mogelijkheden geeft.

Beoordeel dit artikel

Raymond de Bruin

Reageer