Элементор позволяет установить градиентный фон, но не градиент на самом тексте Стандартный виджет заголовка принимает только сплошной цвет, поэтому многоцветный заголовок обычно означает написание собственного CSS с background-clip: text. Вот и разрыв Градиентный заголовок виджет в Мастер-аддоны для Elementor наполняет.
С этим виджетом вы выбираете два цвета, выбираете линейный или радиальный градиент, и текст заполняется этим градиентом, без кода. вы также получаете дополнительную текстовую тень и 13 режимов смешивания, которые контролируют, как градиент смешивается с тем, что находится за ним. Это руководство охватывает каждую настройку, используя виджет, который поставляется бесплатно с главными аддонами.
Вот какой градиентный текст вы построите, заголовок, который переливается от одного цвета к другому поверх фонового изображения:
Прежде чем начать #
- Элементор установлен и активен
- Установлены и активны главные дополнения для Elementor (руководство установки)
- Страница или шаблон, открытые в редакторе Elementor
Шаг 1: Добавьте виджет заголовка градиента #
В редакторе Elementor выполните поиск на панели виджетов Градиентный заголовок и перетащите его на свою страницу. виджеты Master Addons несут значок “MA”, поэтому их легко обнаружить. редактор открывает Изменить градиентный заголовок панель с тремя вкладками: "Содержимое", "Стиль" и "Дополнительно".
Шаг 2: Установите содержимое заголовка #
На Содержание вкладка, введите свой заголовок в Заголовок поле. остальные поля здесь являются основами:
- URL-адрес заголовка превращает весь заголовок в ссылку.
- Выравнивание устанавливает его влево, в центр или вправо.
- Заголовок HTML-тег выбирает тег, от H1 до H6. Используйте H1 для основного заголовка страницы и H2 для заголовков разделов, чтобы страница сохраняла чистую структуру.
Шаг 3: Выберите градиентные цвета #
Переключиться на Стиль вкладка и открыть Градиентный стиль. Градиент проходит между двумя цветами:
- Цвет это первый цвет, с a Расположение ползунок (процент), который устанавливает место расположения текста.
- Второй цвет является конечным цветом, со своим Расположение ползунок.
Установите два цвета в палитру вашего бренда, затем подтолкните ползунки местоположения, чтобы решить, сколько текста охватывает каждый цвет. предварительный просмотр обновляется по мере перетаскивания. есть отдельный Нормальный и Наведите курсор вкладка тоже, поэтому градиент может сместиться, когда кто-то наводит курс.
Шаг 4: Выберите тип градиента, линейный или радиальный #
The Тип раскрывающийся список устанавливает форму градиента. Каждый вариант меняет местами дополнительный элемент управления, который отображается под ним:
- Радиальный разводит цвета из центральной точки. Выберите а Должность (как Центр Центр), чтобы установить, где находится эта точка.
- Линейный запускает цвета по прямой. Установите Угол чтобы контролировать направление: 180 точек градиента прямо вниз, 90 отправляет его поперек.
Радиальный хорош для свечения от середины текста Линейный - это то, что большинство людей рисуют, когда они думают “градиентный текст,” чистое затухание слева направо или сверху вниз.
Шаг 5: Добавьте текстовую тень (необязательно) #
The Текстовая тень управление добавляет глубину за буквами. щелкните карандаш, чтобы установить цвет тени, размытие, а также горизонтальное и вертикальное смещение. мягкая тень помогает градиентному тексту оставаться читаемым, когда он находится над занятым фоновым изображением.
Шаг 6: Попробуйте 13 режимов смешивания #
The Режим смешивания раскрывающийся текст решает, как градиентный текст смешивается с тем, что находится за ним, например, фоновым изображением или цветом. Есть 13 режимов:
- Нормально, умножить, экран, наложение
- Потемнейте, осветлите, цветное уклонение, насыщение
- Цвет, разница, исключение, оттенок, яркость
Нормальный сохраняет градиент как есть Остальные реагируют на фон: Множественное затемнение, Экран светлеет, Разница может инвертировать цвета для яркого взгляда Самый быстрый способ выбрать - это пролистать их и посмотреть предварительный просмотр, так как результат зависит от цветов за текстом.
Настройте Типографика для шрифта и размера, пока вы здесь, нажмите Публиковать (или Обновить) для сохранения страницы.
Где градиентный текст работает хорошо #
- Заголовки героев, где градиентный заголовок выделяется на фоне фотографии или темного раздела.
- Названия разделов это требует немного большей индивидуальности, чем плоский текст.
- Лендинги соответствие градиента цветовой гамме бренда.
- Над фоновыми изображениями, где режим смешивания связывает текст со сценой.
Часто задаваемые вопросы #
Можете ли вы добавить цвет градиента к тексту в Elementor?
Не с виджетом заголовка по умолчанию, который принимает только сплошной цвет. виджет заголовка градиента Master Addons добавляет его: выберите два цвета, выберите линейный или радиальный, и текст заполняется градиентом, не требуется пользовательский CSS.
Как сделать градиентный текст в Elementor без CSS?
Добавьте виджет "Заголовок градиента главных дополнений", введите заголовок, затем откройте вкладку "Стиль" и установите первый цвет и второй цвет. Выберите "Линейный" или "Радиальный" в разделе "Тип", и градиент будет применяться к тексту автоматически.
В чем разница между линейным и радиальным градиентным текстом?
Линейный градиент запускает цвета по прямой линии, заданной углом. радиальный градиент распространяет их из центральной точки, которую вы выбираете с помощью управления положением. Линейные масти слева направо тускнеют; радиальный подходит для свечения посередине.
Что делают режимы смешивания?
Режимы смешивания управляют тем, как градиентный текст смешивается с фоном за ним. 13 вариантов варьируются от нормального (без смешивания) до умножения, экрана, наложения, разницы и т. д. Эффект зависит от цветов, стоящих за текстом, поэтому просматривайте каждый из них заранее.
Нужен ли мне Elementor Pro для градиентного текста?
№ Виджет Gradient Headline работает с бесплатной версией Elementor, поэтому цвета градиента, типы, текстовые тени и режимы смешивания работают без Elementor Pro.
