Jak pokazać zdjęcia przed i po w WordPress (z efektem suwaka)

Próba zaprezentowania dramatycznej transformacji za pomocą statycznych, obok siebie umieszczonych obrazów może wydawać się nieco płaska. Wykonaliście niesamowitą pracę, ale efekt „wow” ginie, gdy odwiedzający nie mogą sami wchodzić w interakcję ze zmianą.

Odkryliśmy, że jednym z najlepszych sposobów na podkreślenie wpływu produktu lub usługi jest interaktywny suwak „przed i po”. Jest to potężne narzędzie, którego użyliśmy w naszych własnych projektach, aby pozwolić wynikom mówić same za siebie.

W tym artykule podzielimy się naszymi dwoma sprawdzonymi metodami dodawania suwaka zdjęć „przed i po” do Twojej witryny WordPress. Mamy łatwą opcję dla początkujących i bardziej konfigurowalną dla tych, którzy chcą większej kontroli.

Kiedy używać suwaka zdjęć „przed i po” w WordPress

Obraz „przed i po” to interaktywny obraz, który zazwyczaj pokazuje pewien rodzaj zmiany.

Odwiedzający mogą używać suwaka do przełączania się między różnymi „wersjami” obrazu w angażujący i interaktywny sposób.

Jeśli prowadzisz sklep internetowy, korzystając z wtyczki takiej jak WooCommerce, wówczas zdjęcie „przed i po” może pokazać efekt Twoich produktów lub usług.

Musisz po prostu pokazać zdjęcie „przed”, z którym klient może się utożsamić, i pożądane zdjęcie „po”. Sprawi to, że kupujący będą chcieli kupić rzecz, która przeniesie ich ze stanu „przed” do stanu „po”.

Jeśli jesteś afiliantem, pokazywanie przekonujących zdjęć „przed” i „po” na swojej stronie internetowej to świetny sposób na promowanie linków afiliacyjnych i zwiększenie sprzedaży.

Przesuwanie suwaka, aby odsłonić zdjęcie „po”, to również łatwy sposób na zwiększenie zaangażowania, co może sprawić, że odwiedzający pozostaną na Twojej stronie dłużej. Może to również pomóc zwiększyć liczbę wyświetleń stron i zmniejszyć współczynnik odrzuceń w WordPress.

Mając to na uwadze, zobaczmy, jak możesz stworzyć zdjęcie „przed i po” w WordPressie za pomocą efektu suwaka. Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

• Metoda 1: Pokaż zdjęcie „przed i po” za pomocą darmowej wtyczki (łatwe)
• Metoda 2: Pokaż zdjęcie „przed i po” za pomocą SeedProd (bardziej konfigurowalne)
• Frequently Asked Questions About Before and After Sliders

Metoda 1: Pokaż zdjęcie „przed i po” za pomocą darmowej wtyczki (łatwe)

Najłatwiejszym sposobem tworzenia zdjęć „przed i po” jest użycie wtyczki Ultimate Before After Image Slider & Gallery – BEAF.

Wtyczka BEAF pozwala tworzyć suwaki poziome i pionowe oraz dostosowywać obrazy za pomocą różnych etykiet i kolorów.

Ważna wskazówka: Aby efekt suwaka działał idealnie, Twoje obrazy „przed” i „po” muszą mieć dokładnie ten sam rozmiar (tę samą szerokość i wysokość w pikselach). Zapewnia to ich prawidłowe wyrównanie. Możesz użyć dowolnego narzędzia do edycji zdjęć, aby przyciąć lub zmienić rozmiar obrazów przed ich przesłaniem.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Ultimate Before After Image Slider & Gallery (BEAF). Aby uzyskać więcej szczegółów, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do sekcji Suwak Przed i Po » Dodaj nowy w swoim panelu.

Na początek wpisz nazwę dla suwaka obrazów. Jest to tylko do Twojej wiadomości, więc możesz użyć czegokolwiek, co pomoże Ci go zidentyfikować.

Po wykonaniu tej czynności możesz dodać obraz „przed”, przewijając do sekcji „Obraz przed”.

Tutaj kliknij „Prześlij”, a następnie wybierz zdjęcie z biblioteki multimediów WordPress lub prześlij nowy obraz z komputera.

Aby wyszukiwarki zrozumiały ten obraz i mogły go wyświetlać odpowiednim osobom, warto dodać do niego tekst alternatywny (image alt text). Aby to zrobić, po prostu wpisz tekst w pole „Image Alt”.

Więcej informacji na temat tekstu alternatywnego znajdziesz w naszym poradniku dla początkujących dotyczącym SEO obrazów.

Po wykonaniu tej czynności przewiń do sekcji „After Image”.

Teraz możesz dodać obraz „po”, wykonując te same czynności, które opisano powyżej. Nie zapomnij dodać tekstu alternatywnego również do tego obrazu, ponieważ jest on ważny dla SEO WordPress.

Możesz również wyświetlić tekst poniżej obrazu, dodając tytuł i opis (jak podpis).

Na przykład możesz zachęcić odwiedzających do interakcji z suwakiem. Jest to świetny sposób na pokierowanie odwiedzających, którzy mogą nie być zaznajomieni z działaniem interaktywnych suwaków.

Jest to również łatwy sposób na dodanie kontekstu do obrazu.

Aby dodać tekst, po prostu wpisz go w polach „Slider Title” lub „Slider Description”.

Możesz również dodać adres URL „Read More”, który może prowadzić do dowolnego wpisu lub strony w Twojej witrynie WordPress, a nawet do zewnętrznej witryny. Na przykład możesz wysłać odwiedzających na stronę, gdzie mogą kupić produkt prezentowany na obrazie w suwaku.

Ten link pojawi się poniżej obrazu „przed/po”, a także pod dowolnym tytułem lub opisem suwaka, którego używasz.

Jeśli łączysz się z inną witryną, zalecamy wybranie opcji „Nowa karta”, aby nie wysyłać odwiedzających z Twojego bloga WordPress.

Po wykonaniu tej czynności możesz wybrać, czy chcesz utworzyć pionowy czy poziomy suwak, klikając na jedną z miniatur w sekcji „Styl orientacji”.

Następnie przewiń do góry ekranu i kliknij „Opcje”.

Tutaj zobaczysz, że „Domyślne przesunięcie” jest ustawione na 0,5. Oznacza to, że odwiedzający widzi połowę obrazu „przed” po załadowaniu strony.

Jeśli chcesz pokazać więcej obrazu „przed”, wpisz większą liczbę, taką jak 0,6, 0,7 lub wyższą.

Jeśli chcesz pokazać cały obraz „przed”, wpisz 1.

Spowoduje to umieszczenie suwaka na górze lub po prawej stronie obrazu „przed”, jak widać na poniższym obrazku.

Domyślnie wtyczka wyświetla etykiety „Przed” i „Po”, gdy odwiedzający najeżdża kursorem myszy na obraz.

Możesz chcieć zastąpić te etykiety czymś bardziej opisowym.

Aby to zrobić, po prostu wpisz tekst w polach „Etykieta przed” i „Etykieta po”.

Domyślnie odwiedzający przesuwają suwak za pomocą przeciągania i upuszczania. Niektórzy mogą uznać to za trudne, zwłaszcza jeśli mają problemy z poruszaniem się lub korzystają z mniejszych urządzeń, takich jak smartfony lub tablety.

Biorąc to pod uwagę, możesz chcieć zmienić sposób, w jaki odwiedzający przesuwają suwak.

Jeśli przełączysz przycisk „Włącz” obok opcji „Przesuń suwak po najechaniu myszą?”, odwiedzający będą mogli przesuwać suwak, po prostu najeżdżając myszą na obraz.

Jeśli aktywujesz przycisk „Kliknij, aby przesunąć”, odwiedzający będą mogli kliknąć w dowolnym miejscu obrazu, aby przesunąć suwak do tego punktu.

Chociaż te opcje mogą poprawić dostępność, zmieniają standardowe zachowanie suwaka. Sugerujemy przetestowanie ich, aby zobaczyć, co jest najbardziej intuicyjne dla odwiedzających Twoją witrynę.

Następnie kliknij zakładkę „Styl”.

Tutaj możesz zmienić kolory używane dla różnych etykiet, tła, nagłówków, opisów i przycisku „Czytaj więcej”. Może to pomóc w dopasowaniu obrazu przed/po do Twojego motywu WordPress lub nawet wyróżnić go na tle reszty projektu Twojej strony internetowej.

Możesz również zmienić rozmiar czcionki i wyrównanie tekstu.

Gdy będziesz zadowolony z konfiguracji suwaka, kliknij przycisk „Opublikuj”.

Tworzy to krótki kod, który pozwala dodać obraz przed/po i suwak do dowolnej strony, wpisu lub obszaru gotowego na widżety.

Aby uzyskać więcej informacji na temat umieszczania skróconego kodu, zapoznaj się z naszym przewodnikiem jak dodać skrócony kod w WordPress.

Po dodaniu skróconego kodu do swojej witryny, po prostu kliknij przycisk „Opublikuj” lub „Zaktualizuj”, aby efekt obrazu przed/po i suwaka stał się aktywny.

Metoda 2: Pokaż zdjęcie „przed i po” za pomocą SeedProd (bardziej konfigurowalne)

Jeśli chcesz po prostu dodać prosty suwak do istniejącego wpisu, darmowa wtyczka z metody 1 jest świetną opcją. Jednak jeśli chcesz stworzyć stronę docelową o wysokiej konwersji, stronę sprzedaży, a nawet niestandardowy motyw, który zawiera porównanie przed i po, zalecamy użycie SeedProd. Jest to potężny kreator stron internetowych, który daje Ci pełną kontrolę nad projektem.

Tutaj, w WPBeginner, intensywnie używamy SeedProd do projektowania niestandardowych stron internetowych dla wielu naszych marek partnerskich z rodziny Awesome Motive. Jego interfejs przeciągnij i upuść daje nam elastyczność w szybkim tworzeniu stron o wysokiej konwersji.

SeedProd to najlepszy kreator stron WordPress metodą przeciągnij i upuść. Zawiera ponad 300 gotowych szablonów, których możesz użyć do tworzenia stron docelowych o wysokiej konwersji, projektów sprzedażowych, niestandardowych motywów WordPress i nie tylko.

Posiada również gotowy blok „Przełącznik przed i po”, którego możesz użyć do tworzenia pięknych obrazów przed i po, z którymi użytkownicy mogą wchodzić w interakcję.

Po prostu przeciągnij blok z lewego menu, a następnie upuść go na dowolny projekt strony, nad którym pracujesz, w tym na strony sprzedaży.

Jeśli używasz WooCommerce do sprzedaży swoich produktów, SeedProd integruje się z WooCommerce i oferuje nawet specjalne bloki dla eCommerce. Jest to idealne rozwiązanie, jeśli planujesz używać obrazów przed i po, aby promować swoje produkty WooCommerce.

Aby uzyskać informacje o tym, jak korzystać z SeedProd, zapoznaj się z naszym przewodnikiem na temat tworzenia niestandardowej strony w WordPress.

Po utworzeniu strony łatwo jest dodać obraz przed i po do swojego projektu. W edytorze stron SeedProd po prostu znajdź blok „Przełącznik Przed i Po”.

Następnie możesz przeciągnąć i upuścić ten blok w dowolne miejsce projektu, aby dodać go do układu strony.

Po wykonaniu tej czynności kliknij, aby wybrać blok „Przełącznik Przed i Po”. Lewe menu zaktualizuje się, pokazując wszystkie ustawienia, których możesz użyć do utworzenia obrazu przed i po.

Aby rozpocząć, musisz dodać obraz, którego chcesz użyć jako obrazu „przed”. W sekcji „Obraz przed” kliknij „Użyj własnego obrazu” lub „Użyj obrazu z zasobów” i wybierz obraz, którego chcesz użyć.

Domyślnie SeedProd wyświetla etykietę „Przed” nad tym obrazem. Możesz jednak zmienić ją na coś bardziej opisowego, wpisując ją w polu „Etykieta przed”.

Po wykonaniu tej czynności przewiń do sekcji „After Image”.

Teraz możesz dodać obraz i dostosować domyślną etykietę „Po”, wykonując ten sam proces, który opisano powyżej.

SeedProd może dodać efekt pionowego lub poziomego przesuwania.

Aby przełączać się między tymi dwoma stylami, przewiń do sekcji „Orientacja suwaka”, a następnie kliknij „Pionowy” lub „Poziomy”.

Domyślnie odwiedzający będą przemieszczać się między obrazami „przed” i „po”, przesuwając suwak.

Jednakże, niektórym użytkownikom łatwiej będzie przesuwać suwak, najeżdżając kursorem myszy na obraz. Jest to szczególnie prawdziwe w przypadku większych obrazów, gdzie odwiedzający musiałby przeciągnąć suwak na większą odległość.

Aby wypróbować to ustawienie, włącz opcję „Przesuń po najechaniu” w menu po lewej stronie.

Następnie możesz dodać kolorową nakładkę do obu obrazów, przed i po. Może to pomóc obrazowi wtopić się w resztę schematu kolorów lub wyróżnić się na tle.

Możesz nawet sprawić, że kolorowa nakładka będzie półprzezroczysta, aby uzyskać bardziej subtelny efekt.

Aby wypróbować różne kolory, kliknij sekcję „Kolor nakładki”, a następnie dokonaj zmian w wyskakującym okienku, które się pojawi.

Po wykonaniu tej czynności możesz dostosować uchwyt suwaka, klikając, aby rozwinąć sekcję „Uchwyt porównania”.

Domyślnie SeedProd pokazuje połowę obrazu „przed” i połowę obrazu „po”. Aby to zmienić, po prostu przeciągnij suwak „Przesunięcie początkowe uchwytu”.

Aby wyświetlić mniej obrazu „przed”, przeciągnij suwak w lewo, aby pokazywał mniejszą liczbę. Aby pokazać więcej obrazu „przed”, przeciągnij suwak w prawo, co zwiększa liczbę.

Następnie możesz zmienić kolor suwaka za pomocą ustawień „Kolor uchwytu”.

Możesz również sprawić, że uchwyt będzie grubszy lub cieńszy za pomocą suwaka „Grubość uchwytu”.

W ten sposób możesz sprawić, że uchwyt będzie się wyróżniał lub uzyskać bardziej subtelny efekt.

Kiedy będziesz zadowolony z uchwytu, możesz chcieć zmienić okrąg. Możesz sprawić, że okrąg będzie większy lub mniejszy za pomocą ustawień „Szerokość okręgu” i zmienić „Promień okręgu”, aby uzyskać ostre lub zaokrąglone rogi.

W miarę wprowadzania zmian podgląd na żywo będzie się automatycznie aktualizował, dzięki czemu możesz wypróbować różne ustawienia, aby zobaczyć, co wygląda najlepiej.

Kiedy będziesz zadowolony z okręgu, możesz chcieć zmienić rozmiar trójkątów wewnątrz tego okręgu. Na przykład, jeśli powiększyłeś okrąg, możesz również zwiększyć rozmiar trójkątów.

Aby dokonać tej zmiany, przeciągnij suwak „Rozmiar trójkąta”, aż będziesz zadowolony z wyglądu.

Po wykonaniu tej czynności możesz kontynuować dodawanie nowych bloków i dostosowywanie zawartości na swojej stronie SeedProd.

Kiedy będziesz zadowolony z wyglądu strony, kliknij strzałkę obok przycisku „Zapisz”, a następnie wybierz „Opublikuj”.

Teraz, jeśli odwiedzisz swoją stronę internetową, zobaczysz swój projekt strony z obrazami przed i po na żywo.

Często zadawane pytania dotyczące suwaków przed i po

Odpowiedzieliśmy na niektóre z najczęstszych pytań naszych czytelników dotyczących tworzenia suwaków zdjęć przed i po w WordPressie.

Czy wtyczki do zdjęć przed i po są darmowe?

Wtyczka The Ultimate Before After Image Slider & Gallery opisana w Metodzie 1 jest całkowicie darmowa. SeedProd również oferuje darmową wersję, ale będziesz potrzebować jednego z ich planów premium, aby uzyskać dostęp do bloku „Przełącznik przed i po”.

Która metoda jest lepsza do tworzenia suwaka przed i po?

Najlepsza metoda zależy od Twoich potrzeb. Do szybkiego dodania prostego suwaka do wpisu na blogu, darmowa wtyczka jest doskonałym wyborem. Jeśli potrzebujesz większej kontroli nad projektem lub tworzysz niestandardową stronę docelową, polecamy SeedProd ze względu na jego elastyczność.

Czy mogę stworzyć suwak z więcej niż dwoma obrazami?

Narzędzia w tym przewodniku są zaprojektowane specjalnie do porównywania dwóch obrazów. Jeśli potrzebujesz zaprezentować wiele obrazów w sekwencji, będziesz potrzebować dedykowanej wtyczki suwaków WordPress, takiej jak Soliloquy.

Czy suwak przed i po spowolni moją stronę internetową?

Podobnie jak w przypadku każdego obrazu, duże pliki mogą wpłynąć na szybkość ładowania Twojej witryny. Aby temu zapobiec, zawsze zalecamy optymalizację obrazów pod kątem sieci przed ich przesłaniem do WordPress.

Dowiedz się więcej o wskazówkach i trikach dotyczących obrazów w WordPress

Chcesz więcej wskazówek i trików dotyczących dostosowywania obrazów w WordPress? Sprawdź te przewodniki:

• Jak dodać filtry zdjęć w stylu Instagram w WordPress (krok po kroku)
• Jak tworzyć nakładki i efekty najazdu flipbox w WordPressie
• Jak automatycznie dodać znak wodny do obrazów w WordPress
• Jak używać AI do generowania obrazów w WordPressie
• Jak dodać animowane GIF-y w WordPress (WŁAŚCIWY sposób)
• Jak łatwo stworzyć responsywny slider w WordPress

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać zdjęcie przed i po do swojej strony WordPress z efektem suwaka. Możesz również zapoznać się z naszym przewodnikiem na temat jak dodać kategorie i tagi do biblioteki multimediów WordPress oraz naszymi ekskluzywnymi wyborami najlepszych wtyczek do obrazów wyróżnionych w WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.