Автор статьи: Дмитрий Неретин

Как изменить размер шрифта в мобильной версии стандартных блоков Тильды

Пошаговая инструкция со скриншотами + образец кода

Стандартные блоки — основа Тильды и с их помощью можно решить практически любые задачи, однако есть у них нюанс, связанный со шрифтами. Дело в том, что размер шрифта в настройках стандартного блока можно указать только для десктопа, а для мобильной версии Тильда адаптирует блок уже по своему усмотрению. На практике это приводит к тому, что в мобильной версии у разных блоков будет разный размер шрифта, что, разумеется, смотрится не слишком аккуратно.

Более того — такие вещи ухудшают пользовательский опыт, вот вам живой пример. Просматривая записи визитов пользователей через Вебвизор на одном своём проекте, я заметил, что пользователи мобильной версии частенько увеличивают одну и ту же часть страницы сайта с очень уж мелким текстом.

Запись визита пользователя через Вебвизор

Решения здесь два — либо переделывать блок в Zero, либо воспользоваться небольшой кастомизацией. Для второго варианта нам понадобится немного знания CSS и следующая инструкция.

Создаём блок c HTML-кодом T123

Если хотите, чтобы он работал сразу на всех страницах сайта, размещаем его в header или footer

Добавляем в блок код


<style type=text/css>
@media screen and (max-width: 640px)
{
здесь будут CSS селекторы { font-size: 18px; }
}
</style>

Открываем панель инструментов разработчика

В браузере Chrome открываем наш сайт на той странице, где нужно изменить шрифт, жмём сочетание Ctrl+Shift+I либо в контекстном меню, вызванном кликом правой кнопкой, выбираем пункт «Просмотреть код» и

Интерфейс панели разработчика

Ищем блоки, где нужно поменять размер шрифта

Для этого кликаем на текст и правой колонке ищем CSS селектор с активным, то есть не зачёркнутым свойством font-size. Не забывайте, что есть ещё меню, попапы всякие и другие не очевидные блоки.

Копировать можно всё сразу или по частям

Дополняем код

Все найденные селекторы вставляем внутрь кода из пункта 2 через запятую. Должно получится что-то такое.


<style type=text/css>
@media screen and (max-width: 640px)
{
.t-descr_xs, .t-descr_sm, .t-name_md, .t-text_md, .t-name_md  { font-size: 18px; }
}
</style>

Публикуем страницу

Если код вы разместили в header или footer, то обязательно переопубликуйте и сквозной блок и ту страницу, где мы будем менять код, либо просто переопубликуйте весь сайт целиком.

Важный момент: если действовать по этой схеме, то перечислением селекторов мы поменяем код вообще во всех блоках, где они есть, а это не всегда нужно. Скажем, я задал font-size 18, и это значит, что размер шрифта изменится и там, где было 14, и там, где 24.

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


<style type=text/css>
@media screen and (max-width: 640px)
{
#rec375861241.t-descr_xs, #rec375834241.t-descr_sm, #rec465861221.t-name_md, #rec198868932.t-text_md, #rec398861568.t-name_md  { font-size: 18px; }
}
</style>

Если всё сделали по инструкции и ничего не заработало, пишите мне в Телеграм или ВК, попробуем разобраться.

Дмитрий Неретин

Интернет-маркетолог

Понравилась статья? Поделитесь полезной находкой в социальных сетях. Вам несложно, а мне будет приятно:)

Персональная email-рассылка на интересующие вас темы

Одно письмо в месяц и никакого спама.