Из чего состоит сайт: разбор примера (анатомия веб-сайта)
Разбираем части сайта на размеченном примере We.Inc: шапку и меню, первый экран, призыв к действию, услуги, подтверждения доверия, информацию о компании, форму связи и подвал, а также домен, заголовок и карту сайта.
Большинство сайтов малого бизнеса состоят из одних и тех же восьми частей, сверху вниз: шапка и меню, первый экран, призыв к действию, услуги, подтверждения доверия, информация о компании, контакты и подвал. За кадром остаются элементы, которых посетители не видят: домен, заголовок страницы и карта сайта. Ниже каждая часть отмечена на примере дизайна, созданного в We.Inc.
Видимые части сайта сверху вниз
- Шапка. Полоса вверху с логотипом или названием компании. Она повторяется на каждой странице, чтобы посетитель всегда понимал, где находится.
- Навигация (меню). Ссылки на основные страницы или разделы: «Услуги», «О нас», «Цены», «Контакты». Оставьте пять-семь пунктов. На телефоне меню сворачивается в кнопку.
- Первый экран. То, что посетитель видит сразу: заголовок о том, чем и для кого вы занимаетесь, короткое пояснение и часто изображение. Решение остаться принимают за секунды. Смотрите примеры первых экранов.
- Призыв к действию (CTA). Главная кнопка, например «Записаться на звонок» или «Получить расчёт». Разместите её на первом экране и повторите ближе к низу страницы.
- Услуги или функции. Что вы предлагаете: отдельный короткий блок для каждого пункта с описанием результата для клиента.
- Подтверждения доверия. Отзывы, примеры работ, сертификаты или гарантии. Используйте только настоящие.
- О компании. Кто стоит за бизнесом и почему ему можно доверять. Смотрите как написать страницу «О нас».
- Контакты. Форма, телефон, электронная почта и адрес или зона обслуживания. Смотрите как добавить форму связи.
- Подвал. Нижняя полоса страницы: контакты, дополнительные ссылки, политика конфиденциальности и соцсети.
Части сайта, которые посетители не видят
| Элемент | Назначение |
|---|---|
| Домен | Адрес сайта, например вашсайт.рф |
| Хостинг | Компьютеры, которые показывают сайт посетителям |
| Заголовок и описание страницы | Текст в результатах Google и на вкладках браузера |
| Карта сайта | Список страниц, помогающий поисковикам находить их |
| Фавикон | Маленький значок на вкладке браузера |
| Изображение для публикации | Картинка, которая отображается, когда ссылкой делятся в соцсетях |
Те же части сайта при разном числе страниц
Одностраничный сайт размещает все эти части на одной длинной странице, а меню прокручивает к нужному разделу. Многостраничный сайт выделяет услуги, информацию о компании и контакты в отдельные страницы, но сохраняет на каждой ту же шапку и подвал. Веб-приложение добавляет вход в аккаунт и сохранение данных. Полный список элементов помогает заранее проверить, что на сайте есть нужная информация и посетителю понятно, куда нажать.
Все нужные элементы в We.Inc
В каждом шаблоне We.Inc уже есть шапка, меню, первый экран, CTA и подвал; опубликованные сайты также получают заголовок, карту сайта и изображение для публикации. Бесплатный план позволяет опубликовать до 3 сайтов на шаблонах по адресу we.inc — без кредитов ИИ и собственного домена. Платные планы от $20 в месяц добавляют создание сайта с ИИ и собственный домен. Посмотрите шаблоны.
Частые вопросы
Из каких основных частей состоит сайт?
Из шапки, меню, первого экрана, призыва к действию, услуг, подтверждений доверия, информации о компании, контактов и подвала, а также скрытых элементов: домена, хостинга, заголовков страниц и карты сайта.
Что такое первый экран сайта?
Это первая часть страницы, которую видит посетитель: заголовок, короткое пояснение, часто изображение и главная кнопка призыва к действию.
Что разместить в подвале сайта?
Контактные данные, дополнительные ссылки — например на политику конфиденциальности и условия, — ссылки на соцсети и иногда повторное меню.
У одностраничного сайта те же части?
Да. Те же разделы расположены на одной странице, а меню прокручивает к каждому из них, вместо того чтобы открывать новые страницы.
Начать бесплатно · Банковская карта не нужна
Product
- AI Website Builder: Describe a site in plain English; it's live in minutes
- White Label Platform: Your brand, your domain, your margin
- Enterprise: SSO, custom SLAs, and dedicated support
- Developer API: Embed site generation into your SaaS
Who It's For
- For Agencies: Resell under your brand
- For Freelancers: Your own branded builder
- For Hosting Providers: Add a builder to your stack
- For SaaS Platforms: Embed site creation via API
- For Startups
- For Financial Services
- For Healthcare
Features
- Drag & Drop Editor
- Built-in SEO Tools
- Custom Branding
- Client Dashboard
- Reseller Billing (Stripe Connect)
Resources
- Blog
- Help Center
- Free Business Tools
- Website Templates
- Glossary & Guides
- Integrations
- Developers
- Benchmark
- Windows App