De editor in één oogopslag
Bovenaan staat de kopregel: “← Je websites” brengt je terug naar het overzicht, “Pagina kiezen” wisselt tussen startpagina en subpagina's, “Desktop”, “Tablet” en “Telefoon” schakelen het voorbeeld om, ↶ en ↷ maken ongedaan en voeren opnieuw uit. Daarnaast zie je of alles is opgeslagen, hoeveel er in je AI-balk vrij is, “Meenemen”, de status van de pagina en helemaal rechts “Publiceren”.
Links staan de werkruimtes in drie groepen: onder “Website ontwerpen” “Website”, “Secties”, “Pagina's en menu”, “Menu en voettekst”, “Kleuren en lettertype” en “Bewerken met Kenji”; onder “Tools koppelen” ShopBuilder, FormBuilder en DomainStudio; onder “Beheren” “Instellingen”, “Leden”, “Bij Google” en “Bedrijf”. In het midden staat je echte pagina, rechts de tool voor wat je aanklikt.
“Instellingen” bundelt het belangrijkste van een website: “Naam van de website” en “Taal van de website” — de taal geldt voor vaste woorden zoals knoppen, contact en foutmeldingen; je eigen teksten worden niet vertaald —, plus “Meenemen” en “Website verwijderen”. Voor alles wat al een eigen plek heeft, staat daar alleen de weg ernaartoe: “Bij Google”, “Leden” en “Adres in DomainStudio”. Heeft de website een merk, dan staat dat daar met “Toewijzen in BrandStudio”.
Op kleinere schermen, ook op veel laptops, toont de editor één kolom tegelijk: onderaan wissel je tussen “Secties”, “Voorbeeld” en “Tool”, en de werkruimtes zitten achter “Werkruimte kiezen”. Op de telefoon zitten de AI-weergave, “Meenemen”, de status van de pagina en “Offline halen” achter “Meer tonen”.
Opslaan gaat vanzelf. Staat er in de kopregel “Niet opgeslagen”, dan noemt een rode regel de reden, met “Opnieuw opslaan” ernaast.
Direct op de pagina typen
Koppen, alinea's, knopteksten en de punten in lijsten wijzig je daar waar ze staan: klik in de tekst en typ. Het voorbeeld is je echte pagina, geen nabootsing ernaast.
Enter past toe, Escape zet de oude tekst terug. Een tekst is altijd één regel — regeleinden worden spaties. Links leiden in de editor nergens heen; een klik selecteert alleen.
Kort na het typen wordt er opgeslagen, in het concept. Online verandert er pas iets als je publiceert.
- Klik in het voorbeeld op de tekst die je wilt wijzigen.
- Typ de nieuwe tekst.
- Druk op Enter of klik ernaast om hem toe te passen — Escape verwerpt wat je hebt getypt.
Typen kost geen AI-tegoed.
Wat er in de voettekst staat
De voettekst vul je in de werkruimte “Menu en voettekst” onder “Voettekst”. De contactregels komen uit je bedrijfsgegevens en worden daar bijgehouden. Onder “Bestaande pagina’s linken” leg je per pagina vast of die “Niet in de voettekst” staat, in de “Linklijst” of bij de “Juridische links” — ongeacht of ze bovenaan in het menu staat. Daar verschijnen alleen openbare pagina's, nooit een pagina die alleen voor leden is.
“Eigen links” bestaan uit een linknaam en een linkdoel: een pagina van je website, een sectie of een adres met https://, mailto: of tel:. Een doel dat niet veilig is, accepteert het veld niet. Onder “Sociale netwerken” kies je de “Bron van profielen” — je bedrijfsgegevens of eigen profielen voor de voettekst, hoogstens tien; bekende netwerken verschijnen met hun pictogram en hun naam voor schermlezers.
Met “Eigen kolommen” orden je tot vier kolommen met een kop, elk met tot tien items: pagina's, links, contact, sociale netwerken. “Afsluiten met een actie” plaatst een knop aan het eind; zonder eigen tekst neemt die de knop uit het kopgedeelte over. De “Voettekstnotitie” is een vrije regel onderaan de pagina. Naar het impressum van je merk linkt de voettekst vanzelf.
- Open “Menu en voettekst” en kies bovenaan “Voettekst”.
- Open een onderdeel, bijvoorbeeld “Eigen links”, vul linknaam en linkdoel in en klik op “Link toevoegen”.
- Controleer “Je voettekst in het voorbeeld” en klik op “Ontwerp opslaan”.
Een begonnen link of een half ingevuld profiel moet eerst worden toegevoegd of leeggemaakt, anders kan de vormgeving niet worden opgeslagen.
Je winkel op de pagina zetten
Heb je een winkel in ShopBuilder ai, dan breng je die op twee manieren naar je website: als eigen sectie op een pagina of als item in het menu. Een klik op “ShopBuilder” in de balk toont je winkels naast de pagina, elk met zijn actieve producten en categorieën: “Invoegen” plaatst hem als nieuwe sectie na de sectie die je hebt gekozen, “In het menu” zet hem als item in het menu. In de sectie kies je rechts de “Weergave”: “Assortiment” toont je aanbod midden op de pagina, “Alleen knop” leidt met een knop naar de winkel. Je kunt de sectie ook via “+ Sectie toevoegen” → “Shop” plaatsen en rechts de winkel kiezen.
Wat de sectie toont, stel je rechts in onder “Wat tonen?”: “Het hele assortiment”, “Eén categorie” of “Afzonderlijke producten” — hoogstens 24, in de volgorde van je vinkjes, te herschikken met ↑ en ↓. Daarnaast zijn er “Volgorde”, “Hoogstens” (0 betekent: alles tonen), het “Zoekveld boven de producten” en “Categorieën als filter tonen”; het zoekveld is er vanaf vier producten in de selectie, de categorieën vanaf twee. Dezelfde winkel mag meerdere keren op een pagina staan, elke sectie met een eigen selectie; kies je in de sectie een andere winkel, dan begint de selectie opnieuw. Geef je een categorie in ShopBuilder een andere naam, dan meldt de sectie dat en kies je opnieuw.
Het assortiment neemt de kleuren en het lettertype van deze website over, zodat het niet als een vreemde eend in de bijt oogt; je opgeslagen shopontwerp blijft onaangeroerd. Kopen gebeurt altijd in de winkel: elke klik op een product of in de winkelwagen leidt naar het adres van je winkel, waar de kassa en de betaling zitten. Een tweede kassa in de website is er niet.
Je kunt alleen je eigen winkels kiezen. Onder de keuze staat hoe het met de winkel gesteld is: “Shop bereikbaar”, “Deze shop heeft nog geen actieve producten.” — dan verschijnt alleen de knop — of “Deze shop is nog niet openbaar bereikbaar.” Bezoekers zien een winkel die nog een concept is niet; op zijn plaats staat een korte zin.
- Kies op de pagina de sectie waarna de winkel moet komen, en klik links onder “Tools koppelen” op “ShopBuilder”.
- Klik naast de pagina bij je winkel op “Invoegen” — of op “In het menu”.
- Stel rechts onder “Weergave” en “Wat tonen?” in wat de sectie toont.
- Publiceer de website; pas dan verschijnt de koppeling.
“Meer opties” onder de lijst opent de brede werkruimte: daar kies je winkel, weergave en selectie al vóór het invoegen en klik je op “Aan deze pagina toevoegen” of “Aan menu toevoegen”. Producten, prijzen en bestellingen beheer je in ShopBuilder ai — meer in het hoofdstuk ShopBuilder ai.
Secties toevoegen, ordenen, dupliceren en verwijderen
Elke pagina is een reeks secties. Via “Secties” open je links de lijst: bovenaan het “Kopgedeelte”, daaronder de secties in de volgorde van de pagina. Een klik springt in het voorbeeld daarheen.
Nieuwe secties voeg je toe met “+ Sectie toevoegen”; de catalogus “Wat voor sectie?” toont elk type met een kleine tekening. De nieuwe sectie komt na de gekozen sectie. Ordenen doe je door te slepen of met de pijlen ↑ en ↓ — dat werkt ook zonder muis.
Rechts bij de gekozen sectie staan “Sectie dupliceren” — de kopie komt zonder afbeelding — en “Sectie verwijderen”, met een bevestigingsvraag. Een pagina bevat tot 14 secties; elke subpagina heeft haar eigen lijst.
- Klik links op “Secties”.
- Kies een sectie, klik op “+ Sectie toevoegen” en daarna op een type.
- Sleep secties naar hun plek of gebruik ↑ en ↓.
- Verwijderen: klik op de sectie, rechts op “Sectie verwijderen” en dan op “Ja, verwijderen”.
Niets hiervan kost AI-tegoed, en “Ongedaan maken” brengt een verwijderde sectie terug.
Tien soorten secties
“Tekst” voor alles wat vertelt, desgewenst met afbeelding. “Diensten” voor punten naast elkaar. “Contact” met adres, telefoon, e-mail, openingstijden en een formulier dat echt verstuurt. “Oproep tot actie” is een gekleurde band met een knop. “Vragen & antwoorden” klapt open en dicht. “Klantervaringen” toont citaten, “Prijzen” aanbiedingen als infokaarten zonder kassa. “Afbeelding” is een grote afbeelding met onderschrift, “Formulier” voegt een formulier uit FormBuilder ai in, “Shop” je winkel.
Diensten, vragen & antwoorden, klantervaringen en prijzen bestaan uit “Punten”. Rechts beheer je ze: twee velden per punt, “+ Punt toevoegen” tot twaalf, ↑ en ↓ om te ordenen, ✕ om te verwijderen. Nieuwe secties komen met neutrale plaatshouders — geen verzonnen klantervaringen, geen verzonnen prijzen.
Vragen en antwoorden komen bovendien machineleesbaar in de pagina, zodat Google ze kan herkennen. Meer soorten zijn er bewust niet: elke soort moet in elke stijl goed ogen en op de telefoon werken.
- Klik in het voorbeeld op een sectie met punten, bijvoorbeeld “Prijzen”.
- Wijzig rechts onder “Punten” de velden; de wijziging wordt toegepast zodra je een veld verlaat.
- Klik op “+ Punt toevoegen” voor nog een punt.
De plaatshouders van nieuwe secties bestaan in het Duits en het Engels; op een website in een andere taal overschrijf je ze gewoon.
Het kopgedeelte
De kop van elke pagina heeft drie opbouwvormen: “Tekst gecentreerd” — een afbeelding, als die er is, staat eronder —, “Afbeelding als achtergrond” met een verduisterde afbeelding en lichte tekst, en “Tekst links, afbeelding rechts”. “Afbeelding als achtergrond” heeft een afbeelding nodig; ontbreekt die, dan toont de pagina “Tekst gecentreerd”, en rechts staat vooraf “Hiervoor is een afbeelding nodig — kies er hieronder een.”
De kop, de zin eronder en de knoptekst typ je direct op de pagina. Zonder knoptekst is er op de gepubliceerde pagina geen knop. Waar hij naartoe leidt, kies je onder “De knop leidt naar” (zie Knoppen verwijzen naar pagina's). De kopbalk toont dezelfde knop rechtsboven als er een contactsectie is of als de knop een doel heeft.
- Klik in de lijst met secties op „Kopgedeelte” of klik in de voorvertoning bovenaan de pagina.
- Kies rechts onder „Opbouw” een van de drie vormen.
- Voeg zo nodig met „Afbeelding kiezen” een afbeelding toe.
Geen afbeelding gebruiken is geen noodoplossing: een rustig kopgedeelte met een heldere zin is vaak een betere opening dan een stockfoto.
Achtergrond, kant van de afbeelding, uitlijning
Voor elke sectie kies je rechts een „Achtergrond”: „Zoals de pagina”, „Licht vlak” of „Zacht accent”. Bij „Tekst” bepaal je onder „Afbeelding naast de tekst” of er links, rechts of helemaal geen afbeelding naast staat; „Uitlijning” zet de tekst „Links” of „Gecentreerd”.
Deze paar schakelaars bepalen het ritme van de pagina — afwisselende banden scheiden onderwerpen beter dan welke lijn ook. De band „Oproep tot actie” staat altijd op de accentkleur; de achtergrond ervan kun je niet wijzigen.
- Klik in de voorvertoning op een sectie.
- Kies rechts de „Achtergrond”, bij tekstsecties „Afbeelding naast de tekst”, en de „Uitlijning”.
Apparaatvoorvertoning
Met „Desktop”, „Tablet” en „Telefoon” in de kopregel zie je de pagina op volle breedte, 768 en 390 pixels breed. Het is geen nabootsing, maar je eigen pagina in een smaller kader — de inhoud loopt precies zo door als bij bezoekers, inclusief het menu dat op de telefoon uitklapt.
De meeste bezoekers komen binnen via hun telefoon. Daar even naar kijken voordat je publiceert, is de goedkoopste test die er bestaat.
- Klik bovenaan op „Telefoon”.
- Scrol door de pagina en controleer het menu, de afbeeldingen en de knoppen.
- Met „Desktop” ga je terug naar de volle breedte.
Ongedaan maken en opnieuw uitvoeren
Met ↶ en ↷ in de kopregel maak je stappen ongedaan en voer je ze opnieuw uit — tot vijftig, zolang de editor open is. Dit is bedoeld voor de pagina zelf: getypte teksten, secties die je hebt toegevoegd, verplaatst, gedupliceerd of verwijderd, de punten van een sectie, het lettertype en een wijziging door Kenji.
„Ongedaan maken” draait niet terug wat op een eigen manier wordt opgeslagen: de gegevens onder „Bedrijf”, „Bij Google”, „Pagina's en menu”, „Menu en voettekst” en „Leden”. Na het sluiten is de geschiedenis weg; de gepubliceerde pagina blijft ongewijzigd tot je opnieuw publiceert.
- Klik op ↶ (Ongedaan maken) om de laatste stap terug te draaien.
- Klik op ↷ (Opnieuw uitvoeren) om die stap terug te halen.
Ongedaan maken kost geen AI-tegoed. Draai je daarmee een wijziging door Kenji terug, dan blijft het daarvoor verbruikte AI-tegoed verbruikt.
Wijzigen met Kenji
In plaats van velden te zoeken, zeg je tegen Kenji wat er anders moet: „Maak de kop korter en voeg een sectie over ons ontbijt toe.” Je praat met hem in het Kenji-venster rechtsonder — hetzelfde venster als overal bij KENJTEC. Bovenaan staat waar je aan werkt: de tool, de naam van je website, de geopende pagina en de sectie die je hebt gekozen. Kenji herschrijft de pagina die op dat moment in de voorvertoning staat, en de wijziging komt in het concept terecht. Kenji kan teksten herschrijven, secties toevoegen, verplaatsen of verwijderen en voor een bepaalde plek een nieuwe afbeelding laten zoeken.
Kenji antwoordt in woorden: eerst zegt hij in één zin wat hij doet, dan wijzigt de editor de pagina, en daaronder staat „Klaar — de wijziging staat in het concept. Online gaat ze pas met ‘Publiceren’.” Stel je alleen een vraag, zoals „Wat kan ik aan deze pagina verbeteren?”, dan antwoordt hij in plaats van iets te wijzigen. Heb je net iets getypt, dan slaat de editor dat eerst op; lukt dat niet, dan wijzigt Kenji niets en staat in het venster „Eerst opslaan — je laatste versie is nog niet bewaard.”
Onaangeroerd blijven je bedrijfsgegevens, pagina's en menu, de vormgeving van menu en voettekst, de instellingen bij Google, je eigen kleuren, de instellingen van je merk en je code in de ontwikkelaarsmodus. Kleuren die je zelf hebt gekozen of die uit het merk komen, veranderen daarom niet door een zin aan Kenji — daarvoor is „Kleuren en lettertype” er.
Bevalt het resultaat je niet, dan haalt „Ongedaan maken” in de editor de vorige stand terug.
- Klik in de editor links op „Bewerken met Kenji” — of rechtsonder op de ronde knop met de K.
- Typ in het veld „Zeg wat er moet veranderen — of vraag me iets …” wat je wilt en druk op Enter.
- Wacht tot in het venster „Klaar” staat en de voorvertoning de nieuwe stand toont.
Elke wijziging via het gesprek verbruikt AI-tegoed; mislukt ze, dan wordt er niets in rekening gebracht. Is je AI-balk leeg, dan vult die zich vanzelf weer aan, of je koopt er een AI-pakket bij — zie Account en facturering.
Tekstvoorstellen voor één plek
Als één tekst niet goed zit, vraag je voorstellen voor precies die plek. Onder „Bedrijf” → „Teksten” staan de teksten van de startpagina: „Kop in het kopgedeelte”, „Zin eronder”, „Opschrift van de knop”, „Ondertitel van de site”, de kop en tekst van elke sectie en de „Regel in de voettekst”.
Je kunt de tekst daar met de hand wijzigen en met „Toepassen” plaatsen. Of je gebruikt een van de vier knoppen: „Korter”, „Langer”, „Andere toon” of „Drie voorstellen”. Kenji levert drie versies, die onder elkaar staan, en pas met jouw klik wordt er een van ingezet. Tot dan blijft je tekst zoals hij is.
- Klik links op „Bedrijf” en open „Teksten”.
- Klap de plek open die je wilt wijzigen.
- Klik op „Korter”, „Langer”, „Andere toon” of „Drie voorstellen”.
- Klik op de versie die je bevalt — die staat meteen in het concept.
De voorstellen verbruiken AI-tegoed; een versie overnemen of de tekst met de hand wijzigen kost geen AI-tegoed.