Vad du kommer att bygga
I slutet av den här guiden har du en komplett landningssida med: - Hero-avsnitt med rubrik, underrubrik och CTA-knapp - Social proof-rad (logotyper eller vittnesmål) - Funktionsavsnitt (3-kolumns grid) - Prisavsnitt - FAQ-accordion - Leadfångstformulär (kopplat till Supabase eller Make webhook) - Publicerat på en anpassad domän med HTTPS
Total byggtid: 4–6 timmar för ett första bygge, 1–2 timmar när du gjort det förut. Landningssidan kan ha en svensk version och en engelsk version med olika URL-slugs för att nå olika målgrupper.
Steg 1: Sätt upp ditt projekt
Skapa ett nytt WeWeb-projekt. Välj "Blank" — använd inte en mall om du vill ha full kontroll över strukturen.
Första inställningssteg: 1. Sätt ditt standardtypsnitt i Project Settings → Fonts. Importera ett Google Font (Inter eller Plus Jakarta Sans fungerar bra för SaaS). 2. Sätt dina varumärkesfärger som designtokens i Styles-panelen: primär, sekundär, text, bakgrund, kant. 3. Sätt sidbredden: max-width 1280px, centrerad, med 24px horisontell utfyllnad på mobil.
Investera 20 minuter här. Att få tokens rätt nu sparar timmar av inkonsekvens senare.
Steg 2: Bygg hero-avsnittet
Hero-avsnittet är det viktigaste — bygg det först.
Struktur: - section-element (full viewporthöjd, centrerat innehåll) - div med badge/pill (valfritt, t.ex. "Nu i beta") - h1 (primär rubrik — resultatet) - p (underrubrik — vem det är för, hur det fungerar) - div (CTA-knappar — primär + valfri sekundär) - div (hero-bild eller produktskärmbild)
WeWeb-tips: - Använd ett Section-element, inte en Container, så bakgrunden sträcker sig full bredd - Sätt H1-teckenstorleken med en WeWeb-breakpoint-variabel: 56px desktop, 40px tablet, 32px mobil - Lägg till en gradient eller subtil noise-textur på bakgrunden
Steg 3: Social proof och funktioner
Social proof-rad: placera den direkt under hero. Använd en Flexbox-rad med justify-content: center, gap: 32px. Lägg till företagslogotyper (SVG eller WebP, grå/opacitet 60 %).
Funktionsavsnitt: - Container med ett 3-kolumns Grid (CSS Grid, gap: 24px) - Varje kort: ikon (24px), H3 (funktionsnamn), P (en menings beskrivning) - Lägg till en subtil kant (1px solid rgba(255,255,255,0.08)) för separation utan tyngd
WeWeb-genväg: skapa ett funktionskort, styla det, duplicera det 2× och uppdatera innehållet. Bygg inte varje kort från grunden.
Steg 4–5: Prissättning och FAQ
Prisavsnitt: en tre-kolumns prislayout är SaaS-standarden. Bygg med CSS Grid: tre lika kolumner, mittenkolumn markerad (annan bakgrund, "Mest populär"-badge).
Varje priskort behöver: plannamn (H3), pris + faktureringsperiod (i SEK för den svenska marknaden om tillämpligt), 4–6 funktionspunkter (använd WeWeb List-komponent), CTA-knapp.
WeWeb-trick: bind priskortets innehåll till en WeWeb-variabel (array av objekt). Det låter dig ändra priser och funktioner från ett dataobjekt — alla tre kort uppdateras automatiskt.
FAQ-accordion: skapa en variabel openFaqIndex (typ: Number, standard: -1). Varje frågas klick sätter openFaqIndex = index för detta objekt. Visa/dölj varje svarsdiv: lägg till ett villkor "openFaqIndex === thisIndex". Korrekt accordion, noll JavaScript skrivet.
Steg 6–7: Formulär och publicering
Formulär: Lägg till ett formulär ovanför sidfoten. Håll det minimalt: namn, arbets-e-post, CTA-knapp. Koppla till Supabase: lägg till Action vid submit: "Insert row" → din Supabase "leads"-tabell. Koppla till Make: skapa ett Make webhook-scenario, använd HTTP Request-åtgärden i WeWeb.
Lägg alltid till ett honeypot-fält (dolt inmatningsfält som riktiga användare aldrig fyller i — bots gör det). Filtrera bort inlämningar där honeypot-fältet inte är tomt.
Publicering: I WeWeb, gå till Hosting → Custom Domain. Lägg till din domän, WeWeb ger dig en CNAME-post att lägga till hos din DNS-leverantör. WeWeb provisionerar automatiskt ett SSL-certifikat.
Inan publicering: kontrollera varje avsnitt vid 375px, 768px och 1280px. Kör en Lighthouse-revision — target 90+ prestanda. Kontrollera SEO-inställningar inkl. meta description på svenska och lägg till ditt Plausible-snippet (GDPR-kompatibelt alternativ till Google Analytics).