Найти тему
Сайт на wix для бизнеса

Как добавить интерактивные взаимодействия на свой Wix-сайт (для новичков в JavaScript)

Оглавление

Если у вас есть сайт, созданный на платформе Wix, то вы наверняка слышали про Wix Corvid – относительно новую функциональность конструктора сайта, которая среди прочего, позволяет добавлять свой собственный код JavaScript на Wix-сайт, работать с интерфейсами Wix Corvid API, чтобы добавить свои функции и взаимодействия.

Подробнее о Wix Corvid на в этой статье на сайте поддержки Wix

Другими словами, Wix Corvid позволяет добавить на сайт интерактивные возможности, чтобы привлечь внимание посетителей к контенту (и тем самым увеличить конверсию сайта).

Чтобы начать использовать функциональность Wix Corvid на своём сайте, необходимо включить Инструменты разработчика в редакторе сайта (спойлер: необходимо нажать одну кнопку в меню).

-2

Откройте редактор сайта. Наведите на пункт меню Девелоперу и нажмите Включить Corvid.

Мы собрали семь примеров создания новых интерактивных возможностей для вашего Wix-сайта, с которыми справятся даже новички без особых знаний JavaScript, программирования и не разбирающихся в библиотеках Wix Corvid API.

Скрыть и показать изображение

Показать и скрыть изображение на сайте по нажатию соответствующей кнопки.

-3

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

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

id — это уникальное название объекта (например, кнопки) на сайте. В примере кода id располагаются в скобках после знака «решётка».

Чтобы найти id элемента на своём сайте просто подведите курсор у объекту или кликните на него (конечно, с включенным режимом разработчика).

Подробнее о примере взаимодействия на сайте Wix Corvid »

Изменение состояний

-4

В этом примере используется «Динамический бокс» (Multi-state box), у которого есть несколько состояний (два в примере), для переключения между состояниями используются клике по кнопке и встроенные эффекты анимации.

Подробнее о примере взаимодействия на сайте Wix Corvid »

Stories как в Инстаграм для сайта на Wix

Создавайте «Истории» и делитесь ими с посетителями вашего сайта.

-5

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

Для реализации понадобится работать с коллекцией в базе данных, повторяющемся списком и промобоксом.

Подробнее о примере взаимодействия на сайте Wix Corvid »

Фиксированный хэдер, изменяющийся при скролле страницы

-6

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

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

Подробнее о примере взаимодействия на сайте Wix Corvid »

Раскрывающийся группы контента

-7

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

Подробнее о примере взаимодействия на сайте Wix Corvid »

Изменение отображаемого контента на странице сайта в ответ на взаимодействие пользователя с элементами интерфейса

-8

Ещё один простой вариант, который похож в своей реализации на первый пример из нашего списка.

Подробнее о примере взаимодействия на сайте Wix Corvid »

Изменение шаблона списка элементов

-9

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

В основе реализации данного примера лежит использование слайдера.

Подробнее о примере взаимодействия на сайте Wix Corvid »

Если вы решили добавить на свой Wix-сайт интерактивные возможности самостоятельно и вам нужна консультация — мы будем рады помочь.

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

Обсудить детали проекта »