Обновленный редактор Wix на практике

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

Основные новшества редактора сайтов Wix.com:

• «Полоски» — горизонтальные блоки веб-страницы, которые легко можно менять местами, настраивать и т.п.
• Добавление видео в качестве фона всего сайта или «Полоски».
• Прикрепление элементов (кнопок, меню) к определенному месту экрана (снизу, сверху, сбоку и т.п.).
• Параллакс-прокрутка — эффект, создающий впечатление 3D объектов на сайте.
• Новые элементы для страницы (кнопки, блоки, формы).
• Десятки различных галерей по стилистике оформления, эффектам и назначению.
• Копирование элементов дизайна.
• Улучшенные возможности для блоггинга.
• Ну, и конечно, подборка новых шаблонов с использованием большинства данных функций.

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

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

Новый Wix на практике

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

Как перейти на новый редактор Wix

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

На момент написания статьи переход был недоступен для пользователей, у которых на сайте используются приложения «Списки» или «Интернет-магазин» (не WixStores). Также это касается проектов с более чем 100 страницами.

Перейти на новый Wix можно кликнув по этой ссылке. В случае успеха вы увидите такое окно:

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

Инструменты Wix

Я выбрал макет, который называется Chef Michael Bolano. Его запросто можно использовать для сайта ресторана. Переходим в редактор. Удостоверьтесь, что у меню «Инструменты» включены все опции. С отображаемыми границами элементов, блоком настроек и возможностью перетаскивания проще будет работать.

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

• Копировать / вставлять, дублировать и удалять элементы.
• Менять расположение слоев, перемещая объекты на передний или задний план.
• Задавать выравнивание по крям.
• Распределять равномерно элементы по странице.
• Подгонять блоки по размерам (сделать одинаковыми).
• Просматривать и изменять значения высоты, ширины и положения по X,Y осям.

Пробуем новые функции Wix

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

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

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

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

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

Что касается параметров самого меню, то тут есть:

• Настройки — для выбора ссылок/якорей в меню.
• Макеты — определение стиля отображения линков.
• Дизайн — оформление (цвет, подписи, шрифты).
• Анимация.

Можно использовать соответствующие иконки или действовать через контекстное меню, вызываемое правой кнопкой мышки.

Новые элементы дизайна Wix

Конечно, в редакторе на Wix.com изначально были разные элементы для сайта, однако теперь их стало еще больше. Можете сами в этом убедиться — попробуйте создать какой-то из них с помощью кнопки «Добавить».

Здесь найдете:

• Тексты: заголовки и надписи разных стилей.
• Фото: загруженные вами, из коллекции Wix или соц.сетей.
• Галерея: в стиле сетки, панорамы, слайдеров, с 3D эффектом.
• Кнопка: обычные с текстом, в виде иконок.
• Бокс (блоки).
• Полоска: с эффектом параллакса, макеты с информацией о компании, с услугами, отзывами, сотрудниками (такие типовые элементы часто встречаются на одностраничных сайтах).
• Форма: стрелки, иконки, линии, декоративные и обычные формы.
• Видео.
• Музыка (плееры).
• Социальные сети: панель нескольких кнопок или кнопки/виджеты конкретных соц.сетей.
• Контакты: формы подписки, обратной связи, карты.
• Меню: горизонтальное, вертикальное, якорное.
• Список: событий, отзывов, товаров и т.п.

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

Блогинг и SEO настройки

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

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

Пункт «Элементы блога» содержит перечень разных блоков/виджетов, которые вы сможете вставить на сайт: облако тегов, список категорий, архив, список постов, комментарии Facebook или Disqus. По сути, у вас есть все необходимые возможности для создания и ведения полноценного блога на Wix. И пусть выглядит это слегка непривычно по сравнению с другими CMS, но работает отлично.

Что касается SEO, то в этом плане у нового редактора Wix также все отлично.

Для каждой страницы вы можете указывать разные SEO настройки: тайтл, МЕТА описание и ключевые слова. Допускается скрытие страницы в поиске и редактирование URL`а для ЧПУ. Современные поисковые системы (Google, Яндекс и др.) совершенно спокойно понимают Ajax и отлично индексируют содержимое вашего сайта.

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