Home Kennisbank Pagina's & secties Hoe maak ik van een kolom een card (en laat ik hem overlappen)?

Hoe maak ik van een kolom een card (en laat ik hem overlappen)?

Robert Oosterloo
Bijgewerkt op · 3 min lezen

Een card is een vak met een eigen achtergrond, afgeronde hoeken en ruimte rondom de inhoud. Je maakt er een van een hele kolom, met alle blokken die erin staan. Zo’n card kan ook over de rand van de vorige of volgende sectie steken: een mooi effect onder een grote foto.

In het kort

  • Selecteer de kolom en vink in Kolom instellingen het vakje Kolom weergeven als card aan.
  • Kies een Card achtergrond kleur; standaard is dat White.
  • Met Kolom overlappen met vorige sectie of volgende sectie steekt de card uit.
  • De overlap geldt ook op mobiel. Controleer daar het resultaat.

Nog geen website op leflite?

Wij bouwen hem samen met jou. Daarna pas je alles zelf aan, precies zoals in dit artikel.

  • Online binnen een week
  • Hosting, SSL en back-ups inbegrepen
  • Vanaf €49,95 per maand
Website van Inspirare Coaching op een laptop

Stap 1: Selecteer de kolom

Klik in de kolom naast de blokken, of kies Kolom in de lijstweergave. Rechts verschijnt het paneel Kolom instellingen.

Stap 2: Zet Kolom weergeven als card aan

Vink Kolom weergeven als card aan. De kolom krijgt nu het uiterlijk van een card uit je huisstijl: afgeronde hoeken, een dunne rand en ruimte rondom de inhoud.

Stap 3: Kies de Card achtergrond kleur

Onder het vinkje verschijnt Card achtergrond kleur. Klik op een kleur uit je huisstijl. Net als bij een sectie verandert de tekstkleur vanzelf mee: witte tekst op een donkere card. Een witte card op een lichtgrijze sectie geeft een rustig, net effect.

Het paneel Kolom instellingen met Kolom weergeven als card aangevinkt, een gekozen Card achtergrond kleur en Kolom overlappen met vorige sectie met Overlappen met pixels gemarkeerd
Card aan, kleur kiezen, overlap instellen.

Overlappen met de vorige of volgende sectie

Is de kolom een card, dan verschijnen twee extra vinkjes:

  • Kolom overlappen met vorige sectie: de card schuift omhoog, over de sectie erboven.
  • Kolom overlappen met volgende sectie: de card schuift omlaag, over de sectie eronder.

Je kiest er één van de twee. Stel daarna met Overlappen met pixels in hoeveel de card verschuift (0 tot 1000). In de editor zie je bij de card de tekst “Steekt op de site … px in de vorige sectie”.

De card schuift op vanaf de plek waar hij normaal staat, en de sectie heeft boven en onder eigen ruimte. Wil je dat hij echt in de vorige sectie steekt, kies dan meer pixels dan die ruimte. Begin bijvoorbeeld met 150 en kijk op je site hoe het uitvalt.

Een witte card die over de onderrand van een donkere sectie met een foto steekt, rood omkaderd met het label Overlappen met pixels: 200
Een card die over de vorige sectie heen steekt.

Let op: de overlap geldt ook op mobiel. Op een telefoon staan kolommen onder elkaar, en schuift de card net zo ver op. Daardoor kan hij over tekst of een knop in de vorige sectie vallen. Bekijk de pagina op je telefoon. Valt het slecht uit, maak de overlap kleiner of gebruik een aparte sectie voor mobiel (zie secties en kolommen op mobiel).

Card-kolom of Card-blok?

Er zijn twee manieren om een card te maken:

  • Een kolom als card (dit artikel): je zet zelf blokken in de kolom, zoals Tekst, Lijst en Knoppen. Vrij in te delen en geschikt voor overlappen.
  • Het blok Card normaal of Card simpel: een vaste opbouw met afbeelding, titel, tekst en knop. Snel gemaakt, en de hele card is klikbaar. Zie een card met afbeelding, tekst en knop.

Een kolom als card is niet in zijn geheel klikbaar: alleen de knoppen en links erin. Wil je een hele tegel klikbaar, lees dan een kolom of card helemaal klikbaar maken.

Zet je drie card-kolommen naast elkaar, kies dan bij de sectie Uitrekken zodat ze even hoog worden; zie kolommen even hoog maken.

Lukt het niet?

  • Je ziet geen card-instellingen: je hebt de sectie of een blok geselecteerd. Selecteer de kolom.
  • De overlap-vinkjes ontbreken: die verschijnen pas als Kolom weergeven als card aan staat. Staat een van de twee aan, dan is de andere verborgen.
  • De card steekt niet uit: kies meer pixels bij Overlappen met pixels; de ruimte boven in de sectie gaat er eerst af.
  • De card valt achter de volgende sectie: bij overlappen met de volgende sectie kan die sectie over de card heen vallen. Gebruik liever overlappen met de vorige sectie, of vraag ons om hulp.
  • De card en de sectie hebben dezelfde kleur: dan zie je de card nauwelijks. Kies een andere Card achtergrond kleur.

Deel dit artikel

Robert Oosterloo

Robert Oosterloo is eigenaar en UX/UI-designer van Lef Creative in Kollum. Hij ontwerpt websites, webshops en software voor ondernemers in Noord-Nederland.

Lees ook

Ook zo’n website?

Je leest hier hoe makkelijk je een leflite-site zelf bijhoudt. Wil je er ook een? We denken vrijblijvend met je mee.

Liever direct contact? Bel Robert op 06 35 66 47 73 of stuur een .