Модификации

Меняем цвет ссылок и иконок в стандартном футере при наведении

2026-08-11 15:23 Бесплатные Футер

Инструкция

В стандартных блоках футера Tilda нельзя отдельно настроить цвет ссылок и иконок соцсетей при наведении. Эта модификация добавляет такой эффект без создания футера в Zero Block.

Код проверен для блока FT302, но не привязан к его внутреннему классу .t420. Поэтому он также работает с другими стандартными футерами, если ссылки в них созданы как обычные ссылки, а иконки соцсетей добавлены стандартным элементом Tilda.
  1. Добавьте на страницу стандартный блок футера, например FT302.
  2. Откройте настройки футера и укажите в поле «CSS-класс блока» класс footerhover.
  3. Добавьте на страницу блок T123 и вставьте в него код модификации.
  4. Чтобы выбрать цвет при наведении, замените значение #FD411B в строке с переменной --footer-hover-color.
  5. Опубликуйте страницу и проверьте наведение на пункты меню, другие текстовые ссылки и иконки соцсетей.
Важно:
Модификация меняет цвет всех текстовых ссылок внутри выбранного футера, кроме кнопок. Если в футере есть ссылка, цвет которой не должен меняться, для неё потребуется отдельное исключение.

Стандартные SVG-иконки соцсетей Tilda перекрашиваются. Если иконка загружена как изображение PNG, JPG или WebP, изменить её цвет через fill нельзя.
<!-- Стили, которые меняют цвет текстовых ссылок и стандартных иконок соцсетей при наведении в футере Tilda. Источник: bulgkate.ru -->
<style>
.uc-footerhover {
    --footer-hover-color: #FD411B; /* Укажите нужный цвет */
}

.uc-footerhover a:not(.t-btn) {
    transition: color 0.2s ease;
}

.uc-footerhover a:not(.t-btn):hover,
.uc-footerhover a:not(.t-btn):focus-visible {
    color: var(--footer-hover-color) !important;
}

.uc-footerhover .t-sociallinks__item .t-sociallinks__svg path {
    transition: fill 0.2s ease;
}

.uc-footerhover .t-sociallinks__item a:hover .t-sociallinks__svg path,
.uc-footerhover .t-sociallinks__item a:focus-visible .t-sociallinks__svg path {
    fill: var(--footer-hover-color) !important;
}
</style>