Czy kiedykolwiek żałowałeś, że nie wiesz, jak wyświetlić tekst nad obrazem za pomocą Elementor ?

W tym nowym samouczku pokażemy, jak to zrobić.

Jeśli nie masz pojęcia, o czym chcemy dzisiaj porozmawiać, zapraszamy do obejrzenia poniższego filmu:

Wróćmy do tego, dlaczego tu jesteśmy.

Aby ukończyć ten samouczek, będziesz potrzebować wersja Pro Elementora, ponieważ będziemy używać niestandardowego kodu CSS, który jest obsługiwany tylko w tej wersjiElementor.

Odkryj także nasz przewodnik na temat: Jak stworzyć galerię obrazów za pomocą Elementora

Stwórzmy nową sekcję o strukturze 3 kolumnowej, a następnie w panelu zdefiniujmy HAUTEUR sur Minimalna wysokość, a następnie Minimalna wysokość kliknijmy VH i ustaw suwak na 100.

Sekcja 3 kolumn

Wybierzmy środkową kolumnę, a w zakładce Styl, w sekcji tło kliknijmy klasyczny dla Typ tła, a następnie wybierz ciemny kolor.

Wstawmy w tej kolumnie Widżet sekcji wewnętrznej. Widżet sekcji wewnętrznej jest domyślnie skonfigurowany z 2 kolumnami, usuńmy jedną z nich. Skonfigurujmy resztę w panelu, modyfikując jego HAUTEUR sur Minimalna wysokość i Minimalna wysokość ustawmy kursor na 400.

Czytaj także: Elementor: Jak powiększyć kartę profilu

Następnie, dalej Wyrównanie w pionie Wybierz Środowisko.

Następnie upuść Widżet tytułu w sekcja wewnętrzna wejdźmy jako Zdjęcie tytułowe, a na Wyrównaniu wybierzmy Środek.

wyświetlaj tekst nad obrazem za pomocą Elementora

W zakładce Styl zmodyfikujmy kolor tytułu, aby był widoczny, jeśli nie jest,

Zrzućmy Widżet edytora tekstu poniżej Widżet tytułu. Następnie w zakładce Styl, w opcji Wyrównanie wybierz Centrum. Zmieńmy też kolor tekstu, aby był widoczny.

Zobacz też: Elementor: Jak dodać przegrodę, aby utworzyć sekcję

Wybierzmy środkowa kolumna i w swojej zakładce Styl, zresetuj kolor tła i załaduj obraz, a następnie Pozycja Wybierz Wyśrodkowany Wyśrodkowany, powtarzać sur Bez powtórzeń, Pokrywa sur Rozmiar.

wyświetlaj tekst nad obrazem za pomocą Elementora

W sekcji Granica zmodyfikujmy wszystko promienie graniczne z 12. W cień pudełka, ustaw suwak na 0 dla PoziomyW 0 dla pionowego, do 40 na rozmycie, do -10 na audycji. Powinieneś zobaczyć piękny efekt cienia pod twoim obrazem.

wyświetlaj tekst nad obrazem za pomocą Elementora

Sur Nakładka w tle, wybierać klasyczny dla Typ tła i kolor Wybierz jeden czarny kolor, na Opacity ustawmy suwak na 0.55

W zakładce zaawansowany, chwyćmy 20 dla wszystkich depozytów zabezpieczających.

Wybierzmy nasz Sekcja wewnętrzna i przejdź do jego zakładki zaawansowany w sekcji Niestandardowy CSS skopiuj i wklej następujący fragment kodu:

/*Afficher ou masquer un contenu au survol*/
selector{
    opacity: 0;
    transition: 0.5s ease-in-out;
}
selector:hover{
    opacity: 1;
}
wyświetlaj tekst nad obrazem za pomocą Elementora

(Jeśli nie masz tej sekcji, to nie masz wersji Pro, jeśli chcesz kontynuować, musisz zaktualizować swoją wersję).

Wybierzmy jeszcze raz środkową kolumnę naszej sekcji, w jej zakładce Styl, oraz w dziale Nakładka w tle, sprawdź czy jesteśmy na karcie NORMALNA, zejdźmy niżej Nieprzezroczystość à 0.

Następnie kliknij zakładkę PRZEGLĄD, a następnie klasyczny dla typ tła i kolor, Wybierz ciemny kolor, a późniejnieprzezroczystość sur 0.55I dla Czas trwania przejścia ustawmy suwak na 0.5.

Oto ostateczny rezultat naszej manipulacji.

wyświetlaj tekst nad obrazem za pomocą Elementora

Zduplikujmy naszą kolumnę 2 razy i usuń pozostałe 2 puste kolumny. Pozostaje tylko zmienić obraz tła oraz treść edytory tekstu dla 2 nowych kolumn.

wyświetlaj tekst nad obrazem za pomocą Elementora

Wyświetl podgląd swojej pracy na tablecie i smartfonie, aby zobaczyć, jak wygląda. Następnie zapisz lub zaktualizuj.

Więc. Właśnie wyświetliłeś tekst nad obrazem z Page Builder Elementor.

Pobierz Elementor Pro teraz!

Wnioski

Więc ! To tyle, jeśli chodzi o ten artykuł, który pokazuje, jak wyświetlić tekst nad obrazem. 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.

...