Webflow для початківців: як зібрати перший сайт

Крок 1

Зареєструйтеся й підготуйте простий макет

Створіть акаунт на webflow.com і почніть із безкоштовного тарифу Starter. Станом на листопад 2026 року в ньому є публікація на адресі вигляду mysite.webflow.io, до 2 статичних сторінок, обмежена CMS, 1 ГБ трафіку й до 50 заявок через форми; на сайті показується бейдж «Made in Webflow». Власний домен і зняття бейджа доступні лише в платних тарифах. Для першої навчальної сторінки цього досить. Перш ніж відкривати редактор, підготуйте один простий макет: перший екран із заголовком і кнопкою, блок із трьома перевагами, блок з роботами чи відгуком і футер.

• •макет може бути у Figma, Penpot або навіть на папері — головне, щоб ви знали, що де стоїть;
• •беріть свій реальний текст, а не «Lorem ipsum»: від довжини тексту залежить вся верстка;
• •почніть з однієї сторінки: сайт-візитка або лендинг для вигаданої кав'ярні — добре перше завдання.

💡 Не починайте з шаблону: у ньому вже десятки класів і вкладених блоків, і розібратися в чужій структурі важче, ніж зібрати свою з нуля.

Крок 2

Зрозумійте бокс-модель — і половина Webflow стане очевидною

Webflow не малює картинку, а збирає справжню вебсторінку з HTML і CSS. Тому базове поняття тут — бокс-модель: кожен елемент на сторінці — прямокутник із чотирьох шарів. Усередині content (текст чи зображення), навколо нього padding (внутрішній відступ), далі border (рамка) і зовні margin (відступ до сусідніх елементів). У Webflow елементи за замовчуванням мають box-sizing: border-box: ширина, яку ви задаєте, вже містить padding і рамку.

• •відступ усередині кнопки між текстом і краєм — це padding;
• •відстань між двома картками — це margin або, у flex- і grid-контейнерах, gap;
• •якщо блок «вилазить» за межі, спершу подивіться на його ширину й padding у панелі Style.

💡 У Webflow University є безкоштовний урок Intro to the box model. Подивіться його до того, як почнете верстати: він зекономить години спроб навмання.

Крок 3

Зберіть структуру в Navigator

Відкрийте панель Navigator: це дерево всіх елементів сторінки, тобто її HTML-структура. Додавайте елементи з панелі Add і складайте їх у логічну ієрархію: Section на всю ширину, у ній Container, який обмежує ширину контенту, а всередині Div Block з текстом, зображеннями й кнопками. Для заголовків використовуйте елементи Heading з правильним рівнем: один H1 на сторінку, далі H2 для секцій.

• •кожен блок макета з кроку 1 — окрема Section;
• •елементи, які стоять в один ряд, кладіть у спільний батьківський блок і вмикайте для нього flex або grid;
• •перетягуйте елементи саме в Navigator: там видно, всередині чого вони опиняються.

Крок 4

Стилізуйте через класи й налаштуйте брейкпоінти

Стилі у Webflow задаються в панелі Style і прив'язуються до класів. Створіть клас, наприклад «card», задайте йому відступи, фон і радіус — і всі елементи з цим класом виглядатимуть однаково. Для винятків є combo class: «card is-featured» бере все від «card» і змінює лише потрібне. Коли десктопна версія готова, перемкніться на брейкпоінти планшета й телефона: стилі успадковуються від більших екранів до менших, тобто зміна на десктопі діє на всі менші екрани, а зміна на телефоні не зачіпає більші.

• •давайте класам зрозумілі назви за призначенням: «hero-title», «button-primary», а не «Div Block 14»;
• •заведіть 2–3 розміри заголовків і один розмір основного тексту, а не новий розмір для кожного блоку;
• •на телефоні змініть flex-напрямок з рядка на стовпчик і зменште відступи — часто більше нічого не треба.

💡 Курс Webflow University «Lay out & style your site» пояснює класи, combo classes і глобальні класи, а також flexbox і grid. Його варто пройти паралельно з власною сторінкою.

Крок 5

Опублікуйте сторінку й попросіть фідбек

Натисніть Publish і опублікуйте сайт на безкоштовній адресі webflow.io. Відкрийте посилання на своєму телефоні, а не лише в режимі перегляду: так видно, чи текст не дрібний, чи кнопки зручно натискати й чи нічого не виходить за край екрана. Потім надішліть посилання людям, які дадуть чесний відгук.

• •перевірте контраст тексту: для звичайного тексту WCAG вимагає співвідношення щонайменше 4.5:1;
• •додайте до зображень alt-текст у налаштуваннях зображення;
• •запишіть, що було найважче, і з цим питанням ідіть у спільноту: конкретне питання отримує конкретну відповідь.

💡 Опублікована сторінка — вже готовий пункт портфоліо: опишіть, яку задачу розв'язували, що вийшло і що зробили б інакше.