Один раз вставляешь скрипт в HEAD сайта — потом активируешь любые моды CSS-классами. Без npm, без сборки, без правки HTML.
Открой каталог или конкретный мод на ksmods.ru. На странице мода жми «Скопировать» — готовый код попадёт в буфер.
<!-- K&S Mods bundle — подключается ОДИН РАЗ на весь сайт --> <script src="https://cdn.ksmods.ru/v1/bundle.min.js"></script>
Зайди на tilda.ru/projects и открой тот проект, к которому хочешь добавить моды.
В верхней панели проекта есть кнопка «Настройки сайта». Жми — откроется модальное окно со всеми настройками.
Слева в окне настроек — длинный список табов. Скролль вниз и найди «Вставка кода». Жми на него.
В первом поле «Html-код для вставки внутрь HEAD» нажми «Редактировать код», вставь скопированный bundle, нажми «Сохранить».
Вернись в проект, на каждой странице жми «Опубликовать» (или сразу «Опубликовать все страницы» сверху). Подожди 5-10 секунд.
Открой свой опубликованный сайт. В углу должна быть кнопка «↑», в footer — автогод, на фоне — шум-эффект, и так далее (зависит от того какие моды активировал).
Bundle подключён — теперь для любого мода нужно поставить его CSS-класс на элемент. Самый простой способ — в том же HEAD-коде добавить второй скрипт:
<!-- ПОСЛЕ bundle — активируем моды добавлением классов на <body> --> <script> document.addEventListener('DOMContentLoaded', function(){ document.body.classList.add( 'ks-up-button', // кнопка «↑ наверх» 'ks-noise', // эффект шума на фоне 'ks-smooth-scroll', // плавный скролл к якорям 'ks-color-browser', // зелёная полоска браузера на мобиле 'ks-back-button', // кнопка «Назад» 'ks-bread-crumbs' // хлебные крошки ); }); </script>
Для модов которые ставятся на конкретный элемент (например ks-update-years для года в футере) — класс прописывается прямо в Zero-блоке или в HTML того блока, где должен работать мод.
Полная карта «какой класс куда ставить» — на страницах каждого мода: ksmods.ru/catalog
10 модов бесплатно навсегда · PRO от 490 ₽/мес · возврат за 14 дней