USP’S uitlichten met kolommen

Zelf USP’s op je pagina plaatsen

Door het toepassen van USP’s kun je jouw bezoekers snel opvallende en unieke informatie kenbaar maken. Vaak is dit een combinatie van een afbeelding of icoon met een korte tekst. Wist je dat je hiervoor eenvoudig het kolommen blok kunt toepassen?

Waarom USP’s via kolommen?

We beginnen met het creëren van de elementen die we nodig hebben. In dit geval is dat een afbeelding of icoon plus een korte tekst die onze USP kort en bondig beschrijft.

De afbeelding

De afbeelding voegen we toe, omdat je bezoeker op die manier jouw pagina kan scannen. Intensief lezen wordt steeds minder vaak gedaan en een afbeelding is een visueel hulpmiddel om – helemaal in deze layout – aan te duiden dat de tekst een USP betreft.

Onze weergave wordt het mooiste getoond als elk van onze afbeelding vierkant zijn opgeslagen. Als het een SVG afbeelding is kan bijvoorbeeld een 16×16 of 40×40 pixels als formaat prima werken. Gebruik je een PNG of JPG, pas dan minimaal 80×80 pixels toe, dan blijft de afbeelding scherper.

De tekst

Zorg dat je USP zo kort en bondig mogelijk staat beschreven. Hoe korter, des te groter de kans dat de bezoeker het leest. Daarbij zorgt het vaak ook voor zowel desktop als mobiel dat de layout in balans is als de teksten kort en bondig zijn.

Twee varianten

De varianten die vaak terugkomen als het om USP’s gaat is een afbeelding met eronder tekst of een afbeelding met tekst ernaast.

Voorbeeld 1

Bovenstaande is in principe niet moeilijk. Dit werkt als volgt voor variant 1:

1. Plaats het blok Kolommen en kies voor een weergave met minimaal 3 kolommen (eenvoudig uit te breiden naar 4).
2. In je eerste kolom plaats je een Afbeelding. Kies uit een bestaande afbeelding of upload een nieuwe. Optioneel kies je voor de uitlijning van de afbeelding centreren.
3. Plaats onder je afbeelding een Paragraaf. Voorzie je paragraaf van de juiste tekst en kies ook optioneel voor centreren. Verder kun je je paragraaf qua formaat en kleur nog verder instellen.
4. Selecteer dan je eerste kolom, dupliceer deze het gewenste aantal keren en verwijder de lege kolommen. Vervang dan de afbeeldingen en teksten en vul ze met de juiste inhoud. Klaar!

Voorbeeld 2

Voor de tweede variant doen we het volgende:

1. Plaats het blok Kolommen en kies voor een weergave met 2 kolommen.
2. Herhaal stap 1 maar dan in de eerste kolom (je krijgt dus Kolommen in Kolommen).
3. In de zojuist gecreëerde kolom plaats je een Afbeelding links. De breedte van de kolom stel je aan de rechterzijde in op het gewenste aantal pixels, bijvoorbeeld 64px. Geef de Afbeelding dezelfde breedte die je de kolom hebt gegeven.
4. In de tweede (rechter) kolom plaats je een Paragraaf. Voorzie je paragraaf van de juiste tekst en laat de uitlijning op links staan (standaard).
5. Dupliceer nu de eerste kolom van je blok Kolommen uit stap 1, de buitenste van de twee. Vervolgens dupliceer je het volledige blok Kolommen uit stap 1. Nu zul je zien dat de beide USP’s die naast elkaar stonden er nog eens onder verschijnen.

Voor- en nadelen van beide varianten

Tot zover is het vooral een kwestie van de juiste kolomindeling maken. Maar er zitten enkele voor- en nadelen aan deze opzet, met name op responsive gebied.

• In voorbeeld 1 zal een kolom zich op mobiel altijd onder de vorige kolom plaatsen. Dit houdt in dat je mogelijk je halve mobiele scherm aan je USP weergave kwijt bent, terwijl het ook een stuk compacter kan
• Voorbeeld 2 is een mooie strakke weergave, neemt niet veel ruimte in, maar werkt vooral als het een even aantal USP’s bevat. Ook hier zullen de kolommen op mobiel onder elkaar vallen. Gelukkig kunnen we daar iets aan doen, zie stap 3.

Om de responsive weergave mooi op te lossen zie je hieronder per voorbeeld een uitleg.

• Voorbeeld 1:
  Je kunt ervoor kiezen om twee verschillende opzetjes te maken. Plaats je Kolommen in een Groep. Hernoem deze groep naar ‘USPs Desktop’. Dit geeft voor jezelf een duidelijk overzicht van de elementen op je pagina. Dupliceer deze groep en hernoem ook deze: ‘USPs Mobiel’.
  Voor beide groepen stel je nu een responsive weergave in. Aan de rechterzijde open je Responsive weergave bij instellingen. Hier activeer je ‘Toon blok bij geselecteerd bereik’. Voor mobiel kies je vervolgens voor het mobiele bereik. Voor de desktopvariant is het handig om ‘Anders’ te kiezen. Bij vanaf plaats je ‘768’. (waar mobiel stopt), het laatste veld laat je leeg. De groep voor mobiel zou je inhoudelijk nu op dezelfde manier kunnen inrichten als voorbeeld 2.
• Voorbeeld 2:
  Selecteer bij al je USP’s het binnenste blok Kolommen, degene waarin dus rechtstreeks de afbeelding en tekst zijn geplaatst. Bij de instellingen van deze kolommen zie je dat aan de rechterzijde ‘Stapelen op mobiel’ staat ingeschakeld. Schakel deze nu uit. Dit houdt in dat de afbeelding en tekst ook op mobiel naast elkaar zullen blijven staan.
  Het ‘buitenste’ blok kolommen laat je bewust wel zo staan, zodat alles netjes onder elkaar valt.

Optimalisatie padding en margin

Om balans in de de ruimtes rondom en tussen de diverse elementen te krijgen kun je spelen met de padding en margin instellingen van de kolommen. Ook met blokafstand kun je wat schuiven om jouw weergave naar wens te maken.