Dëshironi të krijoni një buton gradient shumëngjyrësh në Elementor ?
Sipas paracaktimit, Elementor ka një veçori për të krijuar një ngjyrë gradient për butonin tuaj, por është e kufizuar vetëm në dy ngjyra. Ky artikull do t'ju tregojë se si të krijoni një buton gradient shumëngjyrësh në Elementor pa ndihmën e një shtesë, thjesht duke përdorur CSS-në e personalizuar të Elementor.
Shtimi i një gradienti me shumë ngjyra në butonin tuaj mund ta bëjë butonin tuaj të duket tërheqës dhe të ketë një ndjenjë natyrale. Ju mund të pyesni veten, "A është e mundur të krijoni një buton gradient shumëngjyrësh në tuaj Faqja e internetit? “. Epo, gjithçka është e mundur me Elementor dhe mund të krijoni lehtësisht një buton gradient shumëngjyrësh.
Si të krijoni butonin e gradientit shumëngjyrësh në Elementor
Përpara fillimit të tutorialit, duam t'ju bëjmë të ditur se ky tutorial do të funksionojë me CSS të personalizuar. Funksioni i personalizuar CSS disponohet vetëm në Elementor Pro; prandaj sigurohuni që të përmirësoni në versionin pro.
Tani shkoni te redaktori juaj Elementor. Ne do të fillojmë nga e para, kështu që krijoni një seksion me vetëm një kolonë. Më pas, ju lutemi zgjidhni miniaplikacionin e butonit në panelin e miniaplikacioneve, më pas tërhiqeni dhe lëshojeni në zonën e redaktimit të Elementor. Pasi të keni shtuar miniaplikacionin e butonit, mund ta modifikoni dhe stiloni miniaplikacionin sipas preferencave tuaja.
Në cilësimet e miniaplikacionit, lundroni te skeda i përparuar -> Custom CSS. Kopjoni fragmentin CSS më poshtë, më pas ngjiteni në fushën e personalizuar CSS.
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;
}
Nëse jeni të kënaqur me gradientin shumëngjyrësh që është aplikuar (si në imazhin e mësipërm), mund ta mbani atë në atë mënyrë dhe ta ruani projektin tuaj nëse dëshironi. Por, nëse doni ta personalizoni, mund ta bëni këtë duke modifikuar fragmentin CSS më konkretisht në bllokun e deklarimit CSS.
Blloku i deklarimit CSS fillon me një kllapa hapëse ( {'' ) dhe përfundon me mbajtësen e djathtë mbyllëse (''} ).
Për të marrë bllokun e deklarimit, mund të krijoni një gradient duke përdorur outils gradient css në internet. Cliquez ici për të parë disa outils e gradientit CSS. Pasi të keni mbaruar krijimin e gradientit, kopjoni CSS dhe zëvendësoni bllokun ekzistues të deklarimit me një të ri duke ngjitur CSS.
Remarque: Ju gjithashtu mund të krijoni titullin e gradientit në Elementor .
Merr Elementor Pro tani!!!
Përfundim
Ky artikull tregon se sa lehtë mund të krijoni një buton gradient shumëngjyrësh në Elementor. Nëse jeni duke përdorur Elementor si një ndërtues faqesh për tuajin Faqja e internetit WordPress dhe ju dëshironi të krijoni një buton mahnitës me një gradient shumëngjyrësh, ky artikull mund të jetë zgjidhja juaj.
Butonat me një ose dy ngjyra mund të duken të thjeshtë dhe të mërzitshëm. Por kini kujdes nga krijimi i gradientëve shumëngjyrësh në butonat tuaj. Ju lutemi kushtojini vëmendje përzierjes së tonit dhe ngjyrave që përdorni në mënyrë që butonat tuaj të mos duken të çuditshëm dhe të mërzitshëm.
Këtu! Kjo është ajo për këtë artikull që ju tregon se si krijoni butonin gradient shumëngjyrësh në Elementor. Nëse keni ndonjë shqetësim se si të arrini atje, na tregoni brenda komente.
Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
