Doriți să creați un buton cu gradient multicolor Elementor ?
În mod implicit, Elementor are o caracteristică pentru a crea o culoare gradient pentru butonul dvs., dar este limitată doar la două culori. Acest articol vă va arăta cum să creați un buton cu gradient multicolor Elementor fără ajutorul unui add-on, folosind doar CSS-ul personalizat al Elementor.
Adăugarea unui gradient multicolor la butonul dvs. poate face ca butonul să arate atractiv și să aibă o senzație naturală. S-ar putea să vă întrebați: „Este posibil să creați un buton cu gradient multicolor pe dvs site-ul web? ”. Ei bine, totul este posibil cu Elementor și poți crea cu ușurință un buton cu gradient multicolor.
Cum se creează un buton cu gradient multicolor în Elementor
Înainte de a începe tutorialul, vrem să vă anunțăm că acest tutorial va funcționa cu CSS personalizat. Funcția CSS personalizată este disponibilă numai pe Elementor Pro; deci asigurați-vă că faceți upgrade la versiunea pro.
Acum accesați editorul dvs. Elementor. Vom începe de la zero, așa că creați o secțiune cu o singură coloană. Apoi, vă rugăm să selectați butonul widget din panoul widget, apoi trageți și plasați-l în zona de editare a Elementor. După ce ați adăugat widget-ul buton, puteți edita și stiliza widget-ul în funcție de preferințele dvs.
În setările widget-ului, navigați la fila avansat -> CSS personalizate. Copiați fragmentul CSS de mai jos, apoi inserați-l în câmpul CSS personalizat.
selector .elementor-button {
background: linear-gradient(121.28deg, #A4006C 0%, #FFECA8 100%), linear-gradient(121.28deg, #69003F 0%, #FFF8F8 100%), linear-gradient(238.72deg, #00FFFF 0%, #0212A4 100%), radial-gradient(67.16% 100% at 50% 0%, #FF00B8 0%, #FFFFFF 100%), linear-gradient(140.54deg, #7000FF 0%, #001AFF 72.37%), linear-gradient(307.43deg, #FFE927 0%, #00114D 100%), radial-gradient(107% 142.8% at 15.71% 104.5%, #FFFFFF 0%, #A7AA00 100%), #FFFFFF;
background-blend-mode: overlay, difference, difference, overlay, difference, difference, difference, normal;
}
Dacă sunteți mulțumit de gradientul multicolor care a fost aplicat (ca în imaginea de mai sus), îl puteți păstra așa și puteți salva proiectul dacă doriți. Dar, dacă doriți să o personalizați, puteți face acest lucru modificând fragmentul CSS mai precis pe blocul de declarare CSS.
Blocul de declarație CSS începe cu o acolade de deschidere ( {'' ) și se termină cu acolada dreaptă de închidere (''} ).
Pentru a obține blocul de declarare, puteți crea un gradient folosind OUTILS gradient online css. Cliquez ici pentru a vedea unele OUTILS de gradient CSS. După ce ați terminat de creat gradientul, copiați CSS-ul și înlocuiți blocul de declarație existent cu unul nou prin lipirea CSS-ului.
Notă: Poti de asemenea creați un titlu de gradient în Elementor .
Obțineți Elementor Pro acum!!!
Concluzie
Acest articol arată cât de ușor puteți crea un buton gradient multicolor în Elementor. Dacă utilizați Elementor ca generator de pagini pentru dvs site-ul web WordPress și vrei să creezi un buton uimitor cu un gradient multicolor, acest articol ar putea fi soluția ta.
Butoanele cu o culoare sau cu două culori pot părea simple și plictisitoare. Dar ferește-te de a crea degrade multicolore pe butoanele tale. Vă rugăm să acordați atenție tonului și amestecului de culori pe care îl utilizați, astfel încât butoanele să nu arate ciudat și plictisitor.
Aici ! Gata pentru acest articol care vă arată cum creați un buton de gradient multicolor în Elementor. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.
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 cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
