Чтобы создать сайт, не обязательно разбираться в коде, дизайне и верстке. В конструкторе вроде Craftum можно выбрать готовый шаблон, добавить свои тексты и фотографии и собрать сайт без программирования. В этой статье разберем весь процесс по шагам: от выбора шаблона и наполнения страниц до настройки SEO, подключения домена и публикации сайта.

Почему конструктор сайтов — лучший выбор для новичка

Создать сайт можно несколькими способами: написать код с нуля, использовать CMS, собрать его в конструкторе или воспользоваться нейросетью для генерации кода. У каждого варианта свои особенности.

Код с нуля CMS Конструктор Вайбкодинг
Нужно уметь программировать Да Желательно Нет Необязательно, но пригодится для доработок
Как создается сайт Код пишут вручную Устанавливают CMS и настраивают сайт В браузере выбирают шаблон и собирают страницы из блоков Описывают задачу нейросети, она генерирует код
Технические настройки Нужно делать самостоятельно Нужно настраивать CMS, хостинг и дополнительные сервисы Большая часть настроек уже предусмотрена сервисом Хостинг, домен и другие настройки нужно организовать отдельно
Как вносить изменения Менять код Редактировать сайт в админке или через код Менять блоки в редакторе Просить нейросеть изменить код или править его самостоятельно
Кому подходит Тем, кому нужна полная свобода в разработке Тем, кому нужны расширенные возможности и кто готов разбираться в настройках Тем, кто хочет собрать сайт без кода Тем, кто хочет реализовать нестандартную идею без навыков программирования

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

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

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

Что подготовить перед тем, как создавать сайт

Значительная часть работы над сайтом связана не с конструктором, а с подготовкой материалов. Если собрать их заранее, страницы будет проще и быстрее наполнять.

Перед началом работы подготовьте:

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

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

  • Фотографии. Подготовьте фотографии товаров, работ, команды или помещения. Если используете собственные снимки, заранее приведите их к подходящему размеру и формату.

  • Логотип и контакты. Соберите в одном месте телефон, почту, адрес, ссылки на мессенджеры и соцсети. Если у компании есть логотип, подготовьте его файл.

Когда материалы готовы, можно переходить к созданию сайта.

Как создать сайт на Craftum — пошаговая инструкция

Создание сайта на конструкторе можно разделить на шесть основных этапов: зарегистрироваться, выбрать шаблон, настроить страницы, добавить контент, подключить домен и опубликовать сайт.

Разберем каждый этап на примере Craftum.

Шаг 1. Регистрация и выбор тарифа

Зайдите на Craftum и нажмите «Создать сайт». Для регистрации понадобится указать электронную почту.

Как создать сайт и скачать Craftum бесплатно

В течение 10 дней сервис можно использовать бесплатно. Этого времени достаточно, чтобы собрать сайт и оценить возможности конструктора.

Для публикации проекта на собственном домене и использования дополнительных возможностей понадобится платный тариф. Craftum предлагает три варианта: «Базовый», «Оптимальный» и «Расширенный».

При годовой оплате домен предоставляется в подарок на первый год. Если возможностей базового тарифа недостаточно, тариф можно изменить позже.

Для клиентов eLama часть возможностей Craftum также доступна через маркетплейс инструментов eLama: на условиях соответствующего предложения можно использовать возможности уровня «Расширенного», включая создание до 20 сайтов, перенос проектов, домен и настройки SEO. Подключить Craftum и 80+ сервисов бесплатно →

Шаг 2. Выбор шаблона

После регистрации выберите тип проекта: например, сайт компании, лендинг, интернет-магазин или сайт события. Craftum покажет подходящие шаблоны.

Шаблон — это готовый дизайн: структура, блоки, шрифты и цвета уже собраны за вас, остается заменить тексты и картинки на свои. В библиотеке сервиса больше 150 шаблонов под разные задачи. У каждого есть предпросмотр: нажмите «Посмотреть» и проверьте, как страница выглядит на компьютере и телефоне.

Если подходящего шаблона нет, можно начать с пустой страницы и собрать сайт самостоятельно с помощью блоков. Такой вариант дает больше свободы, но требует больше времени на настройку.

Есть и другой вариант — создать черновик с помощью Craftum.AI. Опишите в чате, для кого сайт и чем занимается компания. Нейросеть предложит структуру, блоки и контент, которые затем можно отредактировать в обычном редакторе.

Не стоит рассчитывать, что нейросеть сразу создаст финальную версию сайта. Готовый вариант потребуется проверить и адаптировать: заменить тексты, изображения, цвета и другие элементы. Но такой черновик может быть удобной отправной точкой, если пока нет идей, как построить страницу.

Шаг 3. Работа с редактором: разбираемся с блоками

Редактор — это рабочая область, в которой собирается сайт.

Страница состоит из блоков. Блок — отдельная часть страницы, например обложка, форма или список услуг. Внутри блока находятся элементы: текст, изображения, кнопки и другие компоненты.

Для сайта компании могут понадобиться:

  • обложка — первый экран с заголовком, описанием и кнопкой;

  • описание компании — информация о компании и ее деятельности;

  • услуги или товары — предложение, цены и фотографии;

  • преимущества — сроки, опыт, условия работы и другие особенности;

  • отзывы — опыт клиентов;

  • форма и контакты — способы связаться с компанией и оставить заявку;

  • футер — нижняя часть страницы с реквизитами и ссылками.

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

Как добавлять и удалять блоки

Наведите курсор на любой блок. По центру появится кнопка с плюсиком «Добавить блок»:

После нажатия откроется библиотека блоков. Они распределены по категориям: «Обложка», «Форма», «О проекте», «Товары», «Отзывы» и другим.

Выберите нужный вариант — он появится на странице.

Чтобы убрать ненужный блок, откройте его настройки и нажмите на корзину:

А чтобы поменять блоки местами, просто перетащите их курсором вверх или вниз.

Как редактировать текст и заменять изображения

Нажмите на настройки блока слева:

Вы увидите вкладку «Контент». Чтобы поменять текст, нажмите на заголовок или абзац и впишите свой.

Чтобы заменить картинку, кликните на изображение и загрузите файл с компьютера. Craftum сам подгонит его под размер блока и под мобильную версию.

Рекомендуем перед добавлением сжимать вес изображений до 200–300 КБ. Тяжелые файлы замедляют загрузку сайта, и из-за этого можно потерять посетителей.

Настройка дизайна: цвета, шрифты, кнопки

Вкладка «Дизайн» в той же панели настроек отвечает за внешний вид блока. Здесь меняют шрифт заголовка и основного текста, размер, цвет, фон и вид кнопок. Чтобы сайт смотрелся цельно, выберите единую палитру и один-два шрифта на весь проект.

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

Шаг 4. Наполнение сайта своим контентом

После выбора шаблона замените демонстрационные материалы на свои: добавьте тексты, фотографии, цены и контакты.

Пройдите страницу сверху вниз и проверьте каждый блок:

  • Тексты. Расскажите, чем занимается компания и какие товары или услуги предлагает. Замените общие формулировки конкретной информацией о вашем бизнесе.

  • Фотографии. Используйте собственные снимки товаров, работ, команды или офиса, если они подходят для страницы.

  • Контакты. Добавьте телефон, почту, адрес и ссылки на мессенджеры. Проверьте все ссылки и кнопки.

  • Форма заявки. Настройте, куда будут поступать заявки. В Craftum их можно отправлять на почту, в Telegram или в amoCRM.

Если нужен многостраничный сайт, добавьте остальные страницы в панели сайта и настройте меню для перехода между ними.

Шаг 5. Настройки SEO и подключение домена

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

Пропишите Title и Description для каждой страницы. Title — заголовок страницы в результатах поиска. Description — ее краткое описание. Для каждой страницы лучше подготовить отдельные тексты, соответствующие ее содержанию.

Как это сделать в Craftum:

  1. В редакторе сайта нажмите на три точки в правом верхнем углу и выберите «Настроить страницу».

  2. Перейдите на вкладку «SEO» и заполните Title, Description и ключевые слова.

  3. Нажмите «Сохранить».

Подключите домен. Домен — это адрес сайта, например elama.ru. На бесплатном периоде сайт доступен по техническому адресу Craftum. Для публикации на собственном адресе потребуется подключить домен.

Зарегистрировать домен можно в панели конструктора в разделе «Домены». При годовой оплате Craftum предоставляет домен в зоне .ru или .рф на первый год.

Если домен уже зарегистрирован, его можно привязать к сайту: откройте «Домены» → «Добавить домен», укажите адрес и выберите нужный сайт.

При выборе домена обратите внимание на несколько моментов:

  • Короче — лучше. Длинный адрес сложно продиктовать и легко ошибиться в написании.

  • Понятно на слух. Избегайте двойных букв и дефисов там, где можно без них.

  • Ближе к названию. Хорошо, если домен совпадает с брендом или сферой.

Шаг 6. Публикация сайта

Пока сайт видите только вы — после публикации он откроется всему интернету.

До публикации проверьте сайт на компьютере и телефоне. Пройдитесь по основным элементам:

  • проверьте тексты и исправьте опечатки;

  • откройте мобильную версию и убедитесь, что элементы отображаются корректно;

  • проверьте все кнопки и ссылки;

  • отправьте тестовую заявку через форму и убедитесь, что она поступила.

Если все работает корректно, нажмите «Опубликовать страницу» в правом верхнем углу.

После публикации Craftum предложит открыть готовый сайт и подключить домен.

Если хотите подробнее разобраться с возможностями конструктора, прочитайте отдельный разбор Craftum.

Маркетплейс eLama

Сайт готов. Что дальше?

Опубликовать сайт — только первый этап. Теперь нужно подключить аналитику и привести на сайт первых посетителей.

Подключение аналитики (Яндекс.Метрика)

Аналитика показывает, сколько людей посещает сайт, откуда они приходят и какие действия совершают на страницах.

Для этого можно использовать Яндекс Метрику. Сервис показывает:

  • количество посетителей за выбранный период;

  • источники переходов — поиск, реклама, соцсети и другие;

  • популярные страницы;

  • действия посетителей и заявки.

Чтобы подключить Метрику, сначала создайте счетчик в сервисе и скопируйте его код. Затем в Craftum откройте настройки сайта → вкладку «HTML» и вставьте код в поле «Пользовательский HTML </head>».

Сохраните изменения и переопубликуйте страницы. Подробная инструкция со скриншотами есть в базе знаний Craftum.

При необходимости можно включить Вебвизор. Он позволяет посмотреть, как посетители взаимодействуют со страницей, и заметить элементы, на которых пользователи чаще останавливаются или уходят с сайта.

Лучше подключить счетчик сразу после публикации: тогда данные начнут собираться с первых посещений.

Привлечение первых посетителей

Новый сайт не обязательно сразу начнет получать посетителей из поиска. Поэтому первые переходы можно привлечь из других каналов.

Один из вариантов — контекстная реклама. Объявления показываются пользователям, которые ищут товары или услуги по соответствующим запросам. Например, человек вводит «купить кофе в зернах» и может увидеть рекламное объявление компании.

Реклама позволяет начать получать переходы после запуска кампании, не дожидаясь органического трафика из поиска.

Хотите разобраться в контекстной рекламе с нуля? В отдельной статье рассказали, как она работает, чем поисковая реклама отличается от размещения на сайтах и что подготовить перед запуском.

Есть и бесплатные каналы:

  • Поисковая выдача. Добавьте сайт в Яндекс Вебмастер и Google Search Console и следите за индексацией страниц. Со временем поисковый трафик может стать одним из источников посетителей.

  • Соцсети. Расскажите о сайте в собственных аккаунтах и тематических сообществах. Это может привести первых посетителей и дополнительно познакомить аудиторию с компанией.

Еще один вариант — таргетированная реклама. Она позволяет показывать объявления аудитории по заданным параметрам, например возрасту, интересам и региону. Такой подход может быть полезен, когда потенциальные клиенты не формулируют потребность как поисковый запрос или нужно сформировать интерес к новому продукту.

Подробнее о запуске таргетированной рекламы можно прочитать в отдельной статье.

На старте необязательно использовать сразу все каналы. Выберите один—два, подключите аналитику и сравните результаты. Так будет проще понять, откуда приходят посетители и заявки.

Если запускаете рекламу в нескольких системах, управлять кампаниями можно через eLama: в одном кабинете доступны Яндекс Директ, VK Реклама и еще 30+ рекламных систем. Это позволяет работать с несколькими каналами без переключения между отдельными рекламными кабинетами.

eLama вся интернет-реклама (общий оффер)

Частые ошибки при создании сайта

Даже аккуратно собранный сайт может не приносить заявок. Часто причина не в самом предложении, а в том, как устроена страница.

Слишком много текста на первом экране. Человек заходит на сайт и за несколько секунд решает, остаться или закрыть страницу. Если вместо сути предложения он видит сплошной текст, ему сложнее понять, что вы предлагаете. Оставьте на первом экране главное: заголовок с сутью предложения, короткое описание и кнопку. Остальную информацию разместите ниже.

Нет понятного призыва к действию. Посетитель не должен гадать, что делать дальше. Если на странице некуда нажать, он может уйти, даже если предложение ему подходит. Добавьте заметную кнопку с понятным действием — «Оставить заявку», «Записаться», «Позвонить». Разместите ее на первом экране и рядом с описанием услуг, где посетитель уже может быть готов оставить заявку.

Тяжелые файлы. Фотографии с камеры или телефона могут весить несколько мегабайт и замедлять загрузку страницы. Перед загрузкой сжимайте изображения до 200–300 КБ: для большинства фотографий этого достаточно, чтобы сохранить приемлемое качество и уменьшить размер файла.

Не проверили мобильную версию. На компьютере сайт может выглядеть хорошо, а на телефоне текст и изображения могут отображаться некорректно: строки наезжают друг на друга, картинки обрезаются, кнопки выходят за границы экрана. Перед публикацией переключитесь на мобильный вид в редакторе и проверьте все страницы.

Не заполнили Title и Description. Это заголовок и описание страницы, которые могут отображаться в результатах поиска. Если их не задать, поисковая система может сформировать их автоматически из содержимого страницы. Заполните Title и Description для каждой страницы — кратко опишите ее содержание и предложение.

Контакты не на виду. Если телефон и адрес спрятаны только в футере, посетителю придется искать их по странице. Продублируйте основные контакты в шапке или добавьте кнопку связи, доступную с любого экрана.

Не подключили аналитику. Без аналитики сложно понять, как посетители взаимодействуют с сайтом: на каких страницах они уходят, какие кнопки не нажимают и откуда приходят. Подключите Яндекс Метрику и регулярно проверяйте данные. Это поможет находить проблемные места и постепенно улучшать сайт.

Часто задаваемые вопросы (FAQ)

Собрали ответы на частые вопросы о создании сайтов на Craftum.

Можно ли создать сайт действительно бесплатно?

Собрать и протестировать сайт можно бесплатно в течение пробного периода Craftum — он составляет 10 дней.

Для публикации сайта на собственном домене понадобится платный тариф. Условия и стоимость зависят от выбранного тарифа. При годовой оплате домен предоставляется на первый год в соответствии с условиями тарифа.

Сколько времени займет создание первого сайта

Простой одностраничный сайт на готовом шаблоне можно собрать за несколько часов. На многостраничный сайт компании может потребоваться больше времени.

Продолжительность работы зависит прежде всего от объема контента. Если тексты, фотографии и структура готовы заранее, наполнить сайт можно быстрее.

Нужно ли уметь программировать

Нет. Для создания сайта в конструкторе не нужно писать код: страницы собираются из готовых блоков, которые можно добавлять, перемещать и редактировать.

При этом базовые знания HTML и CSS могут пригодиться, если позже понадобится нестандартная доработка.

Что такое домен и хостинг простыми словами

Домен — адрес сайта в интернете, например elama.ru.

Хостинг — место на сервере, где хранятся файлы сайта и откуда они загружаются при открытии страницы.

В конструкторе хостинг входит в инфраструктуру сервиса, поэтому отдельно выбирать и настраивать его обычно не требуется.

Смогу ли я принимать оплату на таком сайте

ДДа. В Craftum есть возможности для создания интернет-магазина: каталог, карточки товаров и корзина. К сайту можно подключить онлайн-оплату через доступные платежные системы.

Перед подключением проверьте актуальный список доступных платежных систем и условия их работы в документации Craftum.

Можно ли вести блог на сайте

Да. Статьи вы добавляете так же, как собираете обычные страницы — из блоков с текстом, заголовками и картинками. Блог хорошо работает на перспективу: материалы по вашей теме находят в поиске те, кто пока не готов купить, но уже ищет информацию. Со временем такой контент может приводить на сайт стабильный трафик без затрат на рекламу.

Будет ли сайт нормально работать на телефоне

Да, конструктор автоматически подгоняет сайт под мобильные экраны — отдельно собирать мобильную версию не нужно. Но перед публикацией её стоит проверить: в верхней панели редактора есть переключатель между компьютером, планшетом и телефоном. Иногда на узком экране заголовки или картинки смотрятся не идеально — тогда размеры и отступы можно поправить прямо в мобильном виде, не затрагивая версию для компьютера.

Что делать, если не получается сделать сайт самому

Для старта в Craftum есть несколько подсказок. Если пугает пустой экран, соберите черновик через Craftum.AI — нейросеть создаст структуру и тексты по вашему описанию, а вы доведёте всё до ума. Если застряли на конкретном шаге, загляните в базу знаний с инструкциями или напишите в поддержку прямо из редактора. А ещё можно взять готовый шаблон, близкий к вашей теме, и просто заменить в нём тексты и фото — так сделать сайт самому получится даже без опыта.

Можно ли поменять шаблон после начала работы над сайтом

Заменить шаблон у уже начатого сайта нельзя. Но если вы передумали, ничто не мешает начать заново: создайте новую страницу или новый сайт на другом шаблоне, а прежний удалите. Единственное — тексты и фотографии автоматически не перенесутся, их нужно будет добавить заново. Поэтому, если вы только присматриваетесь к шаблонам, лучше сначала открыть предпросмотр и выбрать подходящий, а уже потом наполнять сайт своим содержимым.

Не пропускайте новые публикации и кейсы в блоге eLama — подпишитесь на наш Telegram-канал!

Контент-маркетолог, редактор для B2B и B2C
Партнерская программа
Авито Реклама (до 60% от трат)
Telegram Ads
Инфлюенс
VK Реклама
Яндекс Директ
Ozon
Маркетплейс