Градиент для фона Тильда

Есть несколько вариантов как сделать градиент для фона в Тильде. Начнем с простых стандартных способов и дальше разберем более сложные варианты.

Добавление градиента в фон через обложку

Наверное, самый простой способ применения градиента к фону — поиск картинки с градиентом. Найти фоновые картинки с градиентом можно в поисковых системах или на сервисе Тильды —Tilda Colors.

Здесь вы можете подобрать понравившийся градиент. Их тут довольно много. Когда выберете, кликайте на стрелочки «Во весь экран»:

Вам откроется градиент во всей красе. Чтобы его скачать, кликайте на соответствующую кнопку в правом верхнем углу:

Теперь, когда градиент уже сохранен, вы сможете добавить его как обложку к блоку. Такой вариант подходит для Zero block и для стандартных блоков, у которых есть возможность добавления обложек на фон.

Плавное изменение фона у блоков

Это вариант не очень походит для получения градиента к фону. Но плавность и переливание цветов на фоне он дает. А поэтому в этой теме мы его тоже должны упомянуть.

Смотрите, как это выглядит в действии:

Как сделать такую плавную смену цвета? Инструкция ниже:

1. Задайте необходимые разные цвета фона для ваших блоков. Т.е. фон одного блока будет плавно переходить в фон другого.
2. Между этими блоками (с разными цветами фона) добавьте блок DV11A (Переключатель цвета фона. Плавная смена цвета). Он находится в Все блоки -> Разделитель:

3. Задайте в настройках блока «Переключатель цвета фона» цвет, на который будет переключатся цвет фона. Выберите тот цвет, который стоит на фоне следующего блока после переключателя.
4. Сохраните и опубликуйте страницу.

Вот и все, плавный переход работает.

Добавление градиента к любому блоку через вставку HTML-кода

Вот этот трюк немного сложнее. Но и преимущества у него очевидные — вы можете применить градиент к любому блоку в Тильде.

Что нужно сделать:

1. Добавьте блок на страницу. Для примера я взял стандартный блок из раздела «Преимущества» FR101.
2. Опубликуйте страницу. Нам нужно посмотреть код опубликованной страницы, чтобы увидеть класс блока, к которому будет применен градиент.
3. Зайдите на опубликованную страницу и вызовите инспектор. Это можно сделать нажав кнопку F12, Ctrl+Shift+I (или Cmd+Opt+I для Mac). Также можно кликнуть правой кнопкой мыши на любую зону вашего блока и нажать «Посмотреть Код»:

4. Каждый блок Тильды отграничивается от другого разделителем. В нашем случае это:

<!— t508 —>

Сразу под ним вы увидите класс блока Преимуществ:

Скопируйте класс блока. В нашем примере это будет t508

5. Теперь вернитесь в редактор странице на Тильде. Добавьте блок T123 (HTML-код). Найти его можно в разделе Все блоки -> Другое. В контент блока вам нужно вставить следующий код:

<style>
.t508 {
background-image: linear-gradient(0deg, #FA709A, #FEE140);
}
</style>

Где:

• .t508 — класс блока, который вы получили из инспектора
• 0deg — угол наклона градиента в градусах. Если вы зададите 90deg, то смена цвета будет проходить по горизонтали.
• #FA709A — начальный цвет градиента. Тут вставляете выбранный нужный цвет
• #FEE140 — конечный цвет градиента. Тут тоже вставляете выбранный нужный цвет.

Получается такая картина в блоке:

6. Сохраните и опубликуйте страницу. У меня получилось вот так:

У вас получится еще лучше.

Ну а если, что-то не получилось, опишите подробно проблему. Мы попробуем вам помочь с добавлением градиента в фон Тильды.