Когда вы точно знаете, что за сайт вам нужен, уже есть название, структура и материал, самое время браться за подготовку всего этого к публикации и непосредственно создании сайтов.
Речь идёт о WIX — конструкторе сайтов, где новый ресурс создается бесплатно, а дополнительные плюшки (как-то премиум-шаблоны или функции, которые не входят в базовый пакет) можно покупать. Но не обязательно. Если нужен простой сайт и нет времени разбираться с программированием — то «викс» хороший выбор, в нём за час-полтора можно сделать бесплатный или почти бесплатный сайт вполне достойного качества.
Если нужен сайт с более серьёзным функционалом, тогда придется либо платить, либо учиться. Чудес, как вы знаете, не бывает :). Но со своими функциями «викс» справляется очень хорошо, к тому же всем желающим предоставляет справочный материал по созданию. Например — как создать логотип.
Создание довольно простого сайта можно условно разбить на несколько шагов. Я расскажу о каждом подробно, а на ваши вопросы отвечу в комментариях.
Итак, поехали.
Шаг 1: выбор шаблона
WIX — визуальный редактор, в нем почти все что нужно, делается в браузере. То есть никаких ftp, дополнительных редакторов кода не нужно. Так и с выбором шаблона: в каталоге есть что-то около 500 вариантов дизайна по категориям. Большинство шаблонов – бесплатные.
С точки зрения фронтендера хочу отметить, что шаблоны в основном сверстаны на html5 и всегда оптимизированы под мобильные устройства. Даже немного обидно, что 10 лет назад для создания сайта надо было возиться месяц, а сейчас – сделать все за 1 час. Это кажется не очень справедливым, но от прогресса никуда не денешься :).
Когда нужный шаблон найден, нажимайте Edit, после этого откроется визуальный редактор сайта.
Кстати, выбирая шаблон, можете не обращать внимания на изображения, главное – это структура сайта: расположение меню, блоков и так далее. А картинки потом можно поменять за пару кликов.
Также важно правильно выбирать категорию сайта. Если вам нужен, например, сайт о музыке, то шаблоны в соответствующей категории будут располагать нужными функциями. Это может быть продажа аудиозаписей, сувенирной продукции и так далее. Шаблоны, которые я просмотрел, обычно созданы под тематику, а не под дизайн, так что продавать аудиозаписи на автомобильном шаблоне будет сложнее :).
На эту тему рекомендую почитать о тенденциях дизайна 2016 года.
Поехали дальше.
Шаг 2: доработка дизайна
Вы же не думали, что шаблон – это все что вам нужно? Это основа, а на ней нужно создать что-то. Стандартные изображения и непереработанные шаблоны – признак дурного тона и некачественного сайта (а зачастую – ленивого владельца). И неважно, шаблона какой платформы: OpenCart, WordPress или WIX.
Так что после выбора дизайна его нужно доработать. В основном это касается логотипа меню и изображений. Если вы не относите себя к ленивым, и уделили внимание первому уроку серии, то у вас уже есть материал для сайта.
Хорошие новости: в визуальном редакторе “викса” можно менять почти все: цветовую схему, фон, расположение элементов.
Плохие новости: функций так много, что тут можно залипнуть на долгие часы. Поэтому знайте меру в креативности и не заставляйте пользователя читать красный текст на салатовом фоне. С котиками.
Уделите внимание всему:
- Главное меню: назовите пункты правильно и понятно. Если это каталог велосипедов, так и напишите. “Купить велосипед” в меню, которое ведет на список – плохая идея, переоптимизация так же плохо влияет на сайт, как и украденный контент. В магазине люди часто ищут данные о доставке, оплате и гарантии. Пункты меню можно так и назвать.
- Логотип: лицо вашего сайта. Уделите ему отдельное внимание.
- Футер: тут может быть карта проезда, кнопки соцсетей, контактные данные. Не надо писать здесь “Copyright Рога и копыта”. Просто задумайтесь о том, что может и хочет найти здесь потенциальный покупатель вашего товара или услуги.
- Призывы к действиям. Чтобы пользователь заказал услугу, хорошей идеей может быть написать об этом на заметной кнопке. “Рассчитать стоимость”, “Закажите сейчас” или “Купить генератор” – все это призывы к действию.
- Проверьте контент на ошибки
После того, как шаблон настроен, переходите к приложениям.
Заодно почитайте: как создать логотип.
Шаг 3: приложения
В WIX есть мощный инструмент — приложения. Это каталог полезных функций, которые можно добавлять себе на сайт. Вот некоторые из них:
- поиск по сайту;
- виджеты соцсетей (любых, даже ужасных одноклассников);
- лента Instagram;
- конвертер валют;
- оплата через PayPal или Яндекс.деньги;
- онлайн-чат;
- форум;
- интернет-магазин;
- часы;
- счетчик;
- форма обратной связи;
- форма подписки;
- кнопка “вверх”.
…и еще множество подобных.
Как обычно, часть приложений бесплатны, часть доступны в премиум-акаунте.
После добавления приложения, оно появляется в вашем редакторе шаблонов и доступно для редактирования. Каждое из приложений хорошо описано, в описании есть скриншоты и инструкция по настройке, поэтому здесь все довольно просто.
Шаг 4: оптимизация сайта
Легко сказать, но не так легко сделать. Из первого урока у вас должен остаться список ключевых слов для вашего сайта, используйте их правильно. Золотой таблетки здесь нет, как и основного правила. Помните, что главное – это удобство и правильность подачи информации.
А удобный и качественно сделанный сайт так или иначе будет выше в поисковой выдаче, чем его менее качественные аналоги. Оптимизируйте тексты, добавьте описания к изображениям, но знайте меру.
В помощь вам эта статья.
Шаг 5: мобильная версия
Мобильная версия для Google не менее важна, чем десктопная. Прошли те времена, когда никто не задумывался о том, как будет выглядеть сайт на небольшом экране – сегодня часто сайт может иметь две разных версии.
В редакторе викса есть отдельный раздел для редактирования мобильной части сайта.
Виберите в меню Сайт > Мобильная версия
:
Все аналогично дескптопной, только превью сайта отображается на мобильном экране. В остальном – можете добавлять те же функции и приложения, что и для десктопа.
Шаг 6: домен
У викса есть две опции: бесплатный адрес типа nazartokar.wix.com/site или свое доменное имя, например, в зоне com. Второе доступно для преимиум-подписки.
Ищите в меню Сайт > Подключить домен
Домен на месяц стоит как чашка кофе и пончик в макдаке, поэтому вопрос “нужно ли покупать” считаю риторическим :). В любом случае домен можно будет подключить позже или использовать зарегистрированный вами ранее адрес.
Шаг 7: публикация сайта
Когда все шаги пройдены, осталось опубликовать сайт.
Сразу после этого сайт станет доступен для всех желающих.
Что дальше?
Любой сайт жив пока он обновляется. Современный и новый ресурс через полгода можно считать устаревшим. Так что после публикации продолжайте заниматься своими делами, но время от времени обновляйте свою страницу, ведите акаунты в социальных сетях, добавляйте обзоры и фотографии.
Таким образом, поисковые системы увидят, что ресурс «жив», и будут ценить его значительно выше, чем сайты ваших ленивых конкурентов.
В следующем уроке я расскажу подробнее о работе над сайтом, созданном в WIX, и привлечении новых клиентов. Не переключайтесь!
Подскажите пожалуйста, как сделать фильтр к изображениям в галерее. Я имею ввиду, есть несколько кнопок расположенных на странице, а под ними область галереи, как сделать так, чтобы при нажатии на одну из кнопок подтягивалась определенная папка с изображениями и отображалась на этой же стр в области галереи.
Я знаю, что с викс могут быть определённые проблемы в будущем, когда возникнет необходимость продвижения. Поэтому данный конструктор не использовала. За основу взял шаблон Joomla, который по началу тестила бесплатно, а потом приобрела готовый продукт в templatemonster. Отлично запустился с первого раза и придерживаясь инструкций сайт был готов за несколько часов! Очень понравился, вот честно!