Een container met gepositioneerde lagen toevoegen.

Gebruik Gepositioneerde lagen wanneer elementen moeten overlappen of op een exacte plek moeten staan, wat met rijen en kolommen niet kan. Je krijgt een canvas waarop je elk element sleept waar je het wilt hebben, zoals een kop over een foto. Het voorbeeld legt een witte kop over een opendag over een afbeelding. Voor gewone inhoud naast elkaar zijn rijen en kolommen gemakkelijker netjes te houden op telefoons.

Een container met gepositioneerde lagen toevoegen

1. Beweeg over de kolom en klik op + in de besturingsbalk, of op de + in het midden van een lege kolom, om de elementenkiezer te openen.
2. Klik op het tabblad Lay-out op Gepositioneerde lagen.
3. Eerst openen de instellingen. Stel Hoogte zo in dat je hoogste laag past en klik daarna op Opslaan. Er verschijnt een leeg canvas.
4. Beweeg over het canvas en klik op + in de besturingsbalk om een element toe te voegen, zoals Tekst of een Afbeelding. Elk element dat je toevoegt wordt een laag die je kunt positioneren.

Wat je ziet

Het canvas behoudt de hoogte die je instelde, en elke laag staat waar je hem plaatste, boven of onder de andere. Bezoekers zien de compositie zoals hij er in de editor uitziet. Posities worden opgeslagen als aandeel van het canvas, zodat een laag op zijn plek blijft wanneer het canvas smaller wordt. Tekst behoudt zijn grootte tenzij je Responsief aanzet.

Je gepositioneerde lagen instellen

Open de instellingen via More > Settings in de besturingsbalk van Gepositioneerde lagen.

Lagen positioneren

• Selecteren: klik op een laag. Er verschijnen grepen op de hoeken en randen.
• Verplaatsen: sleep de laag aan de naam in de besturingsbalk, zoals Tekst of Afbeelding. Lagen blijven binnen het canvas.
• Formaat wijzigen: sleep aan een greep van de geselecteerde laag.
• Toevoegen op een plek: dubbelklik op een leeg deel van het canvas. De elementenkiezer opent en het nieuwe element belandt waar je klikte.

Het menu More van elke laag heeft vier extra items. 100% breedte en 100% hoogte rekken de laag uit over het canvas. Naar voren halen en Naar achteren sturen verplaatsen hem boven of onder de andere lagen.

Als je het niet ziet

• Een laag beweegt niet wanneer je hem sleept. Lagen bewegen alleen via de greep met hun naam in de besturingsbalk. Beweeg over de laag en sleep aan die greep.
• Een laag verstopt zich achter een andere. Hij staat lager in de stapel. Open het menu More van de laag en kies Naar voren halen.
• Lagen overlappen of steken uit op telefoons. Responsief staat uit, zodat de canvashoogte en tekst hun grootte behouden. Zet Responsief aan in de instellingen van Gepositioneerde lagen.
• Gepositioneerde lagen ontbreekt in de kiezer in een canvas. Een canvas kan geen ander canvas bevatten. Voeg het nieuwe element Gepositioneerde lagen toe aan een kolom.
• Gepositioneerde lagen ontbreekt overal in de kiezer. Je DXPR Builder-gebruikersprofiel sluit het uit. Een beheerder vinkt Lagen aan onder Elementen in je profiel op /admin/dxpr_studio/dxpr_builder/profile.

Wat nu?

• Secties: geef het gebied rond het canvas een achtergrondkleur of -afbeelding.
• Nesten: combineer lagen met rijen en kolommen in complexere lay-outs.
• Animatietabblad: laat elke laag met een eigen binnenkomsteffect verschijnen.