Introduktion til webflow

Da jeg først hørte om webflow, tænkte jeg: “Endnu en drag-and-drop hjemmesidetjeneste?” Jeg var en smule skeptisk. Jeg havde tidligere prøvet forskellige page builders og følte mig altid begrænset. Samtidig orkede jeg ikke at kode et helt site fra bunden. Men webflow skulle angiveligt være noget særligt – et værktøj til at bygge avancerede, pro-look hjemmesider uden at skulle skrive al koden selv.

Jeg tog springet for et par år siden, og siden har jeg ikke set mig tilbage. Webflow har ændret min opfattelse af, hvordan man kan lave websider, fordi man faktisk får ret meget frihed til at lave custom layouts, uden at du behøver være hardcore udvikler. Samtidig er interface’t relativt intuitivt, hvis du ved lidt om, hvordan CSS og HTML fungerer bag kulissen. Men du kan også køre det på “ren design-feeling,” og webflow ordner en stor del af det tekniske i baggrunden.


Hvad er webflow – og hvorfor er det anderledes?

Webflow er en cloud-baseret platform, som kombinerer en visuel editor med et komplet hosting- og CMS-system. Kort sagt kan du designe dine sider pixel for pixel i en slags grafisk grænseflade, mens webflow i baggrunden genererer den nødvendige HTML, CSS og JavaScript. Når du trykker på “publicer,” ligger dit site lynhurtigt online på webflows servere eller på dit eget domæne.

Ingen traditionel page builder

Mange sammenligner først webflow med page builders til WordPress, men i praksis er det en helt anden oplevelse. Page builders som Elementor eller Divi holder dig ofte inden for foruddefinerede “bokse,” mens webflow giver dig en nærmest blank canvas. Du kan placere elementer i forhold til hinanden med flexbox, grid eller absolute positioning og styre hver lille detalje. Hvis du kan lide at have fuld kontrol over designet, uden at skulle skrive kode, er det ret fedt.

CMS og hosting i én pakke

Webflow er ikke kun en design-editor. Du får også et CMS, hvor du kan lave dynamiske sider, fx til et blogfeed eller et produktkatalog, uden at bøvle med databaser selv. Derudover behøver du ikke tænke på serveropsætning, PHP-versioner, automatiske opdateringer osv. Alt kører i skyen, og webflow håndterer driften. Jeg må indrømme, at jeg finder det befriende at slippe for at vedligeholde en server eller opdatere WordPress-plugins konstant.


Mine første erfaringer – og fejl

Da jeg startede i webflow, lavede jeg en klassisk fejl: Jeg gik direkte i gang med at designe en vildt fancy forside, uden at sætte mig ind i, hvordan klasser, symboler og styling egentlig fungerede. Det endte i en rodekasse af klassenavne som “class123” og “newclass24,” hvor jeg knap nok anede, hvilken stil jeg havde sat på hvad. Det var, som om jeg selv byggede en labyrint, jeg ikke kunne finde ud af at komme ud af.

Husk en navngivningsstrategi

Jeg lærte ret hurtigt, at det betaler sig at have en plan for, hvordan du navngiver dine klasser og sektioner. Webflow giver dig nemlig mulighed for at genbruge klasser og lave “kombinerede klasser,” men hvis du ikke holder tungen lige i munden, ender du med at lave en ny klasse, hver gang du skal ændre en farve eller en margin. Det bliver hurtigt uoverskueligt. Nu har jeg en lille “regel”: Jeg navngiver sektioner efter deres funktion (fx “hero-section,” “features-section,” osv.), så jeg altid kan gennemskue, hvor jeg er i designet.

Overforbrug af unødvendige animationer

Jeg blev også grebet af de fede animationsmuligheder, webflow tilbyder. Jeg gav alt muligt en fade-in, hover-effekter og parallax scrollelementer, bare fordi jeg kunne. Det er sjovt, men pas på, at du ikke overbelaster brugeren med alt for meget bevægelse. Jeg opdagede, at min side blev for “urolig,” og nogle besøgende klagede over, at det distraherede dem. Efter et par uger skruede jeg ned for effekterne og beholdt kun et par lækre microinteractions, der fremhævede det vigtigste.


De vigtigste funktioner i webflow

Webflow er fyldt med små og store funktioner, som gør det til mere end blot en simpel hjemmesidebygger. Her er nogle af dem, jeg personligt finder mest værdifulde:

Visuel designer med fuld kontrol

Du arbejder i en WYSIWYG-lignende editor, men i modsætning til mange konkurrenter kan du finjustere dine layouts på et meget lavt niveau. Du kan fx justere padding, margin og breakpoints med pixelpræcision. Du kan også tilføje custom code, hvis du vil gå helt amok. Det minder lidt om at bruge et professionelt designprogram, bare med HTML/CSS i kulissen.

CMS til dynamisk indhold

Vil du have en blog, et portefølje-galleri eller en sektion til kunde-cases? Med webflow CMS kan du oprette collections (tænk på dem som databaser), hvor du tilføjer felter for titel, billede, dato osv. Du designer derefter én CMS-skabelon, som dynamisk viser dine items. Jeg bruger det flittigt til nyhedssektioner og produktoversigter. Du slipper for at kopiere og ændre side efter side, hver gang du skal tilføje nyt indhold.

Responsiv design og breakpoints

Jeg har arbejdet med en del hjemmesidedesign, hvor jeg skulle kæmpe med medieforespørgsler (media queries) i CSS. I webflow ser du ganske enkelt, hvordan din side ser ud på desktop, tablet og mobil, og du kan nemt justere layoutet. Du kan indstille forskellige breakpoints og bestemme, hvordan elementer skal reagere. Det er fedt at kunne forfine designet specifikt til hver skærmstørrelse uden at kode.

Hosting og SSL

Webflow hoster dine sider på Amazon Web Services, hvilket jeg personligt synes er ret stabilt og hurtigt. Du får automatisk SSL-certifikat, og du kan pege dit eget domæne over på webflow. Jeg hører sjældent om nedetid, og siden kører typisk ret hurtigt, medmindre du selv læsser en masse tunge videoer og billeder på. De står også for CDN (Content Delivery Network), så folk i forskellige lande får en hurtig levering af siderne.

E-commerce funktionalitet

Webflow har sin egen e-commerce platform, hvor du kan sælge produkter, håndtere lager, tilføje betalingsmetoder osv. Dog er den endnu ikke lige så modnet som Shopify eller WooCommerce, men til mindre webshops fungerer det fint. Du kan style dine produktsider i webflows editor og få en ret unik shop-oplevelse, i stedet for at bruge en standard skabelon, som 100 andre butikker har.


Hvorfor ikke bare bruge WordPress eller Wix?

Jeg får tit spørgsmålet: “Kunne jeg ikke bare vælge WordPress, Wix eller Squarespace? Er webflow ikke dyrere og mere avanceret end Wix – og mindre populært end WordPress?” Det korte svar er, at det handler om dine behov:

  • Wix og Squarespace er nemme at komme i gang med, men kan være ret begrænsede i forhold til avancerede designs.
  • WordPress er ekstremt fleksibelt og udbredt, men kræver ofte en række plugins for at opnå samme visuelle frihed som webflow. Du skal også selv stå for hosting eller vælge en hosted WP-løsning.
  • Webflow placerer sig et sted i midten. Du får masser af designfrihed og et integreret hostingmiljø, men du skal betale en månedlig eller årlig pris, og lære en vis mængde “visuel” CSS-logik.

Hvis du elsker at dykke ned i temaer og plugins, eller du har en kæmpe blog, kan WordPress være bedre. Men vil du have en moderne, designfokuseret side, med en ret robust CMS-del og minimal vedligeholdelse, er webflow en fremragende løsning.


Prisplaner – og hvad du får for pengene

Webflow har forskellige planer alt efter, om du bygger sider for dig selv eller som freelancer for kunder. Du kan faktisk bruge editoren gratis, men hvis du vil have dit eget domæne og fjerne webflow-branding, skal du på en betalt plan. De fleste vælger en Site Plan, der starter ved en lav månedspris og går op alt efter behov for CMS, e-commerce og trafik.

Site plans vs. account plans

  • Site plans: Disse planer dækker din sides hosting og funktioner. Fx om du må have CMS, e-commerce, hvor meget trafik du kan håndtere, osv.
  • Account plans: Dette er din “designer-konto.” Hvis du fx laver hjemmesider for andre, kan du få en plan, der tillader dig at have mange projekter kørende.

Det lød først lidt forvirrende for mig, men jeg endte med en “CMS Site Plan” til min egen side. Det betyder, at jeg har adgang til CMS-funktionerne, eget domæne, og at jeg kan have en vis mængde trafik og antal CMS-poster. Prisen er bestemt højere end et billigt delt webhotel, men jeg slipper også for at håndtere backups, sikkerhedsopdateringer, serveropsætning og alt det der. Og for mig er det en kæmpe fordel.


Brugeroplevelse og læringskurve

Webflow er ikke for alle. Hvis du absolut ikke vil røre en smule “tænk som en CSS-designer,” kan det føles for avanceret. Den grafiske editor er virkelig kraftfuld, men netop derfor kan du også komme til at lave rod, hvis du ikke forstår, hvad du laver.

Det grundlæggende om boksemodellen

For at få det fulde udbytte af webflow bør du vide, at HTML består af “kasser” (divs), og at CSS dikterer, hvordan disse kasser ser ud og placeres. Webflow oversætter dine handlinger i editoren til CSS-regler. Hvis du er klar til at lære en smule grundlæggende CSS, kan du med webflow designe sider, der ser superfede ud, uden at håndskrive koden selv. Men du skal stadig forstå, at en “section” kan have en bestemt højde, en “container” kan centrere indhold, og “columns” kan styres med flexbox eller grid.

Dokumentation og community

Da jeg begyndte, brugte jeg webflows egen “University,” som er fyldt med videoguider og interaktive kurser. Det var ret sjovt at bygge sin første side mens jeg kiggede en 5-10 minutters video om, hvordan man fx bruger grid layout eller opsætter en “symbol” (som er webflows måde at genbruge elementer på tværs af sider). Community’et er også hjælpsomt. Der findes et forum, hvor man kan spørge ind til alt muligt, og folk er generelt ret venlige.


Seo og webflow – er det godt nok?

Jeg var lidt nervøs for, om webflow kunne klare SEO-kravene lige så godt som WordPress eller en håndkodet side. Men jeg blev positivt overrasket. Der er mulighed for at redigere alt fra metatitler til meta descriptions og alt-tekster, og webflow genererer en pæn, ren kode. Siderne loader hurtigt, hvilket Google elsker. Derudover kan du styre 301-redirects og generere en sitemap.

Håndtering af URL-struktur

En ting, jeg skulle vænne mig til, er, at webflow har sine egne regler for mappe- og sidestier. Hvis du vil lave en blog, kører det fx ofte gennem CMS collections, hvor dine blogindlæg ligger under en bestemt /collection/ sti. For det meste kan du fint sætte det op, så du får en pæn URL-struktur (fx /blog/titel), men det kræver lige lidt opsætning i CMS’et.

Billedoptimering

Webflow kan automatisk generere responsive billeder, så de loader forskelligt alt efter skærmstørrelse. Det er ret smart for performance. Det er dog stadig en god idé selv at komprimere dine billeder, før du uploader dem. Der er ikke noget mere ærgerligt end en side, der loader i sneglefart, fordi billederne er alt for tunge.


Eksempel: min første webflow-kundecase

For at illustrere, hvor gnidningsfrit det kan være at arbejde i webflow, vil jeg dele en oplevelse, jeg havde med en lille kunde. De skulle bruge en one-pager med en præsentationsvideo, et par sektioner om deres ydelser og en kontaktformular. Jeg besluttede at lave det i webflow for at se, hvor hurtigt jeg kunne bygge noget, der så professionelt ud.

Jeg startede med at lave en grundstruktur: en hero-section med en stor baggrundsvideo, en sektion med 3 ikoner og beskrivelser af deres kerneydelser, og en “om os”-sektion. Jeg brugte webflows “container” for at sikre, at teksten holdt en pæn bredde, og jeg stylede farver og typografi, så det matchede kundens brand. Til sidst lavede jeg en kontaktformular, som webflow automatisk sender beskeder fra til kundens e-mail.

Hele processen tog under to dage, hvoraf en stor del var at vente på feedback fra kunden. Tidligere ville jeg have brugt en del timer på at installere WordPress, opsætte et tema, justere CSS og finde en videobaggrunds-plugin, der fungerede. Her var alt integreret, og da kunden så designet, kunne jeg hurtigt rette farver og tekst efter deres anvisninger. De endte med at være ret imponerede. Og jeg syntes, det var sjovt og overskueligt at bygge.


Webflow ecommerce – en kort oversigt

Hvis du overvejer at lave en webshop, er webflow e-commerce et interessant alternativ til f.eks. Shopify. Du kan definere produkter i webflows CMS, tilføje priser, billeder og beskrivelser. Layoutet for produktsider og kategorier laver du i den samme drag-and-drop editor. Det giver en unik designfrihed, som du måske ikke altid får i standard webshops.

Fordele og begrænsninger

Fordelen er, at du kan lave en virkelig flot og branding-tilpasset shop. Du har fuld kontrol over forsiden, produktoversigten og checkout-flowet. Ulempen er, at det stadig er relativt nyt sammenlignet med Shopify, så du får ikke helt samme mængde integrationer til fx leveringsløsninger, momsberegninger osv. Webflow har dog forbedret en hel del funktioner løbende, så det kan sagtens dække basale e-commerce behov.


Kan webflow integreres med andre tjenester?

Ja, heldigvis. Du kan fx bruge Zapier eller Make.com til at koble webflow CMS med din e-mail-liste, CRM eller hvad du nu bruger. Der er også en API, som lader dig læse/indsætte data i CMS’et. Jeg har fx sat en integration op, hvor nye leads fra en formular i webflow automatisk ryger ind i ActiveCampaign. Det sparer mig for at taste data manuelt.

Nyttige integrationer

  • Email marketing (fx Mailchimp, ActiveCampaign)
  • CRM (HubSpot, Pipedrive)
  • E-commerce betalinger (Stripe, PayPal)
  • Analytics (Google Analytics, Google Tag Manager)
  • Automatisering (Zapier, Make.com)

Det kræver ofte, at du sætter en lille embed-kode ind eller autoriserer via en tredjepartsservice, men i praksis er det ret ligetil. Du har også mulighed for at integrere custom scripts i head eller body, hvis du har brug for ekstra tracking eller særlige funktioner.


Sikkerhed, backups og vedligeholdelse

En af de ting, jeg holder mest af ved webflow, er, at jeg ikke skal tænke på sikkerhedsopdateringer eller hackerangreb på en server. Webflow ruller løbende sine egne opdateringer ud, og eftersom systemet ikke er open source på samme måde som WordPress, er det sjældent, man hører om massive hackerangreb.

Backup-versioner

Hver gang du arbejder i webflows designer og gemmer en ændring, oprettes en versionshistorik. Det betyder, at du kan gå tilbage til et tidligere punkt, hvis du fortryder en større omstrukturering. Jeg har haft stor gavn af det, særligt når jeg “øv, det layout var pænere før”-øjeblikke opstår. Jeg klikker bare på en tidligere version og gendanner.

Redaktør-rolle til kunder

Hvis du laver hjemmesider for andre, kan du give dem en “editor-adgang,” så de kun kan redigere tekst og billeder – uden at ødelægge selve designet. Det er ret smart, for du vil helst ikke have en kunde, der ved et uheld sletter en hel sektion, fordi de klikkede på “delete” i designer-tilstand. Så med editor-rollen kan de f.eks. opdatere blogindlæg, priser og kontaktinfo, uden at pille ved layoutet.


Personlig succes og aha-oplevelse

Jeg husker tydeligt, da jeg indså, hvor stor en tidsbesparelse webflow kan være. Jeg skulle lave en ny underside med 10 forskellige “case studies,” hvor hver case havde sine egne billeder, citater og resultater. I gamle dage (fx med WordPress + page builder) ville jeg kopiere en forrige side, ændre teksten og håbe, at jeg ikke glemte at rette nogle placeholders. Det kunne let ende i kludder.

Men med webflow oprettede jeg en CMS-collection for “cases,” hvor jeg satte felter for “overskrift,” “kunde-logo,” “case-billede,” “kort beskrivelse” osv. Bagefter designede jeg én template-side, som viste de her felter. Nu kunne jeg bare oprette en ny case i CMS’et, uploade billeder og skrive en beskrivelse, og vupti – den nye underside blev automatisk skabt med de rigtige felter. Det var en kæmpe lettelse. Jeg kunne bruge min tid på indhold og fotos fremfor at kopiere sider i vildskab.


Typiske faldgruber i webflow

Intet værktøj er perfekt, og webflow har også sine faldgruber og begrænsninger, der kan drille nye brugere.

Rodede klasser og style

Som nævnt kan du nemt ende i “klasse-kaos,” hvis du ikke er organiseret. Lav en strategi for, hvordan du navngiver dine klasser, og brug symbols (genanvendelige komponenter) i stedet for at opfinde den dybe tallerken på hver side. Ellers bruger du ekstremt lang tid på at rydde op senere.

Manglende “plugins”

I WordPress har du tusindvis af plugins til alt muligt. I webflow skal du ofte selv integrere eksterne scripts, hvis du vil have en speciel funktion. Det er ikke en showstopper, men det kræver, at du forstår embed-kode, og at du måske må ud og researche en smule.

Begrænsninger på CMS og e-commerce

Hvis du har planer om at have 10.000 blogindlæg eller 50.000 produkter, kan webflow begynde at knirke. Der er nemlig et loft for, hvor mange collection items du kan have, afhængigt af din plan. For de fleste små og mellemstore sider er det fint, men hvis du vil have en gigantisk webshop eller et nyhedssite, skal du tjekke grænserne først.


Sådan kommer du i gang med webflow

Hvis du har besluttet dig for at prøve webflow, anbefaler jeg at starte med en gratis konto. Du kan bygge op til to projekter i “staging,” før du betaler for en site plan. På den måde kan du eksperimentere i ro og mag.

Se tutorials og eksempler

Gå til webflow University. Se nogle korte videoer om grundlæggende layout, responsiv design og CMS. Det giver en god base at stå på, så du ikke famler rundt. Der er også en showcase-sektion, hvor du kan se andres projekter og lade dig inspirere.

Byg et lille pilotprojekt

Lav noget simpelt, fx en personlig “om mig”-side eller en lille landingside for et fiktivt produkt. Her kan du øve dig i at bruge sektioner, containere, grid og animations. Leg med det, smadr nogle ting, og gendan fra backup, hvis det går galt. Det er den bedste måde at lære på.

Vælg en passende plan

Når du er klar til at lancere, beslutter du, om du skal bruge CMS, e-commerce eller bare en statisk side. Tjek prisskemaet hos webflow, og vælg den plan, der matcher dit behov. Derefter tilføjer du dit domæne i indstillingerne, og bum – siden er live, ofte på få minutter.


Avancerede muligheder – for den nysgerrige

Hvis du bliver bidt af webflow, kan du kaste dig over mere avancerede funktioner. Du kan fx bruge “Interactions 2.0” til at lave animerede scrolleffekter, parallax-lag eller custom burger-menuer. Du kan også implementere membership-områder (via tredjepartsintegrationer), hvis du vil have adgangsbeskyttet indhold. Og hvis du bare MÅ nørde med koden, kan du eksportere HTML/CSS/JS og hoste det selv. Dog mister du så CMS-delen, da den er bundet op på webflows cloud.


Min konklusion – er webflow noget for dig?

Webflow er for dig, der ønsker en moderne, fleksibel og kodefri måde at lave hjemmesider på. Du skal have viljen til at lære lidt om, hvordan et website struktureres (HTML-bokse, CSS-klassehierarki osv.), men du behøver ikke skrive linjer af kode. Til gengæld kan du skabe designs, der virkelig skiller sig ud fra de gængse temaer, du finder i andre systemer.

Hvis du er en hardcore udvikler, kan du stadig få glæde af webflows visuelle miljø til hurtig prototyping. Og hvis du kommer fra en designbaggrund, kan du hurtigt implementere dine idéer, uden at du skal vente på en udvikler. For mig har den store gevinst været, at jeg kan lave professionelle, skræddersyede sider uden at drukne i plugins eller hosting-teknik.

Overvej budgettet og behovet

Er du hobbyblogger med et stramt budget, kan en gratis WordPress-løsning være nok. Men hvis du vil have en kraftfuld, driftssikker og designorienteret platform med integreret CMS og hosting, er webflow helt sikkert en kandidat, der er værd at tjekke ud. Du betaler en fast månedlig eller årlig pris, men får til gengæld ro i sindet, fordi du slipper for meget opsætning og vedligehold.

Tag det første skridt

Opret en gratis konto, se en håndfuld tutorials, og start med at bygge en demo-side. Prøv at lege med sektioner, typografi og responsivt design. Stol på mig: Når du først oplever, hvor let det kan være at lave en lækker landing page med webflow, kan det være svært at vende tilbage til mere ufleksible systemer. Det er i hvert fald den rejse, jeg selv har været på.


Afsluttende refleksion

Jeg var oprindeligt en stor WordPress-tilhænger. Jeg elskede friheden, men hadede vedligeholdelsen. Så stiftede jeg bekendtskab med webflow og opdagede, at jeg kunne få ret stor frihed til design og struktur – uden at bekymre mig om serveropdateringer eller plugin-konflikter. Det krævede en lille tilvænning, men i dag ville jeg ikke tøve med at vælge webflow til mindre og mellemstore projekter.

Til store e-commerce-løsninger foretrækker jeg måske stadig Shopify eller en specialbygget platform. Men for alt andet – fra smukke porteføljesider til fuldblods corporate-hjemmesider og landingssider – fungerer webflow glimrende. Jeg elsker at kunne fokusere på selve designet og indholdet frem for backend-teknik og versionsopdateringer. Og jeg oplever, at kunder, der selv vil redigere indhold, er meget glade for den intuitive editor.

Så har du brug for en fleksibel, solid og brugervenlig måde at bygge hjemmesider på, kan jeg kun anbefale at give webflow et skud. Du får muligvis et par grå hår i starten, hvis du ikke er vant til at tænke i bokse og klasser, men hold ud. Når du først fanger princippet, åbenbarer sig en verden af designmuligheder, der kan få din side til at fremstå professionel og helt unik. Det er en investering i både tid og penge, men for mig har den investering allerede tjent sig ind i ro, bedre design og færre bekymringer. God fornøjelse!


Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *