Doriți să aflați cum să creați un titlu de gradient cu Elementor?

Când creați o pagină web sau un șablon cu Elementor, puteți face un mic experiment cu elementul titlu pentru a evidenția pagina pe care o creați. Unul dintre experimentele pe care le puteți încerca este să adăugați un efect de gradient elementului titlu.

Acest articol vă va arăta cum să ajungeți acolo.

De asemenea, puteți citi: Cum se creează un titlu în două culori în Elementor

Blocul de titlu nativ al Elementor nu oferă opțiuni pentru a seta un efect de gradient. Puteți utiliza numai culoarea solidă pentru textul titlului. Dar puteți adăuga CSS personalizat pentru a adăuga un efect de gradient elementului titlu în Elementor folosind CSS personalizat, care este disponibil numai pe Elementor pro.

Pentru a face acest lucru, vă vom oferi două metode: Dacă aveți versiunea pro și vă simțiți confortabil cu CSS, utilizați prima metodă. Dar dacă îți place să folosești WordPress plugin-uri a doua metodă va fi perfectă.

Metoda 1: Adăugați un efect de gradient pe elementul de titlu cu CSS personalizat

Presupunând că v-ați actualizat Elementor la versiunea pro, creați o nouă pagină / șablon și editați-l cu Elementor. De asemenea, puteți edita o pagină sau un șablon existent.

Adăugați widgetul Titlu în zona pânzei prin glisarea și plasarea elementului Titlu.

În bloc Titlu sub filă Conţinut, selectați un nivel de titlu în opțiune Etichetă HTML. Puteți utiliza orice nivel de titlu. Veți avea nevoie de acest lucru ca selector CSS.

creați un titlu de gradient

Accesați fila avansat și deschideți blocul CSS personalizate și lipiți următorul cod CSS.

selector h2 {background-image: gradient-liniar (în dreapta, # 463f64, # 463f64, # e2285c, # e2285c); -webkit-background-clip: text; afișaj: bloc în linie; căptușeală: 14 px; -webkit-text-fill-color: # 00000000; }

Asigurați-vă că potriviți selectorul cu nivelul titlului selectat la pasul anterior.

Puteți schimba culorile lipind codul hexazecimal al culorilor care vă plac pe proprietate imagine de fundal.

Sau puteți utiliza, de asemenea, următorul cod pentru a crea un titlu de gradient cu mai multe culori pe gradient.

selector .elementor-heading-title {fundal: gradient liniar (90 de grade, roșu, albastru, negru); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
creați un titlu de gradient

Metoda 2: Creați un titlu de gradient în Elementor cu un plugin

Dacă adăugarea CSS vi se pare înfricoșătoare, există o modalitate mai ușoară de a crea un titlu de gradient în Elementor: prin instalarea unei extensii de completare. O extensie care vă permite să creați un titlu de gradient este Addons fericiți.

Descopera Cum se instalează (se adaugă) un plugin pe WordPress

Happy Addons este un plugin freemium și elementul pentru a crea un titlu de gradient (numit Titlu de gradient) este disponibil în versiunea gratuită. Puteți defini tipul de gradient (radial sau liniar), poziția gradientului și locația.

Elementul Title oferă, de asemenea, aceleași opțiuni de ajustare a gradientului ca și Happy Addons.

Aici este! Tocmai ați creat un titlu de gradient pe Elementor.

Obțineți Elementor Pro acum!

Descoperiți și câteva plugin-uri premium WordPress  

Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.

Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.

1. Pagină de eroare 404 Redirecționați către pagina de pornire sau pagina personalizată

Pagina de eroare 404 Redirecționați către pagina de pornire sau pagina personalizată

Iată una dintre cele mai bune modalități de a adăuga cu ușurință o pagină de eroare 404 care va redirecționa vizitatorul către pagina de pornire sau pagina personalizată, după activarea acestei WordPress plug-in.

Toate paginile de eroare 404 vor fi redirecționate către pagina de pornire sau către o adresă URL personalizată. Folosind aceasta WordPress plug-in, veți permite Google să reducă pagerank-ul site-ului dvs. dacă are multe pagini de eroare 404.

Descoperă și tu Cum să remediați eroarea 413 pe WordPress

Ce WordPress plug-in nu face doar redirecționare, ci poate fi și o soluție potrivită pentru a îmbunătăți clasarea site-ului dvs. în rezultatele motoarelor de căutare.

Descarca | Demo | web hosting

2. bătătură 

Produsele Woof woocommerce filtrează după codmec777 realmagXNUMX

WOOF este un puternic plugin premium de filtrare a produselor WooCommerce care își extinde funcționalitatea pentru a permite utilizatorilor magazinului dvs. online să caute după categorii, atribute personalizate ale produsului, prin cuvinte cheie și prin prețuri personalizate.

Oferă o mulțime de funcții profesionale și premium și, fără îndoială, acesta va fi cel care vă lovește cel mai mult, dacă le încercați pe toate. Acesta va îmbunătăți căutare de produse pe magazinul dvs. online, cu o ușurință excepțională de utilizare.

Descarca | Demo | web hosting

3. Formular de contact 7 Succes Redirect

Formular de contact 7 Redirecționare de succes

Formularul de contact 7 Redirecționare de succes este o extensie a pluginului Formular de contact 7 care vă permite să redirecționați un vizitator sau un utilizator către o pagină după trimiterea contactului său.

Acesta a fost conceput pentru a face formularul mai ușor de utilizat atunci când procesul de trimitere a formularului are ca rezultat redirecționarea către pagina aleasă de administrator. Este extrem de ușor de configurat. Puteți face acest lucru selectând o pagină din paginile existente ale tabloului de bord sau oferind un URL personalizată redirecționare.

Descoperiți-ne Pluginurile 8 WordPress pentru a îmbunătăți SEO-ul blogului dvs.

Fiecare formular va avea propria configurație. Astfel, fiecare redirecționare reușită poate fi definită într-un mod unic.

Descarca | Demo | web hosting

Resurse recomandate

Aflați despre alte resurse recomandate pentru a vă ajuta să construiți și să gestionați site-ul dvs. web.

Concluzie

Asa de ! Asta e pentru acest articol. Acum veți ști cum să creați un titlu degradat pe WordPress cu Plugin Elementor. Lasă-ne al tău comentarii și observații dacă aveți dificultăți în a face acest lucru.

Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru pentru Creare blog WordPress.

Nu ezita sa împărtășiți cu prietenii de pe rețelele de socializare preferate

...