Как изменить фон в Tilda: цвет, изображение и Zero Block

Фон в Tilda живёт на трёх уровнях: страница, обычный блок, Zero Block. Если картинка на фоне страницы не видна, проверьте цвет фона блоков: он может её перекрывать. Ниже порядок действий для каждого уровня и проверка, после которой видно, доехало ли изменение до мобильной версии.

Учебный пример

Лендинг из трёх блоков: обложка, текстовый блок, форма. Задача — поставить фото на фон всей страницы и оставить текст читаемым. Исходное состояние:

Блок	Свой фон	Что видно сейчас
Обложка	задан цвет	цвет блока
Текст	задан цвет	цвет блока
Форма	не задан	белый фон страницы

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

Фон всей страницы: блок T674 и прозрачность блоков

Чтобы поставить на фон страницы картинку, добавляют блок из категории Другое ⟶ T674: это модификатор, который добавляет фоновое изображение для всей страницы Как добавить картинку на фон страницы?. Изображение загружают во вкладке «Контент» через «Загрузить файл», после чего сохраняют результат Фон в конструкторе Tilda.

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

Порядок:

1. Добавьте T674 в конец страницы.
2. Загрузите изображение во вкладке «Контент» и сохраните.
3. Снимите цвет фона у блоков, через которые должно быть видно фото, — об этом ниже. В учебном примере оставьте цвет у текстового блока, чтобы сохранить читаемость.
4. Обновите страницу и посмотрите, где фото реально видно.

Для параллакса, когда фон стоит на месте при скролле, в настройках блока есть раздел «Эффект при скролле» с пунктом «С фиксацией» Фон в конструкторе Tilda.

Фон обычного блока: цвет и изображение

Большинство блоков в Tilda идут с готовым цветным фоном или фоновым изображением и с возможностью их редактировать Фон в конструкторе Tilda. Цвет меняется в настройках блока. Для обложки откройте «Контент» → «Фоновое изображение» и загрузите картинку Работа с обложкой.

Когда штатной замены картинки в блоке нет, есть два пути. Первый — оставить блок прозрачным и показать сквозь него фон страницы из T674. Второй — собрать этот участок в Zero Block, где фон настраивается отдельно.

Как убрать цвет и сделать блок прозрачным: в настройках блока удалите значение из поля назначения цвета и сохраните изменения — фон блока станет прозрачным Как добавить картинку на фон страницы?. В интерфейсе это поле называется «Цвет фона для всего блока» Фон в конструкторе Tilda.

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

Zero Block: цвет, картинка и градиент

Zero Block — пустой блок для индивидуального дизайна Фон в конструкторе Tilda. Внутри две рабочие области: Grid Container для сетки и Window Container для границ экрана. Фоновые элементы прикрепляют к области и масштабируют в процентах, выносные элементы — в пикселях Фон в конструкторе Tilda.

Фон блока задаётся в настройках артборда. Кликните по пустому месту внутри блока — в панели настроек появятся параметры артборда, а не отдельного элемента Zero Block. Там же задаётся цвет фона: сплошной или градиент, и загружается фоновое изображение для блока Zero Block.

Порядок для фона в Zero Block:

1. Добавьте Zero Block и нажмите «Редактировать блок».
2. Кликните по пустому месту, чтобы открыть настройки артборда.
3. Задайте цвет фона: сплошной или градиент.
4. Загрузите фоновое изображение в настройках артборда, если нужна картинка.
5. Проверьте выбранный цвет или градиент именно на фоне артборда. Настройки цвета отдельного элемента относятся к этому элементу.

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

Стили сайта: единый фон без правки каждого блока

Когда одинаковый фон нужен на многих страницах, задайте цвет фона страницы в разделе «Настройки сайта» → «Цвета и стили». Нажмите поле цвета фона страницы и выберите цвет или введите его код: настройка применяется глобально ко всем страницам Цвета и стили сайта. Собственный цвет блока перекрывает фон страницы; оставьте его там, где он нужен для читаемости текста.

Порядок настройки общего цвета и фона с фотографией:

1. Откройте «Настройки сайта» → «Цвета и стили» и задайте цвет фона страницы.
2. Для страниц с фотографией добавьте T674 и загрузите изображение.
3. Блоки, которые должны пропускать фото, оставьте без своего цвета.
4. Сохраните настройки сайта и опубликуйте проект заново, чтобы изменения вступили в силу Цвета и стили сайта. На опубликованных страницах проверьте, что старый цвет блока не закрывает нужный фон.

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

Проверка после смены фона

Чек-лист, по которому видно, что смена фона прошла целиком:

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

Мобильную версию смотрят в предпросмотре на ширине телефона и на реальном устройстве: браузер на телефоне может показать обрезку иначе, чем предпросмотр. Если фото мешает читаемости, оставьте текстовому блоку собственный цвет или соберите участок в Zero Block с отдельной подложкой — это быстрее, чем подбирать новое фото под каждый текст.

Дальше стоит свериться с тем, как устроены частые вопросы по сайту с нейросетью и с сравнением Tilda и WordPress, если решаете, оставаться ли на конструкторе.