Czy chcesz dowiedzieć się, jak utworzyć tytuł gradientowy za pomocą Elementora?

Tworząc stronę internetową lub szablon z Elementor, możesz poeksperymentować z elementem tytułu, aby wyróżnić tworzoną stronę. Jednym z eksperymentów, które możesz wypróbować, jest dodanie efektu gradientu do elementu tytułowego.

Z tego artykułu dowiesz się, jak się tam dostać.

Możesz również przeczytać: Jak stworzyć dwukolorowy tytuł w Elementorze

Natywny blok tytułowy Elementora nie oferuje żadnych opcji ustawienia efektu gradientu. W tekście tytułu można używać tylko jednolitego koloru. Ale możesz dodać niestandardowy CSS, aby dodać efekt gradientu do elementu tytułu w Elementorze, używając niestandardowego CSS, który jest dostępny tylko w Elementorze pro.

Aby to zrobić, zaproponujemy Ci dwie metody: Jeśli masz wersję pro i dobrze znasz CSS, użyj pierwszej metody. Ale jeśli lubisz używać WordPress wtyczki druga metoda będzie idealna.

Metoda 1: Dodaj efekt gradientu do elementu tytułu za pomocą niestandardowego CSS

Zakładając, że zaktualizowałeś swój Elementor do wersji pro, utwórz nową stronę / szablon i edytuj ją za pomocą Elementora. Możesz także edytować istniejącą stronę lub szablon.

Dodaj widżet Tytuł do obszaru kanwy, przeciągając i upuszczając element Tytuł.

W bloku Tytuł pod zakładką Zawartość, wybierz poziom tytułu w opcji Znacznik HTML. Możesz użyć dowolnego poziomu tytułu. Będziesz potrzebować tego jako selektora CSS.

utwórz tytuł gradientowy

Przejdź do zakładki zaawansowany i otwórz blok Niestandardowy CSS i wklej następujący kod CSS.

selektor h2 {obraz w tle: gradient liniowy (po prawej, # 463f64, # 463f64, # e2285c, # e2285c); -webkit-background-clip: tekst; wyświetlacz: inline-block; wypełnienie: 14px; -webkit-tekst-wypełnienie-kolor: # 00000000; }

Upewnij się, że selektor jest dopasowany do poziomu tytułu wybranego w poprzednim kroku.

Możesz zmienić kolory, wklejając kod szesnastkowy kolorów, które lubisz na właściwości zdjęcie w tle.

Możesz też użyć poniższego kodu, aby utworzyć tytuł gradientu z większą liczbą kolorów na gradiencie.

selector .elementor-heading-title {tło: gradient liniowy (90deg, czerwony, niebieski, czarny); -webkit-background-clip: tekst; -webkit-text-fill-color: przezroczysty; }
utwórz tytuł gradientowy

Metoda 2: Utwórz tytuł gradientu w Elementorze za pomocą wtyczki

Jeśli dodanie CSS brzmi dla Ciebie przerażająco, istnieje prostszy sposób na utworzenie gradientowego tytułu w Elementorze: instalując rozszerzenie. Jednym z rozszerzeń, które umożliwia tworzenie tytułów z gradientem, jest Szczęśliwe dodatki.

Odkrywaj Jak zainstalować (dodać) wtyczkę na WordPress

Happy Addons to wtyczka freemium, a element do tworzenia gradientowego tytułu (nazywany Gradient Heading) jest dostępny w darmowej wersji. Możesz zdefiniować rodzaj gradientu (promieniowy lub liniowy), położenie gradientu i lokalizację.

Element Tytuł oferuje również te same opcje dostosowania gradientu, co Wesołe dodatki.

Tutaj jest! Właśnie utworzyłeś tytuł gradientu na Elementorze.

Pobierz Elementor Pro teraz!

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. Strona błędu 404 Przekieruj na stronę główną lub niestandardową

Strona błędu 404 Przekieruj na stronę główną lub stronę niestandardową

Oto jeden z najlepszych sposobów łatwego dodania strony błędu 404, która po włączeniu tej opcji przekieruje użytkownika na stronę główną lub stronę niestandardową WordPress Plugin.

Wszystkie strony błędu 404 zostaną przekierowane na stronę główną lub niestandardowy adres URL. Używając tego WordPress Plugin, pozwolisz Google obniżyć PageRank Twojej witryny, jeśli zawiera ona wiele stron z błędami 404.

Odkryj też Jak naprawić błąd 413 na WordPress

Ce WordPress Plugin nie tylko przekierowuje, ale może być również odpowiednim rozwiązaniem poprawiającym ranking Twojej witryny w wynikach wyszukiwania.

Pobierz | Demo | hosting

2. WOOF 

Woof produkty woocommerce filtrują według realmag777 codecanyon

WOOF to potężna wtyczka do filtrowania produktów premium WooCommerce, która rozszerza swoją funkcjonalność, aby umożliwić użytkownikom sklepu internetowego wyszukiwanie według kategorii, niestandardowych atrybutów produktów, według Hasło oraz według spersonalizowanych cen.

Oferuje mnóstwo profesjonalnych i premium funkcji i bez wątpienia będzie to ta, która uderzy Cię najbardziej, jeśli wypróbujesz je wszystkie. Poprawi to wyszukiwanie produktów w Twoim sklepie internetowym, z wyjątkową łatwością użytkowania.

Pobierz | Demo | hosting

3. Formularz kontaktowy 7 Sukces przekierowania

Formularz kontaktowy 7 Success Redirect

Formularz kontaktowy 7 Success Redirect jest rozszerzeniem wtyczki 7 do formularza kontaktowego WordPress, która pozwala przekierować użytkownika lub użytkownika na stronę po przesłaniu jego kontaktu.

Został zaprojektowany, aby uczynić formularz bardziej przyjaznym dla użytkownika, gdy proces przesyłania formularza kończy się przekierowaniem na stronę wybraną przez administratora. Jest niezwykle łatwy w konfiguracji. Możesz to zrobić, wybierając stronę z istniejących stron pulpitu nawigacyjnego lub podając plik Niestandardowy adres URL przekierowanie.

Odkryj nasze Wtyczki 8 WordPress, aby poprawić SEO swojego bloga

Każdy formularz będzie miał własną konfigurację. Dlatego każde udane przekierowanie można zdefiniować w unikalny sposób.

Pobierz | Demo | hosting

Polecane zasoby

Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.

Wnioski

Więc ! To tyle w tym artykule. Teraz dowiesz się, jak utworzyć zdegradowany tytuł na WordPress za pomocą Wtyczka Elementor. Zostaw nam swoje commentaires i uwagi, jeśli masz z tym jakiekolwiek trudności.

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 temat Tworzenie bloga WordPress.

Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych

...