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

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

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

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

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

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

Добавление видеоплеера

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

1. В боковом меню редактора переходим в раздел «Добавить» - «Видео и аудио» и перетаскиваем на страницу виджет «Одиночное видео».
2. 
3. Заходим в настройки виджета. Для загрузки воспроизводимого видеоролика из медиатеки сайта или с локального устройства кликаем по ссылке «Заменить видео».
4. 
5. Для встраивания видеоролика, опубликованного в социальном медиа, кликаем по иконке нужного интернет-ресурса и вставляем в текстовое поле URL-адрес видеоролика.

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

Полоска с видео

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

1. В боковом меню слева переходим в пункт «Добавить» - «Полоска» - «Классика» и выбираем бесцветный вариант.
2. 
3. Затем кликаем по границе полоски и переходим по ссылке «Изменить фон полоски».
4. В появившемся диалоговом окне нажимаем «Цвет» и выбираем светло-серый оттенок.
5. 
6. Через меню «Добавить» размещаем с правой стороны полоски текстовый блок.
7. 
8. Редактируем его и меняем цвет шрифта на белый.
9. 
10. После этого снова переходим в раздел «Добавить» - «Кнопка» - «Кнопки с текстом» и перетаскиваем на страницу элемент с рисунком ракеты.
11. 
12. Добавленную кнопку располагаем ниже текстового блока и меняем ее текст.
13. 

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

Управление слоями

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

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

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

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

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

Слайдер

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

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

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

1. Кликните по слайду с помощью мышки и перейдите по ссылке «Управлять слайдами».
2. 
3. В появившемся диалоговом окне переименуйте слайд, скопируйте, удалите его или создайте новый.
4. Затем кликните по ссылке «Изменить фон слайдов» и в появившейся панели подбираем новый фон для текущего слайда. Это может быть цвет, фото или видео.
5. 
6. После этого нажмите на кнопку «Настройка» и задайте параметры отображения фона в слайдере: цвет подложки, прозрачность, расположение и т.д.
7. 
8. Измените текст слайда.
9. 

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

Мотивирующая полоска

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

Репитер

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

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

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

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

1. Измените текстовое содержимое блока справа.
2. 
3. После этого перейдите в блок слева и отредактируйте его дизайн.
   Каждый элемент репитера состоит из контейнера и бокса.
4. 
5. Курсором выделите контейнер и перейдите на вкладку «При наведении».
6. 
7. Нажмите на кнопку «Добавить в бокс при наведении».
8. 
9. В списке выберите элемент, добавьте его в бокс и отредактируйте. После этого данный элемент будет отображаться только при наведении на него курсора мыши.
10. 

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

Блок «Наша команда»

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

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

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

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

Блок с отзывами

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

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

Форма лидогенерации

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

1. В боковом меню редактора переходим в раздел «Добавить» - «Формы и связь», «Лид-формы».
2. Добавляем форму на страницу с помощью перетаскивания.
3. 
4. Для редактирования определенного поля формы выделяем его и нажимаем на кнопку «Редактировать поле». В появившемся диалоговом окне можно активировать отображение подсказки, названия поля, установить ограничение по количеству символов и т.д.
5. 
6. Затем выделяем весь виджет “Wix Формы” и нажимаем на иконку со знаком «+». После этого кликаем по полю, которое нужно добавить в веб-форму.
7. 
8. Теперь жмем на ссылку «Настроить форму». В диалоговом окне переходим в раздел «Настройка», в котором можно задать адрес электронной почты, на которую будет приходить уведомление о новом заполнении формы. А также просмотреть данные по всем регистрациям, установить лимит на количество заполнений и т.д.
9. 
10. В следующих разделах настроек задаем элемент, который будет отображаться пользователю после заполнения формы. А также платежные атрибуты для сбора денежных средств через веб-форму и т.д.
11. 

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

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

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

Таймер обратного отсчета

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

1. В меню слева переходим в раздел Wix APP Market, в поисковое поле вводим «таймеры» и выбираем Wix Countdown Clock.
2. 
3. Расположим таймер в блоке со второй мотивирующей надписью. После этого переходим в настройки элемента.
4. 
5. Здесь задаем дату окончания таймера, часовой пояс, дизайн и т.д.
6. 

Всплывающая форма лидогенерации

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

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

1. В разделе бокового меню «Добавить» переходим в пункт «Интерактив» - «Промобоксы» - «Контакты» и выбираем нужный элемент.
2. 
3. В режиме промобокса удаляем все его содержимое.
4. 
5. После этого меняем фон промобокса.
6. 
7. Переходим на лендинг, копируем расположенную ниже форму для сбора пользовательских данных. Вставляем ее в промобокс.
8. 
9. Затем в настройках промобокса указываем, на каких страницах его отображать и с какой задержкой.
10. 

Настройка якорей и CTA-кнопок

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

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

Кнопка «Позвонить»

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

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

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

Кнопки «Погнали»

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

1. В настройках кнопки кликаем по иконке ссылки, которая расположена внизу диалогового окна.
2. 
3. В списке «Куда ведет этот элемент?» выделяем вариант «Якорь». В параметрах справа выбираем страницу сайта и элемент (лид-форма), на который будет указывать кнопка.
4. 
5. Сохраняем внесенные изменения.

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

1. Переходим в настройки кнопки и в списке «Куда ведет этот элемент?» выделяем вариант «Промобокс» и справа выбираем нужный элемент.
2. 
3. Нажимаем «Сохранить».

Что в итоге

В рамках данного руководства мы достигли следующих результатов:

• Создали лендинг.
• Разместили на нем видеоплеер.
• Добавили слайдер для отображения товаров и услуг.
• Добавили несколько полосок с CTA-кнопками и настроили их поведение.
• Создали и настроили таймер обратного отсчета.
• Добавили и оформили репитеры.
• Разместили блоки с отзывами и «Наша команда».
• Создали форму для сбора пользовательских данных и настроили их обработку.

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

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