Woove Zero

Свободный блок: холст, элементы, инспектор, экраны, Neiro и Zero-язык

Woove Zero — блок, где элементы стоят там, где вы их поставили. Слева список элементов или Neiro, в центре холст, справа свойства выбранного элемента или блока. У каждой ширины экрана своя расстановка: 1200, 960, 740 и 390 px.

Холст и панель инструментов

• Как открыть — Редактор Zero открывается внутри сайта, под верхней полосой сайта. Выберите блок и нажмите карандаш «Редактор Zero» на его панели или дважды кликните по блоку. Ещё два пути: «Пустой блок Zero» в библиотеке и раздел «Блоки» на вкладке «Сайт». Стрелка «Назад: Страница» слева в строке инструментов Zero возвращает к странице.
• Ширины экрана — Четыре кнопки с числами наверху: 1200, 960, 740 и 390 px. Правка касается только выбранной ширины. Незаданная ширина наследует расстановку ближайшей более широкой.
• Добавить — Меню элементов. Новый элемент встаёт в центр холста, дальше его перетаскивают.
• Отменить / Вернуть — Ctrl+Z и Ctrl+Y.
• Woove Neiro — Открывает панель помощника слева: собрать блок словами, по макету или свёрстать по Zero-языку.
• Панели — Две кнопки прячут левую и правую панели, чтобы холст стал шире.
• Код для вставки — Блок как отдельный виджет на любой сайт.
• Сохранить — Правки уходят на страницу только после сохранения; Ctrl+S тоже работает.
• Кривая, Колонки, Линейки, масштаб — Внизу: рисовать кривую, показать сетку колонок и линейки, приблизить холст, уместить «по ширине» или целиком, приблизить выделенное. Масштаб меняется и колесом мыши с Ctrl.
• Горячие клавиши — Кнопка с клавиатурой внизу или клавиша «?» открывает шпаргалку. В ней: выделение, перенос с Shift по одной оси и с Alt копией, порядок слоёв Ctrl+] и Ctrl+[. Там же скрыть клавишей H, Tab по элементам, масштаб Shift+0, Shift+1, Shift+2.
• В мою библиотеку — Кнопка-закладка наверху сохраняет копию блока в «Мои блоки»: его можно поставить на любой сайт аккаунта.
• Подсказки на холсте — Рядом с элементом висят подсказки: при переносе координаты, при растягивании ширина и высота, при повороте градусы. Зажмите Alt и наведите на соседа: красные линии покажут расстояния до него в пикселях.
• Контейнер — Элемент «Контейнер» из меню «Добавить» раскладывает детей столбиком или в строку с зазором и полями. То же делает «Обернуть в контейнер» в меню правой кнопки. Дети перетекают сами, а карточка растёт вместе с текстом. Перетащите элемент в рамку контейнера, чтобы положить внутрь, вытащите за рамку — вынуть. У ребёнка можно включить «заполнять свободное место». На телефоне строка складывается в столбик. «Лишнее»: видно за рамкой, обрезать или прокручивать (горизонтальная лента карточек); «ширина по содержимому» сжимает контейнер до детей; выравнивание «равные промежутки».
• Компоненты — Выделите элементы и выберите «Сохранить как компонент…» в меню правой кнопки. На блоке останется экземпляр, а сам компонент появится в меню «Добавить» → «Мои компоненты». Экземпляры на всех блоках рисуются из общего описания. Чтобы изменить всё разом, разъедините один экземпляр, поправьте и сохраните как компонент с тем же именем.

Элементы

• Текст и кнопки — Текст, Кнопка, Меню сайта, Форма заявки.
• Картинки и видео — Картинка, Видео (ссылка на YouTube, VK, RuTube или файл), Слайдер.
• Фигуры и линии — Иконка (коллекция с поиском по-русски), прямоугольник, круг, треугольник, ромб, звезда, шестиугольник, линия, стрелка, SVG-картинка.
• Магазин — Каталог, карточка товара, корзина, поиск, кнопки корзины и входа — для сайтов с каталогом.
• Раскладка и готовое — Контейнер. Аккордеон: вопрос — ответ, линии или карточки, «открыт только один». Вкладки: с чертой, таблетки, в рамке. Таймер обратного отсчёта до даты; «до и после» с ползунком; лента статей из блога сайта. Таблица: ячейки через |, шапка, полосы, линии. Рейтинг звёздами с дробной оценкой и подписью.
• Подсказки, карта и медиа — Подсказка: значок «i», текст при наведении, на телефоне по нажатию. Галерея: сетка фото с пропорцией, крупный просмотр с листанием и подписями. Карта Яндекса по адресу без ключа. Соцсети: Telegram, ВКонтакте, WhatsApp, MAX, YouTube, Дзен, Rutube и другие — кружки, квадраты или значки. Полоса прогресса, которая заполняется при появлении. Аудио-плеер: mp3, ogg, wav, m4a до 20 МБ.
• Мои компоненты — Экземпляры сохранённых компонентов.
• Повторитель — Контейнер с «Повторять по данным»: карточка для каждой записи коллекции, статьи, товара, мероприятия или отзыва. Подробно — в статье «Коллекции и данные в Zero».

Инспектор: общие свойства

• Выравнивание — По левому краю, по центру, по правому; по верху, середине, низу — относительно холста или выделенной группы. Разложить по горизонтали и вертикали. Связать в группу (Ctrl+G) и разъединить, копия (Ctrl+D), удалить.
• Замок — Заблокировать элемент от случайного сдвига.
• Имя — Поле под названием типа: своё имя элемента для списка слева. Переименовать можно и двойным щелчком в списке.
• Положение — Слева, Сверху, Ширина, Высота и Поворот в пикселях макета текущего экрана. Глаз прячет элемент на этом экране, соседняя кнопка задаёт ему свою геометрию вместо унаследованной. «На экране» закрепляет элемент в углу окна: он виден при прокрутке всей страницы — кнопка чата, «наверх», промокод; на макете стоит там, где положили.
• Привязка — Работает только в блоке «Растягивать». Элемент держит долю ширины (с минимальной и максимальной шириной) или привязан к левому или правому краю, к центру. Либо он растянут между краями в пикселях макета.
• Замок пропорций — Кнопка рядом с глазом: углы тянут с сохранением отношения сторон. У картинок и значков включён сразу.
• Оформление своё на экране — На планшете и телефоне у элемента есть переключатель. Если его включить, цвет, фон, тень, картинка и даже текст на этом экране правятся отдельно от десктопа. Узкий экран наследует ближайший более широкий. Без переключателя свои на экране только положение и кегль.
• В контейнере — У ребёнка контейнера: «заполнять свободное место» и кнопка «Вынуть». Положение задаёт контейнер, свои — только ширина и высота.
• По клику — Что делает элемент по клику: открыть всплывающее окно, прокрутить к якорю, позвонить, написать письмо, скопировать текст. Ещё можно показать или скрыть выбранные элементы: так руками собираются аккордеоны и переключатели. «Цель в Метрике или GA» отправляет цель при клике, у формы — при отправке. «Скрыт, пока не нажмут» прячет элемент до действия другого.
• Пошаговая анимация — Ключевые кадры в процентах со сдвигом, масштабом, поворотом и прозрачностью. Запуск: при появлении на экране, по прокрутке (положение в кадре зависит от того, где элемент в окне), при наведении, по клику. «Проиграть» показывает на макете. Заменяет анимацию появления. Запуск «при наведении на другой элемент» и «по клику на другой элемент»: выберите, какой элемент управляет — так карточка оживляет свою картинку.
• Контраст — Под цветом текста, кнопки и полей формы стоит строка «Контраст 4,8 : 1». Обычному тексту нужно от 4,5 : 1, крупному от 3 : 1, фон берётся тот, что под элементом на этом экране. Если контраста мало, «Исправить» ставит ближайший читаемый цвет того же оттенка.
• Текст — Стиль текста сайта: заголовок H1, H2, подзаголовок, текст, мелкий. Стили правятся в настройках сайта, «Текстовые стили». Вместо стиля можно задать свои размер, жирность, межстрочный, межбуквенный, выравнивание, цвет, шрифт (в том числе свой загруженный). «Плавный кегль» — между соседними экранами размер меняется вместе с шириной окна, а не скачком. Тег для поиска: h1 (один на страницу), h2, h3, h4 или абзац p. На макете выделенный кусок текста можно сделать жирным, курсивом, подчёркнутым, зачёркнутым, ссылкой, поменять кегль, шрифт, цвет и подсветку, собрать список. Ниже: обводка букв (с прозрачным цветом текста получаются контурные заголовки), текст в две-четыре колонки, вертикальное написание, «ровные строки» для заголовков.
• Оформление — Скругление и непрозрачность. Тени слоями: смещение, размытие, растяжение, цвет, внутрь; у текста — тень букв. Градиент букв у текста и градиентная заливка у фигур и кнопок. Градиент может быть круговым, от центра к краям. Размытие фона под элементом (матовое стекло) и режим смешивания с тем, что под элементом.
• Эффект — Одно движение на элемент: плавание, пульс, вращение, покачивание, мигание. У текста есть бегущая строка, печатная машинка и счётчик, который отсчитывает первое число в тексте. Ещё параллакс при прокрутке со скоростью от −1 до 1 и закрепление при прокрутке с отступом сверху. Плавание и подобные крутятся и на макете, выделенный элемент стоит; параллакс, закрепление, машинка и счётчик работают только на странице. Посетителям с включённым «уменьшить движение» эффекты не показываются. «Движение за курсором» чуть смещает элемент вслед за мышью; размах в пикселях, отрицательный — в обратную сторону. Бегущая строка работает и у контейнера: логотипы или отзывы едут лентой.
• При наведении мыши — Фон и текст (по умолчанию не меняются), увеличение, подъём в пикселях, плавность в миллисекундах, тень. Есть у любого элемента. У картинки есть «другая картинка при наведении»: товар с другого ракурса, команда с улыбкой. У видео-файла — «играть при наведении».
• Для разработчика — CSS-класс и id элемента на сайте: для своего кода, скриптов и внешних виджетов.
• Анимация появления — Проявление, снизу, слева, справа, приближение; задержка, длительность и шаг очереди. «Когда»: при появлении блока на экране или сразу при загрузке; «Повторять» — анимация играет каждый раз, когда элемент снова попадает на экран.

Кнопка, форма, меню

• Кнопка — Надпись, куда ведёт (адрес, страница, якорь, окно) и вид (заливка, контур, без рамки, ссылкой). Размер, фон, текст и рамка, толщина и скругление. Кегль, разрядка, насыщенность, шрифт, значок, прописными буквами, тень, открывать в новой вкладке, скачивать файл по ссылке.
• Форма заявки — Поля: тип (строка, телефон, почта, выбор, галочка, файл до 10 МБ), подпись, обязательное, имя поля. Кнопка и ответ после отправки. «Дополнительно»: маска телефона +7, передача UTM-меток и источника перехода в заявку, форма в несколько шагов, проверка «я не робот». В форме по шагам у каждого поля номер шага, есть кнопки «Далее» и «Назад». Проверка идёт через Яндекс SmartCaptcha, ключи — в настройках сайта, «Счётчики». Оформление формы: поле и кнопка в одну строку, высоты, зазор, скругление. «Галочки под формой»: как на всём сайте или свои для этой формы.
• Меню сайта — Пунктами становятся опубликованные страницы сайта, главная первой, или свои ссылки. Настраиваются кегль, промежуток, раскладка в строку или столбик, выравнивание, цвет и начертание; на телефоне меню сворачивается в бургер.
• Картинка — Файл, ссылка или стоковое фото; описание для поиска; как вписывать в рамку; точка фокуса: что остаётся в кадре при обрезке. Маска: круг, овал, арка, капли, ромб, треугольник, шестиугольник, звезда, скос, срезанные углы. Заливка цветом с прозрачностью и режимом смешивания. Фильтры: чёрно-белое, сепия, размытие, яркость, контраст, насыщенность; «открывать крупно по клику». «Обрезать…» открывает окно с рамкой в пропорции элемента: двигайте и приближайте колесом, на сайт уйдёт вырезка. Картинки медиатеки отдаются в трёх размерах (480, 960 и исходник), браузер берёт нужный. Первая картинка первого экрана грузится без задержки и первой — это ускоряет страницу в глазах поисковика. Картинку можно вставить из буфера: Ctrl+V на макете загружает скриншот или скопированное фото и ставит его элементом.
• Иконка — Имя из коллекции, цвет, фон, скругление, отступ внутри, толщина линии.
• Фигуры — Заливка, обводка и её толщина, скругление у прямоугольника.

Свойства блока

• Высота — Для текущего экрана, в пикселях. «Высота по содержимому» считает её по нижнему элементу плюс воздух — блок не обрезает текст, который вырос.
• Шапка при прокрутке — «Липкая» остаётся у верхнего края окна при прокрутке. «Поверх первого экрана» ложится на следующий блок без фона, а после прокрутки закрепляется, получает фон и тень. Обоим можно задать размер после прокрутки — шапка сжимается.
• Фон блока — Цвет из палитры или свой. Картинка: загрузить, по ссылке или из стоковых фото. Видео фоном: файл mp4 или webm без звука, по кругу. Картинка фона служит ему обложкой и заменой для тех, кому движение мешает. Градиент от и до с наклоном; затемнение картинки; «не двигается при прокрутке». Раздел «Края блока»: элементы могут выходить за край. Наезд на следующий блок в пикселях — картинка «выглядывает» на соседний фон. Разделители сверху и снизу: волна, скос, дуга, треугольник, зигзаг цветом соседнего блока.
• Когда окно уже макета — «Уменьшать» сжимает блок целиком и сохраняет пропорции. «Растягивать» занимает всю ширину окна, элементы остаются на тех же долях; так делают каталог и формы.
• Адаптив — «Собрать остальные экраны»: широкие экраны уменьшаются пропорционально, телефон раскладывается в столбик по порядку чтения. Дальше правьте руками, десктоп это не затронет. «Скопировать раскладку» переписывает на текущий экран положение, размеры и высоту с любого другого экрана.
• Колонки — Число колонок, промежуток и поля для этого блока на этом экране; общая сетка задаётся в настройках сайта.

Экраны и адаптив

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

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

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

Откуда у элемента место, видно в свойствах, раздел «Положение»: «Своё место на 390 px» или «Как на 1200 px». Правка на узком экране создаёт своё место, кнопка «Вернуть как на … px» убирает его. В списке элементов унаследованные помечены «насл.».

Список элементов

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

Neiro, Zero-язык и Фигма

Кнопка с искрой открывает Woove Neiro. В режиме «Собрать или переделать блок» опишите блок словами или прикрепите макет PNG, JPG или PDF. Neiro соберёт блок на Zero-языке с раскладкой под телефон.

Режим «Только расставить по экранам» переставляет элементы, не удаляя их и не трогая тексты. Модель на выбор: Sonnet 5 или Opus 5.

Ниже стоит код блока на Zero-языке: одна строка задаёт один элемент. Запись «заголовок "Посуда ручной работы" 56 @1-6» означает заголовок 56 пикселей в колонках с первой по шестую. Код правится руками: «Применить» (Ctrl+Enter) перестраивает блок, «Из макета» обновляет код по холсту, ошибки разбора показываются построчно.

Из Фигмы слои переносятся через «Copy as SVG»: вставьте их на холст, прямоугольники и эллипсы станут фигурами, тексты текстами, картинки картинками. В обратную сторону работает «Скопировать блок для Фигмы»: в буфер ложится svg с редактируемым текстом.

Если не работает