Geef een sectie een kleur-, foto- of verloopachtergrond.

Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen

Je kunt elke sectie vullen met een kleur, een foto of een verloop. Kleur en foto komen uit het paneel Style, dat secties, rijen, kolommen en elementen allemaal hebben. Secties voegen een paneel Background effects toe voor verlopen, vaste en parallaxfoto's en YouTube-video. Het voorbeeld bouwt een marineblauwe sectie met een stadsfoto, witte tekst en een verloop erop.

De video plaatst een foto achter een sectie en dekt die daarna af met een verloop.

Een kleur en een foto toevoegen

  1. Klik op Add Elements in het lege inhoudsgebied en kies Section op het tabblad Layout.
  2. Wijs de sectie aan en open More > Settings.
  3. Open het paneel Style.
  4. Kies een donkerblauw staal voor Background.
  5. Kies wit voor Font color.
  6. Klik onder Background image op Select Image. Zoek in de mediabibliotheek, vink een foto aan en klik op Insert selected.
  7. Zet Background style op Cover.
  8. Zet Background position op Center center en klik op Save.
  9. Klik op + op de sectie en kies Text op het tabblad Content.
  10. Typ een kop, zoals Evening lectures, en één regel eronder. Zet de kop op Heading 2 en centreer beide regels in de editorwerkbalk.
  11. Open het paneel Style, zet Font color op wit en klik op Save.

Een verloop toevoegen

  1. Wijs de sectie aan en open More > Settings opnieuw.
  2. Open het paneel Background effects en zet Background effect op Gradient.
  3. Kies een Start color en een End color en klik daarna op Save.
  4. Klik op de werkbalk op Save, open het weergavemenu (het oogpictogram) en kies Preview.

Wat je ziet

Na de eerste stappen vult de foto de hele sectie achter de witte kop. Cover snijdt weg wat niet past en Center center houdt het midden van de foto in beeld. De marineblauwe kleur toont alleen terwijl de foto laadt of waar de foto niet komt.

Het verloop vloeit van de startkleur bovenaan naar de eindkleur onderaan. Het ligt boven op de foto. Dekkende kleuren dekken de foto volledig af; kleuren met wat transparantie laten hem doorschijnen.

Instellingen

Paneel Style (elke sectie, rij, kolom en element)

Instelling Wat het doet Standaard
Background Een vulkleur uit de kleurkiezer of een themastaal Geen
Background image Een afbeelding uit de mediabibliotheek, gekozen met Select Image Geen
Background style Cover vult het element en snijdt bij; Contain toont de hele afbeelding en kan randen overlaten; No repeat toont hem één keer op eigen grootte; Repeat tegelt hem Theme defaults
Background position Welk deel van de afbeelding in beeld blijft wanneer die wordt bijgesneden, zoals Center center of Left top Theme defaults

Wanneer AI-afbeeldingsgeneratie is ingesteld, neemt Background image ook een prompt aan. Zie AI-afbeeldingsgeneratie.

Paneel Background effects (alleen secties)

Achtergrondeffect Wat het doet Extra instellingen
Simple image (standaard) De foto scrollt met de pagina mee Geen
Fixed image De foto blijft staan terwijl de pagina eroverheen scrollt Geen
Parallax image De foto beweegt trager dan de pagina. Zie Hero-sectie voor een voorbeeld. Parallax speed, Parallax mode (Fixed of Local), Disable on mobile
Gradient Twee kleuren vloeien over de sectie, boven op de foto als die er is Start color, End color, Gradient direction (180 graden loopt van boven naar beneden), Start position, End position
YouTube video Een gedempte YouTube-video vult de sectie; vink Loop aan om hem te herhalen YouTube video URL, Video options, Start time in seconds, Stop time in seconds

Vaste en parallaxeffecten verplaatsen de foto die je in het paneel Style hebt ingesteld. Een YouTube-video heeft geen foto nodig.

Als je de achtergrond niet ziet

  • Er is geen paneel Background effects. Alleen secties hebben het. Wijs de sectie aan, niet een rij, kolom of element, en open More > Settings.
  • De foto is afgesneden. Cover snijdt weg wat niet in de sectie past. Wijzig Background position om het onderwerp in beeld te houden, of kies Contain.
  • Het verloop verbergt de foto. Het verloop ligt erbovenop en dekkende kleuren dekken de foto af. Verlaag de opaciteit van Start color en End color in de kleurkiezer.
  • De sectie toont geen verloop. Een verloop heeft beide kleuren nodig. Kies een Start color en een End color.
  • De YouTube-video speelt niet af. YouTube video URL is leeg of geen link naar één video. Plak het volledige adres van de video, zoals https://www.youtube.com/watch?v= gevolgd door zijn ID.

Wat nu?