Media & tekst (update)

Het standaard Media & Tekst blok is uitgebreid

Misschien werk je liever met kolommen, maar de kans is groot dat je ergens op je website het Media & Tekst blok hebt staan om, de naam zegt het al, media (afbeelding of video) naast een stuk tekst of andere content te plaatsen. Om de uitstraling van dit blok iets meer te laten matchen met jouw huisstijl hebben we enkele nieuwe opties toegevoegd voor het stijlen van dit blok.

Media & Tekst

Plaats op je pagina het blok genaamd Media & Tekst. Je kunt direct vanuit je mediatheek een afbeelding of een video uploaden. Vervolgens kun je qua inrichting van dit blok o.a. de volgende instellingen aanpassen:

• Na het uploaden zie je in de menubalk van dit blok een aantal iconen staan. Het zwart gekaderde icoon is nu actief en toont jouw mediabestand aan de linkerzijde van de tekst. Kies je het icoon aan de rechterkant, dan verwissel je de positie van jouw mediabestand en de tekst.
• Ook de uitlijning van je Media & Tekst blok is hier in te stellen. Standaard staat deze in het midden op ‘Container’ breedte. Dit is bij uitlijning de optie Geen. Je kunt hem iets wijder instellen of op volle breedte.
• Optioneel kun je een url aan dit blok hangen om te verwijzen naar een andere pagina.
• Met Vervangen kun je een andere afbeelding of video kiezen.

Aan de rechterkant heeft dit blok nog extra instellingen.

• Breedte media: de standaard breedte van je mediabestand is ingesteld op 50% van de volledige breedte van je blok. Kies zelf voor een eventuele afwijking door je mediabestand meer breedte te geven of verminder de breedte om je tekst meer ruimte te geven.
• Stapel op mobiel: dit betekent dat je afbeelding of video op mobiele devices standaard boven de inhoud komt te staan. Dit is ook de meest logische volgorde. Schakel je deze optie uit dan wordt ook op mobiel alles naast elkaar getoond. Het is mogelijk, maar bedenk dat de beschikbare ruimte voor je eigen inhoud zeer beperkt is.
• Afbeelding bijsnijden om te vullen: is je inhoud langer dan de afbeelding of video waardoor je media in het midden zweeft? Activeer dan deze optie. De afbeelding zal zich over de hoogte van je inhoud gaan uitvullen.
• Alternatieve tekst: plaats een duidelijke beschrijving van de inhoud van jouw mediabestand zodat je blok SEO-proof wordt.
• Resolutie: kies zelf op welke resolutie je afbeelding wordt ingeladen. Gebruik je een hele grote afbeelding, maar wordt je Media & Tekst blok relatief klein getoond, dan kun je de grootte iets beperken voor een snellere laadtijd.

Een aantal opties die we beschikbaar hebben gesteld voor het Media & Tekst blok die niet in de oorspronkelijke variant zitten zijn onder andere:

• Verticaal uitvullen: schakel deze in als je wilt dat je inhoud wordt uitgevuld tot aan de bovenkant en onderkant van je mediabestand. Oftewel, de lege ruimte tussen deze elementen wordt dan opgevuld. Let op: wil je van deze optie gebruik maken, zorg dan dat je specifiek op de plek waar je de ruimte wilt toevoegen het blok genaamd Verticaal uitvulblok plaatst. Deze zorgt automatisch voor een berekening van de juiste hoogte die wordt opgevuld.
• Lightbox: schakel deze optie in om na een klik op je mediabestand deze verder uit te vergroten.
• Tekst padding: de ruimte aan de zijkanten waren op mobiel altijd voorzien van standaard padding. Dit hebben we nu instelbaar gemaakt, zodat jij de controle hebt over hoeveel pixels je jouw inhoud van de schermrand of de rand van jouw Media & Tekst blok wilt plaatsen.

Pas de styling aan

Kies voor het tabblad Stijl en scroll naar beneden. We hebben extra opties toegevoegd voor het afronden van de hoeken. Normaal kon je geen Straal invullen voor dit blok, maar nu kun je zelfs twee losse instellingen doen.

De bovenste geldt voor de afronding van het complete Media & Tekst blok. Denk eraan dat dit pas zichtbaar wordt als je jouw blok hebt voorzien van een afwijkende achtergrondkleur of een gekleurde rand hebt toegevoegd.

De straal specifiek voor je Media houdt in dat je de afbeelding of video van afgeronde hoeken voorziet en niet het volledige blok. Met het link icoon achter beide opties kun je elke hoek afzonderlijk een afronding geven. Zo kun je jouw media en je inhoud soepel in elkaar laten overlopen.

Wil je – net als in het voorbeeld onderin deze pagina – de afbeelding iets laten inspringen en alle afrondingen invullen? Voeg met jouw Media & Tekst blok actief de padding in die je in het tabje Stijl ziet staan. De instellingen in onderstaande afbeelding zou je bijvoorbeeld kunnen overnemen.

Met de instelling die je in de afbeelding hierboven ziet kun je zogenaamde Concentric Corners maken. Dit betekent dat de lijnen van je afgeronde hoeken evenwijdig aan elkaar lopen. Dit doe je door de waarde van je padding (20px in dit geval) op te tellen bij de straal die je op je media (20px) toevoegt. Samen wordt dit dan 40 pixels, deze plaatst je dan zoals je ziet bij Straal voor het gehele blok.