Фон блока на Тильде: градиенты, видео и параллакс без тормозов

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

Где в Тильде включается фон блока

В Zero Block фон настраивается на уровне секции: кликаю по блоку, открываю панель настроек справа и перехожу на вкладку с заливкой. Там четыре варианта: цвет, градиент, изображение и видео, и их можно комбинировать - например, положить изображение снизу и градиент-оверлей поверх него, чтобы текст читался на светлом фото.

В блоках старых серий (не Zero Block) настройки фона обычно называются Cover и лежат там же, в панели блока: заливка цветом, картинка на всю секцию, у части блоков - видео. Логика та же, просто набор опций чуть уже, чем в Zero Block.

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

Градиент фона блока: когда он лучше фотографии

Градиент в Тильде задаётся двумя цветами и направлением - выбираю точки старта и конца заливки, редактор сразу показывает результат. Никакого файла не загружается, значит блок с градиентным фоном весит на странице примерно ноль килобайт и рендерится мгновенно, в отличие от фотографии в несколько мегабайт.

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

Из ошибок, которые чаще всего вижу на чужих сайтах: слишком контрастный градиент через весь блок, из-за которого фотография теряет смысл, и градиент, подобранный не в цвет логотипу - смотрится как заглушка, а не как осознанное решение.

Сравнение фонов блока по весу и задачам

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

Видео-фон блока без просадки скорости

Видео в Тильде можно загрузить прямо в блок как файл или подключить ссылкой на YouTube либо Vimeo. Для фона обычно беру первый вариант: свой ролик проще подогнать по длительности и убрать с него лишнее - логотип видеохостинга, кнопки плеера, рекомендации в конце.

Перед загрузкой сжимаю видео в любом редакторе, с которым работаю (Premiere, DaVinci Resolve или даже HandBrake): для фона хватает разрешения 1280 на 720, звук вырезаю полностью, ролик делаю коротким и зацикленным, обычно секунд десять-пятнадцать, чтобы петля не бросалась в глаза. Автоплей у фонового видео всегда без звука - это и требование браузеров для автозапуска, и просто вежливость по отношению к посетителю.

Отдельно слежу за постером - кадром, который показывается, пока видео ещё не загрузилось. Без него на медленном интернете первую секунду-две человек видит белый или серый прямоугольник вместо фона, это плохо и для восприятия, и для метрики LCP (время отрисовки самого крупного элемента на экране), по которой Google оценивает скорость страницы.

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

На одном из проектов клиент залил в блок ролик весом больше сорока мегабайт: мобильный PageSpeed на такой странице держался в районе тридцати баллов, а первый экран прогружался несколько секунд на среднем 4G. После сжатия ролика до нескольких мегабайт и замены видео на статичное фото для мобильной версии страница вернулась в зелёную зону, а визуально десктопная версия ничего не потеряла.

Параллакс-эффект в блоках: включать или нет

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

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

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

Адаптация фона блока под мобильные устройства

Кроме отключения видео на телефонах, в настройках блока можно задать отдельную картинку для мобильной версии - беру более простой кадр с меньшим количеством деталей, потому что на маленьком экране сложная композиция всё равно теряется, а весит она как полноразмерное фото для десктопа.

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

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

Ошибки с фоном блока, которые чаще всего вижу на аудитах

Собрал список того, что регулярно встречаю на чужих сайтах на Тильде при разборе скорости загрузки:

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

Если под задачу нужен нестандартный сценарий фона, например смена картинки по времени суток, разное видео для разных сегментов трафика или фон, который тянется из внешнего API, обычно такое делаю через кастомную доработку Тильды: штатных настроек блока для подобной логики недостаточно, нужен отдельный скрипт.

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

Частые вопросы

Можно ли поставить разные фоны для десктопа и телефона в одном блоке?

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

Как сделать полупрозрачный градиент поверх фотографии?

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

Почему параллакс тормозит на телефоне, а на компьютере всё плавно?

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

Какой формат видео лучше загружать в фон блока?

MP4 с кодеком H.264 - его поддерживают все современные браузеры без проблем с автовоспроизведением. Разрешение выше 1280 на 720 для фонового ролика обычно избыточно, а вот битрейт и длительность стоит уменьшать в первую очередь, если после сжатия файл всё ещё весит несколько десятков мегабайт.