De Framer Blueprint

De complete gids voor sterke Framer websites.

Framer is het meest geavanceerde no-code design-to-website platform van dit moment, maar dat brengt een keerzijde mee: een steile leercurve voor wie gewend is aan traditionele websitebouwers, een stortvloed aan community-templates van wisselende kwaliteit, en veel verwarring over wat Framer nu precies is en voor wie het bedoeld is.

Wie door al die informatie heen moet, weet al snel niet meer waar te beginnen.

De Framer Blueprint helpt je daar doorheen te kijken. Binnen het HappyDigital collectief analyseren we de beste Framer websites, freelancers, agencies en tools in Nederland, op basis van wat we zelf zien en testen, niet op basis van affiliate deals of gesponsorde lijstjes.

Leer stap voor stap je Framer website bouwen

Hieronder vind je het meest complete Framer stappenplan van Nederland. Stap voor stap, in de juiste volgorde, opgebouwd vanuit honderden analyses van de beste Framer websites die er zijn.

→ Ga naar het stappenplan

De beste Framer websites

We hebben 100 sterke Framer websites verzameld en geanalyseerd. Het doel van deze lijst is niet inspiratie alleen. Het laat zien wat goed werkende Framer websites gemeenschappelijk hebben: strakke animaties, razendsnel laden, en een designkwaliteit die je van traditionele websitebouwers zelden ziet.

→ Bekijk de beste Framer websites

De beste Framer freelancers

Nederland heeft een groeiende groep Framer specialisten. Maar het niveau verschilt enorm. In deze lijst vind je 25 freelancers die opvallen door designkwaliteit, technisch inzicht en portfolio. Geen willekeurige verzameling, maar mensen waarvan je daadwerkelijk iets kunt leren of aan wie je een project kunt toevertrouwen.

→ Bekijk de beste Framer freelancers

De beste Framer agencies

Naast freelancers zijn er ook bureaus gespecialiseerd in Framer. In deze lijst vind je 25 agencies die laten zien wat er op hoog niveau mogelijk is, van kleine gespecialiseerde designstudio’s tot bureaus die complete digitale identiteiten bouwen in Framer.

→ Bekijk de beste Framer agencies

De beste Framer tools

De echte kracht van Framer zit ook in de tools en plugins daaromheen: componentbibliotheken, animatiepakketten, formuliertools, CMS-koppelingen en performance-uitbreidingen.

We verzamelen hier alleen de tools die daadwerkelijk iets toevoegen.

→ Bekijk de beste Framer tools

De beste Framer content

Er is een groeiende hoeveelheid Framer tutorials en opleidingen beschikbaar. Maar veel ervan is oppervlakkig, verouderd of gewoon niet zo goed.

Daarom verzamelen we hier de beste tutorials, creators en kennisbronnen, gefilterd op kwaliteit, zodat je niet zelf door bergen middelmatige content hoeft te zoeken.

→ Bekijk de beste Framer content

Hoe je deze Blueprint gebruikt

Of je nu op zoek bent naar inspiratie, een leeromgeving of de juiste specialist: deze Blueprint geeft je een concreet vertrekpunt.

De ultieme Framer handleiding

Bouw je eigen professionele website zonder code, dure bureaus of guru-bullshit

Je gaat niet “een beetje aan je website prutsen”.

Je gaat leren hoe je zélf, stap voor stap, een professionele Framer website bouwt die je begrijpt, kunt aanpassen en laten groeien.

Zonder dure bureaus. Zonder techno-bullshit. Zonder guru-trucs die vooral de guru helpen.

Het wordt een gesprek. Jij + Framer + een duidelijke route.

Hoe lees je dit?

Je kunt deze handleiding:

1. Van begin tot eind volgen (aanrader als je voor het eerst een Framer site maakt)
2. Of per hoofdstuk pakken als je al halverwege bent

Volg de stappen in volgorde als je vanaf nul begint. Sla gerust stukken over als je iets al hebt geregeld. Probeer dingen op je eigen site terwijl je leest. Niet alleen lezen. Doen.

1. Wat is Framer

Er zijn honderd manieren om een website te bouwen. WordPress. Webflow. Wix. Squarespace. “Clickfunnels-achtige” dingen. Nog meer shiny tools. Toch wint Framer snel terrein bij designers en marketeers die écht controle willen over hoe hun website eruitziet en aanvoelt. Dat is geen toeval.

Framer is een visueel no-code platform waarmee je een website ontwerpt en publiceert direct in de browser, zonder dat je zelf hoeft te coderen. Het begon als prototypetool voor product designers, maar is uitgegroeid tot een volwaardig publicatieplatform voor websites met serieuze designambities.

Je gebruikt Framer om:

• Pagina’s te bouwen met volledige visuele vrijheid (geen beperkende blokken of thema’s)
• Animaties en interacties toe te voegen zonder code (scroll-animaties, hover-effecten, transitions)
• Een CMS te beheren voor dynamische content zoals blogartikelen, cases of portfolio’s
• Componenten te hergebruiken die je één keer ontwerpt en overal inzet
• Te publiceren op je eigen domein met ingebouwde hosting en CDN

De reden dat steeds meer professionals Framer gebruiken:

• Het geeft designersniveau vrijheid zonder dat je kan coderen
• Animaties en beweging zijn native ingebouwd, niet als losse plugin
• De output is razendsnel: Framer genereert statische HTML/CSS/JS
• Het platform groeit snel en heeft een actieve community

Je wilt dit gewoon snappen, omdat jouw marketing future-proof is als je Framer onder de knie hebt, je niet afhankelijk bent van een developer voor elk designdetail, en je website er werkelijk onderscheidend uitziet in een wereld vol generieke thema’s.

Wanneer gebruik je Framer wel, wanneer niet?

Framer blinkt uit bij: marketing- en landingspagina’s met hoge designlattte, portfolio- en agency websites, SaaS-marketingsites, campagnepagina’s, en websites waarbij animatie en eerste indruk cruciaal zijn.

Framer is minder geschikt voor: grote webshops met honderden producten (gebruik dan Shopify), complexe webapplicaties met veel gebruikerslogica, en sites met een zwaar, op maat gemaakt CMS dat diep geïntegreerd is met externe systemen.

2. Voorbereiding: eerst denken, dan klikken

De grootste fout die beginners maken? Te snel in Framer duiken en beginnen met animaties, kleuren en slick transities. Maar als je niet weet waar de website voor is, krijg je een mooi plaatje zonder resultaat.

2.1 Bepaal het doel van je website

Stel jezelf een paar eerlijke vragen. Wat moet deze site voor je doen?

• Leads verzamelen
• Afspraken laten inplannen
• Producten of diensten verkopen
• Autoriteit bouwen via content

Wat is de belangrijkste actie die een bezoeker moet nemen?

• Contact opnemen
• Kennismaking boeken
• Inschrijven op een lijst
• Direct kopen

Kies één hoofdactie. Alles op de site gaat die actie ondersteunen. In Framer is dit extra relevant: de visuele vrijheid van het platform kan verleiden tot overdesign. Een helder doel houdt je scherp.

2.2 Bepaal je basisstructuur

Voor 90% van de bedrijven werkt deze simpele structuur:

1. Home – snelle samenvatting: wie je bent, wat je oplost, voor wie, en wat de volgende stap is
2. Over – jouw verhaal + vertrouwen
3. Diensten of Aanbod – wat je verkoopt, helder en concreet
4. Blog of Artikelen – om gevonden te worden en expertise te laten zien
5. Contact – zo makkelijk mogelijk contact opnemen of afspraak plannen

We gaan deze pagina’s straks aanmaken in Framer, maar nu weet je alvast: dit is je skelet. In Framer maak je per pagina een apart canvas. Houd die structuur in je hoofd terwijl je ontwerpt.

3. Domeinnaam en account aanmaken

Je hebt twee dingen nodig om je Framer site “echt” online te krijgen: een account bij Framer (inclusief hosting, dat is ingebouwd) en een domeinnaam (bijv. jouwbedrijf.nl).

3.1 Wat is een domeinnaam?

Je domeinnaam is het adres van je website. Net als een straatnaam en huisnummer, maar dan op internet.

Praktische regels:

• Hou het kort en eenvoudig
• Geen rare streepjes, cijfers of moeilijke spelling als het niet hoeft
• .nl voor de Nederlandse markt, .be voor de Belgische markt, .com als je breder of internationaal gaat

Als iemand jouw naam in een gesprek hoort, moet ’ie ’m makkelijk kunnen onthouden en intypen. Dat is de lat.

3.2 Hosting in Framer: ingebouwd en snel

Een groot verschil met WordPress: bij Framer heb je geen aparte hostingprovider nodig. Hosting is ingebouwd in het platform. Framer publiceert je site op een wereldwijd CDN (Content Delivery Network), waardoor je pagina’s razendsnel laden, overal ter wereld.

Wat je wel moet weten over Framer hosting:

• Je site draait altijd op Framer’s infrastructuur – je kiest geen eigen server
• Er zijn gratis- en betaalde plannen. Het gratis plan publiceert op een framer.app-subdomein. Voor een eigen domein heb je een betaald plan nodig (vanaf circa 10-20 euro per maand)
• Back-ups beheer je via versiegeschiedenis in Framer zelf
• SSL is automatisch inbegrepen op elk gepubliceerd project

3.3 Account aanmaken en domeinnaam koppelen

Het proces is eenvoudig:

1. Ga naar framer.com en maak een gratis account aan
2. Koop je domeinnaam bij een domeinregistrar zoals TransIP, Antagonist of een andere Nederlandse partij
3. Upgrade je Framer project naar een betaald plan als je een eigen domein wilt koppelen
4. Ga in Framer naar Settings > Custom Domain en voer je domeinnaam in
5. Pas de DNS-instellingen aan bij je domeinregistrar (Framer geeft exacte instructies)
6. Wacht tot de DNS actief is (kan tot 24-48 uur duren)

‍

Als je ooit vastloopt: Framer heeft uitstekende documentatie en een actieve community op Discord.

‍

4. Je eerste Framer project opzetten

Nu komt het deel waar veel mensen denken: “Nu wordt het vast moeilijk.” Valt mee. Framer heeft een helder startpunt en is intuitiïer dan het eruitziet.

‍

4.1 Starten: template of blanco canvas?

Framer biedt twee manieren om te beginnen:

‍

Templates:

• Framer heeft een uitgebreide templatemarkt (gratis en betaald)
• Je kiest een template, kopieert het naar je account en past het aan
• Slim voor wie snel wil lanceren en nog aan het wennen is aan het platform

‍

Blanco canvas:

• Begin met een leeg project en bouw alles zelf op
• Geeft maximale controle, maar vraagt meer tijd en kennis van het systeem
• Aangeraden als je het platform al kent of designervaring hebt

‍

Aanbeveling voor beginners: kies een template die qua structuur past bij je doel, en pas die aan. Niet iedere template hoeft perfect te zijn, je gaat hem toch aanpassen.

‍

4.2 De Framer-editor begrijpen

De editor bestaat uit een paar kernonderdelen:

• Canvas: het centrale werkvlak waar je visueel ontwerpt
• Layers-panel (links): de structuur van je pagina, vergelijkbaar met een bestandsmap
• Properties-panel (rechts): alle instellingen van het geselecteerde element (afmetingen, kleur, typografie, animatie)
• Pages-panel: overzicht van alle pagina’s van je site
• Toolbar (boven): frames toevoegen, tekst plaatsen, componenten invoegen

‍

Een frame in Framer is vergelijkbaar met een div in HTML: het is een container die je kunt vullen met andere elementen. Alles wat je bouwt, bestaat uit frames, tekst, afbeeldingen en componenten.

‍

4.3 Eerste instellingen goed zetten

Voordat je begint met ontwerpen, stel je een aantal basisdingen in:

• Ga naar Settings > General: geef je project een naam en stel de taal in
• Ga naar Settings > Fonts: voeg je huisstijlfonts toe (Google Fonts zijn direct beschikbaar, eigen fonts kun je uploaden)
• Ga naar Settings > Colors: definieer je kleurvariabelen zodat je één keer de huisstijlkleuren instelt en ze overal hergebruikt
• Ga naar Settings > SEO: vul de standaard paginatitel en meta-omschrijving in

‍

5. Design: layout, frames en componenten

In WordPress gebruik je thema’s en pagebuilders om te bepalen hoe je site eruitziet. In Framer ben jij de ontwerper. Er is geen thema dat beslissingen voor je neemt. Dat is de kracht en tegelijk het aandachtspunt.

‍

5.1 Hoe werkt layout in Framer?

Framer werkt met auto-layout: een systeem dat vergelijkbaar is met CSS Flexbox. Elementen worden automatisch op rij of in kolom geplaatst, met instelbare tussenruimte (gap) en padding.

‍

De meest gebruikte layout-principes:

• Frame met auto-layout verticaal: elementen stapelen onder elkaar (standaard voor secties)
• Frame met auto-layout horizontaal: elementen staan naast elkaar (voor navigatiebalk of kolomindeling)
• Fixed-size frames: voor elementen met een vaste breedte of hoogte
• Fill: laat een element de beschikbare ruimte vullen

‍

Responsive bouwen doe je in Framer door breakpoints in te stellen. Je ontwerpt je desktop-layout, daarna switch je naar tablet en mobiel en pas je de layout aan waar nodig. Framer past veel automatisch aan, maar je wilt altijd controleren hoe het op klein scherm eruitziet.

‍

5.2 Componenten: de slimme manier van bouwen

Het krachtigste concept in Framer is het werken met componenten. Een component is een herbruikbaar ontwerpelement: je maakt het één keer en gebruikt het overal. Als je daarna de component aanpast, veranderen alle instanties automatisch mee.

‍

Voorbeelden van handige componenten:

• Navigatiebalk
• Knop met hover-staat
• Kaart (voor diensten, cases of teamleden)
• Footer
• Testimonial-blok

‍

Maak een component door een frame te selecteren en te kiezen voor “Create Component” (rechtermuisknop of via het menu). Je kunt vervolgens varianten toevoegen, zoals een primaire en secundaire knopvariant.

‍

5.3 Templates en community-resources

Framer heeft een eigen marktplaats met honderden gratis en betaalde templates. Daarnaast vind je op Framer Community (community.framer.com) losse componenten, secties en flows die andere makers hebben gedeeld.

‍

Je importeert een template door het te kopiëren naar je eigen account, vervangt de teksten, afbeeldingen en kleuren, en past de structuur aan waar nodig. Slim beginnen met een template is geen schaamte – het is strategie. Zolang je bewust kiest en aanpast, is de uitkomst jouw site.

‍

6. Pagina’s, navigatie en basisstructuur opzetten

6.1 Pagina’s aanmaken

In Framer maak je pagina’s aan via het Pages-panel links in de editor:

1. Klik op het plus-icoon naast “Pages”
2. Geef elke pagina een naam: Home, Over, Diensten, Blog, Contact
3. Bouw iedere pagina op als een apart canvas

‍

Je hoeft je pagina’s niet meteen te vullen. Begin met de structuur. De Homepage is je startpunt. De rest vul je later in.

‍

6.2 Homepage instellen

In Framer is de pagina die je “Home” noemt automatisch de startpagina van je site, mits je de URL instelt op “/”. Controleer dit via de pagina-instellingen (klik op het tandwiel naast de paginanaam):

• URL: /
• Titel: de naam van je bedrijf of homepage-titel
• Meta-omschrijving: kort en to the point

‍

6.3 Navigatie bouwen

In Framer bouw je je navigatiebalk zelf als component. Dat klinkt als meer werk, maar geeft je volledige controle over hoe het eruitziet en gedraagt. Een basisnavigatie bestaat uit:

1. Een frame met auto-layout horizontaal over de volledige breedte
2. Links: je logo (afbeelding of tekst)
3. Rechts: je navigatielinks (tekst-frames met Link-instelling naar de juiste pagina)
4. Optioneel: een knop voor je primaire call-to-action (bijv. “Plan een kennismaking”)

‍

Maak deze navigatiebalk een component en gebruik hem op iedere pagina. Zo hoef je maar één keer te updaten als je iets wilt aanpassen.

‍

Bezoek na het bouwen je gepubliceerde preview. Controleer: zie je het menu? Klikken de links door naar de juiste pagina? Op mobiel: klapt het menu in of heb je een hamburgermenu nodig?

‍

7. Pagina’s bouwen: secties, animaties en content

7.1 Hoe bouw je een sectie in Framer?

Een pagina in Framer bestaat uit secties: grote frames die je onder elkaar stapelt. Elke sectie heeft doorgaans:

• Een achtergrond (kleur, afbeelding of gradient)
• Padding aan de boven- en onderkant voor witruimte
• Een container-frame binnenin met een vaste maximale breedte (bijv. 1200px) om de content gecentreerd te houden
• De eigenlijke content: tekst, afbeeldingen, kaarten, knoppen

‍

Dit is het fundament. Maak secties tot component als je ze herhaalt (bijv. een CTA-sectie die je op meerdere pagina’s wilt gebruiken).

‍

7.2 Basisstructuur voor je homepage

Een simpele maar sterke homepage in Framer bestaat bijvoorbeeld uit:

1. Hero-sectie: heldere titel (wat doe je voor wie), onderkop die concrete waarde benoemt, één duidelijke knop (bijv. “Plan een kennismaking”). Voeg een subtiele scroll-animatie toe zodat de tekst inveegt bij laden
2. Probleem of herkenning: waar jouw doelgroepen mee worstelen, zinnen waarvan ze denken: “Dit gaat over mij.”
3. Oplossing of aanbod: kort overzicht van je diensten of pakketten, wat het concreet oplevert. Gebruik kaart-componenten voor een strakke presentatie
4. Bewijs: testimonials, logo’s van klanten, resultaten. In Framer kun je deze als CMS-collectie beheren als je er veel hebt
5. Over jou: kort stukje menselijk verhaal, waarom jij, link naar uitgebreide Over-pagina
6. Call-to-action: nog een keer: wat moeten ze nu doen? Houd het simpel, één knop

‍

Je hoeft niet alles in één keer perfect te krijgen. Bouw ’m ruw. Sleutel later.

‍

7.3 Animaties toevoegen

Dit is waar Framer echt onderscheidend is. Animaties zijn native ingebouwd en hoeven niet via een plugin of extra code. De twee meest gebruikte typen:

‍

Appear-animaties (scroll-triggered):

Selecteer een element, ga naar Properties > Appear en kies hoe het element binnenkomt als het in beeld scrollt (bijv. fade-in, omhoog bewegen). Stel de vertraging en duur in. Klik daarna op Preview om het te testen.

‍

Hover-animaties:

Selecteer een knop of kaart, ga naar Interactions en voeg een Hover-staat toe. Verander daar de achtergrondkleur, schaal of schaduw. Framer genereert automatisch een vloeiende overgang.

‍

Minder is meer. Kies één consistente animatiestijl en pas die overal toe. Een pagina vol verschillende animaties werkt afleidend, niet professioneel.

‍

7.4 Content toevoegen: tekst en beeld

Pagina’s zijn voor statische inhoud (Home, Over, Diensten, Contact). CMS-collecties zijn voor herhalende dynamische content (blogartikelen, cases, teamleden).

‍

Tekst die online werkt: hou het kort per alinea, met duidelijke koppen, en scanbaar (tussenkopjes, lijstjes, witruimte). Schrijf alsof je het uitlegt aan een slimme vriend, niet alsof je een scriptie inlevert.

‍

Afbeeldingen slim gebruiken:

• Gebruik duidelijke, relevante beelden
• Framer comprimeert afbeeldingen automatisch, maar upload bij voorkeur geoptimaliseerde bestanden (WebP of JPEG)
• Geef elke afbeelding een alt-tekst via de image-instellingen

‍

Dit helpt zowel je bezoeker als je SEO.

‍

8. CMS en dynamische content

Framer heeft een eigen ingebouwd CMS. Dat is anders dan WordPress, waar je plugins of externe tools nodig hebt. In Framer beheer je dynamische content (zoals blogartikelen) via CMS-collecties.

‍

Regel: gebruik het CMS alleen als je herhalende content hebt.

‍

8.1 Hoe werkt het Framer CMS?

In Framer maak je een CMS-collectie aan: een gestructureerde database met velden. Elke “rij” in die database is een item (bijv. één blogartikel). Velden kunnen zijn: tekst, rich text, afbeelding, datum, URL, kleur, en meer.

‍

Je koppelt vervolgens een CMS-collectie aan een paginalayout: de “CMS-paginatemplate”. Framer genereert automatisch een pagina voor elk item in de collectie. Zo hoef je voor elk nieuw blogartikel geen nieuwe pagina te bouwen: je voegt alleen een nieuw item toe aan de collectie.

‍

8.2 Handige CMS-toepassingen

Afhankelijk van je site, maar vaak gebruikt:

• Blog / artikelen: collectie met titel, datum, auteur, afbeelding, rich text body
• Cases of portfolio’s: collectie met projectnaam, klant, categorie, resultaten, afbeeldingen
• Teamleden: collectie met naam, functie, foto, korte bio
• Testimonials: collectie met naam, bedrijf, quote, foto
• FAQ’s: collectie met vraag en antwoord, filterable per categorie

‍

Meer kan. Maar begin slank. Een CMS-collectie is krachtig, maar vraagt ook structuur en onderhoud.

‍

8.3 Content bewerken in Framer

Je bewerkt CMS-content direct in de Framer-editor onder het tabblad “CMS”. Voor klanten of redacteuren die zelf content willen beheren heeft Framer een aparte “Edit Mode”: een vereenvoudigde interface waarmee zij teksten en afbeeldingen kunnen aanpassen zonder toegang te hebben tot de designlaag.

‍

9. Optimaliseren: snelheid, SEO en analytics

9.1 Snelheid

Framer heeft een groot voordeel op dit vlak: de output is statische HTML, CSS en JavaScript. Er is geen PHP-server die op verzoek pagina’s genereert (zoals bij WordPress). Dit betekent structureel snellere laadtijden.

‍

Quick wins binnen Framer:

• Upload geoptimaliseerde afbeeldingen (Framer comprimeert, maar zwaar beeldmateriaal blijft een risico)
• Beperk het gebruik van zware code-components of externe scripts die extra laadtijd veroorzaken
• Activeer lazy loading op afbeeldingen die niet meteen in beeld zijn (dit is standaard aan in Framer)
• Controleer je Lighthouse-score via Google PageSpeed Insights na publicatie

‍

9.2 SEO-basics

Met alleen een website ben je er niet. Mensen moeten je kunnen vinden.

‍

Basispunten voor SEO in Framer:

• Stel per pagina een unieke titel en meta-omschrijving in via de pagina-instellingen (tandwiel-icoon)
• Gebruik logische kopenstructuur: H1 voor de hoofdtitel, H2 voor secties, H3 voor subpunten
• Elke pagina één hoofdonderwerp
• Interne links tussen gerelateerde pagina’s en blogartikelen
• Voeg alt-teksten toe aan alle afbeeldingen
• Framer genereert automatisch een sitemap.xml: koppel die aan Google Search Console

‍

Framer biedt geen aparte SEO-plugin zoals WordPress dat heeft. De SEO-opties zitten ingebouwd in de pagina-instellingen. Dat is bewust eenvoudig gehouden. Voor geavanceerde SEO-behoeften (schema markup, hreflang, etc.) kun je custom code invoegen via de Code-sectie in Framer.

‍

9.3 Analytics en testen

Je wilt niet op gevoel sturen. Framer biedt een ingebouwde analytics-view (bezoekers, paginaweergaven, bouncepercentage) voor basisinzicht. Voor meer detail koppel je een externe tool:

• Google Analytics 4: via het Script-veld in Framer Settings > SEO of via een eigen code-component
• Plausible of Fathom: privacy-vriendelijke alternatieven die je als extern script koppelt
• Hotjar of Microsoft Clarity: voor heatmaps en sessie-opnames

‍

Voor je echt losgaat met promotie:

• Check je site op mobiel en desktop via de ingebouwde preview-modi in Framer
• Test alle links (geen dode links, klikken naar de juiste pagina)
• Test je contactformulier (via Framer Forms of een externe tool zoals Tally of Typeform)
• Kijk naar laadtijd (voelt het traag? Gebruik PageSpeed Insights)

‍

Zie het als: APK voor je website.

‍

10. Website live zetten

10.1 Pre-launch checklist

Loop even langs deze punten voor je live gaat:

1. Home, Over, Diensten, Contact – allemaal gevuld (desnoods minimaal)
2. Navigatie klopt, geen lege of verkeerde links
3. Alle placeholder-tekst of demo-content verwijderd
4. Contactformulier getest (ontvang je de inzendingen?)
5. Basis-SEO ingesteld: paginatitels en meta-omschrijvingen ingevuld
6. Eigen domein gekoppeld en SSL actief (automatisch in Framer)
7. Site getest op mobiel: ziet het er goed uit op een klein scherm?

‍

10.2 Publiceren in Framer

Publiceren in Framer is één klik. Rechts bovenin de editor staat de knop “Publish”. Klik erop, kies je domein (eigen domein of framer.app-subdomein), en je site is live. Framer pusht de meest recente versie van je project naar het CDN.

‍

Wijzigingen publiceer je altijd via dezelfde knop. Je kunt werken aan je site terwijl de live versie gewoon online staat. Pas als je publiceert, zien bezoekers je nieuwe versie.

‍

10.3 Eerste promotie

Begin gewoon simpel:

• Stuur je bestaande netwerk een korte mail: nieuwe site
• Plaats een bericht op je social kanalen
• Link naar een specifiek nuttig artikel in plaats van alleen je homepage

‍

Geen grote launchcampagne nodig. Gewoon eerlijk vertellen: “Hier is mijn nieuwe plek op het web.”

‍

10.4 Terugkerende taken

De meeste mensen denken dat ze klaar zijn als de site online staat. Dat is precies waarom zoveel sites verouderen en irrelevant worden.

‍

Plan bijvoorbeeld 1x per maand:

• Controleer of Framer updates heeft uitgebracht die je project beïnvloeden (Framer werkt met automatische platformupdates, maar check de changelog)
• Voeg nieuwe CMS-content toe (blogartikelen, cases, testimonials)
• Klik door de site: werkt alles nog? Alle links actief?
• Één ding verbeteren (een sectietekst aanscherpen, een nieuwe testimonial toevoegen, een animatie verfijnen)

‍

10.5 Doorontwikkelen

Als je weet hoe je pagina’s bouwt, componenten maakt, CMS-collecties beheert en animaties toevoegt, dan heb je de skills om door te groeien. Je kunt nieuwe landingspagina’s maken voor campagnes, je CMS uitbreiden met nieuwe collecties, je dienstenpagina’s aanscherpen, en je blog uitbouwen als traffic-machine.

‍

En het mooie is: je hoeft er niet meer iemand voor te smeken.

‍

Slot

Als je tot hier bent gekomen, dan heb je nu een helder beeld van het hele proces, een logische volgorde, en een manier van uitleg die je hopelijk niet in slaap heeft gekukt.

‍

De volgende stap? Pak hoofdstuk 3 t/m 7 er nog eens bij, open een nieuw tabblad met framer.com, en loop het echt stap voor stap door.

‍

Je merkt waarschijnlijk dat alles ineens een stuk minder magisch voelt. En dat is precies de bedoeling.

‍

Framer is geen raketwetenschap. Het is een designsysteem met superkrachten. En nu snap jij dat systeem.

‍