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

Czy chcesz pokazać spektakularną transformację na swojej stronie internetowej? Statyczne zdjęcia obok siebie często tracą czynnik „wow”, ponieważ odwiedzający nie mogą z nimi wchodzić w interakcję.

Odkryliśmy, że interaktywny suwak „przed i po” jest najlepszym sposobem na podkreślenie wpływu produktu lub usługi. Natychmiast angażuje użytkowników i pozwala wynikom mówić same za siebie.

W tym artykule podzielimy się dwoma sprawdzonymi metodami dodawania suwaka zdjęć „przed i po” w WordPressie. Omówimy łatwą darmową wtyczkę i potężny niestandardowy kreator, którego używamy w naszych własnych markach.

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

Obrazek typu „przed i po” to interaktywny obrazek, 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 za pomocą wtyczki takiej jak WooCommerce, to zdjęcie „przed i po” może pokazać efekt Twoich produktów lub usług.

Po prostu musisz 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ć produkt, który przeniesie ich ze stanu „przed” do stanu „po”.

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

Przeciąganie 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 dłużej pozostaną na Twojej stronie. Może to również pomóc w zwiększeniu liczby wyświetleń stron i zmniejszeniu współczynnika odrzuceń w WordPressie.

Teraz 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)

Najprostszym sposobem na tworzenie 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 te same wymiary (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). Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku, 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ć.

Następnie możesz dodać obraz „przed”, przewijając do sekcji „Obraz przed”.

Tutaj kliknij „Prześlij” i wybierz obrazek z biblioteki multimediów WordPress lub prześlij nowy obrazek z komputera.

Aby pomóc wyszukiwarkom zrozumieć ten obrazek i pokazać go właściwym osobom, warto dodać tekst alternatywny obrazka. Po prostu wpisz swój tekst w polu „Tekst alternatywny obrazka” dla tego konkretnego suwaka.

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

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

Możesz teraz dodać obrazek „po”, wykonując ten sam proces opisany powyżej. Nie zapomnij dodać tekstu alternatywnego również do tego obrazka, ponieważ jest to ważne dla SEO WordPress.

Możesz również wyświetlić tekst pod obrazkiem, 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 „Czytaj więcej”, który może linkować 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 obrazku suwaka.

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 linkujesz do innej witryny, 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 (czyli 50%). Oznacza to, że odwiedzający widzi połowę obrazu ‘przed’ i połowę obrazu ‘po’ po pierwszym 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 zarówno na komputerach, jak i urządzeniach mobilnych, aby zobaczyć, co jest najbardziej intuicyjne dla odwiedzających Twoją witrynę. Pamiętaj, że efekty ‘najazdu’ zazwyczaj nie działają na ekranach dotykowych.

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 obrazkowi „przed/po” wtopić się w Twój motyw WordPress lub nawet wyróżnić się na tle projektu Twojej witryny.

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ć obrazek i suwak „przed/po” do dowolnej strony, wpisu lub obszaru gotowego na widżety.

Więcej informacji na temat umieszczania shortcode’u znajdziesz w naszym przewodniku, jak dodać shortcode 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 posta, darmowy plugin z metody 1 jest świetną opcją. Jednak jeśli chcesz stworzyć stronę docelową o wysokiej konwersji, stronę sprzedażową, a nawet niestandardowy motyw z porównaniem „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 menu po lewej stronie, a następnie upuść go na dowolny projekt strony, nad którym pracujesz, w tym na strony sprzedażowe.

Jeśli używasz WooCommerce do sprzedaży swoich produktów, SeedProd integruje się z WooCommerce i zawiera nawet specjalne bloki eCommerce. Jest to idealne rozwiązanie, jeśli planujesz używać zdjęć „przed i po” do promowania swoich produktów WooCommerce.

Informacje o tym, jak korzystać z SeedProd, znajdziesz w naszym przewodniku jak stworzyć niestandardową stronę 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.

Na początek musisz dodać obraz, którego chcesz użyć jako obrazu „przed”. W sekcji „Obraz przed” możesz kliknąć „Użyj własnego obrazu”, aby przesłać zdjęcie, lub „Użyj obrazu stockowego”, aby przeszukać tysiące darmowych zdjęć stockowych wbudowanych bezpośrednio w plugin.

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 niektórym użytkownikom może być łatwiej przesuwać suwak, najeżdżając myszką na obraz. Dotyczy to szczególnie 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ć kolorowe nakładki 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?

Plugin Ultimate Before After Image Slider & Gallery z Metody 1 jest całkowicie darmowy. SeedProd również ma dostępną darmową wersję, ale będziesz potrzebować jednego z ich planów premium, aby uzyskać dostęp do bloku „Before After Toggle”.

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ć dedykowanego pluginu do tworzenia suwaków WordPress, takiego 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 przesłaniem ich 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 witryny WordPress z efektem suwaka. Możesz również zapoznać się z naszym przewodnikiem na temat dodawania kategorii i tagów do biblioteki multimediów WordPress oraz naszymi rekomendacjami ekspertów dotyczącymi 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.