WeWeb-projectopzet
Maak een nieuw WeWeb-project aan. Kies "Blank project" — sjablonen zijn een goed startpunt maar leer je minder over de editor.
Stap 1: Stel je ontwerpsysteem in. In de linker zijbalk, ga naar het Thema-paneel. Definieer: - Primaire kleur (je merkkleuren) - Typografie (kies één kopenlettertype, één bodylettertype) - Rasterinstellingen (standaard 12-kolom raster werkt voor de meeste landingspagina's)
Stap 2: Maak een navigatiecomponent aan. Voeg een Container-component toe aan de bovenkant. Voeg je logo toe (afbeelding of SVG), navigatielinks en een CTA-knop toe. Stel de container in op "Fixed" voor plakkerige navigatie.
WeWeb's componentbibliotheek heeft voorgebouwde navigatiecomponenten — gebruik deze als basis en pas aan voor je merk.
Hero-sectie bouwen
De hero is de meest kritische sectie. Structuur:
1. Voeg een Sectie-component toe (100% breedte, min-hoogte: 80vh) 2. Voeg een Kolommen-component toe (2 kolommen: 60% tekst, 40% afbeelding) 3. Koptekst (H1): je waardepropositie in één zin 4. Subkop: voor wie het is en hoe het werkt 5. Social proof-tekst: "Vertrouwd door 200+ Nederlandse teams" 6. CTA-knop: primaire actie, prominente kleur 7. Hero-afbeelding: schermafbeelding of video van je product
In WeWeb stel je typografie in via de tekstelement's stijlpaneel. Gebruik CSS-klassen ("hero-heading", "hero-subheading") voor consistente stijlen die je overal kunt hergebruiken.
Functiessecties en sociale proof
Na de hero bouw je de overtuigingssectie:
Functiessectie: drie of vier kolommen met een icoon, kopregel en beschrijving per functie. In WeWeb maak je een sjabloonitem en gebruik je de kopieer-functionaliteit om het te herhalen — pas vervolgens de inhoud aan per functie.
Sociale proof sectie: een rij van klantlogos (zwart-wit is standaard) gevolgd door één prominente testimonial-quote. In WeWeb sla je testimonials op in een array in de paginadata of in een Supabase-tabel als je ze wilt beheren zonder herpubliceren.
Hoe-het-werkt sectie: genummerde stappen (1, 2, 3) met een visueel voor elke stap. Dit converteert beter dan het opsommen van functies — bezoekers begrijpen de uitkomst beter.
Prijzensectie
Bouw je prijzensectie als een 3-koloms raster in WeWeb:
Elk prijsplan heeft: plannaam, prijs (groot en prominent), factureringsperiode, functielijst (checkmarks), CTA-knop.
Markeer je aanbevolen plan: gebruik een andere achtergrondkleur (je primaire kleur), voeg een badge toe ("Meest populair"), stel de knop in op je primaire CTA-kleur.
WeWeb-tip: sla je prijsdata op in een object in de paginadata. Dat maakt het wijzigen van prijzen of het toevoegen van functies snel — je hergebruikt het componentontwerp maar wijzigt alleen de data.
Voor Nederlandse B2B SaaS: toon prijzen exclusief BTW met een note "excl. BTW". Voor consumenten-apps toon je de inclusief-BTW-prijs.
SEO en publiceren
Voordat je publiceert, stel je SEO in:
1. Pagina-instellingen (tandwiel-icoon naast paginanaam): voer in Pagina-titel en Meta-beschrijving 2. Open Graph: upload een 1200x630px OG-afbeelding voor social media preview 3. Pagina-URL: zorg dat de slug duidelijk en beschrijvend is (/landingspagina → /gratis-proberen)
Publiceren in WeWeb: 1. Klik "Publish" in de rechterbovenhoek 2. Kies je project (als je al een domein hebt gekoppeld via Settings → Domains) 3. WeWeb deployt naar zijn CDN — je site is live in seconden
Voor je eigen domein: voeg een CNAME-record toe in je DNS-provider dat verwijst naar WeWeb's CDN. WeWeb provisioneert automatisch HTTPS.