Woove Zero

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

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

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

• Экраны — Четыре кнопки наверху: компьютер 1200, планшет 960, телефон лёжа 740, телефон 390. Незаданный экран наследует раскладку ближайшего более широкого.
• Добавить — Меню элементов. Новый элемент встаёт в центр холста, дальше его перетаскивают.
• Отменить / Вернуть — Ctrl+Z и Ctrl+Y.
• Woove Neiro — Открывает панель помощника слева: собрать блок словами, по макету или свёрстать по Zero-языку.
• Панели — Две кнопки прячут левую и правую панели, чтобы холст стал шире.
• Код для вставки — Блок как отдельный виджет на любой сайт.
• Сохранить — Правки уходят на страницу только после сохранения; Ctrl+S тоже работает.
• Кривая, Колонки, Линейки, масштаб — Внизу: рисовать кривую, показать сетку колонок и линейки, приблизить холст или уместить «по ширине».

Элементы

• Текст и кнопки — Текст, Кнопка, Меню сайта, Форма заявки.
• Картинки и видео — Картинка, Видео (ссылка на YouTube, VK, RuTube или файл), Слайдер.
• Фигуры и линии — Иконка (коллекция с поиском по-русски), прямоугольник, круг, треугольник, ромб, звезда, шестиугольник, линия, стрелка, SVG-картинка.
• Магазин — Каталог, карточка товара, корзина, поиск, кнопки корзины и входа — для сайтов с каталогом.

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

• Выравнивание — По левому краю, по центру, по правому; по верху, середине, низу — относительно холста или выделенной группы. Разложить по горизонтали и вертикали. Связать в группу (Ctrl+G) и разъединить, копия (Ctrl+D), удалить.
• Замок — Заблокировать элемент от случайного сдвига.
• Положение — Слева, Сверху, Ширина, Высота и Поворот в пикселях макета текущего экрана. Глаз прячет элемент на этом экране, соседняя кнопка задаёт ему свою геометрию вместо унаследованной.
• Текст — Размер, жирность, межстрочный, межбуквенный, выравнивание, цвет (из стиля сайта или свой), шрифт из набора сайта. Текст с форматированием: жирный, курсив, ссылки.
• Оформление — Скругление, непрозрачность, тень.
• При наведении мыши — Фон и текст (по умолчанию не меняются), увеличение, подъём в пикселях, плавность в миллисекундах, тень.

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

• Кнопка — Надпись, куда ведёт (адрес, страница, якорь, окно), вид (заливка, контур, без рамки, ссылкой), размер, фон, текст и рамка, толщина и скругление, кегль, разрядка, насыщенность, шрифт, значок, прописными буквами, тень, открывать в новой вкладке, скачивать файл по ссылке.
• Форма заявки — Поля: тип (строка, телефон, почта, выбор…), подпись, обязательное, имя поля; кнопка и ответ после отправки; оформление формы: поле и кнопка в одну строку, высоты, зазор, скругление.
• Меню сайта — Пунктами становятся опубликованные страницы сайта, главная первой, или свои ссылки. Настраиваются кегль, промежуток, раскладка в строку или столбик, выравнивание, цвет и начертание; на телефоне меню сворачивается в бургер.
• Картинка — Файл, ссылка или стоковое фото; описание для поиска; как вписывать в рамку; скругление.
• Иконка — Имя из коллекции, цвет, фон, скругление, отступ внутри, толщина линии.
• Фигуры — Заливка, обводка и её толщина, скругление у прямоугольника.

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

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

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

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

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

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

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

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

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

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

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

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

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