Woove → Woove Site → Woove Zero

Свободная вёрстка блоков без кода

Woove Zero — блок, где элемент стоит там, где вы его поставили. У компьютера, планшета и телефона своя раскладка. Узкий экран берёт её с широкого, пока вы его не поправите.

Свободная вёрстка (zero-блок, свободный блок) — способ собрать экран сайта без сетки готовых секций: текст, картинку и кнопку двигают мышью, как в графическом редакторе. В Woove Site такой блок стоит рядом с готовыми секциями Woove Blocks.

Открыть Woove Zero входит в Woove Site · работает и на бесплатном сайте

Свободный блокдвигайте элементы мышью

главный экран

Элемент на холстетекст, фото, форма, карта

→

Четыре экрана1200 · 960 · 740 · 390

→

Страница сайтарядом с блоками Woove Blocks

Четыре экрана

Компьютер 1200, планшет 960, телефон лёжа 740 и телефон 390 пикселей. Незаданный экран берёт раскладку ближайшего более широкого. Попробуйте в примере выше: переключите экран на 960 и нажмите «Собрать остальные экраны».

Собрать остальные экраны

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

Своё на телефоне

Цвет, картинка и текст на телефоне могут отличаться от компьютера.

Резиновый блок

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

Края блока

Элементы за краем, наезд на следующий блок и разделители: волна, скос, дуга, треугольник, зигзаг.

Редактор Woove Zero: список элементов, холст с обложкой «Посуда ручной работы» и настройки блока

35 элементов

Всё ставится из меню «Добавить» и настраивается справа, в инспекторе. Форма умеет маску телефона, файл до 10 МБ, UTM-метки, несколько шагов и Яндекс SmartCaptcha.

Основа · 12

ТекстКнопкаКартинкаВидеоФигураКриваяSVGЗначокМенюСлайдерКонтейнерСвой код

Содержимое · 10

ГалереяТаблицаАккордеонВкладкиДо и послеЛента статейРейтингПодсказкаАудиоПрогресс

Заявки и связь · 4

ФормаТаймерКартаСоцсети

Магазин · 9

КаталогТоварКорзинаПоиск по каталогуРазделы каталогаКабинет покупателяСравнение товаровШапка магазинаПодвал магазина

Анимация без кода

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

Плавание

Пульс

Вращение

Посуда ручной работыПечатная машинка

1 240Счётчик · клик

Обжиг при 1 240 °CГлина с УралаОбжиг при 1 240 °CГлина с Урала

Бегущая строка

За курсором

По кадрам · клик

По кадрам

Пошаговая анимация при появлении, при прокрутке, при наведении или по клику на другой элемент.

Действия по клику

Показать или скрыть элементы, открыть окно, перейти к якорю, позвонить, написать, скопировать, отправить цель в Метрику или GA.

Живые эффекты

Плавание, пульс, вращение, бегущая строка, печатная машинка, счётчик, параллакс и закрепление при прокрутке.

Картинки и текст

Маски, фильтры, точка фокуса, вторая картинка при наведении. Градиент букв, обводка, матовое стекло, видео фоном блока.

Контейнеры и компоненты

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

Автораскладка

Дети контейнера лежат столбиком или строкой. Карточка растёт по тексту, на телефоне строка складывается.

Компоненты

Группа элементов ставится экземплярами на любые блоки и правится в одном месте.

Мои блоки

Готовый блок сохраняется в библиотеку и ставится на любой сайт аккаунта.

Код для вставки

Блок работает виджетом на любом сайте, в том числе не на Woove.

Данные из коллекций

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

Страница на каждую запись

Страница-шаблон обслуживает адрес каждой записи. Заголовок и описание для поиска берутся из полей, адреса попадают в sitemap.

Фильтр и сортировка

Условия, сортировка, фильтр из адреса и число колонок задаются отдельно для каждого экрана.

Таблица как источник

Записи вносятся руками, из CSV или из Google-таблицы с обновлением раз в час.

Neiro заполнит

Опишите записи словами, и Neiro разложит их по полям коллекции. Про коллекции

Zero-язык

У каждого блока есть код, где одна строка задаёт один элемент. Запись заголовок "Посуда ручной работы" 56 @1-6 ставит заголовок 56 пикселей в колонки с первой по шестую. Поправьте код и нажмите «Применить».

Zero-языкодна строка, один элемент

Код блока на Zero-языке

Код пишет и Woove Neiro: по описанию блока или по картинке. Из Фигмы слои переносятся через «Copy as SVG».

Быстро и понятно поиску

Теги заголовков

Тексту даётся тег h1–h4 или p и стиль сайта. Поисковик видит структуру страницы.

Картинки в трёх размерах

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

Нижние блоки позже

Блоки ниже первого экрана не рисуются, пока до них не докрутили.

Шрифты и курсор

Свои шрифты woff2, плавный кегль и свой курсор сайта.

Редактор для рук

Клавиши, которые экономят время. Полная шпаргалка открывается клавишей «?».

Alt и перетаскивание	копия элемента
Shift при переносе	движение по одной оси
Tab	следующий элемент
Alt и наведение на соседа	расстояния до него в пикселях
Ctrl и колесо мыши	масштаб холста
Ctrl+] и Ctrl+[	порядок слоёв
H	скрыть элемент
Ctrl+V	картинка из буфера прямо на макет
Ctrl+S	сохранить блок

Цена

Woove Zero входит в Woove Site: 299 ₽ в месяц или 2 999 ₽ в год за сайт, первые 7 дней бесплатно. Zero работает и на бесплатном сайте: до 15 страниц, с подписью «Сделано в Woove».

Woove Site

299 ₽в месяц за сайт

Zero, Blocks, Neiro, свой домен и магазин

Попробовать 7 дней

Woove Pro

4 999 ₽

все сайты аккаунта и остальные продукты одной подпиской

Что входит

Сравнить тарифы

Вопросы про Woove Zero

Чем Woove Zero отличается от Woove Blocks?

Woove Blocks — готовые секции: они сами перестраиваются под телефон и правятся полями. В Woove Zero вы ставите элементы сами и решаете, как блок выглядит на каждом экране. На одной странице можно сочетать оба вида.

Нужно ли верстать телефон отдельно?

Нет. Узкий экран берёт раскладку с широкого, а кнопка «Собрать остальные экраны» расставит элементы сама. Любой экран можно поправить отдельно, другие при этом не сдвинутся.

Можно перенести макет из Фигмы?

Да. Выделите кадр, нажмите «Copy as SVG» и вставьте на холст: фигуры, тексты и картинки перенесутся слоями. Или прикрепите картинку макета в панели Neiro.

Как Zero влияет на скорость сайта?

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

Можно вставить свой код?

Да. У элемента есть класс и id для своего CSS и скриптов, есть элемент «Свой код». Сам блок можно поставить виджетом на другой сайт.

Работает ли анимация на телефоне?

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

Сколько стоит Woove Zero?

Zero входит в Woove Site: 299 ₽ в месяц или 2 999 ₽ в год за сайт, первые 7 дней бесплатно. На бесплатном сайте Zero тоже работает.

Где научиться работать в Zero?

В инструкции «Woove Zero» на docs.woove.ru: холст, элементы, инспектор, экраны, Neiro и Zero-язык. Клавиша «?» в редакторе открывает шпаргалку клавиш.