Настройка и кастомизация сайта на Webflow
Настройка Webflow-сайта — конфигурация хостинга, домена, SEO, аналитики, форм и интеграций. Кастомизация — работа с дизайном, animations, кастомным кодом и расширение стандартных возможностей платформы. В отличие от 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-домена без www.domain.comw настраивается редирект 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 */
* { 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 дней.