In de one.com Website Builder zijn container-componenten de bouwstenen van de website en ze zijn erg veelzijdig. Ze kunnen worden gebruikt als achtergrond, designelementen of om andere componenten bij elkaar te houden. Als je goed kijkt naar de componenten die worden gebruikt in de template dat je geselecteerd hebt, zul je zien dat deze veel container-componenten bevat.
Wat voor containers kan ik gebruiken?
Er zijn vier soorten containers:
Strook-component
De Strook-component beslaat altijd de hele breedte van de site. Het is daardoor geschikt als achtergrond of banner.
Kader-component
De Kader-component is de meest gebruikte manier om componenten te groeperen, zodat je deze componenten als één geheel kunt verplaatsen. Door ze te groeperen in een kader blijven ze ook bij elkaar in de mobiele weergave. Je kunt het kader ook als achtergrond gebruiken.
Cirkel-component
De Cirkel-component werkt op dezelfde manier als een kader. Het enige verschil is dat de hoeken van deze component zijn afgerond om het kader een ronde vorm te geven. Met andere woorden, als je ronde kaders wilt gebruiken, hebben wij ze al voor je gemaakt!
Hoverbox-component
Met de hoverbox kun je interactieve elementen op de site maken. Dit betekent dat wanneer bezoekers hun cursor boven de component houden, dit een bepaald effect heeft, afhankelijk van hoe je de component hebt samengesteld.
Het werkt als volgt: Wanneer je een hoverbox naar je werkruimte sleept, zie je boven de component twee knoppen: Standaard en Hoveren. De eerste is wat je bezoekers zullen zien wanneer ze op de pagina zijn en het kader zien. De tweede is wat wordt getoond zodra ze de cursor boven het kader houden.
Je kunt dingen aan deze twee "vensters" toevoegen, afhankelijk van wat je wilt dat de bezoeker in elk venster ziet. Voeg afbeeldingen, tekstvakken, knoppen en meer toe om een uniek effect te creëren. Maak het geheel af door alleen het gewenste hover effect toe te voegen door op Bewerk hoverbox te klikken en vervolgens Hover effect te selecteren in het zwevende menu dat verschijnt.
Tip: Als je de hoverbox in actie wilt zien, kun je naar de voorbeeldmodus gaan en de cursor boven de component houden. Houd er rekening mee dat het hover-effect alleen beschikbaar is op computers, omdat hiervoor een muis nodig is, en niet wordt ondersteund op mobiele apparaten.
Gerelateerde artikelen: