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

🗓️ Обновлено: 30.08.2021
💬Комментариев: 0
👁️Просмотров: 2174
web

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<!— t508 —>

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

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

  1. Теперь вернитесь в редактор странице на Тильде. Добавьте блок T123 (HTML-код). Найти его можно в разделе Все блоки -> Другое. В контент блока вам нужно вставить следующий код:
<style>
.t508 {
background-image: linear-gradient(0deg, #FA709A, #FEE140);
}
</style>

Где:

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

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

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

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

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

Статья была полезной?
👍
Да - 3
👎
Нет - 1
💬Комментарии:

CSS Головоломки в Telegram
Подписывайся и не пропускай:
Актуальные новости
Интересные задачки
Полезные подборки
Наш рейтинг
🏆Лучший хостинг для сайта
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Как сделать гамбургер (бургер) меню — готовый код и подробное объяснение
Просмотров: 18275
Появление элементов при скролле
Просмотров: 16835
Перенос сайта на Тильде на свой хостинг. Пошаговое руководство
Просмотров: 8525
Как выровнять картинку по центру с помощью CSS
Просмотров: 6946
Как сделать плавное увеличение картинки при наведении — эффект на чистом CSS
Просмотров: 6785
Проверка знаний
🤔Хорошо ли вы знаете CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Цвет 2022 года
Институт цвета Pantone объявил цвет 2022 года. Это сиреневый оттенок под названием 17-3938 Very Peri.
#6667ab