Tilda Helper — расширение для Тильды: ID блока и Z-index | Trace Logo's
Trace Logo's GitHub
Перейти к содержанию

Tilda Helper / расширение для Тильды / Chrome / 1.1.0

Вот ваш ID.
Продолжайте.

Копируйте ID и селекторы блоков, управляйте слоями и проверяйте адаптив прямо из редактора Tilda.

Скачать Tilda Helper
TМой сайт / Главная↶　↷　▥　⚙Опубликовать
НастройкиКонтентCR01
Студия цифрового дизайнаСоздаём.
Собираем.
Запускаем.Обсудить проект ↗
НастройкиT123
Код будет выполнен после публикации<style>
　#rec845210 { z-index: 10; }
</style>
Схема редактора — нажмите на ID блока.

Настройки можно не открывать.

Потяните разделитель: ID появляется у блока и копируется одним кликом.

Главная / Редактирование
Наш следующий проектНачинается
с этого блока.
С помощником
Главная / Редактирование
Наш следующий проектНачинается
с этого блока.
Настройки блока
ID блока #rec845210
Без помощника
Соседний блокСнизу?
Сверху?
#rec845210Решаете
вы.

Поднимите
нужный слой.

Измените Z-index — блок переместится; в Tilda значение сохраняется через служебный T123.

#rec845210 { z-index: 10; }Демо: попробуйте 0 и 10. Для T1093 функция недоступна.

Смотрите сразу
в три экрана.

Прокрутите любой экран: мультипревью синхронно показывает опубликованную страницу на tilda.ws.

Десктоп / 1201 px
Студия дизайнаДелаем
следующий
шаг.
ПроектФорма
и смысл.
Обсудим?
Планшет / 959 px
Студия дизайнаДелаем
следующий
шаг.
ПроектФорма
и смысл.
Обсудим?
Телефон / 360 px
Студия дизайнаДелаем
следующий
шаг.
ПроектФорма
и смысл.
Обсудим?
Интерактивная схема. В расширении сначала опубликуйте страницу.

Ваш блок.
Ваш код.

Копируйте ID для CSS, а содержимое T123 — кнопкой у превью кода.

T123 / HTML-код
<style>
#rec845210 {
  z-index: 10;
}
</style>

Вернитесь
к созданию.

Установите Tilda Helper из распакованной папки и перезагрузите редактор.

Скачать Tilda Helper

Установка в Chrome

Скачайте архив кнопкой выше и распакуйте его.

  1. Откройте .
  2. Включите «Режим разработчика».
  3. Нажмите «Загрузить распакованное расширение» и выберите распакованную папку.

Вопросы про Tilda Helper

Как скопировать ID блока в Тильде?

Наведите курсор на блок в редакторе: рядом с кнопками «Настройки» и «Редактировать блок» появится бейдж с ID вида #rec845210. Клик по нему копирует ID в буфер обмена.

Как поменять Z-index блока в Тильде?

В настройках блока появляется поле Z-index. Значение сохраняется в служебном блоке T123 под ним, поэтому править код вручную не нужно.

Как посмотреть адаптив Тильды сразу на трёх экранах?

Мультипревью открывает опубликованную страницу в трёх окнах, включая десктоп 1201 px, и прокручивает их синхронно. Проверка идёт на опубликованной версии.

Почему мультипревью показывает старые правки?

Оно открывает опубликованную страницу. Сохраните, опубликуйте и откройте мультипревью заново.

Есть ли типограф для текста в Тильде?

Да, отдельное расширение — Trace Typograf: расставляет неразрывные пробелы, тире и ёлочки в текстовых полях Taptop и Tilda.

Где работает расширение?

В редакторах page, projects и zero на tilda.ru и tilda.cc; мультипревью — на tilda.ws.

Зачем доступ к буферу обмена?

Разрешение clipboardWrite нужно для копирования ID, CSS-классов, якорей и кода.

Это бесплатно и как установить?

Бесплатно, сумма по желанию. Расширение ставится из архива в режиме разработчика (шаги — в блоке «Установка в Chrome»). Tilda Helper — независимое расширение, не официальный продукт Tilda. Другие бесплатные инструменты — в разделе «Инструменты».