Gebruik flexibele containers om componenten te groeperen en uitlijnen
Flex Container is een indeling-component waarmee u sectie-indelingen op uw webpagina kunt ontwerpen en bouwen. U kunt flexibele containers gebruiken om componenten zoals knoppen, tekst, afbeeldingen en andere containers te groeperen.
Een flexcontainer toevoegen
Om een flexcontainer aan uw webpagina toe te voegen:
Open de ontwerpstudio waarmee u de inhoud en onderdelen van uw pagina kunt bewerken.
Selecteer de pagina die u wilt bewerken.
Selecteer het gedeelte waaraan u het flexcontainercomponent wilt toevoegen.
Plaats de muisaanwijzer op een bewerkbaar canvasgebied en selecteer het onderdeel flexcontainer in het onderdelenvenster.
U kunt een groep componenten maken door andere componenten, zoals knoppen en tekst, aan uw flexcontainer toe te voegen.
Ook kunt u uw flexcontainer opmaken en configureren.
Een flexcontainer bewerken
Nadat u een flexcontainer hebt toegevoegd, selecteert u het flexcontainerbesturingselement om de eigenschappenbalk te openen en uw flexcontainer te bewerken.
| Eigenschappen | Omschrijving |
|---|---|
| Ontwerpen | Wijzig uw ontwerpeigenschappen om het uiterlijk van uw flexcontainer aan te passen. |
| Achtergrond bewerken | De kleur van de achtergrond volgens het kleurenpalet voor de geselecteerde stijlsjabloon wijzigen. U kunt ook een achtergrondafbeelding toevoegen en de grootte en positie aanpassen. |
| Richting en uitlijning wijzigen | Uitlijnen en wijzig de richting van de inhoud in de flexcontainer. |
| Overige | Dupliceer de sectie, verplaats deze binnen de pagina omhoog of omlaag of verwijderd deze helemaal. |
Ontwerpeigenschappen
De volgende ontwerpeigenschappen zijn configureerbaar in de ontwerpstudio:
Voeg flexibele containers toe in HTML
U kunt flexcontainers ook rechtstreeks aan de HTML van uw webpagina toevoegen met Visual Studio Code voor het web (preview).
Om ervoor te zorgen dat de ontwerpstudio aangepaste flexbox-divs herkent en canvasbewerking toestaat, past u de CSS klasse "ppFlexContainer" op de divs toe.
Belangrijk
Zonder de ppFlexContainer klasse herkent Design Studio de aangepaste divs niet als flexcontainercomponenten en kunt u ze niet bewerken in Design Studio.
<div class="row sectionBlockLayout text-start" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;">
<div class="container" style="padding: 0px; display: flex; flex-wrap: wrap;">
<div class="col-lg-12 columnBlockLayout" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 250px; word-break: break-word;">
<div class="ppFlexContainer">
<button type="button" class="button1">Button</button>
<button type="button" class="button1">Button</button>
</div>
</div>
</div>
</div>
Aangepaste indelingen bouwen
U kunt meerdere flexcontainers gebruiken om aangepaste indelingen te bouwen. Hier volgen slechts enkele voorbeelden van wat u kunt doen.