Module 3 · 3.4
Secties toevoegen, verplaatsen en maten slepen
Module 3: Teksten, foto's en secties · Leestijd: 10 minuten
Leerdoel: Na deze les kun je een pagina opbouwen uit secties: een sectie toevoegen via de kiezer of de chat, verplaatsen, kopiëren en weghalen, ruimte en maten slepen, en per sectie kolommen, hoeken, achtergrond en zichtbaarheid op mobiel kiezen.
Kernbegrippen: sectie, Onderdelen, Onderdeel toevoegen, vorm, Sectie hieronder, drie ontwerpen, Maak met AI, Sectie bewerken, Ruimte, Tussenruimte, Kolommen, Hoeken, Verberg op mobiel, greep, Eigen HTML
Een pagina is een stapel secties
Elke pagina van je site bestaat uit secties: horizontale banen die onder elkaar staan. Bovenaan meestal een Hero (de grote opening met kop, tekst en knop), daaronder bijvoorbeeld Kaarten met je diensten, Reviews, Openingstijden en onderaan Contact. De bouwer heeft 35 soorten, elk in een of meer vormen: dezelfde inhoud, anders opgemaakt.
Wie zo denkt, bouwt een betere pagina. Zet de belangrijkste informatie bovenaan, één onderwerp per sectie, en eindig met wat de bezoeker moet doen (bellen, mailen, een offerte vragen). Bij Schildersbedrijf Example ziet de homepage er zo uit: Hero met "Vraag een offerte", Kaarten met drie diensten, Foto en tekst over werkwijze, Reviews, Vragen en Contact.
Een sectie toevoegen: drie routes
1. Zelf kiezen in de kiezer (gratis)
Open het paneel Onderdelen in de rail, of klik in het voorbeeld op Sectie hieronder: die knop staat in de werkbalk van een gekozen sectie en op de lijn met + die verschijnt als je tussen twee secties beweegt. Onder het voorbeeld staat ook Onderdeel toevoegen.
De kiezer toont de soorten in groepen: Populair, Opening en kop, Tekst en verhaal, Diensten en producten, Prijzen en acties, Vertrouwen en team, Foto en video, Praktische info, Contact en oproep en Eigen en widgets. Er is een zoekvak ("Zoek, bijvoorbeeld reviews, prijzen of team"). Elke soort zie je als voorbeeld in je eigen huisstijl. Klik op een soort om de vormen te zien en kies er een met Toevoegen. Kwam je er niet via een bepaalde sectie, dan vraagt de bouwer "Waar moet ... komen?": klik in je pagina op een groene lijn, of kies Bovenaan of Onderaan. Je kunt een onderdeel ook rechtstreeks vanuit het paneel naar je pagina slepen.
Dit kost niets. De nieuwe sectie komt met voorbeeldteksten die je daarna zelf aanpast (les 3.2) of door de AI laat invullen (les 3.1). Belangrijk: zolang er nog zulke voorbeeldtekst op je site staat, zet de bouwer je site niet online. Je krijgt dan "Er staat nog voorbeeldtekst op je site. Vul die eerst in of haal de sectie weg."
2. Vragen in de chat: drie ontwerpen
Typ je in de chat "Ik wil een sectie met onze werkwijze in vier stappen", dan laat de AI eerst drie passende ontwerpen uit de sectiebibliotheek zien, in je huisstijl. Je kiest met Dit ontwerp, of klikt op Laat de AI kiezen. Daarna vult de AI de sectie met inhoud, als voorstel. Omdat er een sectie bijkomt, kost dat 2 bewerkingen.
Zeg je dat iets in een bestaande sectie moet ("zet de openingstijden in het contactblok"), of noem je een dienst als Spotify of Calendly met een link, dan slaat de bouwer de drie ontwerpen over: dan is duidelijk wat je wilt.
3. Zelf een onderdeel laten maken
Staat wat je zoekt er niet tussen? Bovenaan de kiezer staat Maak je eigen onderdeel met AI. Beschrijf wat bezoekers moeten kunnen doen, bijvoorbeeld een prijscalculator of een korte quiz, en klik op Maak met AI. Dat kost 2 bewerkingen, want er komt een nieuw onderdeel bij.
Verplaatsen, kopiëren en weghalen
Beweeg over een sectie. Er verschijnt een werkbalk met Aanpassen met AI, Omhoog, Omlaag, Dupliceer, Sectie hieronder en Verwijder, en een greep om de sectie te verslepen ("Versleep deze sectie naar een andere plek"). Bij Verwijder vraagt de bouwer eerst "Zeker?". Ook losse onderdelen binnen een rij, zoals één kaart of één review, kun je verslepen, dupliceren en weghalen.
Al deze knoppen zijn gratis. Elke actie maakt een nieuwe versie ("Sectie verplaatst (versie ...)"), dus een verkeerd weggehaalde sectie zet je terug via Versies (les 3.5). Weghalen via een opdracht in de chat kost wel een bewerking: gebruik dus de knop.
Maten slepen
Beweeg in het voorbeeld over een sectie, foto of tekst en er verschijnen grepen. Slepen is gratis en zonder AI:
- Onderrand van een sectie: meer of minder ruimte boven en onder de sectie.
- Hero: hoger of lager maken.
- Foto: breder of smaller, hoger of platter (de vorm), ronder of rechter hoeken, en het focuspunt (les 3.3).
- Tekstblok: breder of smaller (rechterrand).
- Kop: groter of kleiner, en de ruimte eronder.
- Rij kaarten of kolommen: de breedte van de hele rij.
Dubbelklik op een greep en de standaardmaat komt terug; bij de hero kiest de bouwer dan zelf weer de hoogte.
Waarom slepen beter is dan "maak het groter" vragen: je ziet direct wat er gebeurt, het kost niets, en de AI verandert onderweg geen tekst.
Sectie bewerken: de instellingen van één sectie
Klik op een sectie en kies Sectie bewerken. Er gaat een venster open met:
| Instelling | Keuzes |
|---|---|
| Achtergrond | Automatisch, Geen, Licht vlak, Tint, Donker, Hoofdkleur, Gradient |
| Ruimte | van 50% tot 300%, of Standaard |
| Tussenruimte (tussen kaarten of kolommen) | 0 tot 96 px, of Standaard |
| Kolommen (bij een rij kaarten) | 1 tot 6, of Standaard |
| Hoeken | 0 tot 48 px, of Standaard |
| Hoogte (alleen bij de hero) | 40% tot 100%, of Standaard |
| Verberg op mobiel | aan of uit |
Daaronder staan dezelfde knoppen als in de werkbalk (Omhoog, Omlaag, Dupliceer, Sectie hieronder, Verwijder), en onder "Of vraag de AI iets anders:" een tekstvak voor een AI-opdracht over alleen deze sectie.
Een paar adviezen. Wissel achtergronden af (licht vlak, geen, tint), zodat bezoekers zien waar een onderwerp ophoudt. Gebruik op een rij kaarten hoogstens drie of vier kolommen; op een telefoon komen ze toch onder elkaar. Wees zuinig met Verberg op mobiel: verberg nooit je contactgegevens of iets wat een mobiele bezoeker nodig heeft. Wil je controleren hoe het eruitziet, kies dan Mobiel in de topbalk.
Eigen HTML
In de groep Eigen en widgets staat ook Eigen HTML: een sectie waarin je zelf HTML en, als je wilt, CSS plakt. Na het plaatsen pas je hem aan met HTML bewerken op de sectie. Kleuren en letters volgen je huisstijl via variabelen als var(--acc), var(--tekst) en var(--kop-font). De CSS geldt alleen voor deze sectie.
De beperkingen zijn bewust: scripts, iframes en formulieren werken hier niet. Voor een speler, agenda, kaart of formulier van een andere dienst gebruik je de Widget (les 4.3). Eigen HTML is voor wie HTML kent; voor alle anderen zijn de gewone secties en de AI de snellere weg.
Valkuilen
- Voorbeeldtekst laten staan in een sectie uit de kiezer: dan kun je niet online zetten.
- Te veel secties. Een lange pagina met tien secties wordt niet gelezen. Haal weg wat niets toevoegt. Een pagina heeft hoogstens 40 secties, maar zoveel heb je nooit nodig.
- Ruimte via de chat regelen. Dat kost bewerkingen en is minder precies dan slepen.
- Alleen op de computer kijken. Kolommen, ruimte en verbergen werken anders op een telefoon.
- Weghalen in de chat terwijl de knop Verwijder gratis is.
In de bouwer: zo doe je het
- Klik in het voorbeeld op Sectie hieronder, of open Onderdelen.
- Kies een groep, een soort en een vorm, en klik op Toevoegen.
- Vervang de voorbeeldteksten zelf of met de AI.
- Verplaats met Omhoog, Omlaag of de greep; dupliceer of verwijder via de werkbalk.
- Sleep aan de onderrand voor ruimte; dubbelklik om terug te gaan naar standaard.
- Open Sectie bewerken voor achtergrond, kolommen, hoeken, hero-hoogte en Verberg op mobiel.
- Controleer op Mobiel.
Samenvatting
- Een pagina is een stapel secties; 35 soorten, elk in een of meer vormen.
- Toevoegen via de kiezer is gratis en geeft voorbeeldtekst die je moet vervangen voor je online kunt; via de chat krijg je drie ontwerpen en kost het 2 bewerkingen.
- Verplaatsen, dupliceren, weghalen en maten slepen zijn gratis; dubbelklik op een greep zet de standaard terug.
- Sectie bewerken regelt achtergrond, ruimte, tussenruimte, kolommen, hoeken, hero-hoogte en Verberg op mobiel.
- Eigen HTML kan, maar zonder scripts, iframes en formulieren; daarvoor is de widget.
Quiz
Opdracht
Opdracht D3.4: Een sectie erbij, een eruit. Verbeter de opbouw van je homepage met de knoppen en grepen, zonder onnodige AI-opdrachten.
Checklist:
- [ ] de secties van je homepage van boven naar beneden opgeschreven;
- [ ] één sectie toegevoegd via de kiezer en alle voorbeeldtekst vervangen;
- [ ] één sectie weggehaald of samengevoegd die niets toevoegde, met Verwijder;
- [ ] één sectie verplaatst met Omhoog, Omlaag of de greep;
- [ ] de ruimte van minstens één sectie gesleept, en één keer met dubbelklikken teruggezet;
- [ ] in Sectie bewerken de achtergrond of de kolommen aangepast;
- [ ] de pagina op Mobiel bekeken.
Vragen:
- Hoe zag de volgorde van je secties eruit voor en na, en waarom koos je deze volgorde?
- Welke sectie heb je weggehaald, en wat mist een bezoeker nu niet?
- Hoeveel bewerkingen kostte deze opdracht je, en welke stap zou via de chat wel bewerkingen hebben gekost?
Na "gedaan" zie je een voorbeeldantwoord: van Hero, Cijfers, Kaarten, Reviews, Contact naar Hero, Kaarten, Foto en tekst (werkwijze), Reviews, Vragen, Contact, zodat de diensten meteen onder de opening staan; de sectie Cijfers is weg omdat de cijfers bedacht waren; de opdracht kostte 0 bewerkingen, terwijl weghalen of een nieuwe sectie via de chat 1 of 2 had gekost.
Opdracht D3.4: Een sectie erbij, een eruit
Deze opdracht doe je zelf; niemand kijkt hem na. Vink af wat je gedaan hebt en markeer de opdracht als gedaan.
Van Hero, Cijfers, Kaarten, Reviews, Contact naar Hero, Kaarten, Foto en tekst (werkwijze), Reviews, Vragen, Contact, zodat de diensten meteen onder de opening staan. De sectie Cijfers is weg omdat de cijfers bedacht waren. De opdracht kostte 0 bewerkingen; weghalen of een nieuwe sectie via de chat had 1 of 2 gekost.
Je vinkjes en aantekeningen blijven alleen in deze browser; we sturen ze nergens heen. Ben je aangemeld, dan bewaren we in Mijn cursussen alleen dat je de opdracht gedaan hebt.