Musisz dowiedzieć się, jak dodać obraz w tekście w Elementor ?

Elementor umożliwiło każdemu zostanie projektantem stron internetowych bez konieczności posiadania zaawansowanych umiejętności CSS. Jego wizualny edytor pozwala stworzyć piękną stronę internetową bez pisania ani jednej linii kodu CSS. Możesz po prostu dodać dowolne elementy projektu (widżety), które chcesz i dostosować je w panelu ustawień.

Mimo to posiadanie pewnych umiejętności CSS byłoby świetnym bonusem w używaniuElementor. Będziesz mógł zastosować unikalne style do swojej strony internetowej za pomocą funkcji niestandardowe CSS doElementor. W tym artykule pokażemy, jak dodać obraz do tekstu w Elementorze, korzystając z niestandardowej funkcji CSS Elementora.

W niektórych narzędzia projekty, takie jak GIMP i Photoshop, zwykle musisz dodać znacznik warstwy, aby dodać obraz w tekście. W Elementorze możesz to zrobić, dodając kod CSS, który widżet Tytuł elementu i widżet Tekst nie ma opcji dodawania obrazu jako tła.

Dodaj obraz do tekstu Elementora

Zanim zaczniesz, upewnij się, że zaktualizowałeś swoją wersję Elementora do wersji pro, jeśli nie, ponieważ niestandardowa funkcjonalność CSS jest dostępna tylko w Elementor Pro. Gdy będziesz gotowy, utwórz nową stronę lub szablon i edytuj go za pomocą Elementora. Oczywiście możesz również edytować istniejącą stronę lub szablon.

Zobacz także: Elementor: Jak dodać spis treści

Dodaj widżet Tytuł do pola edycji.

Jak dodać obraz do tekstu w Elementorze

Przejdź do panelu ustawień, aby zastąpić domyślny tekst pod zakładką Treść.

Przeczytaj także nasz przewodnik na temat: Ementor: Jak korzystać z próbnika kolorów

Przejdź do zakładki Styl aby spersonalizować tekst. Możesz ustawić rozmiar tekstu, styl czcionki itp., klikając ikonę ołówka w Opcja typografii pod blokiem Tytuł. Ponieważ chcesz użyć obrazu jako tła tekstu, nie musisz ustawiać koloru tekstu.

Następnie przejdź do zakładki zaawansowany i otwórz blok Zamówienia Indywidualne CSS i wklej następujący kod CSS. Zastąp adres URL obrazu własnym adresem URL obrazu.

selector .elementor-heading-title
{
     background: url("https://www.wppagebuilders.com/wp-content/uploads/2020/05/gradient-progress-bar-elementor.jpg") green repeat 30% 70%  ;
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;
}

Oto przykład.

Jak dodać obraz do tekstu w Elementorze

Pobierz Elementor Pro teraz!

Wnioski

Tutaj jest ! To tyle w tym artykule, który pokazuje, jak dodać obraz do tekstu w Elementorze. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać fdaj nam znać w 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.

...