Potrzebujesz sposobu na utworzenie efektu przewijania obrazu w Elementor ? W tym artykule poprowadzimy Cię, jak utworzyć efekt przewijania obrazu za pomocą Elementora na swoich stronach internetowych.
Efekt przewijania obrazu pozwoli Ci odsłonić pełny obraz, gdy użytkownik najedzie na niego myszką. Gdy odwiedzasz witrynę sprzedającą szablony stron internetowych, możesz zobaczyć pełny podgląd szablonów z funkcjami efektu przewijania obrazu.
Dzięki tym funkcjom możesz łatwo pokazać użytkownikom pełny widok witryny na małej przestrzeni. Zwykle, jeśli chcesz wyświetlić pełny obraz witryny, zajmie to dużo miejsca na twoich stronach internetowych. Co więcej, wpływa to na wygląd Twojej strony internetowej.
Ale dzięki efektowi przewijania obrazu możesz dodać więcej zdjęć w atrakcyjny sposób, który z łatwością przyciągnie uwagę odbiorców.
Utwórz efekt przewijania obrazu w Elementorze
Elementor nie zapewnia widżetu do dodawania efektu przewijania obrazu. Musisz więc dodać efekt za pomocą niestandardowego CSS. Niestandardowa funkcja CSS jest dostępna tylko z Elementor Zawodowiec. Więc upewnij się, że dokonałeś aktualizacji do Elementor Pro.
Teraz otwórz stronę za pomocą edytora Elementor i kliknij ikonę plusa, aby dodać sekcję.
Teraz musisz wybrać kolumnę dla swojej sekcji. Tutaj wybieramy sekcję pojedynczej kolumny.
Teraz kliknij ikonę edycji sekcji iw zakładce układu ustaw minimalną wysokość na 500.
Teraz z widżetu bloku dodaj blok sekcji wewnętrznej do utworzonej sekcji i usuń domyślną kolumnę. Kliknij prawym przyciskiem myszy ikonę edycji kolumny i kliknij opcję usuwania, aby usunąć główną kolumnę.
Ponownie przejdź do opcji edycji sekcji wewnętrznej iw zakładce układu ustaw minimalną wysokość na 500, jak pokazaliśmy wcześniej.
Teraz przejdź do zakładki stylu w sekcji wewnętrznej i ustaw tło jako klasyczne z opcji tła. Następnie musisz dodać obraz tła. W opcji pozycji obrazu ustaw pozycję obrazu według Górny środek. Z opcji powtarzania ustaw opcję bez powtórzeń i rozmiar jak pokrywa.
Teraz przejdź do zakładki zaawansowany dodać niestandardowy CSS. W niestandardowym polu CSS dodaj następujący kod:
selektor{ -webkit-transition: łatwe włączanie 3s !ważne; przejście: łatwe wejście i wyjście 3 s! ważne; } selector:hover{ background-position: center bottom !ważne; }
Możesz zmienić wartość przejścia, aby zmienić efekt przewijania obrazów. Jeśli chcesz dodać wiele obrazów z tym samym efektem, możesz zduplikować kolumnę, a następnie zmienić obraz tła.
Wnioski
Postępując zgodnie z tym procesem, będziesz mógł dodać efekt przewijania obrazu do swojej witryny za pomocą narzędzia do tworzenia stron Elementor. Możesz sprawdzić nasze inne artykuły, aby dowiedzieć się:
- Jak korzystać z bloków Elementora w edytorze Gutenberg?
- Elementor vs Divi vs SeedProd – co jest lepsze?
- Jak używać historii do cofania i ponawiania działań w Elementorze
- Jak szybko stworzyć witrynę Elementor
- Jak stworzyć interaktywny krąg w Elementorze
Mamy nadzieję, że ten artykuł będzie dla Ciebie przydatny. Jeśli podoba Ci się ten artykuł, polub naszą stronę na Facebooku, aby pozostać w kontakcie.
