Laat een sectie doorlopen van rand tot rand.

DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen

Je kunt de inhoud van een sectie van rand tot rand laten lopen, of hem in het midden in een vak houden terwijl de achtergrond het venster vult. Eén schakelaar op de sectie beslist: Full width. Het voorbeeld bouwt een grijze sectie met drie kolommen en schakelt daarna Full width in zodat de kolommen uitrekken. Voor kleur- en fotovullingen, zie Achtergronden.

De video bouwt een grijze sectie met drie kolommen en laat daarna zijn inhoud van rand tot rand lopen.

Bouw een vaksectie

  1. Klik op Add Elements in het lege inhoudsgebied en kies Section op het tabblad Layout.
  2. Wijs de sectie aan, open More en kies Settings.
  3. Open het paneel Style en kies een lichtgrijze Background.
  4. Klik op Save. Het grijs beslaat het venster al.
  5. Klik op + op de sectie en kies Row.
  6. Klik op het gridpictogram op de rij, kies de tegel met drie gelijke kolommen en klik op Save.
  7. Klik in elke kolom op +, kies Text op het tabblad Content, typ een Heading 4 en één regel en klik op Save.

De drie kolommen staan nu in een gecentreerd vak op de grijze band.

Full width inschakelen

  1. Open More op de sectie en kies Settings.
  2. Schakel in het paneel General Full width in.
  3. Klik op Save.
  4. Klik op Save op de DXPR Builder-werkbalk.
  5. Open het weergavemenu, het oogpictogram op de werkbalk, en kies Preview.

Wat je ziet

De grijze band ziet er hetzelfde uit als eerst. Alleen het inhoudsvak is gewijzigd: de eerste kolom begint nu aan de linkerrand van de sectie en de laatste eindigt aan de rechterrand.

Elke sectie heeft twee delen: een buitenelement dat de achtergrond draagt en een binnenvak dat de rijen bevat. Full width wijzigt alleen het binnenvak. Uit staat het gecentreerd met een maximale breedte; aan rekt het uit tot de randen van de sectie.

Instellingen

Het General-paneel van de sectie bevat drie lay-outschakelaars, allemaal standaard uit:

Instelling Wat het doet
Full width Rijen vullen de sectie van rand tot rand in plaats van een gecentreerd vak
100% height De sectie is minstens zo hoog als het browservenster
Vertical centering Rijen staan in het verticale midden van de sectie

Rijen hebben geen eigen breedte-instelling; de sectie beslist.

Twee patronen

  • Edge-to-edge background, boxed text: de gebruikelijke hero. Laat Full width uit en stel de achtergrond in in het paneel Style of Background effects.
  • Edge-to-edge content: een strook kaarten of foto's. Schakel Full width in en geef de kolommen wat Padding als tekst te dicht bij de vensterrand staat.

Als je de wijziging niet ziet

  • Er verandert niets wanneer je Full width inschakelt. Op een smal scherm, zoals een telefoon, vult de vakversie de breedte al. Verbreed het browservenster en kijk opnieuw.
  • De achtergrond stopt vóór de vensterranden. Je thema plaatst de pagina-inhoud in een vakregio en de sectie kan alleen die regio vullen. Kies in je thema een paginalay-out of regio over de volledige breedte.
  • Tekst raakt de vensterrand. Dat is wat Full width doet. Voeg Padding toe in het Style-paneel van de kolommen, of laat Full width uit.

Wat nu?