В Tilda можно оформить текст в стандартных блоках, используя встроенные возможности конструктора. Но иногда требуется пойти дальше стандартных возможностей — в таких случаях можно подключить CSS и задать индивидуальные настройки.
На примере предлагаю кастомизировать несколько заголовков в блоках Тильды — определим интервал между символами в пределах заголовка атрибутом letter-spacing и зададим насыщенность шрифта с помощью font-weight.
На первом шаге найдите на странице нужные элементы для которых хотите применить стили. Далее откройте консоль разработчика, используя клавиши Ctrl + Shift + I и скопируйте CSS-классы для каждого элемента.
Для моих заголовков получился такой список классов.
#rec51596912 .tn-elem[data-elem-id="1668777403"] .tn-atom, #rec51597634 .tn-elem[data-elem-id="1668778202"] .tn-atom, #rec51597634 .tn-elem[data-elem-id="1668778204"] .tn-atom, #rec51629762 .tn-elem[data-elem-id="1617017169"] .tn-atom
На втором шаге нужно подключить CSS-стили. Перейдите в режим редактирования страницы и добавьте новый блок «T123. HTML-код». Найти блок можно в библиотеке стандартных блоков в разделе «Другое». В режиме редактирования блока можно добавить HTML, CSS и JS-код.
Теперь подключите стили для заголовков, используя элементы <style> и </style> и укажите свойства letter-spacing и font-weight и значения для них.
<style>
#rec51596912 .tn-elem[data-elem-id="1668777403"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778202"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778204"] .tn-atom,
#rec51629762 .tn-elem[data-elem-id="1617017169"] .tn-atom {
letter-spacing: -3px;
font-weight: 800 !important;
}
</style>
Если нужно задать разные стили для мобильных экранов и десктопа, то можно добавить медиа-запрос, используя директиву @media, которая будет управлять стилями элемента в зависимости от размера экрана на устройстве.
<style>
/* Заголовки для десктопа */
#rec51596912 .tn-elem[data-elem-id="1668777403"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778202"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778204"] .tn-atom,
#rec51629762 .tn-elem[data-elem-id="1617017169"] .tn-atom {
letter-spacing: -3px;
font-weight: 800 !important;
}
/* Заголовки для мобайла */
@media (max-width: 640px) {
#rec51596912 .tn-elem[data-elem-id="1668777403"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778202"] .tn-atom,
#rec51597634 .tn-elem[data-elem-id="1668778204"] .tn-atom,
#rec51629762 .tn-elem[data-elem-id="1617017169"] .tn-atom {
letter-spacing: -1px;
font-weight: 600 !important;
}
}
</style>
Чтобы изменения вступили в силу сохраните CSS-код в блоке и опубликуйте страницу.