Hoe lang duurt het om een landingspagina te bouwen in WeWeb?

Een ervaren WeWeb-gebruiker bouwt een professionele landingspagina (hero, functies, sociale proof, prijzen, footer) in 4-8 uur. Een beginner heeft 1-3 dagen nodig inclusief het leren van de editor. De leercurve van WeWeb is steiler dan Webflow voor beginners, maar vlakt snel af en je bent ook klaar om je productapp te bouwen in dezelfde editor.

Kan je een A/B-test uitvoeren op een WeWeb-landingspagina?

Niet natively in WeWeb, het heeft geen ingebouwde A/B-testfunctionaliteit. Gebruik Google Optimize (gratis, maar wordt uitgefaseerd) of VWO voor A/B-testen op WeWeb-pagina's. Je kunt ook handmatig A/B-testen door twee aparte WeWeb-pagina's te maken en verkeer te verdelen via een URL-parameter of Vercel Edge Functions als je WeWeb zelf host.

Hoe voeg je een contactformulier toe aan een WeWeb-landingspagina?

Voeg een Formulier-component toe in WeWeb. Configureer de onSubmit-actie: stuur de formulierdata naar een Xano API-eindpunt (POST /api/contact), dat vervolgens een Make-scenario triggert dat de data per e-mail stuurt, de lead aanmaakt in je CRM en een bevestigingsmail stuurt. Alternatief: gebruik WeWeb's directe Make-integratie in de workflow-builder voor eenvoudige formulieren.

Welke WeWeb-plan heb je nodig voor een productie-landingspagina?

Het Starter-plan (49 USD per maand) is voldoende voor een landingspagina met één domein. Het Business-plan (149 USD per maand) is nodig als je meerdere pagina's of projecten hebt, of als je de 10-collection-items-per-pagina-limiet van Starter overschrijdt voor dynamische contentpagina's. Voor alleen een statische landingspagina zonder dynamische collecties is Starter toereikend.

Landing Page bouwen met WeWeb

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.

Landing Page bouwen met WeWeb: Tutorial voor beginners

WeWeb-projectopzet

Hero-sectie bouwen

Functiessecties en sociale proof

Prijzensectie

SEO en publiceren

Questions fréquentes