Как сделать градиент текста в Elementor Pro с помощью CSS кода 🔥

[Михаил Молчанов]

Градиентный текст — это стильный современный тренд в веб-дизайне, который может сделать ваш сайт более привлекательным. В Elementor Pro нет встроенной функции для создания градиентного текста, но это легко реализовать с помощью CSS. В этой статье я покажу вам несколько способов.

Способ 1: Базовый CSS градиент для текста

1. Добавьте виджет "Заголовок" или "Текст" на вашу страницу
2. Перейдите в настройки виджета → вкладка "Дополнительно" → "Custom CSS"
3. Вставьте следующий код:

Код: Выделить всё

selector {
    background: linear-gradient(90deg, #FF512F 0%, #DD2476 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

Где:

• linear-gradient(90deg, #FF512F 0%, #DD2476 100%) — настройки градиента (угол, цвета)
• selector автоматически заменится Elementor на нужный класс

Способ 2: Анимированный градиент

Для более эффектного результата можно добавить анимацию градиента:

Код: Выделить всё

selector {
    background: linear-gradient(90deg, #FF512F, #DD2476, #FF512F);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    animation: gradientText 3s linear infinite;
}

@keyframes gradientText {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}

Способ 3: Радиальный градиент

Для создания радиального (кругового) градиента:

Код: Выделить всё

selector {
    background: radial-gradient(circle, #FF512F 0%, #DD2476 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

Советы по настройке:

1. Выбор цветов: Используйте контрастные, но гармоничные цвета. Можно подобрать палитру на Coolors.co или Adobe Color.

2. Направление градиента: Изменяйте первый параметр в linear-gradient:

   • 90deg — слева направо
   • 45deg — по диагонали
   • to right — альтернативный синтаксис

3. Поддержка браузеров: Этот метод работает во всех современных браузерах.

4. Резервный цвет: Добавьте обычный цвет текста перед градиентом для совместимости:

Код: Выделить всё

selector {
    color: #FF512F; /* Резервный цвет */
    background: linear-gradient(90deg, #FF512F 0%, #DD2476 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

Примеры готовых градиентов:

1. Оранжево-розовый:

   Код: Выделить всё

   background: linear-gradient(90deg, #FF9966 0%, #FF5E62 100%);

2. Сине-фиолетовый:

   Код: Выделить всё

   background: linear-gradient(90deg, #4776E6 0%, #8E54E9 100%);

3. Неоновый:

   Код: Выделить всё

   background: linear-gradient(90deg, #A6FFCB 0%, #12D8FA 50%, #1FA2FF 100%);

Градиентный текст — это простой способ добавить современный акцент в ваш дизайн без использования изображений. Экспериментируйте с цветами и направлениями, чтобы найти идеальный вариант для вашего сайта!