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


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

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

Давайте обо всем по порядку.

Новичкам на заметку

Чаще всего первое, о чем думают новички– это экономия. Соглашусь, не хочется платить за то, что возможно забросишь через два месяца. Я вас понимаю. И тем не менее для меня важно, чтобы вы понимали откуда и какие цены берутся.

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


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

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

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

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

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


Тарифы Wix

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

Для всех своих сайтов, кроме этого, я использую хостинг TimeWeb и ежемесячно вношу по 130 рублей. Самый дешевый тариф на виксе – 123. Цена справедлива. Она дает вам некоторую свободу. Есть шанс переехать на другой хостинг.

Отключить рекламу тоже можно. Уже за 250 рублей в месяц. Start-Luck обходится мне в 240 рублей в месяц. Я разместил его на другом хостинге во время обучения, так как все уроки в школе блоггеров Александра Борисова, где я учился и учусь вот уже около года, были основаны на VPS.

Школа блоггеров Александра Борисова

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

Думаю, пришло время показать как именно работать в конструкторе.

Инструкция

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

Первым делом вам нужно зайти на официальный сайт и нажать кнопочку «Войти».


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

Далее создать аккаунт, если его до сих пор нет. Также можно войти через Facebook или Google аккаунт.

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

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

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

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

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

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

В процессе работы я покажу как добавить в визитку (сайт портфолио) блог, но лучше, если вы попробуете поработать по шаблону. На готовом примере понимать проще. Кстати, на wix проще найти бесплатный дизайн, чем за деньги. Так что проблем возникнуть не должно. Конечно, если вы не слишком взыскательный гурман.


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

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

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

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

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

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


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

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

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

Rosewood будет отображаться стандартно.

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

Чем еще примечателен викс? Цена логотипа может достигать 15 000 рублей. В этом конструкторе есть куча всяких иконок, которые вы можете использовать абсолютно бесплатно и при этом не бояться юридического преследования.

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

Огромное количество форм. Размер и цвет вы можете поменять.

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

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


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

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

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

Здесь целая куча анимации: прыжки, скольжение, наплыв. Так одна картинка будет сменять другую Посмотрите примеры во время редактирования. Результат вам покажут сразу при наведении курсора мыши. Анимация применима не только в слайдеру, но и меню другим картинкам и везде, где вы только захотите. Не рекомендую использовать ее часто, на всех элементах. Сайт будет тормозить.

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

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

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

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


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

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

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

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

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

Новая страница появится в основном меню.

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

Даже теперь вы можете отредактировать основное меню.

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

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

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

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

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

Прежде чем публиковать что-то, нажмите «Предпросмотр». Реклама довольно навязчивая.

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

Видеоинструкция


Что дальше

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

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

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

Не бойтесь технологии. Начинайте с малого и увеличивайте свои знания вместе с прибылью.

До новых встреч и удачи в ваших начинаниях.

start-luck.ru

Целевая аудитория


Wix лучше всего подходит для создания различного рода сайтов-визиток сложных с дизайнерской и функциональной точек зрения: портфолио, бизнес-сайт, промо-страница или лендинг. Очень удачными получаются блоги – их легко делать, удобно вести. eCommerce составляющая тоже развитая, особенно с учётом приложений и фирменных ноу-хау вроде Wix Code.

Область применения Wix можно охарактеризовать тремя факторами:

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

Обзор Wix.com

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


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

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

Освоить Викс можно за два дня, а в беглом режиме – минут за 20. Это кандидат #1 в очереди при знакомстве c WYSIWYG-сервисами.


Функциональные возможности

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

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

Любой раздел редактора содержит подсказки по работе с ним. При наведении курсора на кружочек «i» отобразится краткое пояснение и ссылка на полный вариант FAQ по теме. Абсолютно все опции и виджеты снабжены пояснениями, просто в некоторых нужно нажать на знак «?» для вызова всплывающего окна с инструкцией. Также можно сразу пойти в Центр Поддержки – базе знаний Wix с возможностью поиска ответов по запросу. Пробежавшись по категориям базы знаний глазами, вы сможете получить представление о возможностях конструктора – названия разделов FAQ чётко перечисляют функционал.

Структура Редактора дизайна сайта Wix:

Основу функционала определяет сайдбар с несколькими разделами опций и функций.

Как работать в визуальном редакторе Wix

Визуальный WYSIWYG-редактор {«What You See Is What You Get» – «что видишь, то и получишь»} поддерживает функцию drag-n-drop, то есть возможность перетаскивать виджеты, потянув за ярлычок «drag» на их верхней границе. Путём сужения или расширения пунктирных линий на границах объектов можно менять при помощи мыши их размер. При выделении любого элемента или блока на странице появятся значки, ведущие к настройкам и быстрым действиям над объектом. Обычно речь идёт о настройке дизайна, подключении базы данных, выборе макета, отображаемых элементов и их параметрах. Например, для галереи можно выбрать и отсортировать фото, для видео – проставить ссылку на ролик либо выбрать загруженный из библиотеки, назначить правила воспроизведения. Всё по контексту, всегда логично и уместно.

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

Отдельно отметим функционал для работы с фотографиями и наведением красоты на сайте. Приложение Wix Pro Gallery, к примеру, позволяет настроить качество и резкость фотографий при отображении на сайте, защитить их от скачивания либо добавить кнопки «Поделиться». Также можно гибко настраивать макет вывода изображений – структуру, размер миниатюр, отступы, насыщенность коллажа и ориентацию в пространстве. Ещё здесь можно построить магазин изображений.

Есть у Викса и синемаграфы – коллекция изображений с плавной анимацией в формате GIF (найти можно в настройках фона – бесплатная библиотека Wix, категория «Кино»). Да, конструктор предлагает большую коллекцию бесплатных готовых картинок на множество тематик, есть также платные стоковые варианты. В настройках фона полосок-секций можно включить параллакс и другие эффекты прокрутки блоков. То же самое можно сделать с отдельными элементами, выделив их и выбрав «Анимация».

Бесплатные фото

Кстати, фотографии можно загрузить на сайт с Instagram, а в самой социальной сети оставить ссылки на ваш сайт. Владельцам продвинутых аккаунтов и фотографам должно помочь. Дополняет тему украшательства сайта возможность загрузки собственных шрифтов. По умолчанию можно использовать шрифты Google Fonts. Если этого покажется мало, можно использовать свои. Делается это в разделе «Мои загрузки» – «Загрузить шрифты».

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

  • Wix Blog – подключение блога к сайту и его настройка в редакторе.
  • SEO-мастер – комплексный инструмент для продвижения сайта (подробнее распишем ниже).
  • Маркетинг-рассылка – создание новостных и рекламных рассылок вашим почтовым базам при помощи ShoutOut, специализированного приложения. Нужно создать макет письма при помощи настроек дизайна и выбрать почтовую базу для рассылки. Возможны также запуск автоматических рассылок по заданным условиям, выбор шаблонов для баннеров и писем, прикрепление формы подписки на рассылку и контроль статистики по запущенным рассылкам.
  • Домены и почта – покупка нового или прикрепление существующего домена к сайту, добавление корпоративной почты со всеми бизнес-инструментами от Gmail (почта с названием домена, пакет офисных приложений, хранилище писем, видеоконференции).
  • Счета – создание и отправка счетов клиентам, приём онлайн-оплат (дебетовые и кредитные карты, PayPal), отслеживание статусов оплат, отчёты. Формат счетов настраивается, можно добавлять налоги, выбрать валюту и порядок нумерации.
  • Контакты – клиентская база сайта. Может использоваться для рассылок, сбора информации, подписок и прочего. Есть возможность разделения пользователей на группы, блокировки, фильтрации выборки и ручного создания новых контактов.
  • Авторассылка – настройка автоматически отправляемых писем по различным сценариям. По умолчанию имеются шаблоны для приветствия новых контактов, зарегистрированных и подписавшихся на обновления сайта. Таким способом можно отправлять файлы, благодарить за покупки, предлагать купоны на скидку, приглашать посетить магазин повторно, просить оставлять отзывы, поздравлять с праздниками и всё в таком духе. Расписания, условия рассылок и оформление вложений можно гибко настраивать.
  • Соавторы сайта – добавление через почтовый адрес людей с правами администратора или менеджера бэк-офиса. Для чего? Чтобы помогали вам вести и наполнять сайт.
  • Базы данных – создание коллекций информации, которые будут храниться в облаке. Данные необходимо добавлять в таблицы с заданным вами количеством колонок и полей. Эти коллекции можно подключать к различным элементам на сайте для сбора информации либо наоборот – её выдачи.

Приложения сайта

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

Настройки

Считаем необходимым отметить ещё несколько мощных приложений. Wix Forum – инструмент для добавления на сайт полноценного форума с разделами, темами, настройками дизайна, структуры и правилами доступа. Wix Music – приложение для добавления альбомов, синглов, плейлистов для свободного прослушивания или продажи. Красивый плеер, много настроек. Wix Events – добавление мероприятий с возможностью регистрации в них. Свадьба, концерт, семинар, одиночные ивенты и афиши с расписаниями, рассылка приглашений, списки гостей, билеты – речь идёт обо всём об этом. Wix Video – загрузка роликов до 15 Гб, трансляции с YouTube, Vimeo, Facebook, почтовые рассылки для продвижения своих видеоканалов, сбора подписок, продажа видео и получение статистики по всему процессу. Мы взяли несколько примеров очевидно полезных приложений Wix для формирования общего представления. Их намного больше, лучше увидеть ассортимент своими глазами.

Напоследок бегло отметим другие полезные возможности и нюансы, которые остались за кадром:

  • Можно бесплатно подключить к сайту SSL сертификат (защита сайта по https протоколу);
  • Wix имеет мобильное приложения iOS/Android, позволяющее вести живой чат с клиентами сайта (для этого нужно активировать приложение Wix Chat в панели управления), добавлять фотографии, товары или постить материалы в блог;
  • Возможность оптимизировать изображения для отображения в мобильной версии сайта. Нужно зайти в редактор мобильного шаблона, выбрать нужную картинку и кропнуть, увеличив/уменьшив исходник и оставив на виду ту часть, которая вам нужна;
  • Можно ставить на фон изображения 360° при помощи приложения 360 Images;
  • Можно защищать паролями отдельные страницы сайта либо вообще их скрыть;
  • Благодаря разметочной сетке всегда видно область, которая отобразится в мобильной версии сайта;
  • Wix Hotels – бесплатное приложение, дающее полный механизм настройки бронирования номеров для владельцев отелей;
  • Wix Restaurants – бесплатное приложение, позволяющее формировать онлайн-меню по всем законам жанра и принимать заказы на доставку еды;
  • В редакторе можно использовать слои, скрывать отдельные элементы и восстанавливать их по необходимости;
  • При активации режима разработчика появится панель свойств элементов и консоль для добавления значений этим свойствам;
  • Можно создавать копии одного сайта внутри аккаунта либо передать сайт на другой аккаунт.

Очевидно, стоковый функционал конструктора неразрывно связан с возможностями приложений из фирменного магазина. Их даже можно расценивать как модули, которые по умолчанию не установлены (на манер uCoz, к примеру, – можно выбрать свой набор модулей). В процессе работы добавьте нужные в любом количестве – и вперёд. Приложения написаны либо разработчиками самого Wix, либо командами других компаний, желающими иметь синхронизацию своих продуктов с экосистемой самого популярного в мире конструктора сайтов. Поэтому качеству модулей можно доверять – обеим сторонам выгодно поддерживать его высокий уровень по понятным причинам.


Дизайны и работа с шаблонами

Wix на текущий момент содержит 500+ шаблонов, отсортированных по категориям: магазин, бизнес, фотография, видео, музыка, дизайн, рестораны, события, портфолио, блог, красота и здоровье, мода, искусство, лендинги. Сразу после регистрации вам предложат выбрать дизайн для сайта. Можете фильтровать выборку по новизне или популярности. Кстати, однажды выбранный шаблон нельзя изменить в процессе работы. Так что выбирайте более-менее вдумчиво. Полноэкранный предпросмотр возможен.

Шаблоны Wix

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

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

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

Мобильную версию шаблона можно настроить отдельно, переключившись на неё в шапке редактора. Меню, формат изображений, закрепление отдельных элементов (контакты, кнопка «наверх»), фон, скрытие элементов можно регулировать. Также можно задействовать автоматическую оптимизацию в один клик – результат получается хорошим. Изменения в мобильной версии сайта не коснутся десктопной. При редактировании большой версии центр страницы будет выделен пунктирными линиями – именно эта область попадёт в мобильный шаблон. Можно ориентироваться по ней.

Редактирование дизайна

Редактор позволяет до неузнаваемости изменить стоковый дизайн путём добавления новых секций (виджет «Полоска»), виджетов, изображений и настройки их внешнего вида. Везде можно добавить эффекты, анимации, если нужно, настроить размеры, отступы, слои, фоны, шрифты, формы элементов и прочее. Внешний вид сайта на Wix в большей степени зависит от ваших дизайнерских навыков, чем от выбранного шаблона. Хотя можно опубликовать свой контент с минимумом изменений в подходящем тематике шаблоне и получить готовый сайт. Как больше нравится.

WixArena – сообщество дизайнеров, которое сформировалось вокруг системы за время её существования. Разработчики организовали на его базе WixExpert – среду для заказа услуг по созданию сайта/шаблона с нуля либо редизайна. Вы можете посмотреть портфолио потенциальных исполнителей и заказать услуги. Есть и обратный вариант: составляете запрос, заполнив детальную анкету (тип работ, бюджет, сроки, регион), после чего система на основе этих данных выдаст список подходящих веб-дизайнеров. Стоимость найма экспертов разная, их сотни. Arena – ещё один способ получить уникальный дизайн сайта на Wix.


WIX ADI или Wix Editor?

Wix ADI (Artificial Design Intelligence) – это фирменный искусственный интеллект для автоматического создания сайтов на основе базовой информации, предоставленной пользователем. Отвечаете в анкетном порядке на несколько вопросов и получаете готовый сайт. Какие данные нужны? Ниша вашего бизнеса, название компании, цели создаваемого сайта, желаемый вариант цветовой гаммы и логотип, общая информация (местоположение, контакты, профили в соцсетях). После короткого опроса ожидаете примерно минуту, получаете макет сайта с информацией и готовым дизайном.

Как это работает? Wix ищет в Сети информацию о вашей компании (на одном из этапов система попросит подтвердить обнаруженные данные), сортирует её, с учётом тематики и каких-то своих алгоритмов создаёт структуру шаблона, вносит в него информацию и показывает вам результат. Таким образом, результат будет приемлемым, если о вас есть информация в соцсетях, каталогах или на каких-либо других сайтах. Если проект свежий, то макет сайта будет построен с минимумом текстового контента. Просто на основе ниши и введённой вручную информации.

Создание сайта с помощью ИИ

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

Полученный таким образом сайт можно настраивать. Редактор ADI весьма значительно отличается возможностями от стандартного, о котором речь шла выше. Здесь упор идёт на правку существующей структуры предложенного макета (можно просто включать/выключать целые секции), набора элементов отдельных секций (вкл/выкл заголовки, описания, кнопки, изображения), цветовой гаммы, фона, шрифтов и, конечно, текста. В целом, детализация настроек средняя, достаточная для приведения автоматически созданного макета к желаемому виду.

Использование Wix ADI

Может ли ADI заменить стандартный редактор Wix? Нет, конечно, и не должен. Эти области одной системы не являются прямыми конкурентами, а лишь дополняют друг друга. Можно начать делать сайт в ADI, получить макет, а потом перейти в стандартный редактор и довести его до ума всем арсеналом доступных средств. Результат, получаемый автоматически, в меру хорош. Чем больше информации о вашем бизнесе в Интернете, тем он будет лучше.

Редактор Wix ADI

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


WIX Code

Это одна из главных фишек конструктора. Несмотря на упоминание кодинга в названии, имеет к нему отношение лишь частичное. Wix Code можно активировать из меню редактора «Инструменты» включением режима разработчика. Слева внизу появится стрелочка, при нажатии на которую откроется список всех страниц сайта. Последние 3 пункта списка позволяют добавить на сайт код JavaScript и базы данных. Первое можно использовать для создания и добавления своих приложений. Второе – для оформления динамических страниц и сбора пользовательских данных.

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

Для опытных юзеров Wix Code может стать связующим звеном между ними и заказчиками со сложными техническими заданиями. Не секрет, что вручить клиенту сайт на конструкторе удобнее и дешевле, чем на CMS или ещё чём-то. Теперь Wix позволяет внедрять на сайты индивидуальный функционал знатокам JavaScript. Конструктор стал гораздо перспективнее для продвинутой аудитории и их клиентов.

Применение Wix Code может быть следующим:

  • Использование баз данных в качестве источника контента для отдельных секций и виджетов сайта;
  • Добавление интерактивных элементов через панель свойств (тоже включается в режиме разработчика) путём определения их поведения при различных условиях взаимодействия (наведение курсора, обычный и двойной клик мыши, при появлении в видимой зоне экрана);
  • Использование динамических страниц для отображения контента. Макет страницы будет одним и тем же всё время, но контент будет меняться в зависимости от изменений в его источнике – подключенной базе данных;
  • Создание форм для сортировки и сбора через них в базу данных пользовательской информации.

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

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

Таблица базы данных в качестве значений полей может содержать обычный текст, число, изображение, форматированный текст, дату и время, URL, документ (PDF, DOC(X), PPT(X), XLS(X), EPUB, ODP, ODT) или чекбокс (пустой/с галочкой). Комбинаций применения баз данных из такого набора строительного материала может быть много. Можно вести опросы, заставить галереи на сайте каждый день обновлять изображения в случайном порядке, собирать анкетные данные, обновлять прайс-листы, настроить вывод разной информации по разным дням на одной и той же странице (показывать разные меню кафе по дням, например), регулировать расписания и многое другое. Это, скорее, вопрос потребностей и фантазии. Вариантов использования Wix Code множество. Вы придумаете свой сценарий.


SEO-оптимизация (Wix SEO Wiz) и продвижение

У Wix есть отдельное приложение в панели управления, которое поможет правильно настроить параметры SEO, подготовить сайт к эффективному взаимодействию с поисковыми алгоритмами Google, Yandex и прочими. Wix SEO Wiz является пошаговым мастером поисковой оптимизации сайта. Все важные для этого процесса штуки собраны в одном месте, удобно поданы и разъяснены. Викс сам по себе как сайтбилдер ничем не хуже и не лучше большинства подобных сервисов в плане перспективности вывода сайта в ТОП поисковой выдачи.

SEO мастер

Результат ранжирования страниц зависит, скорее, от качества и количества выполненных операций для поисковой оптимизации, чем от самого движка. Достоинство Wix в том, что SEO-инструментарий удобно подан. Он такой же по своей сути, как и везде (тут придумать что-то новое трудно), но его интерфейсом пользоваться приятнее, чем во многих других сайтбилдерах. Чем-то большим выделиться невозможно в этом направлении. Поэтому будем считать, что Викс и в данном функциональном ключе один из лидеров.

Перечень шагов, через которые вас проведёт Wix SEO Wiz, следующий:

  • Ввод названия вашего бренда;
  • Выбор типа бизнеса – с физическим местоположением (потребуется указать адрес) или только онлайн;
  • Ввод пяти ключевых слов (или фраз), определяющих направление вашей деятельности в Сети.

Дальше SEO-мастер покажет вам чеклист того, что ещё необходимо сделать для эффективной поисковой оптимизации. Каждая позиция рекомендаций подробно описана. Вы сразу можете перейти в ту часть Wix, где необходимо внести дополнения или правки. Чеклист может быть весьма длинным, даже на тестовом сайте визард выдал около 30 рекомендаций. Естественно, на рабочем сайте с настоящим контентом этот список может быть в разы длиннее. То есть детализация рекомендаций весьма приличная. Забыли вписать заголовок, описание к материалу либо добавить тег alt к изображению? В чеклисте все эти вещи всплывут. Хорошая страховка.

SEO

Также можно принудительно поставить сайт в очередь на индексацию Google. Подключение домена, фавикона, SSL-протокола и возможность создания 301 редиректов также можно считать частью оптимизации. Google Analytics, Яндекс.Метрику, Пиксель Facebook можно подключить в панели управления сайтом.

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

Две самые главные вещи при работе с Wix SEO Wiz:

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

Общий смысл по части поисковой оптимизации для Wix таков: сайты хорошо индексируются, а SEO-мастер поможет новичкам довести процесс до ума, ничего не забыв. По части остальных приёмов раскрутки (внешние ссылки, соцсети, перелинковка, контекстная реклама) лучше почитать отдельные материалы. Всё это можно и нужно делать. В этом разделе речь только о штатных SEO-возможностях Wix. С ними всё в полном порядке.


Wix Stores – создание интернет-магазина

Магазин на Wix реализован в формате приложения-виджета. После его добавления на сайт в сайдбаре редактора появляется ещё один пункт – «Мой магазин». Сразу отметим, что с его помощью можно продавать как физические, так и цифровые товары (музыка, видео, изображения) и услуги.

Приложение «Мой Магазин» содержит 4 раздела:

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

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


Ценовая политика

Wix можно использовать бесплатно неограниченно долго тем, кого устраивает сайт на поддомене вида: uguide.wixsite.com/sitename. Большинство функций конструктора будут доступны. Подключить свой домен и получить более богатую функциональность можно после оплаты одного из следующих тарифных планов.

Тарифные планы Wix:

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

Важно: при оплате тарифных планов будет дополнительно взиматься НДС.

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

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

Unlimited следует выбирать в случае, когда планируется загружать очень много контента и ожидает плотного наплыва трафика в будущем. Это блоги с форумом, корпоративные сайты и остальные схожие по сложности и объёму проекты. eCommerce для тех, кто хочет торговать. Особенно интересной выглядит возможность продажи цифровых товаров. Для оформления витрин с тысячами позиций инструментов, стройматериалов, спецодежды и прочего есть более подходящие конструкторы, а вот продажа музыки, иллюстраций или фотографий с Wix – очень удачная затея.


Скидки на годовые тарифы

Wix часто проводит акции длительностью от пары дней до месяца, сбивая стоимость тарифных планов до 50%. Скидки действуют при оплате годовых планов. Что нужно для участия? Просто улучить момент. Чтобы не пропустить очередную распродажу, зарегистрируйтесь в Wix. Как только случится акция, вы получите уведомление на почту:

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

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

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


Плюсы и минусы

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

Так что же они все нашли в этом конструкторе? Большинство ответов изложены выше в разделах о функциональности. Большие объёмы возможностей, крепкое качество реализации, стандартизация интерфейсов приложений, креативная атмосфера, тонны подробных справочных материалов, текстовых и видео (у Wix есть канал на YouTube). Машина Wix давно набрала обороты, её разработчики могут себе позволить прилично инвестировать в новые функции. Что и делают.

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

Плюсы Wix:

Минусы Wix:

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


Аналоги и конкуренты

Wix чувствует себя легко на фоне других конструкторов с визуальным редактором. С его функциональностью в этом классе сложно тягаться – дикое количество интеграций, приложений, гибкость редактора, качество шаблонов, фирменные фишки (Wix ADI, Code, портал разработчиков Arena) и прочее делают продукт крепким орешком.

Уязвимое место Wix – широта специализации. Не все типы сайтов в этом формате редактора можно реализовать с размахом. По части простоты и стоимости тоже можно найти альтернативу.

Wix в любом случае выглядит бодро – это исключительный конструктор в своём роде. Бизнес-сайты с дизайнерскими шаблонами, симпатичные блоги и небольшие магазины входят в его профиль.

Но ввиду специфики редактора он плохо сочетается с разработкой больших проектов. Несмотря на всю мощь и достоинства. Здесь его и съедают мощные профильные конструкторы. Дело даже не в стоимости, хотя по этому параметру ставит подножку uKit: он дешевле и легче воспринимается, позволяя создавать сайты-визитки того же уровня.


Примеры сайтов

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

Тем не менее, он подходит и для создания сайтов более практичных, осязаемых тематик – бурение скважин в Нижнем Новгороде, продажа металлолома во Владивостоке, услуги дантиста в Москве или СТО в Екатеринбурге. Вполне жизненные вещи, обычный бизнес.

Сайты на Wix:


Выводы и рекомендации

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

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

Wix – многоцелевая машина для создания разнообразных сайтов. Благодаря качественным приложениям и гибкому редактору функциональные рамки очень широкие, а с учётом потенциала Wix Code они практически исчезают. Использование HTML и JavaScript возможно, но совершенно необязательно. В меру простой, яркий конструктор, с кучей полезных, а местами даже удивительных по меркам ниши возможностей. При прямом сравнении аналогов по части функциональности не имеет.

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

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

uguide.ru

Замахнулись на главное

Главным недостатком любого конструктора сайтов общепризнанно отсутствие «выхода» к коду. Но если «нейтрализовать» эту проблему, тогда Wix превратится в облачную CMS. Или уже превратился?

Новый инструмент называется Wix Code. Насколько его реализация удалась, мы убедимся с вами на собственном опыте: полазим, поклацаем что да как! Ну а пока краткий обзор того, что умеет новое средство:

  1. Создание баз данных – слыхали о таком функционале на других конструкторах? Вот и я тоже слышу впервые!
  2. Создание собственных форм – пользователь получает возможность конструировать собственные нативные веб-формы, а не на основе шаблонов.
  3. Динамические веб-страницы – разработка и запуск множества веб-страниц на базе одного созданного дизайна. При этом для каждого образца можно установить уникальный URL, SEO-настройки и присвоить отдельную категорию.
    Редактор викс
  4. Повышение интерактивности сайта – для этого используются различные слайдеры, виджеты, кнопки скрытия элементов интерфейса и т.д.
  5. Wix Code APIs– представляют собой внутренние API для подключения к сайту нативных приложений конструктора. Их настройка производится через редактирование кода JavaScript.
  6. Расширенная поддержка сторонних API – Wix расширил возможности интеграции со сторонними сервисами. Теперь для их подключения навыки программирования не обязательны.
    Редактор викс

Доступно пока не всем

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

Думал, что не пробьюсь, или что на это понадобится дней пять. Чтобы принять участие в тестировании Wix Code, нужно перейти на лендинг, посвященный запуску инструмента. После этого нажать на ссылку «Apply for Beta».

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

Заполнить анкету на участие в «тестовых заездах». В ней указать имя, адрес сайта, название компании. А также род своей деятельности и кто вам поведал о запуске Wix Code: социальная сеть, СМИ или другой источник.

Ну, думаю, все – не проканает! Застрял на процедуре рассмотрения своей заявки. «Крутить» ее будут дней пять-шесть, не меньше. Но для очистки совести все-таки заполнил анкету и пошел заливать «горе» очередной чашкой чая.

Пока «вливал», на указанную почту пришло письмо, информирующее, что я зачислен в команду «тестировщиков» Wix Code. На радостях даже успел обжечься и подавиться чаем ? .

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

Стартуем!

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

После авторизации в Wix в верхнем левом углу (на главной странице админки) нажмите ссылку «Мои сайты». Во всплывающей боковой панели выберите нужный и перейдите по ссылке «Редактировать».

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

В окне редактора веб-страниц в верхнем меню выберите пункт «Инструменты». Расширьте набор средств, активировав параметр «Инструменты разработчика».

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

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

Обозреваем новые чудеса Wix

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

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

  1. Редактор кода JavaScript – позволяет привязать к конкретному элементу страницы или сайта событие. Для этого достаточно выделить нужную структуру дизайна и в меню правой клавиши выбрать пункт «View Properties».

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

    В панели «События» выбрать событие, перейти в редактор кода и кликнуть в нужном месте. После чего обработчик будет автоматически добавлен в общий скрипт.

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

  2. Добавление внешних скриптов – через раздел «Public» пользователь может создать внешние скрипты и размещать их в отдельных папках. Для этого нажмите на ссылку «Добавить новый файл».

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

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

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

    Также реализована консоль разработчика для отладки и тестирования кода. Она доступна в режиме предпросмотра.

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

  3. Создание модулей – веб-модули являются основным средством, с помощью которого пользователь Wix может реализовать интеграцию своего кода, взаимосвязь с другими скриптами и их выполнение в front-end сайта. Инструмент для создания модулей расположен в разделе «Backend».

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

    Более подробно модель построения веб-модулей и работа с ними описана в соответствующих разделах справки конструктора.

  4. Коллекции баз данных – это один из самых «завораживающих» моментов всего обзора. Только вдумайтесь: полноценная база данных в конструкторе сайтов!

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

    Для создания БД перейдите в раздел меню «Collection».

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

    Схема работы с базами данных в Wix Code.

    Сначала задаем имя коллекции.

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

    Затем выбираем шаблон БД.

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

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

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

    После этого привязываем коллекцию к нужному элементу на странице и выводим информацию из БД.

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

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

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

ktonanovenkogo.ru

Возможности редактора конструктора сайтов Wix

Редактор виксМоя статья в разделе «Ликбез» о конструкторе сайтов Wix вызвала заметный интерес, но оно и понятно: многим пользователям бывает нужно сделать сайт для каких-то целей (персональная страничка, сайт-визитка фирмы или предлагаемых услуг) и им при этом совершенно не хочется обращаться к дизайн-студиям и тратить на создание сайта серьезные деньги. А конструктор Wix позволяет самостоятельно сделать нужный сайт, не обладая при этом ни знанием языка разметки HTML, ни опытом в дизайне интернет-страниц.

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

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

Редактор викс
Пустые шаблоны

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

В пустом же шаблоне — только стандартная разметка: заголовок («хедер», от английского header), основная страница и нижний колонтитул («футер», от английского footer).

Редактор викс
Пустой шаблон с разметкой в редакторе

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

Фон

Начнем с общего фона страницы. Он может быть одним для всех элементов, он может быть разный для каждого отдельного элемента.

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

За добавление/изменение фона отвечает соответствующий инструмент — верхний среди инструментов, расположенных в левой части редактора.

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

Фон может быть просто заливкой определенного цвета. Если выбрать кнопку «Цвет», то появится соответствующая палитра. Причем, когда вы наводите курсор на определенный цвет, редактор сразу показывает, как это будет выглядеть на сайте. Закрашиваться будут все элементы (хедер, футер и бока за границами основной страницы), кроме основной страницы.

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

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

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

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

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

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

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

Также вы можете загрузить свой собственный видеоролик (редактор поддерживает несколько популярных форматов), но его размер не должен быть более 50 мегабайт. При этом еще и следует иметь в виду, что для фонового ролика разрешение не должно быть слишком большим: например, разрешение FullHD там не нужно совершенно.

Если взять разрешение 720p (1280х720 пикселов), то в 50 мегабайт влезет примерно 50 секунд.

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

Вот наш ролик загружен — выбираем его в качестве фона.

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

Ну и вот наш сайт с видео в качестве фона.

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

Добавляем элементы страницы

За элементы страницы отвечает вторая панель слева. Там богатый выбор.

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

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

Выбираем заголовок в стиле шаблона (его тогда можно сделать на установленном фоне).

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

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

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

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

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

Второй раздел меню элементов — фото. С его помощью можно добавлять и размещать изображения на сайте.

Появляется стандартный диалог загрузки или выбора фото из загруженных, библиотеки Wix, платного стока (как при выборе фона).

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

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

Также тут доступен очень продвинутый фоторедактор, с помощью которого можно работать с изображением.

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

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

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

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

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

Элемент «Галереи» — выбор вида галереи изображений и работа с самой галереей.

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

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

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

Следующий полезный элемент — кнопки. В основном используются для навигации: чтобы перейти на другую страницу.

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

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

Классический вариант кнопки — «Связаться», которая будет вести на страничку с информацией для связи.

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

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

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

Вот, например.

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

Следующий элемент — полоски с надписями или без них. Могут использоваться для самых разнообразных задач.

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

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

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

Видео — вставка видеоролика из какого-то видеохостинга.

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

Музыка — вставка аудиотрека в виде самых разнообразных плееров, которые вы также можете конструировать самостоятельно. Есть очень продвинутые варианты, которые могут пригодиться начинающим музыкантам, раскручивающим свои произведения.

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

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

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

Контакты — мощная форма, где можно задавать разнообразные контакты для связи, карты «как проехать», приглашать подписаться на вашу рассылку и так далее.

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

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

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

Список — простой способ организовать новостные или событийные блоки на сайте.

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

Блог — готовый механизм организации на вашей странице раздела с вашим собственным блогом. Здесь только выбирается его структура, а для продвинутой работы с уже созданным блогом есть отдельный раздел (механизм) редактора.

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

Магазин — выбор формата интернет-магазина. Для управления им тоже есть целый отдельный механизм.

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

App Market

Следующая кнопка — Wix App Market. Это большой магазин приложений (многие из них — бесплатные), которыми можно значительно расширять функциональность вашего сайта. Поиск, переходы, счетчики, кнопки «Поделиться» для самых разнообразных соцсетей, всякие сервисы (например, чат с вами или менеджером вашего сайта) — и так далее.

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

Загрузки

Отдельный раздел загрузок: фото, видео, аудио, различные документы и файлы.

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

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

Блог и магазин

Ну и последние кнопки — два продвинутых механизма, о которых я уже говорил: механизм работы с блогом и механизм работы с интернет-магазином.

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

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

Заключение и выводы

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

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

Редактор предоставляет вам массу возможностей, но он не умеет думать за вас, и он не может решить, что вам нужно на вашей странице, а что нет.

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

www.exler.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.