Webbdesigners och utvecklare slutar ofta med att göra samma uppgifter om och om igen. Saker som att ställa in värd, bygga en CSS-stilguide, implementera klasser och formatera HTML måste lösas innan den första distributionen och lanseringen. Ganska tråkigt, eller hur?
Rätt.
Föreställ dig nu ett verktyg som blir av med allt detta och som fortfarande ger dig kraften att bygga en helt anpassad webbplats som om du kodade den från grunden. Det är där Webflow kommer in.
Webflow är en webbplatsbyggare som fungerar på samma sätt som många andra gör – den har ett visuellt dukverktyg som låter dig kombinera olika designelement till en snygg webbplats utan att någonsin behöva skriva kod. Skillnaden är att Webflow ger dig full kontroll över den koden före, under och efter att din webbplats går live.
Detta är enormt för alla som vill ha en finjusterad webbplats utan att göra allt det smutsiga arbetet.
Webflow jämfört med de bästa webbplatsbyggarna
Webflow är ett utmärkt verktyg för webbdesigners och utvecklare som vill bygga webbplatser på samma sätt som de alltid har gjort, bara med halva besväret och dubbelt så mycket automatisering. Liksom många webbplatsbyggare har den en dra-och-släpp-redigerare och mallar för att komma igång, men det som verkligen får den att glänsa är nivån av kontroll den ger dig – vilket kanske är den mest för alla plattformar av sitt slag.
Från och med sin första betalda plan har Webflow-användare direkt tillgång till sin webbplats kod för att göra alla anpassade redigeringar de vill ha, och du kan till och med exportera HTML- och CSS-filerna för att skicka till utvecklare eller överföra till andra arbetsytor över hela plattformen.
Naturligtvis, om din webbplats eller ditt företag inte behöver det djupet av kontroll, kanske du hittar några av följande alternativ från vår lista över bästa webbplatsbyggare för att vara mer lämpliga.
Squarespace är vårt första val för att skapa vackra, innehållsfokuserade webbplatser utan behov av erfarenhet av webbutveckling. Registrera dig idag för en 14-dagars provversion av Squarespace.
Weebly är vårt bästa fria val, eftersom dess kostnadsfria nivå förmodligen är den bästa som finns, med ett komplett verktyg för webbplatsbyggande som bara kräver att du lägger en Weebly-länk längst ner. Registrera dig för Weebly helt gratis.
Wix är en fantastisk allsidig webbplatsbyggare med massor av funktionalitet och teman som inte kräver någon kodnings- eller designerfarenhet. Starta din sju dagars gratis provperiod på Wix idag.
WordPress är bloggarens och innehållsskaparens standard för mycket flexibel webbplatsutveckling. Om du letar efter en plattform för att bygga en webbplats från grunden är WordPress ett bra alternativ. Ge WordPress ett försök gratis.
Webflow: Det goda och det onda
Vi kan inte nog betona hur anpassningsbart Webflow är, och inte heller hur kraftfullt det gör det för avancerade utvecklare. Du kan modifiera den underliggande koden tills teman ser ut precis som du vill att de ska, och du kan med säkerhet lägga till animationer och integrationer medan Webflow tar hand om både grunderna och komplexiteten i backend.
Som sagt, att kunna använda alla Webflows funktioner kan kräva mycket erfarenhet, annars kan du möta en brant inlärningskurva när du stöter på problem. Hur som helst, om du letar efter en webbplatsbyggare som ger dig full kontroll från dag ett, är Webflow svårt att slå.
Vad Webflow är bra på
Perfekt för webbutvecklare och designers: Webflow låter dig skapa webbplatser på en visuell byggare samtidigt som du ger total designfrihet. Denna no-code setup liknar hur faktiska webbdesigners och utvecklare konstruerar webbplatser. Du kan justera utfyllnad, knappklasser, layouter och andra formateringsalternativ precis som när du redigerar CSS.
Efter att ha monterat varje sida, så länge du är på någon av Webflows betalplaner, kan du dyka in och redigera koden manuellt också. Här kodar du i princip webbplatsen som en webbutvecklare skulle göra, men du sparar mycket tid som normalt ägnas åt att arbeta med repeterbara element. Detta öppnar dörren till hastigheten hos en visuell byggare men håller fast vid flexibiliteten hos ren hårdkodning.
En annan spännande funktion är att du till och med kan använda Webflow för att skapa vad du vill och sedan exportera och migrera koden till innehållshanteringssystem som WordPress eller e-handelsplattformar som Shopify.
Eliminerar grunderna: En av de bästa sakerna med Webflow är hur det hanterar de vardagliga webbskapande uppgifterna åt dig. Säkerhet, underhåll, hosting och driftsättning sköts alla automatiskt. Detta gör att du kan fokusera på att designa och underhålla själva webbplatsen utan att behöva dubbelkolla att allt annat fortfarande fungerar.
Webflow gör det också enkelt att bygga och distribuera ett designsystem på hela din webbplats genom att helt enkelt välja klass för varje tillgång. Den visuella arbetsytan och det intuitiva dra-och-släpp-gränssnittet gör det superenkelt att skapa och uppdatera ditt varumärkes stil överallt.
Responsiviteten hos Webflow är också en fröjd att arbeta med. Designbeslut faller upp och ner från skrivbordet, vilket innebär att ändringar som görs där kan återspeglas på både surfplatta och mobil. Under tiden kommer justeringar på surfplattan bara att påverka surfplatta och mobil. Eftersom varje brytpunkt är redigerbar separat kan du enkelt skapa unika utseenden på vilken enhet som helst.
En annan tidsbesparande funktionalitet är hur mycket av en bris det är att implementera användarregistreringar och gated innehåll. Webflows visuella redigerare har inbyggda komponenter som dessa så att du inte behöver koda någon av dem från början – även om du kunde om du ville.
Bra för att flytta bitar: Med en hög grad av kontroll över den faktiska koden gör Webflow det enkelt att utveckla övertygande CSS-animationer och JavaScript-interaktioner.
Den har en mängd inbyggda triggers som kan läggas till alla element, inklusive effekter som pop, jiggle, studs, shrink, flip och fade. Och kom ihåg att du inte behöver vara en kodningsexpert för att lägga till dessa dynamiska effekter, inte heller för att anpassa dem.
Till exempel, med bara ett eller två klick kan animationer och interaktioner konfigureras så att de bara utlöses på vissa enheter, eftersom du kanske vill ha en animation som körs på skrivbordet men inte på mobilen.
Vi tyckte också att animeringsarbetsflödet var ganska intuitivt, och det är användbart eftersom integration av flerstegsanimationer ibland dramatiskt kan förbättra webbplatsernas visuella tilltalande. Enkla saker som att blekna i innehåll när du rullar eller lägga till svävningsanimationer till knappar kan göra att webbplatsen känns mer polerad.
Användbara resurser: Webflow erbjuder en mängd handledningar, mallar, communitysupport och tillgång till experter när du behöver det. Användare kan till exempel få tillgång till en otrolig uppsättning handledningar via Webflow University – ett onlinebibliotek med kurser och lektioner för att lära dig allt du behöver för att förbättra dina färdigheter i webbbyggnad.
Eftersom inlärningskurvan kan vara brant på Webflow är tillgång till hjälp ovärderlig. Avsnittet Made in Webflow innehåller till och med många kloningsbara projekt som redan innehåller bästa praxis för design och kreativa implementeringar, vilket kan fungera som utmärkta utgångspunkter för till exempel e-handels- och portföljwebbplatser.
Dessutom har Webflow ett starkt partnernätverk av experter inom 3D-design, animation, tredjepartsintegrationer, webbdesign, webbutveckling, grafisk design och allt annat du kan behöva för att bygga din webbplats. Att utnyttja detta kan vara en spelomvandlare.
Webflow har också en robust skapargemenskap med livestreamar, poddsändningar, evenemang och ett forum för att ställa frågor. Vi tyckte att samhället var vänligt, hjälpsamt och lyhört när de sökte råd.
Perfekt för SEO: Webflow tillhandahåller omfattande SEO-verktyg direkt i den visuella redigeraren.
Detta inkluderar möjligheten att redigera och infoga schemamarkering, definiera metatitlar och beskrivningar, kontrollera indexering och webbplatskartor, hantera 301-omdirigeringar och redigera alt-taggar för bilder. Vi fann att Webflow-webbplatser krävde väldigt lite extra SEO-arbete utöver att definiera metadata och alt-text.
Plattformens infrastruktur är också värd för AWS, vilket möjliggör hastighet, skalbarhet och säkerhet för att hjälpa din webbplats att uppnå en hög poäng på Googles Core Web Vitals.
Det kanske viktigaste är att Webflow genererar ren HTML- och CSS-kod under huven. Detta innebär att dina webbplatser kommer att spotta ut semantisk, optimerad kod som sökmotorer enkelt kan genomsöka och indexera, så att du inte behöver oroa dig för att rörig spagettikod skadar din ranking.
Med Webflows SEO-funktioner, högpresterande hosting och semantiskt sund kod, markerar det alla rutor för att utveckla webbplatser som kommer att rankas högt i sökmotorerna.
Solida mallar för att komma igång: Om du inte har erfarenhet av webbutveckling erbjuder Webflow mallar för allt från e-handelsbutiker och bloggar till portföljer och webbplatser för företagsmarknadsföring.
Majoriteten av premiummallarna som finns tillgängliga på Webflow skapas av mycket skickliga Webflow-användare. Även om du måste köpa dessa, är priserna relativt billiga, vanligtvis under $80. Det är inte alltid fallet för mycket lyhörda och genomtänkta mallar som är helt anpassningsbara.
När du väl har köpt en mall gör Webflows intuitiva dra-och-släpp-redigerare det enkelt att skräddarsy designen för ditt varumärke. Du kan ändra bilder, text, färger och layouter för att förvandla mallen till ditt eget unika utseende.
Genom att kombinera en användarvänlig redigerare med en mallmarknad som spänner över många branscher och användningsfall, ger Webflow en löpande start för alla som är nybörjare inom webbdesign och utveckling.
Figma integration: Ett av de mest populära verktygen inom webbdesign idag är Figma, en samarbetsdesignplattform. Webflow har en direkt Figma-integration som låter dig importera dina Figma-designer direkt till Webflow, som sedan automatiskt konverterar dem till HTML och CSS inom din arbetsyta.
Denna integration gör allt. Den återskapar layouter baserade på ditt Figma-dokument, importerar typografistilar, upprättar kant- och skugginställningar, tar in bakgrundsbilder och övertoningar, konverterar vektorer och former till SVG:er, införlivar bilder med opacitet och den anger absolut positionering.
Enligt vår erfarenhet fungerade integrationen otroligt bra. Våra layouter överfördes till Webflow med nästan pixelperfektion. Dessutom sparade det oss oerhört mycket tid genom att tillämpa stilar och layouter automatiskt istället för att behöva återskapa allt manuellt. Att kunna flytta sömlöst från Figma till Webflow överbryggar verkligen klyftan mellan design och utveckling.
Marketing logik automatisering: Med inbyggd logikautomation kan Webflow sömlöst ansluta din webbplats till ditt CMS, CRM, e-postmarknadsföring och andra plattformar.
Du kan till exempel automatiskt dirigera leads till lämpliga säljare eller lägga till e-postregistreringar till en viss kampanjlista direkt i din arbetsyta. Allt du behöver göra är att ställa in en utlösare i Webflow, definiera villkor eller kriterier för den utlösaren och sedan välja den åtgärd du vill att utlösaren ska utföra.
Utlösare kan vara allt från en formulärinlämning till ett knappklick till en anpassad händelse. Åtgärderna kan integreras med hundratals marknadsförings-, försäljnings- och e-posttjänster via Zapier.
Vi tyckte att automatiseringen var otroligt användbar för att koppla vår Webflow-webbplats till vår marknadsföringsstack. Så snart någon fyller i ett kontaktformulär skapar den automatiskt en ny potentiell kund i vårt CRM, så e-postregistreringar läggs till i kampanjer utan någon manuell inmatning.
Återigen ger Webflows no-coding-om inte-du-vill-att-metoden utdelning, denna gång låter dig skapa sofistikerade flerstegsarbetsflöden för att vårda potentiella kunder och potentiella kunder genom din webbplatss tratt.
Webflows potentiella nackdelar
Det är inte precis som att koda en webbplats: Även om Webflow låter dig konstruera webbplatser visuellt som om du skulle skriva kod, finns det fortfarande vissa begränsningar jämfört med att faktiskt koda en webbplats från början.
Webflows versionssystem saknar till exempel mer avancerad versionskontroll som GIT. Detta kan vara problematiskt för större, komplexa webbplatser som kräver invecklad dokumentation och förändringsspårning.
Du kan inte heller helt ta bort element från Document Object Model, som är en datarepresentation av din webbplats struktur och innehåll. Istället kan du bara dölja element visuellt, och dolda element kommer fortfarande att finnas i din kod. För att optimera sidhastigheten är det bättre att ta bort onödiga element helt och hållet.
Tekniska begränsningar: Även om Webflow är fantastiskt på den mjuka sidan av saker, kan du stöta på några hinder på den svåra sidan. Om du t.ex. vill exportera och tillhandahålla formulär själv, måste du använda en tredjepartsformulärleverantör med Webflow. Efter det kanske vissa formulärfunktioner inte ens fungerar korrekt när du har exporterat koden och laddat upp den till externa servrar.
Dessutom har Webflow också en gräns på 150 statiska sidor per webbplats för användare. Du kan lägga till mer dynamiska sidor som bloggar som hämtar innehåll från en databas, men antalet distinkta statiska sidor är begränsat. Om du har en webbplats som behöver massor av sidor kan du ha tur.
Även om dessa begränsningar sannolikt inte kommer att påverka de flesta användare, illustrerar de hur Webflow inte är en komplett ersättning för kodning av komplexa, storskaliga webbplatser.
Endast en designer kan arbeta åt gången: Medan flera gruppmedlemmar kan redigera innehåll på Webflow samtidigt, kan bara en enda person implementera designändringar. Till exempel, om en annan teammedlem loggar in som designer, kommer den att kasta den ursprungliga designern ur redigeringsläge.
Denna begränsning gör det mycket svårt för större team att samarbeta kring webbdesign tillsammans i Webflow eftersom man måste koordinera scheman och tillgång för att undvika konflikter. Att hålla reda på en enda källa till sanning kan vara särskilt problematiskt när man bygger komplexa webbplatser eller arbetar under snäva deadlines.
Som sagt, Webflow har försökt mildra problemet med en enda designer med sin förgreningsfunktion. Detta låter dig göra en ögonblicksbild av en sida, göra ändringar på den grenen och sedan slå samman tillbaka när du är klar. Det är dock inte samma sak som att flera designers aktivt arbetar parallellt – plus att det bara erbjuds på företagsnivå med betalda planer.
Sammantaget, även om Webflow har integrationer som Figma för att göra samarbeten enklare, kan dess oförmåga att ha mer än en designer som arbetar samtidigt vara en dealbreaker för vissa byråer och stora team.
Inte idealiskt för bloggande eller e-handel: Även om Webflow tillhandahåller fantastiska färdiga verktyg för användare som fokuserar på att snabbt bygga en blogg eller butik, uppstår begränsningar i samma sekund som du siktar på att växa till ett SEO- eller e-handelskraftverk.
Webflow har till exempel vissa utmaningar när man försöker skala upp en blogg med optimerad SEO. Specifikt är det svårt att lägga till kanoniska taggar på sidor och du kan behöva använda anpassad kod för att få mer exakt kontroll.
Att driva en stor blogg i Webflow kan också bli dyrt. För att skapa tillräckligt med sidmallar och lagra rikligt med blogginnehåll behöver du förmodligen affärsplanen. Även då har alla nivåer begränsningar för lagringsbara CMS-objekt och trafikvolymer innan de behöver uppgraderas.
Webflows e-handelsplattform har också begränsningar kring skalbarhet. Den saknar mer avancerade funktioner för att effektivisera kassaflöden, beräkna skatter dynamiskt och hantera lager.
Så, precis som Webflows bloggfunktioner, fann vi att dess e-handelsplattform var tillräcklig för mindre webbplatser men saknade nyckelområden för en mer sofistikerad och/eller webbplats med högre volym.
Begränsad kundsupport: Webflow tillhandahåller endast e-postbaserat stöd för alla deras prisnivåer och svar tar vanligtvis upp till 48 timmar att få. Även om du har ett akut problem som kräver omedelbar åtgärd kan du behöva vänta ett par dagar på hjälp.
Vi kontaktade Webflows support med en något komplex utvecklingsfråga, och svaret vi fick i gengäld var i huvudsak: “Vi erbjuder inte webbutvecklingstjänster, vänligen be samhället om hjälp istället.”
Naturligtvis har Webflow en gigantisk community för felsökning och ett bibliotek fullt av självbetjäningstutorials, men för en premiumbetald tjänst skulle vi ha velat se telefon-, chatt- eller prioriterade e-postsupportalternativ.
Webflowplaner och prissättning
Webflow har en intressant prismodell, med separata planer för webbplatsen du bygger och arbetsytan du använder. Tack och lov har båda gratis nivåer så att du kan komma igång direkt och ta reda på vad du behöver senare.
För att vara värd för det du bygger på Webflow behöver du en platsplan. Du betalar per webbplats för detta, och du kan uppgradera till högre nivåer för premiumfunktioner som anpassade domäner, formulärinlämningar och en ökning av antalet inkluderade CMS-objekt. Det finns också separata nivåer för att bygga e-handelswebbplatser.
För att kunna samarbeta på de webbplatser du bygger behöver du en arbetsytaplan. De betalda nivåerna för den här produkten är utformade för att ge dig ytterligare behörigheter som ett högre antal användare och möjligheten att exportera kod, med separata nivåer för in-house-team och byråer och frilansare.
Även om det kan vara förvirrande till en början, med separata nivåer för varje plantyp kan du blanda och matcha saker beroende på vad du vill bygga och hur du vill bygga det.
Plats planer
Webflow har flera webbplatsplaner utformade för att bygga företagssajter, portföljer, bloggar och andra innehållsfokuserade webbplatser. Varje plan är för en plats.
Startplanen är gratis och avsedd för att få kläm på Webflow. Den innehåller en webflow.io-domän, 50 CMS-objekt, 50 livstidsformulärinlämningar, 100 användarkonton och 1 GB månatlig bandbredd. Den kommer också med ett “Made in Webflow”-märke i det nedre hörnet av din webbplats, och du har bara två statiska sidor att arbeta med, så det kanske inte är bra för en professionell webbplats.
Alla betalda planer kommer med 150 statiska sidor, borttagna Webflow-varumärken, lösenordsskydd, 20 000 användarkonton och obegränsade säkerhetskopior.
Grundplanen faktureras med $18 per månad om den betalas månadsvis, men du kan också betala årligen och spara $4 per månad. Den här planen är värd för en enkel webbplats utan CMS-objekt. Den inkluderar en anpassad domän, 500 månatliga formulärinlämningar och 50 GB månatlig bandbredd.
CMS-planen kommer in på 29 USD per månad med en rabatt på 6 USD per månad om den betalas per år. Den här planen är bra för bloggar och innehållswebbplatser, eftersom den inkluderar en anpassad domän, 2 000 CMS-objekt, 1 000 månatliga formulärinlämningar och 200 GB bandbredd. Du kommer också att kunna ge redigeringsåtkomst till ytterligare två användare för totalt tre innehållsredigerare.
Affärsplanen kostar $49 per månad om den betalas månadsvis, eller $39 per månad om den betalas per år. Den här planen är gjord för mycket trafikerade marknadsföringswebbplatser och den inkluderar 10 000 CMS-objekt, 2 500 månatliga formulärinlämningar, 400 GB bandbredd och upp till 10 innehållsredigerare. Den kommer också med de snabbaste tillgängliga sidladdningarna, och den tillåter filuppladdningar från besökare.
Webflow erbjuder ännu fler fördelar och högre gränser på företagsnivå för användare med höga biljetter, även om du måste kontakta Webflow för att ta reda på priset för din anpassade plan.
Webbplatsplaner för e-handel
Webflow har e-handelsspecifika webbplatsplaner som låser upp nyckelfunktioner som är skräddarsydda för nätbutiker och webbutiker. De högre e-handelsnivåerna lägger till avgörande funktionalitet som obegränsade produktvarianter, fraktpriser i realtid, rabatterade priser och avancerad rapportering.
Standardplanen kommer med alla CMS-planens funktioner och inkluderar 500 e-handelsartiklar, 2 000 CMS-artiklar och 2 % transaktionsavgifter för $29 per månad som faktureras årligen, eller $42 per månad som faktureras månadsvis.
Plus-planen kommer med affärsplanens funktioner och inkluderar 5 000 e-handelsartiklar, 10 000 CMS-artiklar och 0 % transaktionsavgifter för $74 per månad när du betalar per år, eller $84 per månad när du betalar per månad.
Den avancerade planen bygger också på affärsplanen och ger dig 15 000 e-handelsartiklar, 10 000 CMS-artiklar och inga transaktionsavgifter för $212 per månad årligen, eller $235 per månad när de betalas månadsvis.
Sammantaget finner vi att Plus-planen ger gott om funktioner och tillräckligt med inventarier för en medelstor onlinebutik, medan den avancerade planen är bättre lämpad för dem med en stor produktkatalog som har komplexa kombinationer och kampanjer.
Planer för intern arbetsplats
Webflows arbetsytor tillhandahåller skalad prissättning baserat på teamstorlek, antalet webbplatser och andra behörigheter. Planer på högre nivå låser upp avancerade funktioner för teamsamarbete och faktureras per organisation snarare än per webbplats. Du kan ha flera platser på varje arbetsyta.
Medan alla betalda arbetsytor kommer med anpassad kod och exporträttigheter, faktureringsbehörigheter och minst två gästplatser, är den kostnadsfria nivån för individer som börjar med Webflow. Det inkluderar en plats, två webbplatser som inte är värd och två gästplatser för byråer, frilansare eller entreprenörer.
Core-nivån kostar $19 per månad som betalas per år eller $28 för månad till månad, och är avsedd för mindre team som vill ha kontroll över sin kod. Den kommer med tre platser, 10 icke-värdplatser och två gästplatser.
Tillväxtnivån är tillgänglig för $60 per månad, med en månadsrabatt på $11 om den betalas per år. Den här planen är bra för växande team som behöver mycket frihet i utvecklingen. Den har nio platser, obegränsade webbplatser utan värd, både fakturerings- och publiceringsbehörigheter och två gästplatser.
Enterprise-nivån kräver anpassad prissättning, men kommer med obegränsade platser och webbplatser, upp till 10 gäster, avancerad säkerhet och prestanda, ett kundframgångsteam och sidförgrening.
Planer för frilansare och byråer
Webflows arbetsytaplaner för frilansare och byråer är gjorda för att samarbeta med kunder och hantera CMS på webbplatser som inte är värd.
Den kostnadsfria nivån inkluderar en plats, två webbplatser som inte är värdar på webflow.io-domäner och två arbetsytagäster.
Freelancer-arbetsytan kostar $24 per månad som faktureras månadsvis eller $16 per månad som faktureras årligen. Det inkluderar tre platser, 10 icke-värdbaserade webbplatser på webflow.io-domäner, full CMS-åtkomst på icke-värdbaserade webbplatser, fri tillgång som gäst på klientarbetsytor och två gäster på din egen arbetsyta.
Byråns arbetsyta kommer att driva dig $42 per månad med en rabatt på $7 per månad om du betalar årligen. Det ger nio platser, obegränsat antal webbplatser som inte finns på webflow.io-domäner, fullständig CMS-åtkomst på webbplatser som inte är värd, administration av publiceringsbehörigheter, fri tillgång som gäst på klientarbetsytor och två gäster på din egen arbetsyta.
Tänk på att även om båda dessa betalnivåer har samma allmänna CMS-gränser för artiklar, samlingar, fält och referenser, är det bara byrån som låter dig ta bort Webflow-varumärke.
Slutliga tankar
Om du är en webbdesigner eller utvecklare som vill spara tid och ansträngning men ändå vill ha möjligheten att kontrollera nästan vilken aspekt av ditt arbete som helst, finns det inget på marknaden som liknar Webflow. Du kan lita på dess dra-och-släpp-redigerare för att bygga en webbplats med vackra animationer och integrationer, eller så kan du exportera koden och anpassa dess mallar själv.
Även om det finns begränsningar för hur djupt det kodfria kaninhålet går, är Webflow ett utmärkt verktyg som ger dig det bästa av två världar. Om du bara vill ha det bästa av en av dessa världar, kolla in vår lista över bästa webbplatsbyggare och se vilken plattform som är rätt för dig.
