Tilda + немного кода: 5 полезных приёмов

24.09.2026

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

Добавьте код на страницу в блок Т123 и измените значения под свой дизайн.

*не забудьте подключить jQuery в настройках сайта

1. Смена цвета пунктов меню при скролле

Когда на главном экране элементы меню имеют один цвет, но в фиксированном меню при скролле необходим другой (например, как на текущей странице). Чтобы не создавать несколько вариантов блока, можно использовать один и тот же и автоматически менять цвет элементов после достижения заданной точки скролла. При возвращении к началу страницы цвет элементов снова меняется на исходный.

Класс блока:
В настройках блока меню задайте класс

uc-menufix

<!-- Смена цвета элементов меню при скролле -->

<style>
/* Цвет текста и элементов меню */
.uc-menufix.menu-scrolled .tn-atom,
.uc-menufix.menu-scrolled .tn-atom *,
.uc-menufix.menu-scrolled .tn-atom__button-text {
    color: #fff !important;
}

/* Цвет SVG элементов */
.uc-menufix.menu-scrolled svg,
.uc-menufix.menu-scrolled svg path,
.uc-menufix.menu-scrolled svg rect,
.uc-menufix.menu-scrolled svg circle,
.uc-menufix.menu-scrolled svg line,
.uc-menufix.menu-scrolled svg polyline,
.uc-menufix.menu-scrolled svg polygon {
    fill: #fff !important;
    stroke: #fff !important;
}
</style>

<script>
$(document).ready(function() {
    function checkScroll() {
        /* Расстояние скролла в пикселях */
        if ($(window).scrollTop() > 100) {
            $('.uc-menufix').addClass('menu-scrolled');
        } else {
            $('.uc-menufix').removeClass('menu-scrolled');
        }
    }

    $(window).on('scroll', checkScroll);
    checkScroll();
});
</script>

Пример реализации:

2. Срез угла изображения

Нечасто используемый прием, но тем не менее позволяющий срезать угол непосредственно на сайте, а не грузить картинку нужной формы через png. В данном коде вырезается правый верхний угол (чаще всего можно встретить именно такой вариант).

Класс элемента:
Задайте шейпу или изображению класс

block-polygon

<!-- Срез верхнего правого угла -->

<style>
.block-polygon {
    overflow: hidden;

    clip-path: polygon(
        0 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% 100%,
        0 100%
    );
}

/* Брейкпоинт 640px */
@media screen and (max-width: 640px) {
    .block-polygon {
        clip-path: polygon(
            0 0,
            calc(100% - 10px) 0,
            100% 10px,
            100% 100%,
            0 100%
        );
    }
}

/* Брейкпоинт 320px */
@media screen and (max-width: 320px) {
    .block-polygon {
        clip-path: polygon(
            0 0,
            calc(100% - 8px) 0,
            100% 8px,
            100% 100%,
            0 100%
        );
    }
}
</style>

Пример реализации:

Срезаем угол карточки/фото

Сайт

3. Выравнивание иконки в кнопке

Когда нужно задать точное положение иконки относительно текста и самой кнопки. С возможностью задавать размеры в настройках или подстраивать автоматически. (Все кнопки в вариантах имеют одинаковые настройки внутри zero блока.)

Варианты:

Вариант 1

Фиксация расстояния иконки от края.
Размер иконки и ширина кнопки задается в настройках кнопки.

Вариант 2

Фиксация расстояния иконки и текста от краев.
Размер иконки и ширина кнопки задается в настройках кнопки.

Вариант 3

Равное расстояние от текста до левого края и до иконки.
Ширина кнопки автоматически подстраивается под текст.
Размер иконки задается в настройках кнопки.

Класс элемента:
Задайте кнопке класс

custom-button

<!-- Вариант 1 -->
<style>
.custom-button .tn-atom {
    position: relative !important;
}

/* Расстояние иконки от правого края */
.custom-button .tn-atom__button-icon {
    position: absolute !important;
    right: 5px !important;
}
</style>

<!-- Вариант 2 -->
<style>
.custom-button .tn-atom {
    position: relative !important;
    padding: 0 !important;
}

.custom-button .tn-atom__button-content {
    display: contents !important;
}

.custom-button .tn-atom__button-text {
    position: absolute !important;
    left: 10px !important; /* Расстояние текста от левого края */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}

.custom-button .tn-atom__button-icon {
    position: absolute !important;
    right: 5px !important; /* Расстояние иконки от правого края */
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
}
</style>

<!-- Вариант 3 -->
<style>
.custom-button {
    overflow: visible !important;
}

.custom-button .tn-atom {
    position: relative !important;
    width: max-content !important;
    padding: 0 5px 0 30px !important; /* Расстояние от текста до краёв кнопки */
}

.custom-button .tn-atom__button-content {
    display: flex !important;
    align-items: center !important;
    gap: 30px !important; /* Расстояние между текстом и иконкой */
    width: auto !important;
    padding: 0 !important;
}

.custom-button .tn-atom__button-text {
    white-space: nowrap !important;
    margin: 0 !important;
}

.custom-button .tn-atom__button-icon {
    position: relative !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}
</style>

4. Cмена цвета фона при скролле

Когда нужно сделать акцент и подсветить появление важной информации. Плавная автоматическая смена цвета фона блока (альтернатива встроенной функции Tilda, работает более плавно и только на отдельном блоке).

Класс блока:
Задайте блоку класс

uc-scroll-color

<!-- Смена цвета фона при скролле -->

<style>
.uc-scroll-color {
    background-color: #F5F5F3; /* Изначальный цвет фона */
    transition: background-color 0.5s ease-in-out; /* Скорость смены цвета */
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const block = document.querySelector('.uc-scroll-color');

    window.addEventListener('scroll', () => {

        /* Точка срабатывания — 300px до начала блока */
        if (window.scrollY >= block.offsetTop - 300) {
            block.style.backgroundColor = '#FFFFFF'; /* Новый цвет фона */
        } else {
            block.style.backgroundColor = '#F5F5F3'; /* Возврат к исходному цвету */
        }
    });
});
</script>

Пример реализации:

Меняем цвет фона

Сайт

5. Автоматическое добавление символа к ссылке

Небольшой код для оформления ссылок в Tilda. Он автоматически добавляет выбранный текстовый символ после ссылки - например, стрелку, плюс или любой другой знак. Заменой символа в коде можно заменить символы сразу во всех ссылках сайта.

Иконку можно дополнительно анимировать при наведении на ссылку.

Пример:

Это ссылка

Класс элемента:
Задайте тексту со ссылкой класс

icon-text

<!-- Автоматическое добавление символа к тексту -->

<style>
.icon-text a {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Расстояние между текстом и символом */
}

.icon-text a::after {
    content: "↗"; /* Символ, который добавляется после текста */
    display: inline-block;
    transition: transform 0.2s ease;
}

/* Анимация символа при наведении */
.icon-text a:hover::after {
    transform: translate(3px, -3px);
}
</style>

Tilda + немного кода: 5 полезных приёмов

Навигация

1. Смена цвета пунктов меню при скролле

2. Срез угла изображения

3. Выравнивание иконки в кнопке

4. Cмена цвета фона при скролле

5. Автоматическое добавление символа к ссылке