Искате ли да разберете как да създадете градиентно заглавие с Elementor?
Когато създавате уеб страница или шаблон с Elementor, можете да направите малък експеримент с заглавния елемент, за да откроите създадената от вас страница. Един от експериментите, които можете да опитате, е да добавите ефект на градиент към заглавния елемент.
Тази статия ще ви покаже как да стигнете до там.
Можете също да прочетете: Как да създадете двуцветно заглавие в Elementor
Елементарният заглавен блок на Elementor не предлага никакви опции за задаване на ефект на градиент. Можете да използвате плътен цвят само за текст на заглавието. Но можете да добавите персонализиран CSS, за да добавите ефект на градиент към заглавния елемент в Elementor, като използвате персонализиран CSS, който е достъпен само за Elementor pro.
За да направите това, ще ви предложим два метода: Ако имате професионалната версия и сте умели с CSS, използвайте първия метод. Но ако предпочитате да използвате плъгини за WordPress, вторият метод ще бъде перфектен.
Метод 1: Добавете градиентен ефект към елемента за заглавие, използвайки персонализиран CSS
Ако приемем, че сте надстроили вашия Elementor до про версията, създайте нова страница / шаблон и го редактирайте с Elementor. Можете също да редактирате съществуваща страница или шаблон.
Добавете виджета „Заглавие“ към областта на платното, като плъзнете и пуснете елемента „Заглавие“.
В блока Заглавие под раздела Съдържание, изберете ниво на заглавието в опцията HTML таг. Можете да използвате всяко ниво на заглавие. Това ще ви трябва като CSS селектор.
Отидете на раздела напреднал и отворете блока Персонализиран CSS и поставете следния CSS код.
селектор h2 {фоново изображение: линеен градиент (вдясно, # 463f64, # 463f64, # e2285c, # e2285c); -webkit-background-clip: текст; дисплей: вграден блок; подложка: 14px; -webkit-text-fill-color: # 00000000; }
Уверете се, че отговаряте на селектора с нивото на заглавието, което сте избрали в предишната стъпка.
Можете да промените цветовете, като поставите шестнадесетичния код на цветовете, които харесвате в свойството фоново изображение.
Или можете да използвате следния код, за да създадете заглавие на градиент с повече цветове на градиента.
селектор .elementor-heading-title {фон: линеен градиент (90 градуса, червен, син, черен); -webkit-background-clip: текст; -webkit-text-fill-color: прозрачен; }
Метод 2: Създайте градиентно заглавие в Elementor с приставка
Ако добавянето на CSS ви звучи страшно, има по-лесен начин да създадете заглавие на градиент в Elementor: чрез инсталиране на разширение за добавка. Едно разширение, което ви позволява да създадете градиентно заглавие, е Щастливи добавки.
Discover Как да инсталирате (добавите) приставка на WordPress
Happy Addons е freemium разширение, а елементът за създаване на градиентен заглавен файл е наличен в безплатната версия. Можете да дефинирате типа на градиента (радиален или линеен), позицията на градиента и неговото местоположение.
Елементът Title предлага същите опции за регулиране на градиента като Happy Addons.
Ето го! Току-що създадохте заглавие на градиент в Elementor.
Открийте и някои премиум приставки за WordPress
Можете да използвате други WordPress плъгини, за да придадете модерен вид и да оптимизирате сцеплението на вашия блог или уебсайт.
Предлагаме ви тук няколко премиум WordPress приставки, които ще ви помогнат да направите това.
1. Страница за грешка 404 Пренасочване към начална страница или персонализирана страница
Ето един от най-добрите начини за лесно добавяне на страница с грешки в 404, която ще пренасочи посетителя към началната страница или персонализирана страница, след активиране на тази приставка за WordPress.
Всички страници с грешка 404 ще бъдат пренасочени към началната страница или персонализиран URL адрес. Използвайки този плъгин за WordPress, ще позволите на Google да намали PageRank-а на вашия уебсайт, ако има много страници с грешка 404.
Открийте и вие Как да поправите грешка 413 на WordPress
Тази приставка за WordPress не просто пренасочва, но може да бъде и подходящо решение за подобряване на класирането на вашия уебсайт в резултатите от търсачките.
Изтегляне | демонстрация | уеб хостинг
2. ДЖАФ
WOOF е мощен първокласен плъгин за филтриране на продукти в WooCommerce, който разширява функционалността си, за да позволи на потребителите на вашия онлайн магазин да търсят по категория, персонализирани атрибути на продукти и други. Ключова дума и по персонализирани цени.
Той предлага тонове професионални и първокласни функции и без съмнение това ще ви удря най-много, ако изпробвате всички. Това ще подобри търсене на продукт във вашия онлайн магазин, с изключителна лекота на използване.
Изтегляне | демонстрация | уеб хостинг
3. Формуляр за връзка 7 Success Redirect
Формуляр за контакт 7 Success Redirect е разширение на приставката за формуляр за контакт на WordPress 7, която ви позволява да пренасочвате посетител или потребител към страница след подаване на неговия контакт.
Проектиран е, за да направи формуляра по-лесен за ползване, когато процесът на подаване е завършен, чрез пренасочване към страницата, избрана от администратора. Конфигурирането е изключително лесно. Можете да направите това, като изберете страница от съществуващите страници на вашето табло за управление или като предоставите Персонализиран URL адрес пренасочване.
Открийте нашите 8 WordPress плъгини за подобряване на SEO на вашия блог
Всеки формуляр ще има своя конфигурация. По този начин, всяко успешно пренасочване може да бъде определено по уникален начин.
Изтегляне | демонстрация | уеб хостинг
Препоръчителни ресурси
Открийте други препоръчани ресурси, които ще ви помогнат при създаването и управлението на вашия уебсайт.
- Препоръки: Как да увеличите доверието на посетителите си
- Как да поправим уебсайт, който няма да се актуализира незабавно
- 7 WordPress плъгини, за да вградите Google Карти на уебсайта си
- 10 WooCommerce плъгини за създаване на динамични цени
Заключение
Това е всичко! Това е всичко за тази статия. Сега знаете как да създадете градиентно заглавие в WordPress, използвайки плъгина Elementor. Оставете ни вашето мнение! Връзка и забележки, ако имате някакви затруднения при това.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress.
Не се колебайте да споделяйте с приятелите си в любимите си социални мрежи.
...