Wat is custom positionering?
Wanneer je een afbeelding of figuur wilt toevoegen dat buiten de standaard breedte van de website valt (bijvoorbeeld tegen de rand van het beeldscherm), dan kun je hiervoor custom positionering gebruiken.
Hou hierbij rekening dat afbeeldingen en figuren standaard niet buiten de section vallen waar ze in staan. Je kunt dit aanpassen door gebruik te maken van absolute positionering.
Gebruik afstandshouder / spacer (voor simpele vorm zoals vierkant en cirkel)
Maak een section met daarin een inner section om afbeelding of spacer in te plaatsen die binnen die section valt.
- Sleep een spacer element naar de juiste plek in de pagina (links in het menu).
- Geef de hoogte / ruimte van het element.
- Geef de breedte van het element:
- Geavanceerd (advanced) > Layout > Breedte (width) > Aangepast (custom).
- Geef een breedte in pixels (px), percentage of op basis van de viewport width (vw).
- Selecteer de positie:
- Geavanceerd (advanced) > Layout > Position > Absoluut (absolute).
- Je kunt het element nu verslepen naar de juiste plek m.b.v. het blauwe icoontje rechtsboven (of door in px, %, vh of vw de offset aan te geven).
- Responsive maken (voor verschillende schermgroottes):
- Selecteer onderin de responsive mode en zet het element op de juiste plek voor verschillende schermformaten.
- Vallen afbeeldingen deels buiten de section, maar wil je dat ze worden afgeknipt?
- Selecteer de bovenliggende section.
- Layout > Overflow > Hidden.
- Optioneel: geef het element een background kleur:
- Geavanceerd (advanced) > Achtergrond (background) > color
- Optioneel: (bij een cirkel). Geef een border-radius:
- Geavanceerd (advanced) > Rand (border) > border-radius
- Geef de border-radius op in px of %. (50% geeft een cirkel)
Gebruik image (voor custom vormen)
- Sleep een image element naar de juiste plek in de pagina (links in het menu)
- Gebruik een los image voor elk element. Gebruik hiervoor bij voorkeur SVG bestanden.
- Geef de maten op van het element:
- Afmeting afbeelding (image size) > Aangepast (custom)
- Selecteer de positie:
- Geavanceerd (advanced) > Layout > Position > Absoluut (absolute).
- Je kunt het element nu verslepen naar de juiste plek m.b.v. het blauwe icoontje rechtsboven (of door in px, %, vh of vw de offset aan te geven).
- Responsive maken (voor verschillende schermgroottes):
- Selecteer onderin de responsive mode en zet het element op de juiste plek voor verschillende schermformaten.
- Vallen afbeeldingen deels buiten de section, maar wil je dat ze worden afgeknipt?
- Selecteer de bovenliggende section.
- Layout > Overflow > Hidden.
