Блог
Сайты 7 мин

Личный сайт-визитка из Битрикс24: пошаговая инструкция

Как за один вечер собрать сайт-визитку в конструкторе Битрикс24, с формой заявки, CRM-интеграцией и привязкой домена. Без программиста.

У вас есть Битрикс24 и два-три свободных часа. Этого хватит, чтобы запустить сайт-визитку с формой заявки, которая сразу попадает в CRM. Без программиста, без хостинга, без оплаты домена на первом этапе. Конструктор сайтов встроен в каждый тариф Битрикс24 начиная с «Базового», и для простой визитки его возможностей достаточно. Ниже, конкретные шаги от пустого экрана до рабочего сайта.

Когда сайт в Битрикс24, правильный выбор

Конструктор Битрикс24 закрывает одну задачу: быстро получить страницу, которая представляет вас или компанию и собирает контакты. Это работает, если:

  • Вам нужна визитка на 1--3 страницы: «обо мне», услуги, контакты.
  • Вы хотите, чтобы заявки с формы сразу создавали лиды в CRM, без сторонних интеграций.
  • У вас нет бюджета или времени на разработку отдельного сайта.
  • Вы уже работаете в Битрикс24 и не хотите добавлять ещё один сервис в связку.

Конструктор не подойдёт, если нужен интернет-магазин с корзиной и онлайн-оплатой (для этого есть отдельный модуль «Магазины»), блог с регулярным контентом, сложная структура с десятками страниц или нестандартный дизайн, выходящий за рамки шаблонов.

Если вы прочитали второй список и узнали свой случай, переходите сразу к разделу «Когда пора переходить на заказную разработку» в конце статьи. Если же визитка, это то, что нужно, продолжаем.

Шаг 1. Выбираем шаблон

Откройте Битрикс24 и перейдите в раздел Сайты и магазины в левом меню. Нажмите Создать сайт. Система предложит набор шаблонов, их несколько десятков, разбитых по категориям.

Для визитки обратите внимание на категории:

  • Бизнес, универсальные шаблоны с блоками «О компании», «Услуги», «Контакты».
  • Портфолио, подходят фрилансерам и специалистам, которые показывают работы.
  • Услуги, заточены под сервисные компании с акцентом на список услуг и форму заявки.

Каждый шаблон, набор заготовленных блоков. Вы можете удалить любой блок, поменять порядок, добавить новые. Шаблон задаёт только стартовую точку, а не ограничение.

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

Выбрали шаблон, нажимайте Выбрать. Откроется визуальный редактор.

Шаг 2. Редактируем содержимое

Визуальный редактор Битрикс24 работает по принципу блоков. Страница состоит из горизонтальных секций, каждая секция, самостоятельный блок с текстом, изображениями, кнопками. Щёлкните по любому элементу, появится панель редактирования.

Шапка и главный экран

Первый экран (hero-секция), то, что посетитель видит до прокрутки. Здесь должно быть:

  • Заголовок, кто вы и чем занимаетесь. Одно предложение. «Проектирование вентиляции для торговых центров» лучше, чем «Комплексные инженерные решения для вашего бизнеса».
  • Подзаголовок, конкретика: опыт, география, ключевое преимущество. «14 лет, 80 объектов в Москве и области», понятно. «Индивидуальный подход и высокое качество», нет.
  • Кнопка, призыв к действию. «Оставить заявку» или «Обсудить проект». Кнопка должна вести к форме ниже по странице или открывать форму в отдельном окне.

Чтобы изменить фоновое изображение, нажмите на блок, затем на иконку шестерёнки. В настройках блока, раздел Фон, где можно загрузить своё изображение или выбрать сплошной цвет.

Блок «О компании» или «Обо мне»

Два-три абзаца: чем занимаетесь, сколько лет на рынке, что отличает от конкурентов. Факты, а не прилагательные. Если есть лицензии, сертификаты, членство в ассоциациях, упомяните.

Блок «Услуги»

Большинство шаблонов содержат блок с карточками услуг, обычно 3--6 штук. Каждая карточка: иконка, название, краткое описание. Не пытайтесь уместить весь прайс-лист, визитка должна дать общее представление, а детали вы обсудите при обращении.

Блок «Контакты»

Телефон, почта, адрес (если есть офис), ссылки на мессенджеры. Карту можно добавить через блок «Карта», он подключается к Яндекс.Картам. Нажмите Добавить блок в нижней части редактора, в категории Контакты выберите вариант с картой.

Совет: не ставьте номер телефона картинкой, только текстом. С мобильных устройств текстовый номер становится кликабельным: посетитель нажимает и сразу звонит. Картинка такого не даёт.

Шаг 3. Настраиваем форму заявки и связь с CRM

Это главное преимущество сайта внутри Битрикс24, нулевая дистанция между формой на сайте и CRM. Заявка создаёт лид автоматически, без сторонних сервисов, вебхуков и Zapier.

Добавляем CRM-форму

  1. В редакторе сайта нажмите Добавить блок.
  2. Найдите категорию CRM, в ней есть блоки с готовыми формами.
  3. Выберите подходящий вариант: простая форма (имя + телефон), расширенная (с выбором услуги), форма с комментарием.
  4. Перетащите блок в нужное место на странице.

Настраиваем поля формы

Нажмите на форму в редакторе, затем Настроить форму. Откроется конструктор CRM-форм Битрикс24. Здесь можно:

  • Добавить или убрать поля. Для визитки обычно хватает: имя, телефон, e-mail, комментарий.
  • Настроить обязательные поля, как минимум телефон или e-mail.
  • Изменить текст кнопки отправки.
  • Задать сообщение после отправки: «Спасибо, мы свяжемся с вами в течение часа».

Проверяем CRM-интеграцию

Перейдите в раздел CRM в левом меню, откройте Лиды. Заполните форму на сайте тестовыми данными и проверьте, что лид появился. Обратите внимание на два момента:

  • Источник лида. В карточке лида должен быть указан источник, «Сайт». Это поможет потом считать конверсию.
  • Ответственный. По умолчанию лиды назначаются на администратора портала. Если у вас работает команда, настройте правила распределения в CRM, чтобы заявки уходили нужному менеджеру.

Шаг 4. Привязываем домен

По умолчанию сайт получает адрес вида your-company.bitrix24.site. Для визитки это допустимо на старте, но собственный домен выглядит профессиональнее и лучше запоминается.

Порядок действий

  1. Купите домен у любого регистратора: REG.RU, Beget, RU-CENTER, Timeweb. Домен в зоне .ru стоит от 199 рублей в год.
  2. В Битрикс24 откройте ваш сайт в режиме редактирования.
  3. Перейдите в Настройки сайта (шестерёнка в верхнем правом углу редактора).
  4. Выберите раздел Домен.
  5. Введите ваш домен и нажмите Привязать.
  6. Система покажет DNS-записи, которые нужно добавить у регистратора домена. Обычно это A-запись и CNAME.
  7. Зайдите в панель управления DNS у вашего регистратора и добавьте указанные записи.
  8. Дождитесь обновления DNS, от 15 минут до 48 часов, обычно в пределах часа.

SSL-сертификат

Битрикс24 автоматически выпускает бесплатный SSL-сертификат (Let's Encrypt) для привязанного домена. Сайт будет работать по HTTPS, это и для безопасности, и для SEO. Сертификат обновляется автоматически. Если после привязки домена сайт показывает предупреждение о безопасности, подождите: сертификат выпускается в течение нескольких минут после того, как DNS-записи стали активными.

Шаг 5. SEO-настройки: Title, Description, Open Graph

Конструктор Битрикс24 позволяет задать базовые SEO-параметры. Этого мало для продвижения по конкурентным запросам, но достаточно, чтобы сайт корректно отображался в поиске и при отправке ссылки в мессенджерах.

Title и Description

  1. Откройте Настройки сайта в редакторе.
  2. Перейдите в раздел SEO.
  3. Заполните:
    • Title, заголовок страницы в поисковой выдаче. Формула: [Чем занимаетесь], [Имя или компания] | [Город]. Пример: Проектирование вентиляции, ИП Смирнов | Москва. Длина, до 60 символов.
    • Description, описание. Сюда, основная услуга, ключевое преимущество, призыв к действию. До 160 символов. Пример: Проектирование и монтаж вентиляции для торговых центров. 14 лет, 80 объектов. Бесплатный расчёт за 24 часа.

Open Graph

Open Graph, разметка, которая определяет, как сайт выглядит при отправке ссылки в Telegram, WhatsApp, VK. Без неё, серая карточка без картинки и с обрезанным текстом.

В том же разделе SEO настройте:

  • og:title, обычно совпадает с Title.
  • og:description, совпадает с Description.
  • og:image, изображение-превью. Рекомендуемый размер: 1200x630 px. Загрузите его в настройках. Используйте изображение, которое читается в миниатюре: логотип на контрастном фоне или фото с крупным текстом.

Шаг 6. Аналитика: подключаем Яндекс.Метрику

Без аналитики вы не узнаете, приходит ли кто-то на сайт и откуда. Подключение Яндекс.Метрики занимает пять минут.

Создаём счётчик

  1. Откройте metrika.yandex.ru и войдите или зарегистрируйтесь.
  2. Нажмите Добавить счётчик.
  3. Укажите имя счётчика (любое, для вас) и адрес сайта.
  4. Включите Вебвизор, он записывает визиты и показывает, как посетители взаимодействуют со страницей. Для визитки с формой это полезно: вы увидите, доходят ли люди до формы и на каком этапе уходят.
  5. Нажмите Создать. Система выдаст код счётчика, скопируйте его.

Добавляем код в Битрикс24

  1. В редакторе сайта откройте Настройки сайта.
  2. Перейдите в раздел Аналитика.
  3. Вставьте код счётчика Яндекс.Метрики в поле для произвольного кода в <head>.
  4. Сохраните и опубликуйте сайт.

Через несколько часов в Метрике появятся первые данные. Обратите внимание на три отчёта: Источники трафика (откуда приходят), Конверсии (кто отправил форму), Устройства (какая доля мобильного трафика, у визиток обычно от 60%).

Совет: настройте цель в Яндекс.Метрике на отправку формы. Тип цели, «JavaScript-событие». Битрикс24 CRM-формы отправляют событие при сабмите, и вы сможете отслеживать конверсию формы в процентах, а не в абстрактном «вроде заявки приходят».

Публикация и проверка

Сайт собран, публикуем. Нажмите Опубликовать в правом верхнем углу редактора. После публикации проверьте:

  • Мобильная версия. Откройте сайт на телефоне. Конструктор Битрикс24 генерирует адаптивную вёрстку автоматически, но иногда длинные заголовки ломают раскладку на узких экранах. Если что-то съехало, сократите текст или разбейте на две строки.
  • Форма. Заполните и отправьте тестовую заявку. Убедитесь, что лид создался в CRM с правильными данными.
  • Скорость загрузки. Прогоните через PageSpeed Insights. Сайты из конструктора Битрикс24 не блещут скоростью, типичный результат 40--60 баллов на мобильных. Для визитки это приемлемо, но если вы видите балл ниже 30, проверьте вес изображений: сжимайте их перед загрузкой через squoosh.app до 100--200 КБ.
  • Ссылка в мессенджерах. Отправьте URL себе в Telegram, проверьте, что Open Graph отображается корректно: правильная картинка, заголовок, описание.

Ограничения конструктора Битрикс24

Честность экономит время. Вот что конструктор сайтов в Битрикс24 не умеет или делает плохо:

  • Кастомный код. Добавить свой HTML, CSS или JavaScript в блок нельзя (есть поле для кода в <head>, но это всё). Если нужна нестандартная анимация, калькулятор или интерактивный элемент, конструктор не подходит.
  • Скорость загрузки. Сайты из конструктора тяжелее, чем сверстанные вручную. Для визитки это не критично, для лендинга с платным трафиком, уже ощутимо.
  • Блог и контент-маркетинг. Конструктор не предлагает систему публикации статей: нет категорий, тегов, RSS, пагинации. Если нужен блог, это другой инструмент.
  • Многостраничность. Формально можно создать несколько страниц, но навигация между ними ограничена. Для сайта с десятком разделов конструктор неудобен.
  • SEO-гибкость. Нет управления robots.txt, редиректами, canonical-тегами, микроразметкой Schema.org. Для продвижения по конкурентным коммерческим запросам этого не хватит.
  • Дизайн. Шаблоны ограничивают: шрифты из списка, фиксированные сетки блоков, стандартные цветовые схемы. Уникальный визуальный стиль, не про конструктор.

Когда пора переходить на заказную разработку

Конструктор Битрикс24, отправная точка. Он решает задачу «мне нужен сайт прямо сейчас» быстрее и дешевле любого другого варианта, если вы уже пользуетесь Битрикс24.

Но если бизнес растёт и появляются задачи, которые конструктор не закрывает, стоит задуматься о полноценном сайте:

  • Вам нужна посадочная страница с высокой конверсией под платный трафик, и каждый балл PageSpeed влияет на стоимость клика.
  • Требуется сложная интеграция: не просто лид в CRM, а автоматическое создание сделки с определённой стадией, привязка к товарам, уведомление в Telegram менеджеру.
  • Дизайн должен отстраивать вас от конкурентов, а не выглядеть как «ещё один сайт на конструкторе».
  • Нужен контент-маркетинг: статьи, кейсы, SEO-тексты с правильной структурой.
  • Сайт должен работать как часть экосистемы: личный кабинет, интеграция с 1С, синхронизация каталога.

Сайт из Битрикс24, от Aventra

Мы в Aventra разрабатываем решения на базе Битрикс24 с 2018 года. 75+ приложений в маркетплейсе, ТОП-5 среди разработчиков. Строим и простые сайты-визитки, и сложные проекты с нестандартной логикой.

Если вы собрали визитку по этой инструкции и поняли, что нужно больше,, напишите нам. Мы сделаем сайт, который работает с вашим Битрикс24 как единая система: заявки превращаются в сделки, статусы обновляются, клиент получает уведомления, а вы видите аналитику в одном месте.

А если визитки из конструктора достаточно, отлично. Не каждой задаче нужно сложное решение.