Как создать сайт за 30 минут, используя бесплатный конструктор WIX


Создание сайта бесплатно в конструкторе WIX

СОДЕРЖАНИЕ

 

Итак, вы созрели для того, чтобы показать себя во всей красе на просторах всемирной паутины. Не важно, с какой целью. Представить свою компанию клиентам, создать портфолио, продвигать бизнес, повысить престиж с помощью сайта-визитки, создать блог, раскрутить бренд или просто поэкспериментировать с веб-версткой. Теперь нужно определиться с CMS-конструктором — приложением для создания интернет-ресурсов. Свой выбор я сделал давно, остановившись на бесплатном редакторе сайтов Викс. Почему именно он — читайте здесь:


Создание личного сайта бесплатно. Выбор CMS-конструктора.


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


Одностраничник и Landing Page


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


Классический одностраничник является самостоятельным ресурсом. Он содержит в себе контент, предназначенный для информирования клиентов, продвижения, создания лояльной аудитории. Технически одностраничный сайт привязывается к собственному домену, является замкнутым веб-проектом. Лендинг может быть отдельной страницей на сайте.


Виды одностраничных сайтов


В зависимости от целей и задач создания, одностраничники подразделяются на несколько категорий.


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

  2. Портфолио. Наиболее востребованная форма виртуального информирования клиентов среди фрилансеров. Содержит примеры работ, контактные данные, краткие условия сотрудничества.

  3. Квиз. Маркетинговый инструмент сбора информации о клиентах, выполненный в виде онлайн-опросника. Для мотивации посетителей за предоставленные данные выдается вознаграждение: чек-лист, бесплатный доступ к приложению, VIP-подписка и тому подобное.

  4. Информационная страница. Содержит информацию о предстоящем мероприятии, акциях, выпуске нового товара или услуги.

  5. Подписной сайт. Страница, на которой пользователь может подписаться на рассылку — новости компании, изменения в ассортименте, акции и скидки, вебинары.


С позиции верстки и формата, одностраничные сайты могут быть:


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

  • краткоформатный представляет часто сайт-визитку или опросник, решает монозадачи, обычно вмещается в размеры экрана;

  • ресурс по принципу «в один шаг» создается с целью привлечения внимания и совершения целевого действия путем перехода на основной сайт;

  • «два шага» — двухстраничный сайт, содержит рекламную информацию, кнопку перехода на страницу с подробным описанием товара, услуги, мероприятия.


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


Этапы создания сайта


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


  1. Создать прототип сайта. Сделать это можно в любом графическом редакторе, Microsoft Visio, даже в Word или на листке бумаги.

  2. Для самостоятельной верстки выбираем CMS-конструктор. В начале я указал ссылку на статью по сравнению самых популярных условно-бесплатных редакторов.

  3. При выборе конструктора Wix пропускаем этап подбора хостинг-провайдера, панели управления. В отличие от Tilda, на хостинге Викс можно размещать неограниченное количество сайтов, объем дискового пространства составляет 50 Гб. У Тильды можно создавать до 5 сайтов не более 500 страниц на максимальном объеме хоста в 1 Гб.

  4. Регистрируем аккаунт, выбираем шаблон, верстаем сайт.

  5. Настраиваем параметры SEO, наполняем ресурс контентом и начинаем продвижение.


Для проверки полного функционала WIX воспользуйтесь бесплатным 14-дневным тестовым периодом. Которого, кстати, у Tilda нет.

Структура одностраничного сайта


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


  1. Меню навигации.

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

  3. «О нас» или «О компании». Описание проекта, возможно, с призывом к целевому действию.

  4. Преимущества. Ваше УТП, ценность для потенциальных клиентов.

  5. Кейсы или Портфолио. Расскажите о вашем опыте, приведите удачные примеры реализованных проектов.

  6. Отзывы, если они есть. Могут быть статичными, либо интерактивными. Во втором случае модерируйте этот блок и не увлекайтесь хвалебными откликами.

  7. Услуги, прайс, схема работы. Конкретика по условиям сотрудничества с вами, расценки на основные товары и услуги. Схема взаимодействия при обращении в компанию.

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

  9. Обратная связь. Форма для связи с вами, интерактивный чат Wix.

  10. Дополнительные блоки. В конструкторе Викс множество бесплатных и платных инструментов для расширения функционала сайта.


Создание дополнительных функций на сайте Wix
Дополнительные инструменты для сайта ВИКС
Планируете в дальнейшем развитие, усложнение и продвижение ресурса? Тогда сразу создавайте структуру с учетом перехода к многостраничному сайту.

Минусы одностраничных сайтов


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

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

  3. Изобилие графических элементов приводит к проблемам с загрузкой на устройствах с медленным интернетом.

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

  5. У многих пользователей одностраничник ассоциируется с ненадежностью владельца и даже мошенничеством.


Пошаговая инструкция создания одностраничного сайта в конструкторе Wix


В предыдущей публикации я уже рассказал, как регистрировать аккаунт на Викс и создавать сайт-блог: Как быстро создать личный Блог в конструкторе WIX. Теперь приступаем к верстке одностраничного сайта.


Выбор шаблона


После регистрации аккаунта авторизуетесь и выбираете «Создать сайт».


Начало работы по созданию сайта в конструкторе Wix
Начало работы по созданию сайта

Определитесь с тематикой ресурса. Например, «Бизнес».


Выбор направления и вида деятельности для сайта
Выбираем тематику будущего сайта

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


Переходим к ручному созданию сайта
Переходим к варианту ручного создания сайта

Конструктор предлагает большую коллекцию шаблонов с тематическими подразделами. Можно воспользоваться поиском. Есть отдельная категория для лендингов. Перед редактированием воспользуйтесь функцией предпросмотра сайта.


Выбор шаблона сайта из коллекции  Wix
Коллекция шаблонов в Викс большая, каждый найдет подходящий вариант

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


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

Общий принцип работы со всеми блоками в конструкторе WIX схож с редактированием в популярном приложении для создания презентаций Microsoft PowerPoint. Достаточно навести мышку, два раза щелкнуть левой кнопкой для выделения, либо правой вызвать всплывающее меню. Один раз ЛКМ по блоку показывает тот же инструментарий в виде кнопок. Группируйте, перемещайте, вращайте, растягивайте объекты, используя мышку. Ошиблись? Нажмите стрелку «Отменить».


Принципы редактирования в конструкторе Wix
Редактирование в Wix очень простое и многовариативное

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


Восстановление сохраненных версий сайта в Истории
Что-то пошло не так? Сделайте откат к одной из предыдущих сохраненных версий

Изменение фона страниц


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


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

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


Хедер и футер


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


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


Хедер и футер, изменение блоков сайта, общие принципы
Изменение статичных блоков сайта - хедера и футера

Настройка меню


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


Настройка меню сайта в редакторе Викс
Приступаем к настройке меню

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


Дополнительные возможности настройки меню на сайте WIX
Делайте меню сайта не только удобным, но и красивым

Изменение порядка расположения страниц в верхнем меню автоматически применяется в нижнем и наоборот. А вот дизайн и макет меняются независимо. Если заметили, справа на сайте несколько точек — это Якорное меню, которое синхронизировано с верхним и нижнем. При прокрутке оно остается доступным и служит для удобства навигации при скроллинге. Это и есть юзабилити сайта.


Сквозное меню как элемент юзабилити сайта
Навигация, юзабилити сайта очень важны для удержания посетителей
Важный момент — настройка SEO-параметров сайта в целом и отдельных страниц для многостраничников. Именно от этого будет зависеть продвижение ресурса в поисковых системах. Тема довольно сложная и обширная, поэтому я рассмотрю ее в отдельной статье.

Добавление нового блока на сайт Викс


Давайте создадим раздел «Отзывы». Для этого в левом меню выбираем пиктограмму с «+» — «Добавить». Далее объект «Полоска» → «Отзывы». Подбираем подходящий макет нового блока.


Добавление нового раздела на сайт
Отзывы - важный элемент продвижения сайта. Создадим этот блок на нашем одностраничнике

Новый раздел будет вставлен в предварительно выбранное место на сайте. Управляйте настройками блока, меняйте фон, размер, макет, заменяйте или редактируйте отдельные элементы — фотографии, текст и др.


Редактирование вновь созданного блока на сайте WIX
Усовершенствуйте внешний вид и структуру нового раздела

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


Изменение пропорций нового раздела сайта
Подгоните размер блока под границы страницы одним кликом

Обратите внимание, новый раздел не отображается в Меню сайта. Дело в том, что в одностраничном сайте по определению… одна страница. В данном случае это «Главная». Все остальные разделы привязываются к Меню в виде «Якоря» — внутренней ссылки на соответствующее место в структуре сайта. Чтобы создать Якорь для нового раздела, откройте Настройки Меню в виде точек в правой части экрана. Нажмите внизу «Добавить новый якорь», присвойте ему название — «ОТЗЫВЫ» в данном случае.


Как добавить новый раздел в меню сайта
Добавьте новый раздел в меню

Теперь с помощью мышки переместите Якорь на уровень верхней границы раздела «Отзывы».


Устанавливаем якорь нового раздела для навигации по сайту
Установите Якорь для перехода к разделу из Меню

В верхнем или нижнем Меню откройте «Настройки», внизу кликните по «Добавление ссылки», пометьте «Якорь» и выберите «ОТЗЫВЫ». Нажмите «Сохранить». Новый раздел появится во всех Меню на сайте.


Фиксация названия нового раздела в меню сайта
Добавляем название нового раздела во все меню сайта

Редактирование текста


Выберите блок для изменения и щелкните по нему два раза ЛКМ. Теперь меняйте текст, как в обычном редакторе, выбирая шрифт, интервалы, размер, цвет, эффекты.


Редактирование текстового блока в редакторе WIX
Работать с текстом в редакторе Викс не сложнее, чем в Ворд

Для создания текстового блока, скопируйте и вставьте в новое место существующий. Либо выберите в боковом Меню «Добавить» → «Текст», определитесь со стилем.


Создание нового текстового блока в Викс
Сздание нового текстовго блока. Очень важный момент - выбор стилей, особенно заголовков

Вставка картинок и видео


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


Открываем «Добавить» — «Фото» и определяемся, откуда загрузить графику. Активируем «Мои загрузки» → «Загруженные фото», чтобы выбрать локальный графический файл.


Вставка графических изображений на сайт Викс
Загружайте фотографии, картинки на сайт с компьютера, из коллекции Викс и интернета

Выбранный файл сохраняется на хостинге Викс. Изображение можно отредактировать встроенными инструментами Фотостудии, добавить теги, привязать ссылку, создать подпись и атрибут ALT для SEO-индексирования.


Использование инструментария Фотостудии Викс для улучшения картинок
Графический редактор Фотостудии Викс - инструмент с большим набором функций. Улучшайте изображение по вашему усмотрению

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