Tilda Updates for testers

Работа с блоками в мобильной версии

Теперь можно переключать блоки в мобильный вид. При переключении на мобильную версию можно выбрать мобильный, планшет или конкретное устройство из выпадающего списка, например, iPhone 15 Pro или Redmi Note 8. Вы также можете самостоятельно задавать ширину блоков, растягивая их по краям. Помимо ширины, также учитывается и высота выбранного устройства.

Все настройки мобильной версии базовых блоков сохранятся и будут работать, а в Zero Block будут срабатывать настроенные контрольные точки (брейкпоинты).

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

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

Добавление таблиц и формул в базовых блоках

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

Где найти: Контент блока → иконка с тремя точками во всплывающем контекстом меню → Таблица.

Также в базовые блоки можно добавить текст формул. Их нужно записывать в формате KaTex. Например, формула c² = a² + b² будет выглядеть так: c^2 = a^2 + b^2. При этом вы можете поменять цвет, жирность и размер текста, но шрифт формул изменить нельзя.

Где найти: Контент блока → иконка с тремя точками во всплывающем контекстом меню → Формула.

QR-код для сайта

Теперь при публикации страницы вы можете получить QR-код, который при сканировании будет вести на эту страницу. QR-код можно скачать в форматах JPG, PNG и SVG.

Также в некоторых браузерах есть возможность поделиться изображением и отправить его через мессенджер. Для этого рядом с QR-кодом нажмите на иконку серой стрелки.

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

Якорная ссылка и контекстное меню для блока

Вы можете задать свою якорную ссылку для блока. Например, #features для раздела преимуществ. Это можно сделать через выпадающее меню блока или через контекстное меню, которое откроется при клике на правую кнопку мыши. После этого ссылка автоматически скопируется в буфер обмена.

Через контекстное меню также можно выбрать, что нужно сделать с блоком: копировать, дублировать, спрятать, удалить, добавить блок сверху или снизу и так далее.

UPD. Обновления доступны для всех тестеров.

💬 Переименование блоков

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

Чтобы изменить название, откройте карту блоков, дважды кликните на нужный блок, введите новое название и нажмите Enter.

Работать с мультивыделением блоков стало удобнее

Выделив несколько блоков, вы можете не только их переместить, но и скопировать, вставить или удалить. Для этого теперь можно использовать горячие клавиши. Например, Cmd/Ctrl+C для копирования и Cmd/Ctrl+V для вставки.

В режиме мультивыделения теперь не блокируется редактирование, а в карте блоков при наведении отображается миниатюра блока, чтобы ориентироваться в них было удобнее.

Чтобы выделить несколько блоков, перейдите в Ещё → Блоки на странице → Режим выделения или у блока нажмите на иконку со стрелочкой → Выделить. Затем галочками отметьте блоки и выберите, какое действие нужно с ними выполнить.

UPD. Обновления доступны для 50% тестеров.

⚡️ Вложенные группы и другие обновления в Zero Block

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

Добавить группы внутрь другой можно через:
- панель слоёв;
- Drag’n Drop (только для flex-групп);
- шорткат Cmd/Ctrl + G;
- панель настроек;
- контекстное меню.

💡 Имейте в виду, что во вложенную группу нельзя добавить логическую (logical). Если попытаться добавить её внутрь другой группы, её тип автоматически изменится на объектную (object).

Создание группы из одного элемента
Вы также теперь можете создать группу из одного элемента. Например, чтобы сделать кнопку или иконку с фоном.

Чтобы выделить элемент, который находится на глубоком уровне вложенности, и не искать его в панели слоёв, кликните на него с зажатым Cmd/Ctrl.

Панель слоёв теперь работает по-другому
🟡Если раскрыть слои группы с четырьмя уровнями вложенности и больше, в панели появится горизонтальный скролл.
🟡 Иконки видимости и блокировки теперь появляются на слое по наведению.
🟡 Появилась возможность выделить промежуток слоёв с зажатым Shift.

Больше обновлений в Zero Block:
🔵Теперь можно увеличивать масштаб рабочей области до 20000%.
🔵 При зуме 600% и больше, автоматически включится пиксельная сетка. Чтобы отключить её, уберите в меню галочку у пункта Pixel grid или используйте сочетание клавиш: Shift + '.

❗️Обновление будет открываться постепенно. Сейчас новые функции доступны для 10% тестеров.

Меняйте ваши тексты с помощью ИИ-помощника

Выделите текст, который вы хотите поправить, нажмите на иконку ИИ-помощника и выберите, что нужно сделать с текстом:
🔸переписать — переписывает текст, меняя формулировки;
🔸упростить — упрощает формулировку и делает текст легче для восприятия;
🔸удлинить — увеличивает длину текста, сохраняя смысл;
🔸укоротить — сокращает длину текста;
🔸продолжить — дополняет текст одним предложением или больше.

Новый виджет для поиска изображений

При поиске изображений в библиотеке откроется виджет с двумя встроенными сервисами — Unsplash и Pixabay. Выберите сервис, перейдите в подходящую категорию или введите поисковой запрос.

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

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

История генерации текстов в ИИ-помощнике

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

Чтобы посмотреть историю в ИИ-помощнике, кликните на иконку с часами.

Выбирать страницы в блоках из категории «Список страниц» стало удобнее

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

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

Скрыть часть текста (под кат)

Вы можете спрятать часть текста в блоке и показывать его по клику на кнопку раскрытия. Это может пригодиться, например, для длинных отзывов или описания услуг. Чтобы спрятать текст, выделите его и в панели инструментов кликните на иконку с тремя точками → Скрыть текст (под кат).

В появившемся окне вы можете настроить названия для кнопок скрытия и раскрытия текста, задать их цвет и выбрать стиль подчёркивания. Проверить работу кнопок можно в предпросмотре и на опубликованной странице.

Множественный выбор в дополнительных опциях

Теперь при оформлении заказа в интернет-магазине покупатель может добавить к покупке несколько значений дополнительных опций. Например, при заказе пиццы добавить не только один ингредиент, но и несколько сразу — сыр, красный лук, халапеньо, острый перец.

Для этого настройте в ваших товарах множественный выбор в дополнительных опциях. Перейдите в Каталог, откройте карточку товара → Дополнительные опции → Режим использования → Множественный выбор.

Подробнее читайте в статье: https://help-ru.tilda.cc/online-store/parameters#catalog

Горячие клавиши в редакторе

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

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

Где найти полный список горячих клавиш: в шапке редактора выберите Еще → Горячие клавиши.

T1084 «Модификатор: стиль скроллбара»

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

Все настройки блока, кроме возможности скрыть подложку, работают только в Chrome и Safari. В Firefox работает только измение цвета и размера. Также имейте в виду, что внешний вид скроллбаров может различаться в зависимости от браузера и операционной системы.

Где найти модификатор: Библиотека блоков → Другое

✨ QZ101 «Квиз-форма» — новый блок в библиотеке

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

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

Чтобы настраивать квиз было быстрее и удобнее, в библиотеке вы можете выбрать одну из семи вариаций блока (QZ101A—QZ101F).

Где найти: Библиотека блоков → Форма

🔵Настраивайте внешний вид квиза

В Настройках блока вы можете выбрать, как отображать вопросы и варианты ответов: в две колонки или в одну. А также настраивать стиль квиз-формы: обводку, скругление, тень, наличие отступов для шага, наличие индикатора прогресса и его цвет и многое другое.

🔵 Настраивайте панель с информацией о квизе

Отдельно настраивается панель с названием и описанием квиз-формы. Вы можете расположить её сверху, слева, справа или сделать квиз без панели.

Где найти: Настройки → Основные настройки → Расположение полей

🔵Добавьте сообщение от «Консультанта»

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

Где найти: Контент → Другое → Сообщение от консультанта

Сообщение от консультанта также можно добавить на каждом шаге квиза. Для этого в Контенте добавьте поле → Еще: условиe видимости, консультант → Сообщение от консультанта.

🔵Сделайте квиз на весь экран или показывайте его в попапе

В Настройках блока можно выбрать отображение квиза на весь экран, а также задать высоту блока. Если установить фиксированное значение, высота блока не будут меняться в зависимости от количества контента в форме.

Где найти: Настройки → Основные настройки → Растянуть блок на весь экран

Для отображения квиза во всплывающем окне, включите чек-бокс «Открыть блок в Pop-up». После этого в Настройках появится раздел Pop-up, где можно задать ссылку для открытия блока.

Где найти: Настройки → Основные настройки → Открыть блок в Pop-up

🔵Добавьте обложку

В Контенте блока доступно новое поле «Обложка». Его можно использовать для первого шага или для разделения квиза на секции. В обложку можно добавить заголовок, описание, кнопку, изображение. Картинку можно сделать фоновой или расположить слева или справа от текста.

Где найти: Контент → Шаги квиз-формы → Обложка

🔵Задавайте условия видимости полей

В квизе вы можете настроить показ определенных полей в зависимости от значений в других полях. Это поможет сформировать предложение под потребности потенциального клиента и повысить вероятность продажи. Больше информации про условия видимости полей в Справочном центре 👉 https://help-ru.tilda.cc/forms/field-visibility-conditions

🔵Добавьте последний шаг

В блоке также доступно два новых поля, которые помогут завершить квиз: «Результат: контент (изображение + текст)» и «Результат: редирект». Первый вариант подойдёт, когда вы хотите дать больше информации тому, кто заполнил форму. Например, оставить промокод на скидку и дать ссылку на товар. Второй вариант можно использовать, когда вы хотите сразу отправить человека на другую страницу. Например, на лендинг с акционными предложениями.

Подробную информацию по работе с блоком читайте в Справочном центре 👉 https://help-ru.tilda.cc/forms/quiz