Налаштування та кастомізація сайту на Webflow
Налаштування сайту Webflow — конфігурація хостингу, домену, SEO, аналітики, форм та інтеграцій. Кастомізація — робота з дизайном, анімаціями, користувацьким кодом та розширення стандартних можливостей платформи. На відміну від Tilda та Wix, Webflow надає більш точні інструменти налаштування та краще підтримує користувацький код.
Підключення домену
Webflow хостить сайт на власній CDN (Fastly). Підключення домену — через налаштування DNS:
A-записи для naked domain:
A @ → 75.2.70.75
A @ → 99.83.190.102
CNAME для www:
CNAME www → proxy-ssl.webflow.com
Після додавання у DNS-провайдера: Project Settings → Hosting → Custom Domains → Add Domain. SSL через Let's Encrypt видається автоматично.
Для naked domain без www.domain.comналаштовує редирект domain.com → www.domain.com (або навпаки) через Project Settings → Hosting.
Email на домені — Webflow не надає email-хостинг. Google Workspace або Zoho Mail — через MX-записи у DNS-провайдера незалежно від Webflow.
Налаштування SEO
Project Settings → SEO:
- Title tag format:
{Page Name} | {Site Name}— шаблон для всіх сторінок - Default meta image (og:image за замовчуванням)
- Webflow branding (noindex) — відключити для користувацького домену
Для кожної сторінки (Page Settings → SEO Settings):
- SEO Title — унікальний, 50–60 символів
- Meta Description — 140–160 символів
- Open Graph Image — 1200×630px
- Canonical URL — якщо є ризик дублів
- Indexing: Allow / Disallow (noindex, nofollow)
CMS Collection Templates: У налаштуваннях шаблону — SEO-поля прив'язуються до полів коллекції:
- Title →
{{SEO Title}}або{{Name}} | Назва сайту - Description →
{{SEO Description}} - og:image →
{{Featured Image}}
Sitemap.xml — генерується автоматично за адресою domain.com/sitemap.xml. Налаштування пріоритетів — через Page Settings → SEO → Priority.
301 Redirects — Project Settings → SEO → Redirects. CSV-імпорт для масових редиректів (при міграції зі старого сайту):
/old-page,/new-page
/old-services/design,/services/ux-ui
/blog/2020/post-name,/blog/post-name
Аналітика
Google Analytics 4: Project Settings → Integrations → Google Analytics → Measurement ID (G-XXXXXXXXXX).
Webflow автоматично відправляє page_view. Для користувацьких подій — користувацький JS:
<!-- Project Settings → Custom Code → Before </body> tag -->
<script>
// Відслідкування кліків по CTA
document.querySelectorAll('[data-track-cta]').forEach(btn => {
btn.addEventListener('click', () => {
gtag('event', 'cta_click', {
cta_label: btn.dataset.trackCta,
page_location: window.location.pathname,
});
});
});
// Відслідкування успішної відправки форми Webflow
window.addEventListener('message', function(event) {
if (event.data.type === 'webflow.form.success') {
gtag('event', 'generate_lead', {
form_id: event.data.form,
});
}
});
</script>
Яндекс.Метрика: Project Settings → Custom Code → вставити код лічильника у <head>.
Google Tag Manager — бажаний підхід для проектів з кількома системами аналітики:
<!-- <head> -->
<script>
(function(w,d,s,l,i){/* GTM snippet */})(window,document,'script','dataLayer','GTM-XXXX');
</script>
<!-- <body> -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" ...></iframe></noscript>
Форми Webflow
Webflow Forms обробляються платформою: дані зберігаються в Dashboard → Forms. Уведомлення на email — Project Settings → Integrations → Email Notifications.
Користувацька обробка форми через Action:
<!-- У Designer: Form Settings → Action → вставити URL бекенду -->
<!-- Після Submit Webflow робить POST на указаний URL -->
Але частіше — перехопити через JS та відправити на користувацький API:
const form = document.querySelector('[data-form="contact"]');
form.addEventListener('submit', async function(e) {
e.preventDefault();
const formData = new FormData(form);
const data = Object.fromEntries(formData.entries());
const submitBtn = form.querySelector('[type="submit"]');
submitBtn.disabled = true;
submitBtn.textContent = 'Відправляємо...';
try {
const res = await fetch('/api/leads', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
if (res.ok) {
form.querySelector('.w-form-done').style.display = 'block';
form.style.display = 'none';
// Відправити подію конверсії
gtag('event', 'generate_lead');
} else {
throw new Error('Server error');
}
} catch {
form.querySelector('.w-form-fail').style.display = 'block';
submitBtn.disabled = false;
submitBtn.textContent = 'Спробуйте знову';
}
});
Інтеграції
Zapier / Make: Webflow → Trigger «Form Submission» або «New CMS Item» → actions у CRM, Slack, Google Sheets.
Webflow API для автоматизації CMS:
# Створення запису в коллекції через API
curl -X POST "https://api.webflow.com/v2/collections/{collection_id}/items" \
-H "Authorization: Bearer {API_TOKEN}" \
-H "Content-Type: application/json" \
-d '{
"fieldData": {
"name": "Новий пост",
"slug": "new-post",
"content": "Текст статті",
"_draft": false,
"_archived": false
}
}'
Це корисно для автоматичного створення контенту з зовнішніх систем: вакансії з HR-платформи, оголошення з ERP, прес-релізи з PR-інструменту.
Memberstack: закриті сторінки, особистий кабінет, платні підписки. Встановлюється як JS-скрипт + атрибути на елементи:
<div ms-code-protected-redirect="/login">
<!-- Контент тільки для залогінених -->
</div>
Finsweet Attributes — безплатна JS-бібліотека розширень для Webflow:
-
fs-cmsfilter— фільтрація CMS-коллекції без JS-коду (через data-атрибути) -
fs-cmssort— сортування коллекції -
fs-cmsnest— вкладені коллекції (Multi-reference items) -
fs-cmsload— infinite scroll / load more
<!-- Фільтрація CMS за тегом — тільки data-атрибути, ніякого коду -->
<div fs-cmsfilter-element="filters">
<button fs-cmsfilter-field="category" fs-cmsfilter-value="all">Всі</button>
<button fs-cmsfilter-field="category" fs-cmsfilter-value="design">Дизайн</button>
</div>
<div fs-cmsfilter-element="list">
<!-- Collection List -->
</div>
Кастомізація анімацій
Додаткові CSS-анімації поверх Webflow Interactions:
<!-- Project Settings → Custom Code → <head> -->
<style>
/* Користувацький курсор */
* { cursor: none; }
.cursor {
width: 12px;
height: 12px;
background: #111;
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transition: transform 0.15s ease;
}
.cursor--expanded {
transform: scale(4);
background: rgba(17,17,17,0.15);
}
</style>
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
cursor.style.left = e.clientX - 6 + 'px';
cursor.style.top = e.clientY - 6 + 'px';
});
document.querySelectorAll('a, button').forEach(el => {
el.addEventListener('mouseenter', () => cursor.classList.add('cursor--expanded'));
el.addEventListener('mouseleave', () => cursor.classList.remove('cursor--expanded'));
});
Editors та управління контентом
Webflow Editor — режим редагування для клієнтів без доступу в Designer. Редактори бачать inline-редагування текстів та зображень прямо на сторінці.
Project Settings → Collaborators → додати редакторів (Editor role). Редактор може:
- редагувати тексти та зображення на статичних сторінках
- додавати/редагувати записи CMS
- публікувати зміни
Редактор не може: змінювати структуру, CSS, анімації — тільки контент.
Типові терміни
Базове налаштування нового сайту (домен, SSL, GA4, форма з уведомленнями, sitemap, редиректи) — 1 робочий день. Повна конфігурація з integrations (CRM через Zapier, користувацькі события GA4, GTM, Memberstack) — 3–4 дні. Розширена кастомізація з Finsweet Attributes, користувацьким JS та SEO для CMS — 4–6 днів.