Een rij toevoegen.
Een rij splitst een sectie in kolommen, zodat je inhoud naast elkaar kunt zetten: drie diensten, een foto naast de tekst, een zijbalk naast een artikel. Je kiest de splitsing uit twaalf presets en kunt telefoons een eigen lay-out geven. Lees deze pagina om een rij toe te voegen; voor een rij in een kolom, zie Nesten.
Een rij toevoegen
Het voorbeeld voegt een rij van drie kolommen toe aan een sectie, één voor elke dienst die een team aanbiedt.
- Klik op + op een sectie om de elementenkiezer te openen.
- Kies Rij op het tabblad Lay-out. Deze komt met twee gelijke kolommen.
- Klik op het rasterpictogram (Kolomindeling) op de besturingsbalk van de rij, kies een kolompreset zoals drie gelijke kolommen, en klik op Opslaan.
- Klik op + in een kolom om er inhoud aan toe te voegen.
- Klik op Opslaan op de werkbalk om de pagina te bewaren.
Het rasterpictogram staat direct na de sleepgreep van de rij. Een preset wijzigt de kolommen zodra je erop klikt; Annuleren zet de oude lay-out terug.
Wat je ziet
De drie diensten staan naast elkaar, elke kolom een derde van de breedte van de sectie. Op schermen smaller dan 768 pixels stapelen de kolommen: elke kolom neemt de volledige breedte, in de volgorde van de pagina.
Kolommen zijn slechts zo hoog als hun inhoud, dus een korte kolom eindigt eerder dan de buren. Je merkt het zodra kolommen een achtergrondkleur krijgen; Kolommen met gelijke hoogte trekt ze gelijk.
Je rij instellen
Kolomindelingen
Het rasterpictogram opent een paneel voor elke schermgrootte met een eigen lay-out. Elk paneel toont deze twaalf presets als tegels:
| Preset | Lay-out |
|---|---|
| 1/1 | Eén kolom over de volle breedte |
| 1/2 + 1/2 | Twee gelijke kolommen |
| 1/3 + 1/3 + 1/3 | Drie gelijke kolommen |
| 1/4 + 1/4 + 1/4 + 1/4 | Vier gelijke kolommen |
| 1/6 + 1/6 + 1/6 + 1/6 + 1/6 + 1/6 | Zes gelijke kolommen |
| 1/4 + 1/2 + 1/4 | Smal, breed, smal |
| 1/6 + 4/6 + 1/6 | Smal, heel breed, smal |
| 1/4 + 3/4 | Kwart links, driekwart rechts |
| 3/4 + 1/4 | Driekwart links, kwart rechts |
| 2/3 + 1/3 | Breed links, smal rechts |
| 1/3 + 2/3 | Smal links, breed rechts |
| 5/12 + 7/12 | Iets smal links, iets breed rechts |
Voor elke andere splitsing klik je op Aangepaste indeling en typ je de breedten als
breuken, zoals 1/6 + 5/6. Breedten die samen meer dan 1 zijn, lopen door op
een nieuwe regel. Wanneer je de dialoog opnieuw opent, is Aangepaste indeling gemarkeerd en
toont hij de indeling, zoals Aangepaste indeling (1/6 + 5/6).
Een lay-out per schermgrootte
Het eerste paneel, Middelgrote apparaten (≥ 768px), stelt de lay-out in vanaf tablets. Om ook telefoons te wijzigen klik je bovenaan de dialoog op Schermgrootte toevoegen. Er opent een paneel voor Extra klein (< 576px); kies een andere grootte uit de lijst als je die nodig hebt, en daarna een preset. Schermgrootte verwijderen verwijdert een paneel weer.
Rij- en kolominstellingen
Open More > Settings op de besturingsbalk van de rij, of op de balk van de kolom voor de kolominstelling.
| Instelling | Element | Wat het doet | Standaard |
|---|---|---|---|
| Kolommen met gelijke hoogte | Rij | Rekt elke kolom op tot de hoogte van de hoogste | Uit |
| Rij spiegelen | Rij | Toont de kolommen in omgekeerde volgorde vanaf 768 pixels; gestapelde kolommen behouden hun paginavolgorde | Uit |
| Verticaal centreren | Kolom | Centreert de inhoud in een kolom die hoger is dan de inhoud | Uit |
Rij spiegelen past bij een pagina met afwisselende rijen: foto links, dan foto rechts, terwijl telefoons altijd eerst de foto tonen.
Kolommen verplaatsen en verwijderen
Sleep een kolom aan de greep, of gebruik More > Move Left of Move Right op de balk. Kolommen hebben geen Verwijderen: kies in plaats daarvan een preset met minder kolommen. Inhoud gaat daarbij nooit verloren; die verhuist naar de laatste overgebleven kolom.
Als je het niet ziet
- Verticaal centreren op een kolom verandert niets. De kolom is slechts zo hoog als zijn inhoud, dus er is geen ruimte om in te centreren. Zet Kolommen met gelijke hoogte aan in de instellingen van de rij.
- De kolommen stapelen op een telefoon. Onder 768 pixels is dat de standaard. Klik op het rasterpictogram, dan op Schermgrootte toevoegen, en kies een preset voor Extra klein (< 576px).
- Tekst is in een andere kolom gesprongen. Je koos een preset met minder kolommen, en de inhoud van de verwijderde kolommen verhuisde naar de laatste. Druk op Ctrl+Z (Cmd+Z op een Mac) om de wijziging ongedaan te maken.
- Een kolom heeft geen Verwijderen in het menu More. Kolommen worden via de indeling verwijderd. Klik op het rasterpictogram van de rij en kies een preset met minder kolommen.
Wat nu?
- Nesten: zet een rij in een kolom voor een fijner raster.
- Secties: geef de band rond je kolommen een eigen achtergrond.
- Responsief ontwerp: hoe je lay-out zich aanpast aan elke schermgrootte.