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.

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.

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.

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.

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;
}

(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.

Zduplikujmy naszą kolumnę 2 razy i usuńmy pozostałe puste kolumny 2. Pozostaje tylko zmienić obraz tła oraz zawartość edytorów tekstu 2 nowych kolumn.

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.

...