Podświetlenie wtyczki Divi: Divi Sensei przed suwakiem

Suwaki Przed i Po to świetny sposób, aby umożliwić odwiedzającym porównanie dwóch obrazów. Jak sama nazwa wskazuje, mogą to być obrazy przed i po zmianie czegoś, np. odchudzanie, zdjęcie retuszowane, udekorowane pomieszczenie, pomalowany samochód itp. Oczywiście przydają się o wiele więcej niż wcześniej i po zdjęciach. Można ich używać do porównywania grafiki, produktów, miejsc wakacyjnych i wielu innych.

W tym artykule przyjrzymy się Divi Sensei Before and After Slider, modułowi suwaka przed i po dla Divi Builder, zobaczmy, co może zrobić, i pomożemy Ci zdecydować, czy potrzebujesz tej wtyczki innej firmy w swoim Divi Przybornik.

Moduł suwaka Divi Sensei przed i po

Prześlij i zainstaluj wtyczkę Divi Sensei Before and After jak zwykle. Trzy nie są ustawieniami do przejścia. Po przesłaniu i aktywacji wtyczki zobaczysz nowy moduł dodany do Divi Builder o nazwie Sensei Before and After Slider.

Moduł wyświetla obraz przed po lewej stronie i po prawej stronie. Wyświetla pośrodku suwak, który użytkownicy mogą chwytać i przesuwać z jednej strony na drugą. Najechanie kursorem na obrazy pokazuje przed i po etykietach oraz dodaje nakładkę. Masz kontrolę nad projektem nad każdym z tych elementów.

Przyjrzyjmy się funkcjom i opcjom suwaka. W tych przykładach używam obrazów z Unsplash.com.

Karta treści

Karta Zawartość umożliwia dodanie obrazu przed, po obrazie i etykiet. W tym przykładzie dodałem dwie różne wersje tego samego obrazu, aby utworzyć obraz przed i po. Przydaje się to do pokazania wyników zdjęcia, które zostało wyretuszowane. Opcje obejmują również standardowe ustawienia łącza, tła i etykiety administratora.

Zawiera również pola, w których można zmienić tekst etykiet przed i po. Najeżdżam na obrazy, aby odsłonić etykiety. Domyślnie wyświetlają się tylko po najechaniu kursorem, ale możesz to zmienić.

Karta projektu

Karta Projekt zawiera ustawienia suwaka, etykiet i nakładki. Zawiera również standardowe ustawienia rozmiaru, odstępów, obramowania, cienia ramki, filtrów, transformacji i animacji.

Suwak

Ustawienia suwaka pozwalają wybrać kierunek suwaka między poziomym a pionowym, ustawić przesunięcie początkowe, aby określić, gdzie na obrazach ma się rozpocząć suwak, oraz zmienić kolory suwaka, uchwytu, tła uchwytu i ikony uchwytu. W powyższym przykładzie dostosowałem każde z tych ustawień.

Etykiety

W przypadku etykiet można je zawsze wyświetlać lub wyświetlać tylko po najechaniu myszą, a także dostosowywać tła i czcionki. Kolory tła obejmują jednolite kolory i korekty krycia. Tła można dostosowywać indywidualnie, ale nie umożliwia to indywidualnego dostosowywania kolorów tekstu. Możesz także wybrać czcionki, zmienić ich rozmiary, stylizację, wyrównanie, wysokość linii, dodać cień itp. Wysokość linii określa rozmiar tła.

W powyższym przykładzie określiłem kolory tła i czcionki, zmieniłem rozmiar czcionek i wysokość linii. Ustawiłem też je tak, aby zawsze wyświetlały się, aby były widoczne bez konieczności najeżdżania kursorem na obrazy, aby je zobaczyć.

Narzuta

Nakładka jest domyślnie włączona. Możesz go wyłączyć, dostosować kolor i dostosować krycie. Domyślnym kolorem jest czarny z 50% kryciem.

W tym przykładzie wybrałem kolor niebieski i pozostawiłem krycie na poziomie 50%. Pozwolenie na prześwitywanie obrazu podczas unoszenia się wydaje się działać najlepiej. To, czy użyjesz jasnego czy ciemnego koloru, a stopień krycia, jaki ustawisz, będzie zależeć od kolorów obrazu i sposobu użycia nakładki.

W tym przykładzie użyłem schematu kolorów czarno-białych. Tekst nakładki i etykiety jest biały, a elementy suwaka są czarne. Zmniejszyłem krycie tła etykiety, aby je przyciemnić. Zostawiłem je w domyślnych rozmiarach.

Divi Sensei Przykłady suwaków przed i po

Przyjrzyjmy się kilku przykładom wykorzystania suwaka i ich wyglądowi w układach Divi. Używam obrazów z Unsplash i tych, które są dostępne w darmowych układach Divi, które są wbudowane w Divi. Zidentyfikuję układy Divi, których używam, jak idę.

Porównanie grafiki

Do tego wykorzystałem elementy projektu z pakietu układów Divi Video Game. Wyłączyłem nakładkę, zmieniłem elementy suwaka na zielone i sprawiłem, że etykiety są zawsze wyświetlane. Tło etykiet jest jednolicie niebieskie. Zwiększyłem rozmiar czcionki, zmieniłem kolor, użyłem rodziny czcionek Rubik, stworzyłem średnią grubość czcionki i zrobiłem je wielkimi literami. Kudos, jeśli posiadałeś lub grałeś w te systemy do gier i wiesz, dlaczego to porównanie zmyślonej grafiki nie może istnieć.

Tak to wygląda w układzie. Świetnie nadaje się do porównań takich jak ta makieta grafiki dwóch różnych maszyn do gier.

Usługi przed i po portfolio

Ten przykład naśladuje ideę pokoju przed i po zakończeniu remontu. Gdy dwa obrazy mają różne rozmiary, użyje rozmiaru większego obrazu, a mniejszy obraz pokaże przerwę. Równomiernie umieści ich wysokość lub szerokość, a resztę wypełni jako pustą przestrzeń. W tym przykładzie obraz po prawej stronie jest krótszy niż obraz po lewej stronie. Chociaż posiadanie obrazów w tym samym rozmiarze działa lepiej, nadal działa dobrze z obrazami, które są zbliżone do tego samego rozmiaru.

Dodałem kolory i czcionki z pakietu układów Home Improvement. Oto jak to wygląda w części układu.

Oto jak to wygląda z nakładką. Przesunąłem suwak w jedną stronę, aby pokazać więcej obrazu przed.

Dla porównania, oto obraz z przesuniętym uchwytem, ​​aby pokazać więcej powidoku.

porównanie produktów

W tym przykładzie zastępuję trzy obrazy herbaty w układzie Tea Shop trzema suwakami DS B&A. Używam kolorów z układu dla przycisków i kontrolek suwaka. Środkowy suwak jest ustawiony w pionie, aby było inaczej. Nakładka używa koloru z układu o zmniejszonym kryciu.

Oto jak wyglądają w układzie. Jest to doskonałe do porównywania szczegółów wizualnych wielu produktów, wielu lokalizacji, wielu kolorów, produktów, które mają wiele opcji wyświetlania z opcjami i bez nich itp.

Porównywanie lokalizacji

W tym przykładzie używam suwaka do porównania dwóch lokalizacji. Nie muszą być podobne, po prostu coś do porównania z tego czy innego powodu. Dodałem kolory z układu dla suwaka i etykiet, a także czcionki dla etykiet. Dodałem również cień pudełka, aby wyróżnić się na tle pozostałych obrazów.

Oto, jak wygląda w pakiecie układu Siteseeing przy użyciu kolorów z układu. To dobry przykład na to, że te dwa obrazy nie muszą być przed i po tej samej rzeczy, a nawet podobnych. To dobry sposób na pokazanie miejsc weselnych, wakacyjnych itp., aby pomóc kupującym wybrać między nimi (lub utrudnić wybór, ale nie polecam tego jako celu).

Zakup

Możesz kupić Divi Sensei przed i po suwaku w Divi Marketplace. Koszt to 5 USD za nieograniczone korzystanie z witryny i 1 rok wsparcia i aktualizacji. Cena ta obejmuje 30-dniową gwarancję zwrotu pieniędzy.

Końcowe myśli

Divi Sensei Przed i Po Slider to prosty moduł. Na przykład suwak nie ma kontrolek szerokości, a etykiety nie zawierają obramowań, cieni, gradientów itp., ale ustawienia ułatwiają dopasowanie stylu każdego układu, do którego go dodałem. Za cenę i za to, co potrafi, poziom ustawień ma sens i mogłem z łatwością uzyskać projekty, które chciałem.

Wszystkie elementy sterujące były intuicyjne i nigdy nie myślałem o potrzebie instrukcji. Możesz nawet użyć różnych tagów alt dla obrazów, aby poprawić SEO. Jeśli interesuje Cię suwak przed i po, który można wykorzystać w witrynach Divi, warto rozważyć Divi Sensei Przed i po suwaku.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś Divi Sensei przed i po suwaku? Daj nam znać, co o tym myślisz w komentarzach poniżej.

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