Как сделать одностраничный сайт самому

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

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

Одностраничник – это сайт, состоящий всего из одной страницы. К одностраничникам можно отнести: лендинги (они же продающие сайты), визитки, сайты-портфолио, а также мини-магазины. При создании таких сайтов меняется цель и набор элементов на странице, но количество страниц остаётся низменным – она будет оставаться одна.

Как сделать одностраничный сайт самому:

1. Формулирование целей и задач
2. Выбор платформы/конструктора
3. Регистрация аккаунта
4. Выбор шаблона
5. Регистрация и прикрепление домена
6. Наполнение сайта
7. Подключение систем аналитики
8. Добавление в панели вебмастера
9. Настройка форм и уведомлений
10. Запуск рекламной кампании

• Отличия лендинга и одностраничника
• Добавление прайса на одностраничник
• Размещение товара и настройка оплаты
• Вставка картинок, организация портфолио
• Виджеты онлайн-чата с консультантами
• Кнопка заказа обратного звонка
• Всплывающие окна
• Настройка SEO-параметров
• Создание одностраничника под ключ
• Выводы и рекомендации

Разница между лендингами и одностраничниками

Лендинг (он же «посадочная страница» или «продающий сайт») – это одностраничник, который выстраивается в виде качественной презентации определённого товара или услуги. Такие сайты умеют работать с возражениями и решать разные маркетинговые задачи: собирать лиды/заявки, оформлять подписку на рекламные рассылки, рекламировать новые продукты и т.п.

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

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

Стандартный (общий) пошаговый алгоритм создания одностраничного сайта

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

А теперь непосредственно сами шаги.

Шаг 1. Формулирование целей и задач лендинга

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

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

Тип сайта и цели его существования всегда определяет владелец. А делает он это исходя из своих собственных задач. Например, малому и микробизнесу чаще всего нужны визитки, предприятиям сферы услуг больше подойдут одностраничники с портфолио или лендинги, крупный бизнес на одностраничниках в основном собирает лиды, соответственно, ему нужны продающие страницы с CTA-блоками (призывами к действию) и лид-магнитами.

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

Шаг 2. Выбор платформы/конструктора

Существует несколько способов создания одностраничных сайтов: CMS-системы, статичный HTML-код на своём хостинге, использование готовых облачных конструкторов (отдельно рейтинг конструкторов лендингов).

Для малого и микробизнеса мы рекомендуем использовать облачные платформы, так как всё необходимое вы получаете под ключ в формате подписки. Пока сайт вам нужен, вы его оплачиваете. Никаких капитальных вложений или заморочек с хостингом, поиском опытных web-мастеров, оптимизаторов и прочего. Все интеграции есть из коробки, а сборка страниц осуществляется в удобных онлайн-редакторах.

Идеальная платформа для бизнес-сайтов, в том числе для одностраничников – uKit.

• Безлимитные и полностью бесплатные уведомления о заявках из форм.
• Масса готовых шаблонов (300+).
• Удобное редактирование без погружения в код.
• Хостинг, трафик и страницы – без ограничений.
• Инструменты для автоматизации продвижения и рекламы.
• Набор готовых интеграций.

Максимум подробностей о конструкторе в нашем детальном обзоре uKit.

Шаг 3. Регистрация аккаунта

Всё, что вам нужно – указать свой email и придумать пароль. Но если у вас уже есть аккаунт в популярной соцсети, то можно воспользоваться им. Подойдут: Одноклассники, ВКонтакте, FB, Disqus, Яндекс или Google.

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

Шаблон – это готовый вариант оформления. В разных платформах применяются разные подходы. В uKit на выбор предоставляется более 300 вариантов шаблонов, распределённых по тематикам и функционалу.

Нужно только выбрать подходящий вам.

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

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

Если у вас есть страница во ВКонтакте, можно сделать свой сайт из неё. Для этого нужно воспользоваться инструментом uKit Alt.

Шаг 5. Регистрация и прикрепление домена

Сразу после выбора темы оформления uKit предлагает указать домен сайта. По умолчанию предоставляется бесплатный технический домен. Его есть смысл использовать только для тестирования.

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

Для прикрепления своего домена в uKit нужно перейти в панель управления и рядом с техническим именем сайта нажать кнопку «Прикрепить домен».

Вам будет доступно два варианта:

1. Купить новый домен. Регистрация доменного имени будет осуществляться на ваши контактные данные (домен будет принадлежать вам). NS-записи заполняются и настраиваются автоматически.
2. Прикрепить имеющийся домен. Вы можете зарегистрировать домен у любого официального регистратора и перенаправить его на хостинг uKit.

Рассмотрим процесс прикрепления уже имеющегося домена (как наиболее сложный случай).

• В панели управления uKIt нужно начать процесс прикрепления домена. Для этого введите свой домен в специальном поле. Вписывать имя сайта нужно без протокола и всяких приставок. То есть не «https://www.мой-домен.ру/», а просто «мой-домен.ру»
• В панели регистратора домена нужно сменить NS-записи на следующие:
  • ns1.ukit.com
  • ns2.ukit.com
  • ns3.ukit.com
• Возвращаетесь в панель управления uKit и нажимаете кнопку «Я указал NS-серверы у регистратора».

Теперь нужно дождаться, когда обновится информация в DNS-системе. Процесс может занять от 1 до 2 дней. Готово.

Скоро сайт будет открываться при вводе вашего доменного имени.

В некоторых особо тяжёлых случаях может потребоваться перенос домена к новому регистратору. Мы подробно рассматривали этот процесс на примере переноса сайта с Wix на uKit.

Обратите внимание! Защищённая https-версия сайта настраивается в uKit автоматически. Бесплатные SSL/TLS-сертификаты выпускаются и привязываются к домену без участия пользователя.

Шаг 6. Наполнение сайта

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

Иконка (favicon)

Мы рекомендуем начать с изменения иконки сайта. Сделать это можно в разделе с основными настройками.

Вся работа по наполнению ведётся в блочном редакторе. Нажмите кнопку «Редактировать» и откроется интерфейс конструктора uKit.

Страницы, политика и правила

Сначала удалите лишние страницы в разделе «Страницы сайта» (многие шаблоны uKit поставляются с набором из нескольких страниц). Либо изначально подбирайте одностраничную тему.

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

Контакты

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

• С помощью элементов «Текст» – достаточно перетянуть блок на страницу и записать свои контакты (телефон, email, адрес офиса).
• С помощью виджета «Контакты» – здесь можно описать несколько филиалов и отделений, присутствуют готовые поля и интеграции с онлайн-картами (Яндекс/Google), имеется три варианта отображения. Виджет позволяет редактировать контакты централизованно (для многостраничных сайтов) и управлять выводом тех или иных полей.

Блоки контента

Страницы в конструкторе uKit формируются из секций. Внутри секций располагаются мелкие элементы (картинки, текст, кнопки, иконки, заполнители) и комплексные виджеты (карточки товаров, таблицы с прайсами, таймлайны, отзывы, онлайн-калькуляторы и прочее).

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

Если идей нет, просто оставьте структуру, предложенную в тематическом шаблоне. Только не забудьте изменить содержимое на своё: отредактируйте тексты и замените изображения. Иначе контент будет неуникальным (что скажется на индексировании сайта поисковыми системами).

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

Например, для одностраничной визитки может подойти такая схема расположения блоков:

• Шапка с меню (ссылки в меню будут якорными, то есть при нажатии будут смещать фокус на нужную секцию страницы). В меню логично разместить логотип компании, если он есть. Если нет, то вполне можно обойтись и без него.
• Hero-блок – стартовая секция, в которой формулируется основное коммерческое предложение (УТП). Профильные специалисты здесь могут показать себя и коротко описать свои услуги. Например: Дмитрий Петров, детский стоматолог, город Новый Уренгой. Прямо в Hero-блоке логично поставить кнопку перехода к форме заявки или к блоку с контактными данными.
• Описания услуг и продуктов. Любые блоки, которые могут раскрыть подробности о вас и о том, что вы предлагаете. В большинстве случаев помогут виджеты картинок и текста.
• Технические детали и цифры. Блок с информацией, которая может подтвердить ваш профессионализм: сертификаты, награды, достижения, количество сданных проектов и т.п.
• Карточка с контактами.

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

Редактирование контента в uKit максимально простое:

• Нужно кликнуть на выбранном элементе.
• Если это текст, то откроется меню редактирования текста.
• Если это изображение, то откроется меню управления картинками: замена/загрузка своих фото, подпись, действия при клике, редактор (для обрезки, вращения и наложения эффектов).
• У виджетов другого типа могут быть свои уникальные настройки. Речь о таких элементах, как карточки, слайдеры, галереи, таблицы, таймер, меню и пр.

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

Меню

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

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

Само меню может иметь несколько уровней вложенности.

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

Чтобы реализовать такое поведение, нужно:

• Сначала выбрать секцию на странице или конкретный виджет и назначить ему якорную ссылку. Наведите указатель на виджет и нажмите значок якоря. В появившемся поле напишите уникальное название блока латинскими символами без пробелов. Например, «moy-block11»
• Теперь нажмите на виджете с меню. В структуре меню создайте новый пункт или отредактируйте имеющийся. Введите название пункта и в параметрах ссылки выберите тип «якорь». В выпадающем списке выберите пункт с нужным якорем («moy-block11»).

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

Изменение дизайна

Ключевые параметры внешнего вида меняются в uKit централизованно:

• Анимации.
• Цветовая схема (можно создать свой набор, но не во всех тарифах).
• Фон.
• Шрифты.
• Версия для слабовидящих (активируется в один клик).

Шаблон можно изменить на другой без потери контента.

Блоки можно скрывать или показывать на разных типах устройств: ПК, планшеты, мобильные. Например, на планшетах можно активировать показ в 2 колонки.

Шаг 7. Подключение систем аналитики

Статистика и аналитика в uKit подключаются за счёт готовой интеграции с Яндекс.Метрика и Google Аналитика.

Всё, что вам нужно сделать – выдать разрешение uKit для доступа к вашим аккаунтам Google и Яндекс. Всё остальное конструктор сделает автоматически.

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

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

Шаг 8. Добавление в панели вебмастера

Добавление сайта в поисковики (для начала его индексирования) происходит по аналогии с сервисами аналитики:

• В панели управления uKit перейдите в раздел «Продвижение».
• Найдите пункт «Добавить в поисковики».
• Выберите нужный пункт (Google Search Console или Яндекс.Вебмастер).
• Выдайте разрешение на доступ.
• Всё остальное конструктор сделает автоматически.

В том же разделе настроек можно добавить данные о своём бизнесе на онлайн-карты – через Яндекс.Справочник.

Шаг 9. Настройка форм и уведомлений о заявках

Откройте конструктор uKit (войдите в режим редактирования) и найдите виджет «Обратная связь».

Перетащите виджет в нужное место страницы. В настройках виджета можно переопределить дизайн и выбрать тип расположения полей – вертикально (в столбик) или горизонтально (в одну строку).

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

Для простейшей формы будет достаточно активировать следующие поля:

• Номер телефона или email-адрес (поле нужно сделать обязательным к заполнению).
• Согласие на сбор персональных данных (тоже должно быть обязательным).
• Текстовое поле («Ваше сообщение»). Его можно не делать обязательным, так как если сообщение будет пустым, вы можете сами связаться с клиентом и уточнить у него, что он хотел.

В конструкторе форм uKit есть и другие типы полей: файл, капча, имя, тема, выпадающий список и т.п.

Мы не рекомендуем перегружать форму лишними элементами.

По умолчанию оповещение о заявке из формы отправляется на email владельца сайта. Но адрес можно сменить на любой другой. Плюс, можно настроить интеграцию с CRM-системами amoCRM и Board CRM. Тогда заявки будут передаваться в виде новых сделок.

Факт заполнения формы можно подсчитывать в системах статистики как целевое действие (поддерживается интеграция с сервисами Яндекс.Метрика и Аналитика Google).

Шаг 10. Запуск рекламной кампании

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

Осталось самое главное – получить первых посетителей. Рассчитывать на большой поток клиентов из поиска с одностраничником не стоит. Такой сайт не является полезным с точки зрения поисковых систем.

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

Запустить рекламную кампанию можно прямо из панели управления uKit. Для этого есть сразу два встроенных решения:

• PromoPult (позволяет запускать автоматическое продвижение сайта и настраивать контекстную рекламу).
• Умная реклама на базе сервиса Яндекс.Бизнес (тут вообще полный автопилот и добавление профиля вашей компании на карты Яндекса).

Их настройка максимально упрощена. Например, PromoPult сам подберёт тематические поисковые запросы, по которым вам стоит покупать рекламу. Вам нужно только определить бюджет и запустить показ объявлений. При желании все параметры и запросы можно настроить вручную – если позволяют знания и опыт.

Уточнения по типам сайтов

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

Добавление прайса на одностраничник

Для презентации своих услуг и товаров у uKit есть следующие виджеты:

• Карточка – позволяет компактно размещать картинку (или иконку), название, описание, цену и кнопку для заказа. Карточки можно располагать как в одной строке, так и в столбцах, чтобы сформировать эффектные сетки из виджетов.
• Таблица и Таблица Pro – это виджеты адаптивных таблиц, в которых можно настроить любое количество столбцов и строк, параметры выравнивания и оформления. Pro-таблицы позволяют настроить больше деталей.
• Прайс – это готовый вариант таблицы со встроенными кнопками, полями для цен и описаний. Товары или услуги можно располагать не только горизонтально, но и вертикально.
• Файл – обеспечивает красивую ссылку на файл с прайсами и торговыми предложениями. Рядом с кнопкой на скачивание можно показать описание, размер файла и иконку. Конструктор может вести статистику кликов и скачиваний.

Размещение товара и настройка онлайн-оплаты

Мало просто показать свои товары лицом и собрать заявки клиентов. Идеальная ситуация, когда вы можете продать товар: принять за него оплату и взять в обработку.

У uKit есть встроенный модуль интернет-магазина. Устроен он максимально просто:

• Вам нужно активировать соответствующий тариф (для доступа к функционалу продаж).
• Далее на страницу сайта нужно перетянуть виджет «Товар магазина».
• Автоматически добавится виджет корзины и в карточке появится дефолтный товар.
• Теперь нужно изменить описание товара на своё (загрузить изображение, поменять название, описание, цену, добавить и настроить опции, если есть) и активировать сбор статистики (если нужно).
• В настройках магазина нужно определить валюту, единицы измерения ваших товаров, стоимость доставки, поля в форме заказа, адреса для отправки уведомлений и подключить системы оплаты (Юkassa, Сбербанк, Wallet One, оплата наличными).

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

Заявка отправляется владельцу на email и попадает во встроенную CRM-систему (раздел панели управления «Заказы»).

Вставка картинок и организация портфолио

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

Специально для размещения большого числа изображений предоставляются виджеты «Галерея» и «Слайдер».

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

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

Виджеты онлайн-чата с консультантами

Если заявку нужно принять здесь и сейчас, то для этого как нельзя лучше подходят виджеты онлайн-консультантов.

Из коробки у uKit имеется интеграция с Jivo (наш обзор) и LiveChat.

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

Далее нужно авторизоваться в аккаунте выбранного сервиса и всё, виджет готов к работе.

Для интеграции с другими виджетами потребуется вставка HTML-кода (нужен максимальный тариф и понимание что и куда вставлять).

Кнопка заказа обратного звонка

У uKit полностью бесплатные и безлимитные SMS-уведомления о заказах обратного звонка.

Виджет добавляется по аналогии с чатом онлайн-консультантов – просто перетаскивается на страницу и настраивается.

Для приёма заявок нужно привязать свой номер мобильного телефона.

В настройках виджета можно поменять цвет и эффект привлечения внимания – дрожание, волны, болтание. Данные параллельно могут передаваться в системы статистики и в CRM-системы.

Всплывающие окна

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

Настраиваются всплывающие окна в разделе со списком страниц (внутри визуального конструктора).

Процесс можно разделить на три шага:

1. Настройка самой формы (нужно определить набор полей, какие из них обязательны к заполнению, а какие нет).
2. Настройка действий (куда и какие уведомления отправлять, нужно ли обмениваться данными с CRM и системами статистики).
3. Настройка логики появления (при клике на кнопке, по таймеру, при прокрутке страницы и при попытке ухода со страницы).

Пример активации всплывающего окна при нажатии на кнопку:

• Предполагается, что вы уже настроили набор полей и опции отправки уведомлений о заявке.
• Теперь на страницу нужно добавить ссылку или кнопку.
• В режиме редактирования страницы кликните на нужной кнопке.
• Выберите пункт с иконкой ссылки.
• В меню «Куда ведёт ссылка» выберите пункт «Всплывающее окно».
• Откроются все доступные варианты всплывающих окон.
• Назначьте то окно, которое хотите показать клиенту.
• Готово.

Настройка SEO-параметров

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

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

Тем не менее, стоит правильно заполнить мета-теги страницы: тайтл и дескрипшн. А также добавить изображение записи (мета-тег «Image»).

Теперь, когда вы или кто-то ещё будет делиться ссылкой на сайт, пользователи будут видеть расширенное описание и превью-картинку.

Создание одностраничника под ключ

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

Но не всегда есть время и желание разбираться с очередным инструментом.

В этом случае команде uKit есть что предложить – можно заказать разработку сайта под ключ.

За предоставление услуг отвечает собственная веб-студия Divly. Создание одностраничного сайта (визитки или лендинга) обойдётся здесь от 6900 руб.

Нужно только оформить заявку (описать что вам нужно и как должно выглядеть), оплатить заказ, дождаться окончания работ и принять результат. Всё делается через специальный личный кабинет с официальными гарантиями.

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

Для всего есть фиксированный прайс. Цены более чем приемлемые.

Выводы и рекомендации

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

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

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

• Автор: Дмитрий Луценко

Источник: uguide.ru