Eenvoudig uitvullen

Problemen met de uitlijning van je kolommen en tegels?

We zien allemaal graag dat de informatie die we creëren met behulp van kolommen en tegels mooi uitgelijnd is. Het lijkt soms wat lastig, omdat je afhankelijk bent van de hoeveelheid content die je in een kolom en tegel plaatst. Hier enkele tips om de hoogte – ongeacht de inhoud – op elkaar te laten uitlijnen.

Waarom zorgen voor een gelijke uitlijning in kolommen of tegels?

Om te beginnen bepaal je de inhoud die je in je kolom of tegel wil tonen. De opbouw om een gelijke uitlijning te realiseren is afhankelijk van je inhoud. Wil je een kolom tonen met daarin enkel tekst en een knop? Lees dan de volgende alinea. Daar hebben we namelijk een speciaal blok voor. Wil je meer tonen dan dat, bijvoorbeeld met een afbeelding, groep én met afgeronde hoeken? Lees dan stap 2.

1. Verticale uitvulblok in een kolom

Grote kans dat je dit al weet, maar op dit moment is een gelijke uitlijning in kolommen mogelijk met behulp van het verticale uitvulblok en een vinkje bij de instellingen van Kolommen. Helaas is deze optie niet van toepassing indien je met meerdere elementen werkt die hun eigen afmetingsinstellingen hebben, zoals een Groep. Heb je een eenvoudige layout met enkele elementen ‘los’ in de kolom? Dan kun je prima deze functie blijven toepassen.

De inhoud van jouw kolom of tegel

In dit voorbeeld gaan we uit van een wat uitgebreidere variant waarbij de uitvul mogelijkheid bij Kolommen niet werkt. We plaatsen een Groep met daarin een Afbeelding, Koptekst, Paragraaf en een Knop.

Dit heb je nodig

We beginnen met het plaatsen van Kolommen. In dit voorbeeld kun je bij de snelselectie kiezen uit de variant met 3 kolommen. Daarna plaats je de hierboven genoemde elementen als volgt in de eerste kolom:

• Groep (1)
  • Afbeelding
  • Koptekst
  • Groep (2 – deze heb je nodig voor het uitvullen)
    • Paragraaf
    • Knop

Je plaatst dus eerst een Groep, met binnen in die Groep een zelf gekozen Afbeelding. Bij voorkeur een liggend formaat om de hoogte van je tegel te beperken. Daaronder plaats je de Koptekst, maak deze teksten niet té groot. Direct onder de Koptekst plaats je een tweede Groep. Hierin plaats je een Paragraaf en een Knop. De inhoud van de tegel die je nu hebt gemaakt kun je zelf eventueel vast verder invullen. In de volgende stap zorgen we ervoor dat we alle elementen netjes uitlijnen en zorgen voor de gelijke hoogte.

De benodigde elementen staan, maar voor we starten is het handig om je tegel er visueel gezien iets meer als een tegel uit te laten zien. Geef Groep 1 een achtergrondkleur, bijvoorbeeld grijs of wit, afwijkend van je achtergrond natuurlijk. Of kies ervoor om de volledige kolommenweergave in een overkoepelende Groep met afwijkende achtergrondkleur te plaatsen. In ons voorbeeld is dit laatste het geval.

Geef de tekst de ruimte

Om te voorkomen dat teksten tegen de zijkant van de tegel staan voegen we padding toe. Dit kun je doen met Responsive Dimensions of met het schuifje voor Padding (in het tabje vormgeving). Selecteer Groep 2 en zorg ervoor dat je de padding naar wens ophoogt.

Selecteer vervolgens de Koptekst. Kies ook daar het tabje vormgeving en stel de padding in. Let op, in dit geval kiezen we enkel voor horizontale padding. Verticaal hoeft niet te worden aangepast. Zorg ervoor dat je dezelfde waarde toepast voor de Groep en de Koptekst om ze gelijk uit te lijnen.

Stapelen

Selecteer nu Groep 1. Bij de instellingen rechts vind je direct bovenaan weergave mogelijkheden. Kies daar voor het derde icoon, Transformeren naar stapelen. Je ziet dat het icoon van je Groep nu ook verandert. Kies nu voor het tabje vormgeving en ga naar Minimum hoogte (te vinden onder Afmetingen). Vul daar 100% in (klik op ‘px’ en selecteer ‘%’).

Herhaal nu deze stap voor Groep 2, alleen na het kiezen van het icoon voor stapelen zie je dat bij Afmetingen een extra instelling voor Hoogte beschikbaar is gekomen. Kies voor de middelste optie Vullen. De Minimum hoogte mag je leeg laten.

Uitvullen

De laatste instelling die we doen zorgt ervoor dat de hoogte van de tegel gelijk is aan alle andere tegels en de knoppen op dezelfde lijn staan, ongeacht de lengte van je tekst. Selecteer Groep 2 zodat het zwevende menu verschijnt boven je Groep. Kies voor het icoon voor verticaal uitlijnen en selecteer de onderste optie genaamd Ruimte tussen. Onze tegel is nu klaar en zal mooi uitlijnen.

De resterende handeling is om je volledige Groep nu te kopiëren naar de lege kolommen. Verander de lengte van elke paragraaf en zie hoe de tegel zich aanpast met de juiste uitlijning.