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

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

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

Создать лендинг на uKit Смотреть подробный обзор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Готово.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В 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 умеют отсчитывать оставшееся время до конкретной даты или перезапускаться циклично (каждый день).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Онлайн-чат

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

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

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

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

Что в итоге

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

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

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

Алексей Дружаевэксперт-основатель

Подписывайтесь на наши группы в социальных сетях
Подписаться
Уведомить о
0 комментариев
Межтекстовые Отзывы
Посмотреть все комментарии