Wil je een afbeelding, icoon of knop op een specifieke plek in een blok zetten, los van de normale volgorde van elementen? Met de vrije positie-instelling in de landingspagina's kun je een element vrij positioneren binnen zijn container. Zo kun je eenvoudig overlappende ontwerpen maken, zoals een icoon dat boven in het midden van een blok zweeft of een logo dat rechtsonder in een kolom staat.
Welke elementen kun je vrij positioneren?
Niet elk element ondersteunt vrije positionering. Je kunt het instellen voor:
Afbeelding
Icoon
Knop
Groep
Titels, subtitels, tekstblokken en andere elementen hebben deze optie niet.
Vrije positionering instellen
Bewerk een landingspagina en klik op het element dat je vrij wilt positioneren (een afbeelding, icoon, knop of groep).
In de linkerzijbalk verschijnen de instellingen van het element. Selecteer het verfpalet, klik op Vrije positie en zet het schuifje aan.
Kies een startpositie via het positie-grid. Het grid heeft acht posities waar je uit kunt kiezen. Klik op de gewenste positie om je element daar te plaatsen.
ℹ️ Het grid kijkt naar de container waar je element in staat. In onderstaand voorbeeld kan je het icoon vrij in de kolom plaatsen.
Wil je het element nog preciezer plaatsen? Gebruik dan de X- en Y- velden om het element te verschuiven. Een positieve X-waarde verschuift het element naar rechts, een negatieve waarde naar links. Een positieve Y-waarde verschuift omlaag, een negatieve waarde omhoog.
💡 Tip: gebruik het positie-grid eerst om een goede startpositie te kiezen, en verfijn daarna pas met de X/Y-velden. Zo ben je sneller klaar met positioneren.
Voorbeelden
Gebruik een vrije positie voor knoppen op mobiel om deze buiten de kolom te plaatsen 👇
Gebruik een vrije positie voor icoontjes en plaats deze halverwege het blok voor een subtiele overgang 👇
Gebruik een vrije positie voor afbeeldingen om een speels effect te creëren 👇
Veelgestelde vragen (FAQ)
Binnen welke container wordt het element gepositioneerd?
Binnen welke container wordt het element gepositioneerd?
Het element wordt gepositioneerd binnen zijn directe container (de kolom of groep waar het element onderdeel van is). Het beweegt dus niet vrij over de hele pagina.
Mijn element wordt deels bedekt door een naastliggend blok. Hoe los ik dat op?
Mijn element wordt deels bedekt door een naastliggend blok. Hoe los ik dat op?
Als je een element vrij positioneert, krijgt het omliggende blok automatisch een hogere laagvolgorde (z-index) dan naastliggende blokken. Geef je ook een element in een naastliggend blok een vrije positie, dan kan dat weer voor overlap zorgen. In dat geval is het aan te raden de laagvolgorde handmatig aan te passen.
Kan ik de vrije positie ook op mobiel anders instellen?
Kan ik de vrije positie ook op mobiel anders instellen?
Je kunt in de paginabouwer wisselen tussen de desktop- en mobielweergave. Pas de positie-instellingen aan in de gewenste weergave om het element op elk apparaat correct te plaatsen.