Бесплатный текстовый виджет градиента элементара
Виджет Elementor's Heading принимает только сплошной цвет текста, поэтому градиентный текст обычно означает запись CSS с помощью background-clip: text. Виджет Градиент Заголовок в бесплатном плагине Master Addons делает это с панели. Введите заголовок, выберите два цвета, выберите линейный или радиальный градиент, и буквы заполняются им. Вы также получаете отдельный градиент наведения, 13 режимов смешивания, текстовую тень, ссылку и выбор тега заголовка. Он подходит для названий героев, заголовков разделов и баннеров продаж.
Как добавить градиентный текст в Elementor
Вам нужен Elementor и бесплатный плагин Master Addons. нет пользовательских CSS и нет Elementor Pro.
- Установить и активировать Мастер-адреса от WordPress.org.
- Отредактируйте свою страницу с помощью Elementor, найдите панель виджетов Градиентный заголовок и втащить.
- Введите свой текст Заголовокзатем установите тег и выравнивание заголовка HTML.
- В стиле градиентного стиля выберите первый цвет и второй цвет и отрегулируйте ползунки местоположения.
- Выберите "Линейный", установите угол или "Радиальный" и установите положение.
- Установите типографику, попробуйте режим смешивания фона и, если хотите, добавьте градиент зависания.
Скриншоты каждого шага находятся в градиентное текстовое руководство.
Два цветных линейных или радиальных градиента
В стиле, Градиентный стиль, набор Цвет текста в градиент (или Классика для простого цвета). Выберите первый Цвет и Второй цвети перемещайте каждый Расположение слайдер, чтобы решить, где один сливается с другим. Тип переключается между линейными, с Угол (180 градусов по умолчанию проходит сверху вниз) и Radial с a Должность такие как Центр Центр. градиент, который перемещается за целым разделом вместо текста, см Анимированный градиент BG расширение (Про).
- Вкладки "Нормальный" и "Наведение": установите второй градиент, который появляется, когда посетители навевают курс.
- Каждый градиент использует два цветовые упоры Для трех или более цветов вам понадобится пользовательский CSS.
- По умолчанию используются фиолетовые (#9929ea) до красных (#FB083E), поэтому сначала измените их на цвета вашего бренда.
Заголовок элементара с заголовком CSS против градиента
Вы можете сделать градиентный текст с помощью собственного виджета заголовка Elementor, если вам удобно с CSS. Вот что включает в себя каждый маршрут.
| Особенность | Заголовок Элементора + CSS | Заголовок градиента Master Addons |
|---|---|---|
| Настройка | Добавьте CSS с фоновым клипом: текст в WordPress, дополнительные CSS, Elementor Pro Custom CSS или бесплатные главные дополнения Пользовательское расширение CSS | Выберите цвета на панели |
| Градиентные типы | Все, что позволяет CSS, включая три или более цвета | Линейный или радиальный, два цветных упора |
| Градиент зависания | Дополнительный CSS | Встроенная вкладка "Наведение" |
| Смешайте режимы и тень | Дополнительный CSS | 13 режимов смешивания и управление тенью текста |
| Цена | Бесплатно, если вы пишете CSS самостоятельно | Бесплатно с главными дополнениями |
Напишите CSS, если вам нужно более двух цветов или анимированный градиент. используйте градиентный заголовок, когда вы хотите настроить его визуально за минуту. связанные бесплатные виджеты: Двойной заголовок и Анимированные заголовки.
Типографика, режимы смешивания и тень текста
Каждая вкладка имеет свою Типографика, так что шрифт, размер и вес могут меняться и при зависании. Режим смешивания предлагает 13 вариантов: от нормального, умноженного и экрана до разницы и светимости, которые смешивают градиент с изображением или цветом за текстом. Текстовая тень добавляет цвет, размытие и смещение для дополнительной глубины или читаемости по сравнению с занятыми фотографиями.
- Градиенты - это чистый CSS, поэтому изображения для загрузки нет.
- Режимы смешивания реагируют на все, что находится за заголовком, поэтому просматривайте их на реальном фоне.
- Сохраняйте достаточный контраст между обоими цветами и фоном для читаемости.
Ссылка, тег заголовка и выравнивание
Во вкладке Содержимое добавьте a URL-адрес заголовка чтобы сделать ссылку на весь заголовок. Выберите Заголовок HTML-тег (от H1 до H6, div, span или p), чтобы заголовок соответствовал структуре и набору вашей страницы Выравнивание влево, в центр или вправо.
- Используйте один H1 на странице, обычно заголовок героя, и H2 для заголовков разделов.
- Связанный градиентный заголовок хорошо подходит для рекламного баннера, который идет в магазин.
- Текст заголовка поддерживает встроенное редактирование в предварительном просмотре Elementor.
Часто задаваемые вопросы для заголовка градиента
Виджет Gradient Headline бесплатен?
Да. является частью бесплатного плагина Master Addons и работает со свободным Elementor, поэтому для градиентного текста вам не нужен Elementor Pro.
Могу ли я использовать более двух цветов в градиенте?
Нет. каждый градиент имеет два цветовые упоры, первый Цвет и Второй Цвет. перемещение ползунков Местоположение меняет то, насколько резкий или мягкий смесь Для трех или более цветов добавьте свой собственный CSS в обычный заголовок.
Будет ли градиентный текст замедлять работу моего сайта?
Нет. Градиент является простым CSS в тексте заголовка, поэтому файл изображения не подлежит загрузке.
Может ли градиент измениться при зависании?
Да. вкладка "Наведение курсора" в градиентном стиле имеет свои собственные цвета, местоположения, тип, угол или положение, типографику, режим смешивания и текстовую тень, поэтому заголовок может переключаться на другой градиент, когда посетители его наведут.
Виджеты и расширения трендовых элементов
Создавайте сложные веб-сайты за меньшее время.
Стекломорфизм
Дополнительные контейнеры
Шаблоны
![Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Дубликатор сообщений/страниц
