Расширение для Chrome · Tilda

cascad — справка для пользователей

cascad добавляет прямо поверх вашего опубликованного сайта на Tilda визуальный редактор CSS и готовые решения: hover-эффекты, сетки, слайдеры, Lottie-анимации и инструменты для магазина. Всё настраивается мышью — без написания кода.

Открыть cascad.cc

Начало

Что это и как начать

cascad работает только на опубликованных страницах Tilda — на «живом» сайте, а не внутри редактора tilda.ru. Вы открываете сайт в Chrome, выбираете элемент, настраиваете его в панели и получаете готовый код, который вставляете обратно в Tilda.

Первые шаги

  1. Установите расширение cascad в браузер Chrome.
  2. Нажмите на иконку расширения в панели Chrome — откроется окно входа.
  3. Войдите или зарегистрируйтесь на cascad.cc. Оформите подписку или пробный период.
  4. Откройте свой опубликованный сайт на Tilda. У края экрана появится плавающая круглая кнопка cascad.
  5. Нажмите на плавающую кнопку — откроется список инструментов.
i

Нет кнопки? Проверьте, что вы вошли и что включён переключатель Показывать иконку расширения на сайте. Кнопку можно перетаскивать за край экрана.

!

Инструменты не работают в самом конструкторе Tilda (tilda.ru / tilda.cc). Открывайте опубликованную страницу сайта.

Начало

Аккаунт и подписка

Окно аккаунта открывается кликом по иконке расширения в панели Chrome. Повторный клик по вкладке закрывает окно.

Вход

  • Введите e-mail и password, нажмите Войти.
  • Нет аккаунта? Ссылка Регистрация. Забыли пароль — Забыли пароль?.
  • Аккаунт работает только в одном браузере одновременно. При входе в другом — «Авторизация сброшена».

Тарифы

Две вкладки оплаты: Российская карта и Иностранная карта.

ТарифСтоимостьОсобенности
Пробный период — 3 дня0 ₽Только для российских карт. Валидация: 1 ₽ спишется и вернётся. Автосписаний нет. Одну карту нельзя использовать для пробного периода повторно.
1 месяц550 ₽Можно подключить регулярный платёж.
3 месяца1 650 ₽Без автосписания.
6 месяцев3 300 ₽Без автосписания.
12 месяцев6 600 ₽Без автосписания.
  • Промокод — поле Введите промокод и кнопка Применить.
  • Внизу окна: Выйти, Поддержка (Telegram), Логи, Обновить.
i

Часть инструментов Бесплатно — Lottie и «Динамическое название товара». Остальные требуют подписки.

!

Ошибка при активации подписки — отключите VPN и обновите расширение.

Основы

Как это работает

Почти все инструменты (кроме CSS-редактора и Zero-блока) устроены одинаково.

  1. Откройте инструмент. Плавающая кнопка → карточка решения. Откроется панель.
  2. Выберите элемент. Нажмите кнопку создания. Наводите мышь — элементы подсвечиваются, подсказка Кликните, чтобы выбрать элемент. Кликните нужный, уточните выбор (Родители / Соседи) и нажмите Выбрать.
  3. Настройте. Меняйте параметры — всё видно в живом превью.
  4. Скопируйте код. Копировать CSS / Копировать код.
  5. Вставьте в Tilda. Блок T123 (HTML-код) → вставьте код → опубликуйте.

Панель инструмента

  • Панель перетаскивается, стыкуется к краю, меняет размер.
  • Кнопки в шапке: Назад, Свернуть панель, Закрыть панель.
  • Выйти из режима выбора — клавиша Esc.
!

Элементы внутри Zero-блока обычными инструментами не выбираются — для них есть отдельный инструмент «Zero-блок».

i

Для «Slider» и «Lottie» нужно дополнительно подключить библиотеку — кнопка «Скрипт библиотеки», вставляется в блок один раз перед основным кодом.

Инструмент

Визуальный CSS-редактор

Самый мощный инструмент. Разворачивается на всю вкладку: сайт загружается внутрь редактора, слева — панель инструментов, справа — свойства. Выбираете элемент и меняете оформление контролами или вручную в CSS-редакторе с автодополнением.

Как открыть и работать

  1. Плавающая кнопка → Визуальный CSS-редактор. Статусы Загрузка редактора → Готово!.
  2. Режим Инспектор элементов (V) → кликните элемент.
  3. Выберите область: страница, шаблон или Глобально.
  4. Меняйте свойства (Текст, Фон, Отступы, Рамки, Тень) или пишите CSS в Редактор CSS (E).
  5. Экспорт → Копировать код (вместе с тегами <style>).
  6. Вставьте в блок T123 (HTML) и опубликуйте.
i

Редактор сам ничего не записывает в Tilda — выдаёт готовый CSS, вы вставляете вручную.

Инструмент

Hover — эффекты при наведении

Настраивает, что происходит с элементом при наведении курсора: подъём, увеличение, смена цвета, тень, фон, фильтры.

  1. Hover → Создать новый эффект и выберите элемент.
  2. Включайте группы свойств: Анимация, Трансформация, Фон, Типографика, Тень, Фильтры.
  3. При необходимости — Дочерний элемент или Эффект :has.
  4. Копировать CSS и вставьте в блок.
!

Выключить на мобильных ограничивает эффект устройствами с мышью — на телефонах hover обычно не нужен.

Инструмент

Grid — гибкие сетки

Раскладывает элементы контейнера в настоящую CSS-сетку: колонки, отступы, выравнивание, адаптивность, ручное позиционирование карточек.

!

Перед началом: задайте контейнеру и карточкам классы, начинающиеся с grid- (например grid-container и grid-card) в настройках блока Tilda.

  1. Grid → Настроить новую сетку и выберите контейнер.
  2. Основные настройки: ширина, Количество колонок, Общий отступ (gap), выравнивание.
  3. При желании — Адаптивность (+ Добавить разрешение), Тестировать разрешения.
  4. Расширенные настройки — управление каждым дочерним элементом.
  5. Копировать CSS и вставьте в HTML-блок.

Инструмент

Zero-блок — Bento-сетки

Единственный инструмент, работающий с содержимым Zero-блока (T396). Раскладывает карточки в CSS-сетку с крупными и мелкими ячейками. Карточки перетаскиваются и растягиваются прямо в превью.

  1. Zero-блок на странице с Zero-блоком. Секции: Пресет сетки, Сетка Zero, Карточки, Адаптивность.
  2. Пресет сетки → выберите паттерн и Куда применить.
  3. Наведите на карточку → Настроить или тяните ручки растягивания.
  4. Сохраните раскладку — Сохранить комбинацию (Мои пресеты).
i

Адаптивность берётся автоматически из Zero-блока — cascad подхватывает экраны из Tilda.

Инструмент

Slider — слайдеры и карусели

Делает из контейнера с одинаковыми элементами карусель со стрелками, точками, автопрокруткой и адаптивностью. Есть режим «бегущей строки».

  1. Slider → Создать новый слайдер, выберите контейнер.
  2. Основные настройки: ширина, скорость, число слайдов, отступы, автоплей.
  3. Раскройте Навигация, Пагинация, Адаптивность.
  4. Копировать код → в HTML-блок.
  5. Обязательно: Перейти и скопировать Скрипт библиотеки и вставьте перед основным кодом.
!

Без библиотеки слайдер не заработает. Проверьте на мобильных и десктопе после публикации.

Инструмент · бесплатно

БесплатноБета

Lottie — анимации

Работа с Lottie-анимациями (JSON). Настройте добавленную анимацию или загрузите свой файл и получите код. Галереи нет — используются ваши файлы.

Четыре вкладки

  • На странице — настройка Lottie-блоков на сайте.
  • Просмотр — загрузка своего JSON (до 5 Мб) и код.
  • Из фото — анимация из последовательности изображений.
  • Из видео — извлечение кадров из видео.

Свой файл: как получить код

  1. Вкладка Просмотр → загрузите JSON.
  2. Получить код для вставки — файл уйдёт на сервер, появится код.
  3. Копировать код для вставки → в HTML-блок, опубликуйте.
  4. Выберите анимацию → Настроить: Автоматически, При наведении, При скролле, Следовать за курсором, По триггеру.
  5. Копировать код + подключите Скрипт библиотеки.
i

Файлы хранятся в Мои файлы. После окончания подписки — ещё 6 месяцев, затем удаляются.

Набор · бета

Бета

Shop — решения для магазина

Внутри Shop — список решений. Каждое включается кнопкой Настроить (сразу превью), настраивается в аккордеонах, итог — Копировать код в HTML-блок.

i

Где нужно указать товары — выбор из списка. Если магазин не определился, вводите UID вручную: [158545130501].

Кастомные бейджи Бета

Метки («Хит», «Скидка», свои) на товары по условию — артикул, название, характеристика, раздел, цена. Настройка места, текста, иконок, ссылки, стиля.

Доп. услуги в корзине

Блоки с доп. услугами в корзине (гарантия, упаковка) — чекбоксами, попадают в сумму. Тип цены: Однократно / За каждый товар / Бесплатно.

Счётчик количества Бета

Счётчик +/− в каталоге, попапе и на странице товара. Синхронизируется с корзиной, учитывает остатки.

Шкала скидок от суммы

Прогресс-бар «Добавьте ещё 2 500 ₽ для скидки 10%». Уровни из настроек Tilda, значения подставляются автоматически.

Шкала скидок от количества

Порог по количеству товаров. Есть склонения «товар / товара / товаров».

Шкала до бесплатной доставки Бета

«До бесплатной доставки осталось X ₽» → плашка «Бесплатная доставка!». Порог берётся из настроек доставки Tilda.

Динамическое название товара Бесплатно Бета

Выбранная опция («Цвет: Красный») дописывается в название товара. Единственное бесплатное решение набора.

Подарки в корзине

Кладёт подарок в корзину при выполнении условий и показывает оформленный блок. Подарок — виртуальный или товар из каталога.

!

Часть решений в статусе Бета — проверяйте на реальном заказе перед публикацией.

Помощь

Частые вопросы

Не вижу плавающую кнопку на сайте
Проверьте: 1) вы вошли в аккаунт; 2) включён Показывать иконку расширения на сайте; 3) страница опубликована и сделана на Tilda. Кнопка может быть перетянута к другому краю.
«Этот сайт сделан не на Tilda»
Инструменты работают только на сайтах Tilda. Откройте ваш опубликованный Tilda-сайт.
«Расширение работает только на опубликованных страницах, сделанных на Тильде»
Страница не редактируется cascad (конструктор или сторонний сайт). Перейдите на опубликованную версию страницы Tilda.
Не могу выбрать элемент — он внутри Zero-блока
Обычные инструменты не выбирают элементы внутри Zero-блока. Для них есть отдельный инструмент «Zero-блок».
Скопировал код, но эффект или слайдер не работает
Код должен быть в блоке T123 (HTML-код), страница опубликована. Для «Slider» и «Lottie» подключите «Скрипт библиотеки» отдельной кнопкой, перед основным кодом.
Ошибка при активации подписки
Отключите VPN и обновите расширение (Обновить в окне аккаунта или переустановка). Не помогает — напишите в Поддержку (Telegram).
«Авторизация сброшена»
Аккаунт работает в одном браузере одновременно. Войдите снова там, где работаете.
Какие инструменты доступны без подписки?
Бесплатно («Бета»): Lottie и «Динамическое название товара» в Shop. Остальное — по подписке.
cascad — визуальный редактор для Tilda · cascad.cc · Поддержка в Telegram
Made on
Tilda