Искате ли да създадете бутон с многоцветен градиент в Elementor ?
По подразбиране Elementor има функция за създаване на градиентен цвят за вашия бутон, но е ограничен само до два цвята. Тази статия ще ви покаже как да създадете бутон с многоцветен градиент Elementor без помощта на добавка, просто използвайки персонализирания CSS на Elementor.
Добавянето на многоцветен градиент към вашия бутон може да направи бутона ви да изглежда привлекателен и да има естествено усещане. Може би се чудите: „Възможно ли е да създадете бутон с многоцветен градиент на вашия уебсайт? ”. Е, всичко е възможно с Elementor и можете лесно да създадете бутон за многоцветен градиент.
Как да създадете бутон за многоцветен градиент в Elementor
Преди да започнем урока, искаме да ви уведомим, че този урок ще работи с персонализиран CSS. Персонализираната CSS функция е достъпна само на Elementor Pro; така че не забравяйте да надстроите до професионалната версия.
Сега отидете на вашия редактор на Elementor. Ще започнем от нулата, така че създайте раздел само с една колона. След това, моля, изберете приспособлението за бутон в панела с приспособления и след това го плъзнете и пуснете в областта за редактиране на Elementor. След като добавите приспособлението за бутони, можете да редактирате и стилизирате приспособлението според вашите предпочитания.
В настройките на джаджа отидете до раздела напреднал -> Персонализиран CSS. Копирайте CSS фрагмента по-долу, след което го поставете в персонализираното 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;
}
Ако сте доволни от многоцветния градиент, който е бил приложен (както на изображението по-горе), можете да го запазите така и да запазите проекта си, ако желаете. Но ако искате да го персонализирате, можете да го направите, като промените CSS фрагмента по-конкретно в блока за CSS декларация.
Блокът за CSS декларация започва с отваряща скоба ( {'' ) и завършва със затваряща дясна скоба (''} ).
За да получите декларационния блок, можете да създадете градиент, като използвате OUTILS онлайн градиент css. Cliquez ICI да видя някои OUTILS на CSS градиент. След като приключите със създаването на градиента, копирайте CSS и заменете съществуващия блок за декларация с нов, като поставите CSS.
Ремарк: Можете също създайте градиентно заглавие в Elementor .
Вземете Elementor Pro сега!!!
Заключение
Тази статия показва колко лесно можете да създадете бутон с многоцветен градиент в Elementor. Ако използвате Elementor като създател на страници за вашия уебсайт WordPress и искате да създадете зашеметяващ бутон с многоцветен градиент, тази статия може да бъде вашето решение.
Едноцветните или двуцветните копчета могат да изглеждат прости и скучни. Но внимавайте да създавате многоцветни градиенти върху вашите бутони. Моля, обърнете внимание на тона и цветовата комбинация, която използвате, за да не изглеждат бутоните ви странни и скучни.
Тук ! Това е за тази статия, която ви показва как създайте бутон за многоцветен градиент в Elementor. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни в рамките на Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...