Преглед на Webflow Website Builder

Webflow е уважавана платформа за дизайн на уебсайтове, използвана от над 3.5 милиона клиенти по целия свят. Независимо дали сте опитен професионалист или тепърва започвате, този преглед на Webflow ще ви даде задълбочен поглед върху функциите и възможностите на тази платформа за създаване на уебсайтове без код.

Има стотици създатели на уебсайтове. Всеки е подходящ за различна аудитория. Webflow твърдо се позиционира като предпочитан софтуер за професионални дизайнери, агенции и фирми, достигащи корпоративно ниво. 

Наистина има впечатляващ набор от инструменти и функции, които са удоволствие да използвате – стига да знаеш какво правиш. 

Не съм експерт по уеб дизайн, така че нека видим как се справям с платформата. Може ли Webflow да се използва от всеки? Или е най-добре да го оставите на експертите? Нека разберем.

TL;DR: Webflow разполага със страхотна гама от инструменти и функции за създаване на зашеметяващи, бързо работещи уебсайтове. Въпреки това, той е насочен към професионалистите в дизайна, а не към обикновения човек. Следователно платформата изисква стръмна крива на учене и може да бъде твърде непосилна за някои.

Reddit е чудесно място да научите повече за Webflow. Ето няколко публикации в Reddit, които смятам, че ще ви бъдат интересни. Вижте ги и се присъединете към дискусията!

Предимства и недостатъци

Първо, нека балансираме доброто с лошото с бърз преглед на плюсовете и минусите на Webflow:

Планове и цени

Webflow има пет налични плана за обща употреба:

• Безплатен план: Използвайте безплатно на ограничена база
• Основен план: От $14/месец, таксувани годишно
• CMS план: От $23/месец, таксувани годишно
• Бизнес план: От $39/месец, таксувани годишно
• Enterprise: Ценообразуване по поръчка

Webflow има и ценови планове специално за електронна търговия:

• Стандартен план: От $24.mo таксувани годишно
• Плюс план: От $74/месец, таксувани годишно
• Разширен план: $212/месец се таксува годишно

Ако имате нужда от допълнителни потребителски места за вашия акаунт в Webflow, тези цена от $16/месец нагоре, в зависимост от вашите изисквания. 

План	Тип	Месечна цена	Месечна цена, таксувана годишно	Използва се за
Безплатно	Обща употреба	Безплатно	Безплатно	Ограничена употреба
Basic	Обща употреба	$18	$14	Прости сайтове
CMS	Обща употреба	$29	$23	Сайтове със съдържание
Бизнес	Обща употреба	$49	$39	Сайтове с голям трафик
Enterprise	Обща употреба	направен по поръчка	направен по поръчка	Мащабируеми сайтове
Standard	E-търговия	$42	$29	Нов бизнес
Plus	E-търговия	$84	$74	Висок звук
Подробно	E-търговия	$235	$212	Scaling
Цените по-долу са в допълнение към избраните планови такси
Стартер	Вътрешни екипи	Безплатно	Безплатно	начинаещи
Ядро	Вътрешни екипи	$ 28 на място	$ 19 на място	Малки екипи
Растеж	Вътрешни екипи	$ 60 на място	$ 49 на място	Разрастващи се екипи
Стартер	Freelancers и агенции	Безплатно	Безплатно	начинаещи
Freelancer	Freelancers и агенции	$ 24 на място	$ 16 на място	Малки екипи
агенция	Freelancers и агенции	$ 42 на място	$ 36 на място	Разрастващи се екипи

За по-подробна разбивка на ценообразуването на Webflow, разгледайте моя задълбочена статия тук.

Годишното плащане ви спестява 30% в сравнение с месечното плащане. Тъй като е наличен безплатен план, няма безплатен пробен период.

Важно: Webflow го прави не предоставят възстановявания и има без гаранция за връщане на парите след първоначално плащане за план.

Отличителни характеристики

Сега нека да дадем на платформата добър старт за парите си и да се забием какво прави Webflow и неговите характеристики и вижте дали са струва си цялата реклама.

Webflow шаблони

Всичко започва с шаблон! Webflow има хубава селекция от безплатни, предварително изградени шаблони които са направили всички изображения, текст и цвят вместо вас. Ако искате да подобрите дизайна, можете също изберете платен шаблон.

Цената за шаблон варира от около $20 до над $100 и се предлага в куп различни бизнес ниши.

Но ето какво ми харесва най-много. При почти всички създатели на уебсайтове няма средно положение. Или започвате с изцяло пеещ, изцяло танцуващ предварително изграден шаблон или празна страница. 

Празната страница може да бъде трудна отправна точка, особено ако сте начинаещ, и a предварително изграден шаблон може да ви е трудно да видите как ще работи с вашата естетика.

Webflow намери средата. Платформата има основни шаблони за портфолио, бизнес и сайтове за електронна търговия. Структурата е там, но не е изпълнена с изображения, цветове или нещо друго, което отвлича вниманието.

Това го прави лесен за визуализиране и създайте своя уебсайт без да се заблуждавате от това, което вече е там.

Инструмент за проектиране на Webflow

Сега, за любимата ми част, инструмента за редактиране. Реших да използвам предварително създаден шаблон тук и го пуснах в редактора.

Незабавно, Беше ми представен списък с всички стъпки, които трябваше да изпълня за да подготвя уебсайта си за публикуване. Мислех, че това е приятно докосване за тези, които са нови в този софтуер.

След това заседнах в инструментите за редактиране и това беше моментът Бях поразен от огромното количество опции, които се предлагат.

Инструментът има обичайното интерфейс за плъзгане и пускане където избирате желания елемент и го плъзгате на уеб страницата. Щракването върху елемент отваря менюто за редактиране от дясната страна на екрана и менюто за навигация отляво. 

Ето къде става супер детайлен. На екранната снимка виждате само част от менюто за редактиране. Всъщност се превърта надолу, за да разкрие a луд брой опции за редактиране.

Всеки елемент на уеб страница има такъв тип меню и не спира дотук. Всяко меню също има четири раздела в горната част които разкриват допълнителни инструменти за редактиране.

Сега, не ме разбирайте погрешно. Това не е отрицателна точка. Някой, който вече е свикнал със софтуера за уеб изграждане и професионалните уеб дизайнери, ще се насладят на степента на контрол, която имат, тъй като позволява пълна творческа свобода.

От друга страна, вече виждам, че това е така не е добър избор за начинаещи тъй като не е веднага очевидно какво трябва да направите и как го правите.

Няма да навлизам в тънкостите на всеки наличен инструмент за редактиране на тази платформа, защото ще сме тук цяла седмица.

За пълен списък с функции посетете уебсайта webflow.com сега.

Достатъчно е да се каже, той е усъвършенстван и има всичко, от което може да се нуждаете, за да задоволи и най-ориентирания към детайлите дизайнер. 

Тук обаче ще посоча някои от забележителните функции:

• Инструмент за автоматичен одит: Webflow може да одитира вашия уебсайт, когато пожелаете. Той ще подчертае възможностите, при които можете да подобрите използваемостта и ефективността на страницата.
• Добавете тригери за взаимодействие: Инструментът ви позволява да създавате тригери, които автоматично извършват действие, когато мишката се задържи над определена област. Например, можете да зададете изскачащ прозорец да се показва.
• Динамично съдържание: Вместо ръчно да променяте или актуализирате елементи на множество уеб страници, можете да ги промените на една страница и промените ще се прилагат навсякъде. Това е полезно, ако имате например стотици публикации в блогове, които изискват промяна.
• CMS колекции: Това е умен начин за организиране на групи от данни, така че да можете да контролирате и редактирате динамичното съдържание.
• Актив: Това е вашата библиотека с изображения и медии, където качвате и съхранявате всичко. Харесва ми това, защото прилича на инструмента за активи на Canva и улеснява превъртането, за да намерите това, от което се нуждаете, докато оставате на страницата за редактиране.
• Инструмент за споделяне: Можете или да споделите видима връзка към сайта, за да получите обратна връзка, или да поканите сътрудници с връзка за редактиране.
• Видео уроци: Webflow знае, че е изчерпателен инструмент и трябва да кажа, че неговата библиотека от уроци е обширна и наистина лесна за следване. Освен това те могат да бъдат достъпни директно в инструмента за редактиране, което е супер удобно.

Webflow анимации

Кой иска скучни, статични уебсайтове, когато можете да имате прекрасни, динамични и анимирани уеб страници?

Webflow използва CSS и Javascript, за да позволи на дизайнерите да създават сложни и гладко работещи анимации, без изобщо да изискват без познания по кодиране каквато.

Тази функция беше отвъд собствените ми възможности за уеб изграждане, но някой добре запознат с уеб дизайна ще го направи имайте полеви ден с всичко, което може да направи.

Например, Webflow ще ви позволи да създавате анимации за превъртане като паралакс, разкриване, ленти за напредък и др. Анимациите могат да се прилагат към цялата страница или към отделни елементи.

Обичам да виждам уебсайтове с динамични движения в тях. Те са чудесен начин да привлечете вниманието на хората или да ги накарате да се задържат на вашия сайт за по-дълго време.

Те също са страхотен инструмент за подканване на някого да щракне върху определен елемент или да извърши желано действие.

Електронна търговия Webflow

Webflow е напълно настроен за електронна търговия (и има ценови планове към него) и вероятно можете да предположите, че тази функция е също толкова изчерпателен, колкото неговите инструменти за уеб изграждане.

Всъщност функцията за електронна търговия е достъпна чрез интерфейса за уеб редактиране и ви позволява да направи всичко, което едно специално приложение за електронна търговия би направило:

• Създайте магазин за физически или цифрови продукти
• Експортирайте или импортирайте продуктови списъци групово
• Създавайте нови продукти, задавайте цени и редактирайте подробности
• Организирайте продуктите в определени категории
• Създавайте персонализирани отстъпки и оферти
• Добавете персонализирани опции за доставка
• Проследяване на всички поръчки
• Създавайте продукти, базирани на абонамент (в момента в бета режим)
• Създайте персонализирана количка и каси
• Персонализирайте транзакционните имейли

За приемане на плащания Webflow се интегрира директно с Stripe, Apple Pay, Google Плащане и PayPal.

Честно казано, намерих този списък за малко ограничен, особено в сравнение с други платформи за уеб изграждане. 

Въпреки че вие мога използвайте Zapier, за да се свържете с други доставчици на плащания, това е по-сложно и ще ви струва много повече, особено ако виждате големи обеми на продажби.

Членства, курсове и ограничено съдържание в Webflow

Продажбата на курсове е горещо в момента, така че уеб строителите се опитват да се справят с тази тенденция. Изглежда, че Webflow се е прихванал, защото сега имат a функция за членство който в момента е в бета режим.

Членството в Webflow ви предлага начин да създайте платена стена за определено съдържание на вашия уебсайт, създайте портали за членство и предоставят базирано на абонамент съдържание.

Доколкото разбирам, вие създавате страници на уебсайта си за вашето ограничено съдържание, след което ги „заключвате“ със страница за достъп само за членове. Тук можете марка всичко, създавайте персонализирани формуляри и изпращайте персонализирани транзакционни имейли.

Тъй като тази функция е в бета режим, тя със сигурност ще се разширява и подобрява с времето. Това определено е нещо, което трябва да наблюдавате, докато напредва.

Сигурност и хостинг на Webflow

Webflow не е просто инструмент за създаване на уебсайтове. Той също така разполага със способността да host вашия уебсайт и също така предоставя разширени функции за сигурност. 

Това прави платформата a обслужване на едно гише и премахва необходимостта да купувате хостинг и сигурност от платформи на трети страни. Аз съм фен на удобството, така че това много ме харесва.

Хостинг на уеб поток

Що се отнася до хостинга, Webflow може да се похвали с Производителност от клас A и 1.02 секунди време за зареждане за неговите уебсайтове.

Хостингът се предоставя чрез своя Мрежа за доставка на съдържание от ниво 1 заедно с Amazon Web Services и Fastly. Освен първокласна производителност, хостингът на Webflow също ви дава:

• Персонализирани имена на домейни (с изключение на безплатния план)
• Персонализирани 301 пренасочвания
• Мета данни
• Безплатен SSL сертификат
• Ежедневни архиви и версии
• Защита с парола на страница
• Мрежа за разпространение на съдържание (CDN)
• Персонализирани формуляри
• Търсене в сайта
• Платформа за визуален дизайн и публикуване
• Нулева поддръжка

Сигурност на Webflow

Webflow определено приема сигурността сериозно, така че можете да сте сигурни, че вашият уебсайтовете и всички данни се пазят в безопасност на всеки етап.

Платформата картографира своята програма за сигурност според ISO 27001 и CIS критични контроли за сигурност и други отраслови стандарти.

Ето всички функции за сигурност, които можете да очаквате с нетърпение с Webflow:

• Съвместим с GDPR и CCPA
• Сертифициран доставчик на услуги от ниво 1 за Stripe 
• Пълна сигурност на данните и проверка на персонала в самия Webflow
• Двуфакторна удостоверяване
• SSO възможности с G Suite
• Single Sign-On
• Разрешения въз основа на роли
• Облачно базирано съхранение на клиентски данни
• Напълно криптиран трансфер на данни

Webflow интеграции и API

Webflow има a приличен брой приложения и директни интеграции които ви дават по-голям контрол и гъвкавост. Ако платформата не поддържа директна интеграция, можете използвайте Zapier, за да се свържете с любимите си инструменти и софтуерни приложения.

Можете да намерите приложения и интеграции за:

• маркетинг
• Автоматизация
• Анализи
• Платежни процесори
• Членства
• E-търговия
• Имейл хостинг
• социални медии
• Инструменти за локализация и др

Ако не можете да намерите приложението, от което се нуждаете, можете помолете Webflow да създаде персонализирано приложение, специално за вас (тук се прилагат допълнителни разходи).

Обслужване на клиенти на Webflow

Webflow е гигантска платформа, така че бихте очаквали да има прилично ниво на обслужване на клиентите за своите абонати. 

Въпреки това, Webflow се оставя тук. Няма поддръжка на живо – дори и в най-високите ценови планове. Единственият начин да се свържете с представител на поддръжката е чрез имейл и дори тогава времето за реакция е лошо. 

Доклади в мрежата твърдят, че Webflow отнема средно до 48 часа да отговаря на запитванията на клиентите. Това не е страхотно, особено ако имате клиентски крайни срокове, които трябва да спазвате.

Въпреки това Webflow печели няколко точки в тази област и това е благодарение на неговия университет. Тази огромна учебна библиотека е пълен с курсове и видеоклипове за обучение за да ви научи как да използвате платформата правилно.

Все пак това няма да ви помогне, ако сайтът се повреди или срещнете проблем. Да се ​​надяваме, че Webflow въведе по-добри опции за поддръжка в близко бъдеще.

Примери за уебсайтове на Webflow

И така, как всъщност изглеждат публикуваните сайтове на Webflow? Има толкова много неща, които можете да вземете от един шаблон, така че разглеждането на примерни уебсайтове на живо е чудесен начин да усетите възможностите на Webflows.

Първо горе, ние имаме https://south40snacks.webflow.io, примерен сайт за компания, която произвежда закуски на базата на ядки и семена (изображение по-горе).

Това е страхотно изглеждащ сайт с някои страхотни анимации, които да привлекат вниманието ви (и ви кара да гладувате за закуски!). Оформлението и дизайнът са превъзходни и всичко функционира гладко.

Следващото е https://illustrated.webflow.io/. Първо ви се представя a спираща шоуто анимация, но докато превъртате, имате чисто, красиво представено оформление което се чувства завладяващо, но организирано.

Всяка страница се зарежда бързо, а вградените видеоклипове вървят като мечта.

https://www.happylandfest.ca/ показва примерен уебсайт за фестивал и започва с видеоклипове, насложени с текст.

Докато превъртате, ще бъдете преведени през галерия от изображения и допълнителна информация за събитието. Създаден е да привлече незабавно вниманието ви и го прави много добре.

За да видите допълнителни примери за сайтове на Webflow. Вижте ги тук.

Сравнете конкурентите на Webflow

Както обясних в този преглед, Webflow е известен със своите разширени функции и гъвкавост, което го прави популярен избор сред дизайнерите, които искат повече контрол върху външния вид и функционалността на своите уебсайтове. Има обаче и други платформи. Ето как Webflow се сравнява с някои от най-добрите си конкуренти:

1. Squarespace: Squarespace е популярен конструктор на уебсайтове, който предлага набор от шаблони и опции за дизайн за създаване на професионално изглеждащ уебсайт. Докато Squarespace е по-лесен за начинаещи, Webflow предлага повече опции за персонализиране и разширени функции за опитни дизайнери.
2. Wix: Wix е удобен за потребителя конструктор на уебсайтове с интерфейс за плъзгане и пускане за създаване на уебсайтове. Въпреки че е по-удобен за начинаещи от Webflow, той има по-малко опции за персонализиране и може да не е подходящ за по-сложни уебсайтове.
3. WordPress: WordPress е широко използвана система за управление на съдържанието (CMS), която предлага много гъвкавост и опции за персонализиране за уеб дизайнерите. Въпреки че е по-сложен от Webflow, той предлага повече контрол върху дизайна и функционалността на уебсайта.
4. Shopify: Shopify е популярна платформа за електронна търговия, която позволява на потребителите да създават онлайн магазини. Въпреки че не е пряк конкурент на Webflow, заслужава да се отбележи, че Webflow предлага функционалност за електронна търговия и може да бъде добър избор за малки фирми, които търсят уебсайт с дизайн и възможности за електронна търговия.

Като цяло Webflow се откроява сред своите конкуренти със своите разширени функции и гъвкавост, което го прави идеален избор за опитни уеб дизайнери, които търсят платформа, която напълно персонализира външния вид и функционалността на техните уебсайтове.

Въпроси и отговори

Нашата присъда ⭐

Няма съмнение, че Webflow може да се конкурира WordPress за големия брой инструменти за редактиране, интеграции и функции, които предлага. Мисля, че това е идеален вариант за професионалисти в уеб дизайна, фирми на корпоративно ниво и дизайнерски агенции.

Наистина, платформата има много ценови планове, които ви позволяват разраствайте и мащабирайте уебсайта си в съответствие с вашия бизнес. Иска ми се само да имам опит (и време), за да опозная тази платформа напълно.

Въпреки това, има по-добри платформи за нови потребители и хора, които искат основен, неусложнен уебсайт. Например, бизнес сайтове с една страница, сайтове с лична биография и средният блогър ще намерят Webflow за твърде сложен за свое добро и може да предпочетат нещо по-основно като Wix, Site123 or Съмнение.

Скорошни подобрения и актуализации

Webflow непрекъснато подобрява своята CMS с повече функции и функционалности. Ето само някои от скорошните подобрения (последна проверка през април 2024 г.):

• Кодов блоков елемент: Нова функция за показване на специфични за езика кодови фрагменти на всяка страница.
• Групов превод на полета за единични CMS елементи: Позволява превод на цял CMS елемент на вторичен локал само с едно щракване.
• Поддръжка на Markdown в елементи с форматиран текст: Добавя възможност за използване на маркдаун за форматиране в елементи с форматиран текст.
• Пренареждане на свойствата на компонентите: Позволява на потребителите да пренареждат свойствата на компонентите, за да отговарят на техния работен процес.
• Локализация за всички клиенти: Функциите за локализация вече са достъпни за всички клиенти, с безплатен преглед на основните функционалности.
• Контрол на събития с указател: Тази актуализация помага за управлението на припокриващи се елементи на уебсайтове, като задава събитията на указателя на нищо.
• Персонализиран елемент: Потребителите вече могат да добавят всеки HTML таг или персонализиран атрибут към елемент, отключвайки пълния потенциал на HTML.
• Разклонение за тестване на дизайна: Осигурява отделна сцена за тестване на проекти в клон, особено полезна за корпоративни клиенти.
• Подобрения на обогатени текстови елементи: Направени са подобрения, за да направят изграждането с богати текстови елементи по-гъвкаво и ефективно.
• Noindex контрол за отделни страници: Това SEO подобрение позволява контрол върху това кои страници са включени в картите на сайта и индексирани от търсачките.
• Щракнете с десния бутон в навигационния панел: Подобрява скоростта на изграждане на уебсайт с всички действия, които вече са налични с щракване с десен бутон в навигатора.
• Нов облик и усещане за Webflow: Актуализиран потребителски интерфейс предлага по-фокусирано работно пространство и модерен дизайн.
• 3D сплайн сцени: Потребителите могат да добавят и анимират 3D обекти в своите сайтове с помощта на Spline сцени.
• Контрол на пропорциите: Въвежда контрол на пропорциите в Webflow Designer.
• Кодификация на системата за проектиране с променливи: Променливи за съхраняване на стойности като цветове, размери и типография подобряват последователността на дизайна и мащабируемостта.
• Подобрения в използваемостта на компонентите: Подобрена използваемост въз основа на това дали управлявате основен компонент или изграждате с екземпляр на компонент.
• Нови API за компоненти, променливи и локализация: Тези API подпомагат разработчиците при изграждането на мощни приложения на Webflow.
• Прехвърляне на планове на обекта: Администраторите на работното пространство вече могат да прехвърлят планове на сайтове между сайтове, опростявайки управлението.
• Нови роли за редактиране на съдържание и коментатор: Подобрява работата в екип с нови роли в дизайнера за редактиране на съдържание и сътрудничество.
• Управление на персонализирани домейни: Свързването на персонализирани домейни със сайтове в Webflow е улеснено.
• Приложения на Webflow: Представя следващото поколение Webflow приложения, интегриращи се по-дълбоко с основните бизнес инструменти.
• Актуализации на платформата за разработчици: Бяха направени значителни актуализации на платформата за разработчици, за да се създадат повече възможности за изграждане на продукти.
• Подобрени работни процеси за публикуване: Подобрените работни потоци за поставяне и публикуване, особено за корпоративни клиенти, предлагат по-добър контрол върху промените в уебсайта.
• Архивирайте работно пространство: Собствениците на работно пространство вече могат да премахват работно пространство от таблото за управление, без да се свързват с поддръжката на клиенти.
• Клавишни комбинации за управление на класове: Нови преки пътища за дублиране или премахване на последния клас на елемент.
• Обвиване на текст и разбиване на думи: Контрол върху това къде текстът преминава на нов ред.
• Подобрена поддръжка на Figma Plugin: Подобрена поддръжка за автоматично оформление и отзивчивост във Figma, лесно импортируема в Webflow.
• Проследяване на промените в съдържанието в регистъра на активността на сайта: Видимост в CMS и промени в съдържанието на статичната страница в регистъра на активността на сайта.
• Опростени разрешения за публикуване: Подробен контрол върху разрешенията за публикуване за всеки член на Workspace.
• Централизирана обратна връзка с коментар в дизайнера: Споделяйте, преглеждайте и решавайте отзиви директно в дизайнера.
• Елемент за бързо подреждане: Нов елемент, който ускорява процеса на изграждане с контроли върху платното и предварително зададени оформления.

Преглед на Webflow: Нашата методология

Когато преглеждаме създателите на уебсайтове, ние разглеждаме няколко ключови аспекта. Ние оценяваме интуитивността на инструмента, неговия набор от функции, скоростта на създаване на уебсайт и други фактори. Основното съображение е лекотата на използване за лица, които са нови в настройката на уебсайта. При нашето тестване нашата оценка се основава на следните критерии:

1. Персонализиране: Конструкторът позволява ли ви да променяте дизайна на шаблона или да включите свой собствен код?
2. Удобство за потребителя: Лесни ли са за използване навигацията и инструментите, като например редактора за плъзгане и пускане?
3. Съотношение качество-цена: Има ли опция за безплатен план или пробен период? Платените планове предлагат ли функции, които оправдават цената?
4. Охрана: Как строителят защитава вашия уебсайт и данни за вас и вашите клиенти?
5. Шаблони: Висококачествени, съвременни и разнообразни ли са шаблоните?
6. Поддържа се: Лесно ли е налична помощ чрез човешко взаимодействие, чатботове с изкуствен интелект или информационни ресурси?

Научете повече за нашите преглед на методологията тук.

Изпрати мнението

Литература:

• Пълен списък с функции – https://webflow.com/features
• Youtube канал – https://www.youtube.com/c/webflow
• Уикипедия - https://en.wikipedia.org/wiki/Webflow
• Reddit - https://www.reddit.com/r/webflow/