Хотите узнать, как создать заголовок градиента с помощью Elementor?

При создании веб-страницы или шаблона с Elementor, вы можете немного поэкспериментировать с элементом заголовка, чтобы выделить создаваемую страницу. Один из экспериментов, который вы можете попробовать, - добавить эффект градиента к титровальному элементу.

Эта статья покажет вам, как туда добраться.

Вы также можете прочитать: Как создать двухцветный заголовок в Elementor

Исходная основная надпись Elementor не предлагает никаких параметров для установки эффекта градиента. Вы можете использовать только сплошной цвет для текста заголовка. Но вы можете добавить собственный CSS, чтобы добавить эффект градиента к элементу заголовка в Elementor, используя собственный CSS, который доступен только в Elementor pro.

Для этого мы предложим вам два метода: Если у вас есть про версия и вы знакомы с CSS, используйте первый метод. Но если вы хотите использовать WordPress плагины второй способ будет идеальным.

Метод 1. Добавьте эффект градиента в элемент заголовка с помощью настраиваемого CSS

Предполагая, что вы обновили свой Elementor до профессиональной версии, создайте новую страницу / шаблон и отредактируйте ее с помощью Elementor. Вы также можете редактировать существующую страницу или шаблон.

Добавьте виджет «Заголовок» в область холста, перетащив элемент «Заголовок».

В блоке Название под вкладкой Содержание, выберите уровень заголовка в опции HTML-тег. Вы можете использовать любой уровень титула. Вам понадобится это как селектор CSS.

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

Перейти на вкладку Передовой и откройте блок Пользовательский CSS и вставьте следующий код CSS.

селектор h2 {background-image: linear-gradient (справа, # 463f64, # 463f64, # e2285c, # e2285c); -webkit-background-clip: текст; дисплей: встроенный блок; отступ: 14 пикселей; -webkit-text-fill-color: # 00000000; }

Убедитесь, что селектор совпадает с уровнем заголовка, который вы выбрали на предыдущем шаге.

Вы можете изменить цвета, вставив шестнадцатеричный код понравившихся цветов в свойство. фоновая картинка.

Или вы также можете использовать следующий код для создания заголовка градиента с большим количеством цветов на градиенте.

селектор .elementor-заголовок-заголовок {фон: линейный градиент (90 градусов, красный, синий, черный); -webkit-background-clip: текст; -webkit-text-fill-color: прозрачный; }
создать заголовок градиента

Метод 2: создайте заголовок градиента в Elementor с помощью плагина

Если добавление CSS звучит пугающе для вас, есть более простой способ создать заголовок градиента в Elementor: установив дополнительное расширение. Одно расширение, которое позволяет создавать заголовок градиента, - это Счастливые аддоны.

Откройте для себя Как установить (добавить) плагин на WordPress

Happy Addons - это плагин freemium, а элемент для создания заголовка градиента (называемый Gradient Heading) доступен в бесплатной версии. Вы можете определить тип градиента (радиальный или линейный), положение градиента и местоположение.

Элемент Title также предлагает те же параметры настройки градиента, что и Happy Addons.

Вот! Вы только что создали заголовок градиента на Elementor.

Получите Elementor Pro прямо сейчас!

Откройте для себя также несколько премиальных плагинов WordPress  

Вы можете использовать другие WordPress плагины чтобы придать современный вид и оптимизировать обработку вашего блога или веб-сайта.

Мы предлагаем вам несколько премиальных плагинов WordPress, которые помогут вам сделать это.

1. Страница ошибки 404, перенаправленная на домашнюю или пользовательскую страницу

Страница ошибки 404, перенаправленная на домашнюю или пользовательскую страницу

Вот один из лучших способов легко добавить страницу с ошибкой 404, которая будет перенаправлять посетителя на домашнюю страницу или пользовательскую страницу после включения этого Плагин Wordpress.

Все страницы с ошибкой 404 будут перенаправлены на домашнюю страницу или на пользовательский URL. Используя это Плагин Wordpress, вы позволите Google снизить рейтинг страницы вашего веб-сайта, если на нем много страниц с ошибкой 404.

Откройте для себя тоже Как исправить ошибку 413 на WordPress

Ce Плагин Wordpress не просто выполняет перенаправление, но также может быть подходящим решением для улучшения рейтинга вашего веб-сайта в результатах поисковых систем.

скачать | Демонстрация | веб-хостинг

2. гав 

Woof woocommerce товары фильтр по realmag777 codecanyon

WOOF - это мощный премиальный плагин для фильтрации продуктов WooCommerce, который расширяет его функциональные возможности, позволяя пользователям вашего интернет-магазина искать по категориям, настраиваемым атрибутам продукта, ключевое слово и по индивидуальным ценам.

Он предлагает множество профессиональных и премиальных функций, и, без сомнения, это будет тот, который поразит вас больше всего, если вы попробуете их все. Это улучшит поиск продукта в вашем интернет-магазине с исключительной простотой использования.

скачать | Демонстрация | веб-хостинг

3. Контактная форма 7 Успешное перенаправление

Контактная форма 7 Успешное перенаправление

Контактная форма 7 Success Redirect является расширением плагина 7 контактной формы WordPress, который позволяет перенаправить посетителя или пользователя на страницу после отправки его контакта.

Он был разработан, чтобы сделать форму более удобной для пользователя, когда процесс отправки формы заканчивается перенаправлением на страницу, выбранную администратором. Настроить очень просто. Вы можете сделать это, выбрав страницу из существующих страниц вашей панели инструментов или предоставив Пользовательский URL Перенаправление.

Откройте для себя 8 WordPress плагины для улучшения SEO вашего блога

Каждая форма будет иметь свою конфигурацию. Таким образом, каждое успешное перенаправление может быть определено уникальным способом.

скачать | Демонстрация | веб-хостинг

Рекомендуемые ресурсы

Узнайте о других рекомендуемых ресурсах, которые помогут вам создать и управлять своим сайтом.

Заключение

Так ! Вот и все для этой статьи. Теперь вы знаете, как создать ухудшенный заголовок на WordPress с помощью Elementor плагин. Оставьте нам свой Комментарии и замечания, если у вас возникнут трудности с этим.

Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов по созданию интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress.

Не стесняйся поделиться с друзьями в ваших любимых социальных сетях

...