Laat je lay-out werken op telefoons.

DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen

Je pagina's passen zich vanzelf aan telefoons en tablets aan: kolommen staan naast elkaar op brede schermen en stapelen op kleine. Deze pagina toont hoe je de controle neemt. Je stelt een kolomlay-out per schermgrootte in, spiegelt de volgorde op brede schermen en toont elementen alleen op sommige apparaten. Het voorbeeld maakt van een rij van vier kolommen twee bij twee op tablets.

De video verbergt een foto op telefoons en versmalt daarna het venster om hem te laten verdwijnen.

Voordat je begint

Kies een lay-out per schermgrootte

  1. Wijs de rij aan en klik op het gridpictogram in zijn besturingsbalk. Het lay-outdialoogvenster opent met een paneel Medium devices (≥ 768px).
  2. Klik op Add screen size. Een tweede paneel opent, ingesteld op Extra small (< 576px).
  3. Kies in de dropdown van dat paneel Small devices (≥ 576px).
  4. Klik op Custom Layout, typ 1/2 + 1/2 + 1/2 + 1/2 en klik op Save.
  5. Klik op Save op de werkbalk.

Vier helften houden alle vier kolommen en zetten twee op elke regel. De tegel met twee gelijke kolommen zou de rij op elke schermgrootte tot twee kolommen terugbrengen.

Wat je ziet

Op een desktop staan de vier kolommen nog steeds in één regel. Versmal het browservenster onder 768 pixels en ze wrappen twee bij twee. Onder 576 pixels stapelen ze, één per regel, in de volgorde die je in de editor ziet.

Een lay-out geldt vanaf zijn schermgrootte omhoog, totdat een grotere schermgrootte zijn eigen lay-out heeft. Elke nieuwe rij begint met één lay-out voor Medium devices (≥ 768px), dus zijn kolommen stapelen op telefoons en kleine tablets. Remove screen size in een paneel verwijdert die lay-out weer.

Spiegel de volgorde op brede schermen

Open het More-menu van de rij, kies Settings en schakel Mirror row in. Vanaf 768 pixels tonen de kolommen in omgekeerde volgorde; op kleinere schermen stapelen ze in editorvolgorde.

Gebruik het voor afwisselende rijen met foto en tekst. Zet de foto eerst in de editor, zodat telefoons hem boven de tekst tonen, en spiegel elke tweede rij zodat desktops de foto rechts tonen.

Toon of verberg een element per schermgrootte

  1. Open het More-menu van het element en kies Settings.
  2. Kies onder HTML classes een chip uit de groep Responsive Visibility, bijvoorbeeld Hidden on extra small devices, phones (<576px).
  3. Klik op Save.

Elke Hidden on-chip verbergt het element op slechts één schermgrootte. Elke Visible on-chip toont het op die ene grootte en verbergt het overal elders.

Schermgroottes

Label in het lay-outdialoogvenster Schermbreedte
Extra small (< 576px) Telefoons in portret
Small devices (≥ 576px) Grote telefoons, kleine tablets
Medium devices (≥ 768px) Tablets
Large devices (≥ 992px) Laptops
Extra large (≥ 1200px) Desktops
Extra extra large (≥ 1400px) Grote desktops

Een Positioned layers-element heeft zijn eigen Responsive-schakelaar, standaard uit. Schakel hem in om de canvashoogte en zijn tekst met de vensterbreedte mee te schalen, zodat de compositie zijn verhoudingen behoudt.

Als je de wijziging niet ziet

  • Kolommen stapelen nog steeds op een tablet. De rij heeft geen lay-out voor die schermgrootte, dus de kolommen stapelen onder 768 pixels. Open het gridpictogram van de rij, klik op Add screen size en kies Small devices (≥ 576px).
  • Een element verdween op elke schermgrootte. Hij draagt twee Visible on-chips, en elk verbergt hem waar de ander hem toont. Houd er één, of gebruik Hidden on-chips, één per te verbergen grootte.
  • Mirror row doet niets op een telefoon. Mirror row werkt vanaf 768 pixels omhoog. Om de volgorde op telefoons te wijzigen, verplaats je de kolommen in de editor.

Wat nu?