Jak wyświetlać obrazy przed i po z efektem suwaka w WordPress?

Załóżmy, że jesteś blogerem fitness i chcesz zainspirować swoją publiczność, dzieląc się zdjęciami przed i po transformacji swojego ciała. Zamiast umieszczać obrazy obok siebie, byłoby fajnie, gdybyś mógł użyć suwaka obrazu przed i po, aby pokazać różnicę.

Czekać! Co to jest suwak obrazu przed i po?

Jest to suwak obrazu, który układa jeden obraz na drugim i wykorzystuje interaktywny suwak do odsłaniania obrazów. Jeśli suwak porusza się poziomo, to pierwszy obraz zostanie odsłonięty, gdy suwak przesunie się maksymalnie w prawo, a drugi będzie widoczny, gdy przesunie się w lewo.

Takie suwaki są przydatne do porównywania dwóch podobnych obrazów. Dlatego może być przydatny dla wielu profesjonalistów, takich jak fotografowie, kosmetyczki, projektanci, lekarze i dentyści.

Jeśli jesteś użytkownikiem WordPressa i zastanawiasz się, jak możesz go wykorzystać na swojej stronie, to jesteś we właściwym miejscu. W tym artykule podzielę się tym, w jaki sposób możesz dodać obrazy przed i po z efektem suwaka na swojej stronie internetowej.

Więc bez zbędnych ceregieli zacznijmy.

Subskrybuj nasz kanał YouTube

Jak dodać przed suwakiem obrazu

Istnieje wiele darmowych i premium wtyczek, za pomocą których można dodać suwak obrazu przed i po na stronie internetowej.

Jednak w tym artykule użyjemy wtyczki Twenty20 Image Before After. Później wspomnę również o kilku popularnych alternatywach darmowych i premium.

Zainstaluj obraz Twenty20 przed wtyczką

Twenty20 to darmowa wtyczka i jest dostępna w repozytorium wtyczek WordPress. Umożliwia dodawanie suwaków obrazu „przed” do postów, stron i paska bocznego. Obsługuje również popularne programy do tworzenia stron, takie jak Elementor i WPBakery.

Aby zainstalować tę wtyczkę, przejdź do Wtyczki -> Dodaj nowy i wyszukaj Twenty20 Image Before-After. Po znalezieniu wtyczki po prostu ją zainstaluj i aktywuj:

Dodaj obraz przed i po w swoim poście lub na stronie

Wtyczka Twenty20 nie zawiera żadnej strony ustawień. Możesz więc zacząć robić brudną robotę po zainstalowaniu wtyczki.

Teraz, po aktualizacji WordPress 5.0, możesz korzystać z edytora Classic lub Gutenberga. Pokażę więc, jak ta wtyczka działa w obu edytorach.

Redaktor Gutenberga

Wtyczka Twenty20 nie ma na razie bloku, ale możesz skorzystać z jej funkcjonalności shortcode i dodać kod w bloku shortcode.

Rzućmy okiem na przykład shortcode:

[twenty20 img1=”3442″ img2=”3442″ direction=”horizontal” offset=”0.4″ align=”brak” width=”100%” before=”Before” after=”After” hover=”false”]

Pozwólcie, że wyjaśnię każdy z parametrów:

• img1 – Tutaj musisz dodać identyfikator obrazu (nie adres URL obrazu) pierwszego obrazu.
• img2 – Dodaj identyfikator (a nie adres URL obrazu) drugiego obrazu.
• kierunek – pozwala zdecydować, czy suwak ma być w kierunku poziomym czy pionowym. Tak więc wartość będzie pozioma lub pionowa.
• offset — wartość offsetu powinna wynosić od 0,1 do 1.
• wyrównanie — określa wyrównanie obrazu przed i po. Wartością może być brak, lewa lub prawa.
• szerokość – szerokość obrazu może być wyrażona w procentach lub w pikselach.
• przed – Tutaj możesz dodać podpis obrazu przed.
• po – Dodaj podpis do powidoku.
• hover – Ten parametr decyduje o tym, czy chcesz przesuwać suwak podczas ruchu myszy. Akceptuje wartość prawdziwą lub fałszywą.

Nie wiesz, jak znaleźć identyfikator obrazu? Przejdź do Media -> Biblioteka z lewego paska bocznego pulpitu WordPress i kliknij obraz. Teraz sprawdź pasek adresu swojej przeglądarki internetowej:

W powyższym przykładzie możesz zobaczyć element = 50 w adresie URL. Tak więc 50 to identyfikator tego konkretnego obrazu.

W porządku! Teraz, gdy wiesz, jak używać skrótu Twenty20, utwórz (lub edytuj) post lub stronę, na której chcesz dodać suwak obrazu przed. A następnie dodaj nowy blok i wyszukaj widżet shortcode:

Skopiuj kod, którego użyłem w powyższym przykładzie, wklej go w polu shortcode i dostosuj go zgodnie z wymaganiami:

Otóż ​​to. Możesz teraz podejrzeć post (lub stronę) i sprawdzić, czy działa poprawnie, czy nie.

Edytor klasyczny

Jeśli korzystasz z Edytora klasycznego, po zainstalowaniu wtyczki zobaczysz nowy przycisk Dodaj dwadzieścia 20. Kliknij ten przycisk, a otworzy się wyskakujące okienko z prośbą o wybranie dwóch obrazów:

Po wybraniu dwóch obrazów i kliknięciu opcji Wstaw otworzy się nowe okno z prośbą o podanie szczegółów dotyczących generowania krótkiego kodu:

Po zakończeniu ustawień możesz kliknąć przycisk Wstaw krótki kod.

Możesz również wprowadzić zmiany w tym krótkim kodzie później - po prostu postępuj zgodnie z przykładem w sekcji Edytor Gutenberga.

Dodaj obraz przed i po na pasku bocznym

Wtyczka Twenty20 umożliwia również dodawanie obrazów przed i po na pasku bocznym witryny. Jest wyposażony w widżet, który wykonuje za Ciebie fajną pracę.

Udaj się do Wygląd -> Widgety. Teraz znajdź widżet Twenty20 i przeciągnij go do obszaru paska bocznego. Ustawienia tego widżetu są podobne do poprzedniej sekcji – masz tylko dwa dodatkowe przyciski do wybierania (lub przesyłania) zdjęć przed i po.

Gdy skończysz, zapisz ustawienia widżetu, a następnie sprawdź swoją witrynę. Proste, prawda?

Niektóre alternatywne wtyczki

Chociaż podoba mi się wtyczka Twenty20, ponieważ jest prosta i darmowa, możesz preferować coś innego. Dlatego postanowiłem udostępnić kilka darmowych i premium alternatyw dla tej wtyczki:

1. Przed i po zdjęciach dla Divi

Jeśli jesteś użytkownikiem Divi, wtyczka Przed + Po dla Divi jest najlepsza dla Twoich potrzeb. Jest lekki, responsywny i obsługuje leniwe ładowanie. Tworzy nowy moduł, który pomaga dodawać obrazy przed i po do Twojej witryny. Ta bezpłatna wtyczka będzie działać z wtyczką Divi Builder, motywem Divi i innymi motywami Elegant Themes.

Cena – za darmo | Więcej informacji

2. Uniwersalny przed suwakiem

Uniwersalny suwak „Przed po” to wtyczka premium z obsługą dotyku i przesuwania. Jest wyposażony w łatwy w użyciu panel administracyjny, który pomaga dostosować każdy suwak obrazu zgodnie z własnymi potrzebami i nie wymaga używania skrótów. Możesz tworzyć nieograniczone obrazy przed i po i używać ich w postach, stronach i pasku bocznym.

Cena – 18 zł | Więcej informacji

3. Inteligentne przed przeglądaniem

Smart Before After Viewer to w pełni responsywna i przyjazna w dotyku wtyczka premium. Umożliwia dodawanie niestandardowych tekstów etykiet na obrazach przed i po. I możesz bez problemu zmienić położenie i kolor etykiet. Ta wtyczka umożliwia również dodawanie wielu obrazów na jednej stronie.

Cena – 18 zł | Więcej informacji

Przypis końcowy

Suwak obrazu przed i po to świetny sposób na pokazanie różnic między dwoma identycznymi obrazami. I możesz użyć takich suwaków w swojej witrynie WordPress, postępując zgodnie z tym samouczkiem.

Czy kiedykolwiek korzystałeś z którejś z wtyczek wymienionych w tym artykule? A może chciałbyś zaproponować konkretną wtyczkę, która jest odpowiednia do osiągnięcia tego samego? Daj nam znać w sekcji komentarzy.

Polecane zdjęcie za pośrednictwem __ / shutterstock.com