W przypadku określonego rodzaju działalności, takiej jak usługa edycji zdjęć, dodanie porównania zdjęć może być przydatnym narzędziem do opisania usługi. Możesz dodać porównanie obrazów do strony głównej, strony docelowej lub dowolnej strony, na której mówisz o usłudze, którą oferujesz.

Elementor rzeczywiście nie oferuje żadnego widżetu ani funkcji dodawania porównania obrazów, ale można je uzyskać za pomocą dodatku. Istnieją dodatkowe moduły Elementor które oferują widżet do dodawania porównania obrazów. Trzy z nich to:  Niezbędne dodatkiSzczęśliwe dodatkiJetElements

W tym artykule pokażemy, jak dodać porównanie obrazów w Elementor za pomocą JetElements.

JetElements sam jest dodatkiem premium do Elementora opracowanym przez Crocoblock. Jest częścią rodziny JetPlugins. Dodatek zawiera widżet o nazwie Obrazy porównawcze którego możesz użyć, aby dodać porównanie obrazów do strony Elementor.

Jak dodać porównanie obrazów w Elementorze

Przed rozpoczęciem upewnij się, że masz zainstalowany i aktywowany dodatek JetElements. Jeśli jesteś nowy w Elementorze, możesz przeczytać nasz poprzedni artykuł, aby się dowiedzieć jak korzystać z Elementora.

Bezpośrednio dodamy widżet Obrazy porównawcze w tym artykule.

Zanim zaczniesz, możesz przygotować dwa zdjęcia do porównania. Na przykład możesz przygotować obraz przed i po. Gdy będziesz gotowy, po prostu przeciągnij widżet Obrazy porównawcze w polu edycji Elementora.

dodaj porównanie obrazów w Elementorze

Domyślnie widżet JetElements Image Compare tworzy dwa porównania obrazów. Jeśli potrzebujesz tylko porównania obrazów (dwa obrazy do porównania), możesz usunąć jedno z istniejących porównań obrazów.

Czytaj także: Elementor: Jak dodać animację Lottie

Aby dodać zdjęcie przed i po, otwórz istniejące porównanie zdjęć (klikając na nie) w celu edycji treść. Po prostu wybierz poprzedni obraz na przed zdjęciem sekcji i wybierz obraz po po zdjęciu Sekcja. Jak widać, możesz również nadpisać etykiety dla każdej sekcji.

dodaj porównanie obrazów w Elementorze

Po zakończeniu wyboru obrazów możesz otworzyć blok Ustawienia aby ustawić pozycję początkową separatora. Jeśli chcesz dodać więcej niż jedno porównanie obrazów, możesz ustawić Ustawienia karuzeli.

dodaj porównanie obrazów w Elementorze
#tytuł_obrazu

Następnie możesz stylizować porównanie obrazów, przechodząc do zakładki Styl. Możesz otworzyć pięć bloków dopasowania, aby stylizować porównanie obrazów. Ale jeśli chcesz tylko dodać porównanie obrazów, wystarczy otworzyć pierwsze trzy bloki.

  • ogólny

Możesz otworzyć ten blok, aby ustawić dopełnienie, cień pudełka, typ obramowania i promień obramowania.

dodaj porównanie obrazów w Elementorze
  • Etykieta

Możesz otworzyć ten blok, aby stylizować etykiety porównania (etykieta „przed” i „po”). Możesz ustawić takie rzeczy, jak wyrównanie w poziomie, wyrównanie w pionie, kolor tekstu, kolor tła, typografia (rodzina czcionek, styl czcionki, rozmiar czcionki) itp.

dodaj porównanie obrazów w Elementorze
  • Handle

Możesz otworzyć ten blok, aby stylizować uchwyt. Możesz ustawić takie rzeczy, jak wyrównanie uchwytu, szerokość kontrolki, wysokość kontrolki, kolor uchwytu (stan normalny lub po najechaniu myszą) i tak dalej.

Jeśli dodasz więcej niż jedno porównanie obrazów, możesz również otworzyć bloki Strzałki karuzeli et Kropki karuzeli stylizacji strzałek i punktów nawigacyjnych.

Otóż ​​to. Możesz kliknąć przycisk PUBLISH / AKTUALIZACJA dla opublikować /edytuj swoją stronę, gdy skończysz ją edytować.

Pobierz Elementor Pro teraz !!!

Wnioski

Tutaj ! To tyle, jeśli chodzi o ten artykuł, który pokazuje, jak dodaj porównanie obrazów w Elementorze. 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.

...