Модификации

Как сделать заголовки с единым стилем и выделением текста градиентом

2025-11-09 14:52 Бесплатные

Инструкция

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

  • Вы можете заменить <h1> на <h2>, <h3> или <h4> в зависимости от иерархии.
  • Помните: на странице должен быть только один заголовок <h1>.
  • Чтобы выделить слово градиентом — оберните его в <span class="gradient-text">…</span>.
2. Скопируйте вторую часть кода и вставьте его внутрь Head. Для этого перейдите в Настройки сайта, в открывшемся меню перейдите в раздел Ещё, после этого найдите пункт Html-код для вставки внутрь HEAD и нажмите кнопку редактировать код.
В этой части кода вы можете настраивать стиль заголовка:
— Класс .main-title отвечает за основные стили шрифта заголовка:
  • font-family — название семейства шрифта;
  • font-weight — начертание шрифта;
  • font-size — размер кегля текста;
  • line-height — межстрочное расстояние;
  • color — цвет текста.
— Класс .gradient-text отвечает за градиент:
  • background: linear-gradient(90deg, #FF37A7, #FF523B); — задаёт градиент.
  • #FF37A7, #FF523B — цвета (их можно заменить на нужные);
  • 90deg — угол градиента (тоже можно изменить).
Далее идёт адаптация под другие устройства, где вы можете скорректировать параметры под особенности вашего сайта.
<!-- Скрипт для создания градиентных заголовков на Tilda с сайта bulgkate.ru -->

<!-- Блок с заголовком (1 часть кода) -->
<div class="title-block">
<h1 class="main-title">Сделайте ваши заголовки
<span class="gradient-text">максимально</span> эффектными
</h1>
<h2 class="subtitle">Почему бы и <span class="gradient-text">нет?</span></h2>
</div>


<!-- Стиль заголовка и градиент (2 часть кода) -->
<style>
.title-block {
  text-align: center;
  max-width: 1000px;                /* ограничение ширины на десктопе */
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-inline: 20px;            /* поля слева/справа, чтобы текст не прилипал к краям */
  box-sizing: border-box;
}

.main-title {
  font-family: 'Golos Text', sans-serif;
  font-weight: 600; /* semibold */
  font-size: 50px;
  line-height: 1.2;
  color: #010101;
  margin: 0 0 30px 0; /* только между заголовком и подзаголовком */
}

.subtitle {
  font-family: 'Golos Text', sans-serif;
  font-weight: 400; /* regular */
  font-size: 20px;
  line-height: 1.4;
  color: #010101;
  margin: 0;
}

.gradient-text {
  background: linear-gradient(90deg, #FF37A7, #FF523B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* поддержка Firefox */
  text-fill-color: transparent;
}

/* адаптация для планшетов и телефонов */
@media (max-width: 768px) {
  .title-block {
    max-width: 90%;        /* блок не шире 90% */
    padding-inline: 16px;  /* чуть меньше поля */
  }

  .main-title {
    font-size: 32px;
    margin-bottom: 20px;
  }

  .subtitle {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .title-block {
    max-width: 95%;
    padding-inline: 12px;
  }

  .main-title {
    font-size: 26px;
    margin-bottom: 16px;
  }

  .subtitle {
    font-size: 14px;
  }
}
</style>