Создание одностраничного сайта (лендинг) на конструкторе Wix

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

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

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

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

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

Сразу под хедером на полоску с эффектом параллакса добавим плеер для воспроизведения промо видео. Для этого:

В боковом меню редактора переходим в раздел « Добавить » - « Видео и аудио » и перетаскиваем на страницу виджет « Одиночное видео ».

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

Ниже полоски с параллаксом разместим еще одну. Для этого:

В боковом меню слева переходим в пункт « Добавить » - « Полоска » - « Классика » и выбираем бесцветный вариант.

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

Управление слоями осуществляется в специальной панели. Для ее активации:

Перейдите в раздел верхнего меню « Инструменты » - « Слои ».

Обратите внимание, что видеоплеер находится вне основных слоев (полосок), а лежит поверх их.

• Или выделите нужный элемент, в контекстном меню (вызывается правой кнопкой мыши) выберите « Слои » - « Все слои ».

Панель « Слои » позволяет скрывать отображение отдельных элементов, подсвечивать их. А также менять порядок родительских слоев путем перетаскивания. Кроме этого для изменения порядка слоев можно использовать панель « Инструменты ».

Ниже серой полоски добавим полноэкранный слайдер для демонстрации продукции и услуг компании. Для этого:

В боковом меню перейдите в пункт « Добавить » - « Интерактив » - « Слайд-шоу », « На весь экран ».

Чтобы изменить содержимое слайдов:

Кликните по слайду с помощью мышки и перейдите по ссылке « Управлять слайдами ».

Проделайте перечисленные выше действия со всеми остальными слайдами.

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

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

Для добавления репитеров выполните следующие действия:

В боковом меню перейдите в раздел « Добавить » - « Списки и сетки » - « Репитеры ».

Каждый элемент репитера настраивается отдельно:

Измените текстовое содержимое блока справа.

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

После репитера добавим полоску « Наша команда ». Для этого перейдите в меню « Добавить » - « Полоска » - « Команда ».

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

Для настройки порядка секций:

1. Курсором выделите нужную секцию и кликните по ссылке « Управлять », доступной сверху.
2. В появившемся диалоговом окне задайте порядок элементов и их количество.

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

1. Перейдите в боковое меню.
2. Кликните по пункту « Добавить » - « Полоска » - « Отзывы ».
3. Перетащите курсором нужный элемент в рабочую область редактора страницы.

Ниже блока с отзывами добавим форму для лидогенерации. Для этого:

1. В боковом меню редактора переходим в раздел « Добавить » - « Формы и связь », « Лид-формы ».
2. Добавляем форму на страницу с помощью перетаскивания.

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

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

Кроме всего прочего в коллекции редактора конструктора Wix доступны интерактивные элементы, которые повышают конверсионность лендинга: таймеры, всплывающие формы и т.д.

Добавим на свой вариант посадочной страницы таймер. Для этого:

В меню слева переходим в раздел Wix APP Market , в поисковое поле вводим «таймеры» и выбираем Wix Countdown Clock .

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

Для добавления на лендинг всплывающей формы:

В разделе бокового меню « Добавить » переходим в пункт « Интерактив » - « Промобоксы » - « Контакты » и выбираем нужный элемент.

На созданной нами странице присутствует три CTA-элемента. Кнопка « Позвонить » расположена в правом верхнем углу хедера и две кнопки « Погнали » на полосках с мотивирующими фразами. В их настройках можно задать следующие варианты перенаправления:

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

Рассмотрим настройку кнопки « Позвонить ». Для этого:

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

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

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

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

Вторую кнопку «Поехали» привяжем к промобоксу. После этого нажатие на кнопку будет открывать всплывающее окно, которое мы создали ранее. Для этого: