30 Червень 2016
793
Рубрика: уроки

Уроки по созданию сайтов на WIX: работа с конструктором — от идеи до работающего сайта

Это вторая статья из серии статей о создании сайтов на платформе WIX. В прошлом уроке я рассказывал о подготовке к созданию сайта, такой себе базе, на основе которой мы и будем строить будущий ресурс.

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

Речь идёт о WIX — конструкторе сайтов, где новый ресурс создается бесплатно, а дополнительные плюшки (как-то премиум-шаблоны или функции, которые не входят в базовый пакет) можно покупать. Но не обязательно. Если нужен простой сайт и нет времени разбираться с программированием — то «викс» хороший выбор, в нём за час-полтора можно сделать бесплатный или почти бесплатный сайт вполне достойного качества.

Если нужен сайт с более серьёзным функционалом, тогда придется либо платить, либо учиться. Чудес, как вы знаете, не бывает :). Но со своими функциями «викс» справляется очень хорошо, к тому же всем желающим предоставляет справочный материал по созданию. Например — как создать логотип.

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

Итак, поехали.

Шаг 1: выбор шаблона

WIX — визуальный редактор, в нем почти все что нужно, делается в браузере. То есть никаких ftp, дополнительных редакторов кода не нужно. Так и с выбором шаблона: в каталоге есть что-то около 500 вариантов дизайна по категориям. Большинство шаблонов – бесплатные.

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

wix course 2 template mobile demo

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

wix course 2 template edit

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

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

На эту тему рекомендую почитать о тенденциях дизайна 2016 года.

Поехали дальше.

Шаг 2: доработка дизайна

Вы же не думали, что шаблон – это все что вам нужно? Это основа, а на ней нужно создать что-то. Стандартные изображения и непереработанные шаблоны – признак дурного тона и некачественного сайта (а зачастую – ленивого владельца). И неважно, шаблона какой платформы: OpenCart, WordPress или WIX.

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

Хорошие новости: в визуальном редакторе “викса” можно менять почти все: цветовую схему, фон, расположение элементов.

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

wix course 2 edit template

Уделите внимание всему:

  1. Главное меню: назовите пункты правильно и понятно. Если это каталог велосипедов, так и напишите. “Купить велосипед” в меню, которое ведет на список – плохая идея, переоптимизация так же плохо влияет на сайт, как и украденный контент. В магазине люди часто ищут данные о доставке, оплате и гарантии. Пункты меню можно так и назвать.
  2. Логотип: лицо вашего сайта. Уделите ему отдельное внимание.
  3. Футер: тут может быть карта проезда, кнопки соцсетей, контактные данные. Не надо писать здесь “Copyright Рога и копыта”. Просто задумайтесь о том, что может и хочет найти здесь потенциальный покупатель вашего товара или услуги.
  4. Призывы к действиям. Чтобы пользователь заказал услугу, хорошей идеей может быть написать об этом на заметной кнопке. “Рассчитать стоимость”, “Закажите сейчас” или “Купить генератор” – все это призывы к действию.
  5. Проверьте контент на ошибки

После того, как шаблон настроен, переходите к приложениям.

Заодно почитайте: как создать логотип.

Шаг 3: приложения

В WIX есть мощный инструмент — приложения. Это каталог полезных функций, которые можно добавлять себе на сайт. Вот некоторые из них:

  • поиск по сайту;
  • виджеты соцсетей (любых, даже ужасных одноклассников);
  • лента Instagram;
  • конвертер валют;
  • оплата через PayPal или Яндекс.деньги;
  • онлайн-чат;
  • форум;
  • интернет-магазин;
  • часы;
  • счетчик;
  • форма обратной связи;
  • форма подписки;
  • кнопка “вверх”.

…и еще множество подобных.

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

wix course 2 paypal

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

Шаг 4: оптимизация сайта

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

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

В помощь вам эта статья.

Шаг 5: мобильная версия

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

В редакторе викса есть отдельный раздел для редактирования мобильной части сайта.

Виберите в меню Сайт > Мобильная версия:

wix course 2 mobile

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

Шаг 6: домен

У викса есть две опции: бесплатный адрес типа nazartokar.wix.com/site или свое доменное имя, например, в зоне com. Второе доступно для преимиум-подписки.

Ищите в меню Сайт > Подключить домен

wix course 2 domain

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

Шаг 7: публикация сайта

Когда все шаги пройдены, осталось опубликовать сайт.

 

wix course 2 public

Сразу после этого сайт станет доступен для всех желающих.

Что дальше?

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

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

В следующем уроке я расскажу подробнее о работе над сайтом, созданном в WIX, и привлечении новых клиентов. Не переключайтесь!

wix
Тепер я хочу бачити коментарі 0