Пошаговое создание сайта в онлайн конструкторе от Wix (Викс)

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

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

Создание сайта на Wix – подготовка

Для начала создадим пользовательский профиль. Для этого:

• На главной странице официального сайта Wix переходим по ссылке «Начать сейчас».
• Заполняем форму регистрации и получаем доступ к личному кабинету пользователя конструктора.

Кроме того на платформу Wix можно войти с помощью аккаунта Facebook или Google.

Выбор и редактирование шаблона

Рассматриваемый конструктор предоставляет два варианта создания сайта:

Как сделать сайт на WIX - с помощью искусственного интеллекта или самостоятельно?

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

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

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

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

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

Пошаговая инструкция по созданию сайта-визитки на Wix

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

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

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

Сайт-визитка состоит из трех страниц: «Главная», «О компании» и «Контакты». На их примере мы и рассмотрим процесс создания интернет-ресурса данного типа.

Главная страница

1. В редакторе шаблона переходим на страницу «Главная».
2. Кликом выделяем логотип, редактируем его текст и стиль (диалоговое окно «Настройка текста»).В этом же диалоговом окне можно применить к тексту один из встроенных эффектов.
3. 
4. Затем кликаем по меню. Нажимаем кнопку «Настроить», удаляем ненужные или добавляем в панель навигации нужные пункты.
5. 
6. В меню, вызываемом правой кнопкой мыши, выбираем пункт «Изменить дизайн хедера».
7. 
8. В коллекции готовых вариантов дизайна хедера выбираем нужный цвет.
9. 
10. В боковом меню переходим в раздел «Добавить» - «Полоска» - «Услуги». Вставляем элемент ниже хедера и редактируем содержимое полоски.
11. 
12. Скролим шаблон страницы вниз и сдвигаем все полоски вплотную к хедеру.В редакторе Wix элементы на странице можно перетаскивать не только мышкой, но и перемещать их вверх или вниз с помощью соответствующих кнопок. Они доступны при активном режиме уменьшенного масштаба.
13. 
14. Изменяем текст блока «О нас». Чтобы получить варианты текста, которые можно быстро отредактировать, выделяем блок и переходим по одноименной ссылке. В текстовое поле вводим ключевые слова, характеризующие тематику сайта, и нажимаем кнопку «Создать текст».
15. 
16. Копируем понравившийся вариант и заменяем им текстовое содержимое блока «О нас».
17. 
18. Выделяем кликом текстовый блок, нажимаем на ссылку «Редактировать текст» и вставляем скопированный блок. Затем вставляем название своего сайта.
    Таким же образом редактируются и все остальные текстовые блоки главной страницы.
19. 
20. Если не нравится фоновый рисунок блока, тогда кликаем по нему и переходим по ссылке «Изменить фон полоски». В появившемся диалоговом окне подбираем новое изображение.
    Конструктор сайтов Wix предоставляет обширную коллекцию фото и видео по разным тематикам.
21. 
22. В футере раздел с социальными кнопками оставляем без изменений. Но поменяем шаблон формы подписки на новостную рассылку. Для этого выделяем блок, кликаем по иконке «Дизайн» и выбираем нужный вариант.
23. 
24. Затем меняем название сайта в блоке копирайта и главная страница готова.
25. 

Страница «Контакты»

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

1. Переходим на страницу «Контакты». Хедер страницы оставляем без изменений.
2. 
3. Переходим ко второму разделу – «Ждем в гости». Здесь изменим цвет текста названия блока.
4. 
5. Блоки «Наш адрес» и «Часы работы» также делаем более заметными. Увеличим их значки и добавим к ним эффект тени.
6. 
7. Изменяем адрес и часы работы.
8. 
9. Текстовое содержимое также сделаем более заметным, увеличив размер шрифта, изменив цвет и добавив подложку.
10. Из раздела «Наш адрес» удаляем ссылку «Смотреть на карте».
11. После этого поднимем виджет Google Карт выше контактной формы.
12. 
13. Выделяем блок с интерактивной картой и переходим по ссылке «Настроить адреса».
14. Затем в появившемся диалоговом окне указываем расположение своего магазина и изменяем надпись над маркером интерактивной карты.
15. 
16. Из контактной формы, которую мы переместили ниже, удаляем поле «Телефон» и изменяем заголовок. Для этого выделите это поле и нажмите на клавиатуре клавишу Delete.
17. 
18. Если не устраивает заданное по умолчанию оформление формы, то для его смены выбираем один из шаблонов. Они становятся доступны после нажатия на кнопку «Дизайн», которая отображается возле выделенного элемента.
19. 
20. Кликом мыши выделяем панель социальных ссылок и нажимаем на кнопку «Подключить соцсети».
21. В появившемся окне удаляем (добавляем или меняем на новые) иконки социальных платформ и прописываем адреса своих страниц в социальных сетях.
22. 
23. После этого поднимаем текстовый блок копирайта немного выше и страница контактов готова.

Страница «О нас»

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

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

Настройка приложений

Конструктор сайтов Wix предоставляет обширную коллекцию инструментов для расширения нативного функционала шаблона и интеграции создаваемого сайта со сторонними сервисами и платформами. Приложения доступны в Wix App Market. Они разделены на следующие категории:

• «Сбор лидов» - инструменты для сбора данных о пользователях.
• «Анализ трафика» - приложения для сбора статистики по сайту.
• «Взаимодействие» - инструменты для выстраивания взаимосвязи с пользователями и клиентами.
• «Маркетинг» - инструменты для продвижения сайта.
• «Интернет-магазин» - функционал для расширения возможностей торговых интернет-ресурсов.
• «Услуги и события» - виджеты для предварительной записи клиентов, бронирования отелей и т.д.
• «Медиа и контент» - инструменты для публикации и работы с различными типами контента, представленного на сайте.
• «Элементы дизайна» - инструменты для добавления на страницу новых элементов и их оформления.
• «Коммуникация» - виджеты форумов, чатов, отзывов и других средств коммуникации с пользователями сайта.

Подключение приложения Wix Chat

В качестве примера рассмотрим добавление на страницу Wix Chat. Подключение других приложений происходит по тому же принципу. Для этого:

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

Переписка с пользователями отображается в панели управления сайтом (раздел «Входящие»).

SEO-оптимизация

Для поисковой оптимизации страницы сайта:

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

Для удобства значения метатегов уже заданы по умолчанию.

Также для поисковой SEO-оптимизации можно воспользоваться встроенным мастером. Он доступен в панели управления сайтом.

Чтобы отредактировать файлы sitemap.xml и robots.txt, переходим в раздел административной панели Wix «Поисковая оптимизация».

Подключение домена

По умолчанию созданные с помощью конструктора Wix интернет-ресурсы размещаются на домене третьего уровня. Например: https://sites432.wixsite.com/superbike-visitka

Но можно использовать и собственное доменное имя первого уровня. Для его подключения:

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

Покупка нового домена

Чтобы привязать сайт к новому домену:

• В панели управления возле названия сайта нажимаем на ссылку «Подключить домен».
• Выбираем вариант «Купить новый домен».
• Проверяем, не занят ли домен – для этого вводим его имя в текстовое поле и нажимаем кнопку «Найти».
• 
• Если доменное имя не занято, то кликаем по кнопке «Получить домен».
• 

Конструктор сайтов Wix предоставляет бесплатный домен в тарифных планах «Базовый», «Безлимитный» и VIP.

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

Редактирование мобильной версии сайта

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

Для редактирования мобильной страницы:

1. Переходим в мобильный режим редактора.
2. 
3. Кликаем по тексту логотипа и немного уменьшаем размер шрифта.
4. 
5. Чтобы скрыть ненужный элемент на мобильных устройствах, выделяем его в редакторе. После чего кликаем по иконке «Скрыть блок».
6. 
7. Все скрытые элементы перечислены в одноименном разделе бокового меню.
8. 

Запуск сайта

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

Но перед этим:

1. Проверяем, что создали все страницы сайта.
2. Удостоверяемся в том, что разместили весь необходимый контент.
3. Проверяем контент и страницы на наличие ошибок в надписях на элементах, а также в тексте публикаций.
4. Переходим по всем навигационным ссылкам и убеждаемся в том, что они ведут на нужные страницы и разделы сайта.
5. Тестируем корректность отображения макета страниц на мобильных и десктопных устройствах.
6. Подключаем счетчики Яндекс.Метрики и Google Analytics.
7. Привязываем домен.
8. Публикуем сайт.

Ссылка на готовый сайт, созданный с помощью конструктора Wix.

Что в итоге?

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

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

К тому же предоставляемые конструктором Wix варианты дизайна адаптированы под мобильные устройства. А также оптимизированы под основные стандарты SEO, выдвигаемые поисковыми системами.

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