Czy chcesz utworzyć wielokolorowy przycisk gradientu w Elementor ?
Domyślnie Elementor ma funkcję tworzenia koloru gradientu dla przycisku, ale jest ona ograniczona tylko do dwóch kolorów. W tym artykule dowiesz się, jak utworzyć przycisk gradientu wielokolorowego Elementor bez pomocy dodatku, po prostu używając niestandardowego CSS Elementora.
Dodanie wielokolorowego gradientu do przycisku może sprawić, że będzie wyglądał atrakcyjnie i będzie wyglądał naturalnie. Być może zastanawiasz się: „Czy można utworzyć wielokolorowy przycisk gradientu na twoim strona internetowa? ”. Cóż, wszystko jest możliwe dzięki Elementorowi i możesz łatwo utworzyć przycisk gradientu wielokolorowego.
Jak utworzyć wielokolorowy przycisk gradientu w Elementorze
Przed rozpoczęciem samouczka chcemy Cię poinformować, że ten samouczek będzie działał z niestandardowym CSS. Niestandardowa funkcja CSS jest dostępna tylko w Elementor Pro; więc koniecznie uaktualnij do wersji pro.
Teraz przejdź do edytora Elementora. Zaczniemy od zera, więc utwórz sekcję z tylko jedną kolumną. Następnie wybierz widżet przycisku w panelu widżetów, a następnie przeciągnij go i upuść w obszarze edycji Elementora. Po dodaniu widżetu przycisku możesz edytować i stylizować widżet zgodnie ze swoimi preferencjami.
W ustawieniach widżetu przejdź do zakładki zaawansowany -> Niestandardowy CSS. Skopiuj poniższy fragment kodu CSS, a następnie wklej go w niestandardowym polu 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;
}
Jeśli jesteś zadowolony z zastosowanego gradientu wielokolorowego (jak na powyższym obrazku), możesz go zachować i zapisać swój projekt, jeśli chcesz. Ale jeśli chcesz go dostosować, możesz to zrobić, modyfikując fragment kodu CSS bardziej szczegółowo w bloku deklaracji CSS.
Blok deklaracji CSS zaczyna się otwierającym nawiasem klamrowym ( {'' ) i kończy się zamykającym prawym nawiasem klamrowym(''} ).
Aby uzyskać blok deklaracji, możesz utworzyć gradient za pomocą narzędzia online gradient css. Clicca zobaczyć trochę narzędzia gradientu CSS. Po zakończeniu tworzenia gradientu skopiuj CSS i zastąp istniejący blok deklaracji nowym, wklejając CSS.
Uwaga: Możesz także utwórz tytuł gradientu w Elementorze .
Pobierz Elementor Pro teraz !!!
Wnioski
W tym artykule pokazano, jak łatwo możesz utworzyć przycisk gradientu wielokolorowego w Elementorze. Jeśli używasz Elementora jako kreatora stron dla swojego strona internetowa WordPress i chcesz stworzyć oszałamiający przycisk z wielokolorowym gradientem, ten artykuł może być Twoim rozwiązaniem.
Jednokolorowe lub dwukolorowe przyciski mogą wyglądać na proste i nudne. Ale uważaj na tworzenie wielokolorowych gradientów na swoich przyciskach. Zwróć uwagę na ton i mieszankę kolorów, aby Twoje przyciski nie wyglądały dziwnie i nudno.
Tutaj ! To tyle, jeśli chodzi o ten artykuł, który pokazuje, jak utwórz wielokolorowy przycisk gradientu w Elementorze. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj nam znać w ciągu commentaires.
Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
