Создание одностраничного сайта-лендинга в конструкторе uKit

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

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

Настройка блоков лендинга

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

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

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

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

Создание структуры из экранов

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

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

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

Блоки офферов с верхним видимым или скрытым меню (сэндвич-меню) есть во всех одностраничных шаблонах uKit. Они сделаны по стандартам отрасли.

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

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

О наиболее важных элементах и экранах мы расскажем ниже.

Блок меню и якоря

Раз мы упомянули о необходимости создания меню и блоков экранов, сразу расскажем, как это делается в uKit.

Логика стандартная – каждый экран или блок может иметь свою якорную ссылку. Для этого нужно навести на блок указатель мыши и во всплывающем меню «Действия» выбрать пункт «Якорная ссылка».

В открывшейся форме нужно указать имя якоря после символа # (используйте только английские символы). Например, #offer.

Якорные ссылки в uKit можно задавать не только для блоков, но и для отдельных элементов (виджетов), например, для заголовков.

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

Осталось переименовать пункт и переместить его внутри меню на нужную вам позицию.

Готово.

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

Добавление видео-фона/интерактивной карты

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

В общих настройках дизайна в качестве общего фона можно выбрать только заливку цветом или изображение.

Фоновое видео или онлайн-карты можно запостить на фон только в настройках конкретного блока.

Выберите пункт «Оформление» и переключитесь на вкладку «Видео».

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

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

Настройки для онлайн-карт будут выполняться по аналогии, но только во вкладке «Карта».

Для подключения не embedded-карт потребуется API-ключ.

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

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

В uKit в виджете «Текст» цвет изменяется непосредственно для выбранных слов и символов. Можно собрать в одном слове хоть всю палитру красок.

Слайдер

Слайдер будет наиболее удобен для того, чтобы презентовать на лендинге примеры работ.

Для добавления слайда нужно:

1. Добавить сначала пустой блок в нужном месте страницы.
2. Настроить оформление блока (заливка цветом или фоновая картинка, высота, отступы и т.п., тег якорной ссылки, добавление пункта в меню).
3. Переключиться на вкладку «Виджеты» и найти «Слайдер».
4. Перетянуть иконку слайдера внутрь пустого блока.
5. Нажать указателем в любом месте виджета, чтобы попасть в меню его настроек.
6. Добавить или заменить изображения слайдов (можно задействовать встроенную библиотеку бесплатного фотостока).
7. Настроить другие опции – показ блока текста и подложки, кнопок, стрелки прокрутки, анимации и т.п.

Другие блоки

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

• Блоки с карточками услуг – собираются из виджетов «Текст» и «Карточка», можно добавить «Иконки» и «Кнопки».
• Блок о нас / о компании – собирается из виджетов «Текст» и других простых элементов (картинки, пробелы, разделители и т.п.).
• Блок с прайс-листами – можно использовать «Прайс» или «Таблица» / «PRO таблица».
• Блок с отзывами – есть специальный виджет «Отзывы», и более универсальный «Цитата».
• Блок с этапами работ – с задачей отлично справляются виджеты «Таймлайн» и «Этапы».
• Блок с преимуществами – виджеты «Текст», «Иконка», «Этапы» и др.
• Блок с контактами – лучше всего с помощью специального виджета «Контакты» (есть несколько вариантов дизайна, встроенная интерактивная карта, возможность указания контактов нескольких отделений, стандартные и дополнительные поля).

Призыв к действию

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

Чтобы организовать простейший CTA-блок в uKit нужно:

1. Добавить новый пустой блок конструктора.
2. Настроить параметры его внешнего вида (якорная ссылка в данном случае не требуется).
3. Перетянуть в блок виджет «Текст» и настроить его параметры (цвет, размер, шрифт и т.п.). Текст в uKit может динамически меняться, но опция доступна только на отдельных тарифах сервиса.
4. Перетащить виджет «Кнопка» и настроить его внешний вид (скругления, фон, надпись и т.д.).
5. Выбрать действие кнопки. Лучшим вариантом будет вызов всплывающего окна (минимальный набор таких окон есть в каждом шаблоне uKit), так как к формам можно подключить внешние CRM-системы и организовать сбор нужных данных.

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

Интерактивные элементы

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

Таймер

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

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

Таймеры в uKit умеют отсчитывать оставшееся время до конкретной даты или перезапускаться циклично (каждый день).

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

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

Не стоит путать всплывающие окна и встраиваемые формы. Формы вставляются внутрь страниц самостоятельными виджетами «Обратная связь».

Вот так она выглядит в конструкторе:

Всплывающее окно тоже имеет встроенную форму, но настраивается гораздо сложнее.

Все доступные всплывающие окна можно найти во вкладке конструктора «Страницы». Там же можно добавить новые окна, удалить имеющиеся или перейти к процессу редактирования/настройки.

Выберите нужное окно и определите для него:

• Какие поля показывать и какие из них будут обязательными (не забудьте добавить поле с согласием на сбор персональных данных).
• Куда отправлять данные из формы (обычно это email-адрес владельца сайта, но можно добавить дополнительные электронные адреса, а также передачу данных в CRM-систему и в систему статистики).
• Опции появления (при нажатии на кнопку, по таймеру, при обнаружении прокрутки страницы и/или при попытке закрытия страницы, набор условий можно сочетать между собой).

Как настроить вызов окна по нажатию произвольной кнопки внутри страницы, мы рассмотрели выше – в блоке «Призыв к действию».

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

В списке виджетов найдите элемент «Заказать звонок» и перетяните его в левый или в правый нижний угол сайта.

Остаётся только кликнуть на виджет и настроить его параметры:

• Эффект анимации (дрожание, болтание, волна).
• Опции формы (поле с согласием на сбор данных, выбор наиболее удобного времени звонка, указание имени).
• Цвет кнопки.
• Необходимость показа на мобильных устройствах (лучше активировать).
• Подключение CRM и статистики (по желанию).

Для корректной работы кнопки нужно привязать номер телефона, на который будут приходить SMS-уведомления о заявках. Сами уведомления бесплатные.

На одну страницу можно добавить только одну кнопку заказа звонка.

Онлайн-чат

Готовые виджеты чатов в uKit: решение от JivoSite и решение от LiveChat. Вместо них можно воспользоваться функцией вставки произвольного HTML-кода и подключить любой сервис web-чатов. Для активации опции HTML потребуется максимальный тариф подписки.

В остальном процедура настройки стандартная:

• Перетащить виджет на страницу.
• Щелкнуть на нём и перейти в настройки.
• Привязать к существующему аккаунту выбранного сервиса (JivoSite или LiveChat) или создать новый.

Остальные настройки чата будут выполняться уже внутри соответствующего сервиса.

Что в итоге

В рамках этого руководства мы достигли следующих целей:

• Изучили процесс пошагового создания лендинга в конструкторе uKit.
• Узнали, как работать с примитивами внутри блоков – текст, пробелы, разделители.
• Привели примеры того, как добавить на лендинги наиболее важные элементы – кнопки, всплывающие окна, чаты, таймеры, формы и кнопки заказа звонка.
• Узнали, как связать элементы меню с якорными ссылками, а кнопки — со всплывающими окнами.

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