Divi Plugin Highlight: DP Testimonials Slider

Referencje to jeden z najważniejszych elementów strony internetowej firmy. Istnieje kilka sposobów budowania eleganckich referencji za pomocą Divi, w tym moduł referencji, moduł notki, kombinacje tekstu i obrazów i wiele innych. Inną opcją jest użycie wtyczki innej firmy, która zapewnia zarządzanie referencjami i wbudowane układy, takie jak DP Testimonials Slider.

DP Testimonials Slider tworzy nowy niestandardowy typ posta o nazwie jvt_testimonials. Pozwala tworzyć swoje referencje w edytorze, a następnie udostępnia trzy moduły do ​​wyświetlania tych referencji. Możesz wybrać wyświetlanie wszystkich referencji, ograniczyć wyświetlaną liczbę i wyświetlać określone kategorie. Każdy z modułów zawiera kilka układów do wyboru i możesz je stylizować.

Przyjrzyjmy się wtyczce.

Referencje DP

Do pulpitu nawigacyjnego zostanie dodana nowa pozycja menu o nazwie Referencje . Kliknięcie go pokazuje listę referencji, które utworzyłeś.

Wybierz Dodaj referencje, a zobaczysz edytor, w którym możesz stworzyć referencje. Zawiera treść, kategorie, obraz i informacje o referencjach. Jest to edytor, który otrzymujesz niezależnie od tego, czy używasz Gutenberga, czy Edytora klasycznego.

Kategorie referencji działają tak samo jak kategorie postów. Tutaj możesz je tworzyć i edytować.

DP Referencje Moduły suwaka

Do Divi Builder dodano trzy moduły:

Widok siatki referencji DP

Widok siatki referencji DP zawiera ustawienia umożliwiające wybór układu spośród 3 opcji, ustawienie liczby referencji, które mają wyświetlać, wyświetlać i stylizować ikonę cytatu, wyświetlać obraz, wyświetlać link do cytatu, wybrać kategorię, dostosować kolor paginacji, link itp.

Zawiera również standardowe ustawienia Projektu i Zaawansowane. CSS umożliwia kierowanie na nazwę, nazwę firmy i opis. Każdy z modułów zawiera te ustawienia.

Widok listy referencji DP

Widok listy referencji DP zawiera 2 układy i dodaje opcję Sortuj według , umożliwiającą sortowanie według wieku referencji, tytułu lub losowo.

Suwak referencji DP

Suwak referencji DP zawiera 56 układów i dodaje kontrolki suwaka. Obejmuje kolejność, autoodtwarzanie, szybkość, paginację, zatrzymanie przesuwania po najechaniu myszą i ograniczenie zawartości wyświetlania.

Przykłady widoku siatki referencji DP

To jest Układ 1 przedstawiający 3 referencje. Tworzy zakreślone obrazy i wyświetla każdą opinię na karcie z efektem cienia. Wszystko inne zostawiłem w ustawieniach domyślnych.

W tym przykładzie pracuję nad układem 2. Dodaje tło z gradientem. Zostawiłem to domyślnie i dostosowałem kolory, rozmiary i wagi tekstu oraz kolor ikon. Ustawiłem również wyświetlanie referencji w losowej kolejności.

W opublikowanym widoku obrazy są okrągłe i nakładają się na pudełko zawierające referencje. Obrazy obracają się, gdy najedziesz na nie, jak widać tutaj.

Lista referencji DP Zobacz przykłady

To jest układ 1 dla widoku listy . Wszystko zostawiłem w ustawieniach domyślnych.

Układ 2 zmniejsza rozmiar obrazów i dodaje elegancki wygląd pudełka z dwoma okrągłymi rogami. Po najechaniu kursorem pokazuje efekt cienia.

Przykłady suwaków z referencjami DP

Do suwaka musiałem użyć Classic Divi Builder. W przeciwieństwie do pozostałych dwóch modułów, ten moduł nie pojawia się podczas korzystania z New Divi Builder lub Visual Builder. Posiada 54 układy. Zamiast patrzeć na wszystkie, przyjrzymy się kilku.

To jest Układ 1. Tworzy zakreślone obrazy i nie zawiera nawigacji dla slajdów. Możesz dostosować kolory punktorów.

To jest Układ 2. Dodałem cień pudełka, aby wyróżniał się z tła i ograniczyłem tekst do 50 znaków. Stylizacja jest domyślna.

To jest Układ 3. Usuwa obraz. Uwzględniłem cień pudełka i limit znaków z poprzedniego przykładu.

To jest Układ 4 z ustawieniami domyślnymi. Zobaczę, co da się zrobić ze stylizacją.

Po wybraniu układu opcje stylów tego układu są wyświetlane w ustawieniach kolorów. Możesz wybrać inny układ, dostosować jego ustawienia i wrócić do dowolnego układu, a jego ustawienia nadal tam są.

Dodałem tło, aby kolory się bardziej wyróżniały.

To jest Układ 5. Do sekcji dodałem lekko szare tło i suwak przyjmuje to tło.

To jest Układ 6. Pokazuje dwie referencje na slajd.

To jest Układ 7. Pokazuję pełny tekst referencji. Podoba mi się obraz zachodzący na pudełko z referencjami.

To jest Układ 8. Podoba mi się ten projekt.

To jest Układ 9. Jest podobny do 8 w swoim układzie, ale ma własne kolejki projektów.

To jest Układ 10. Tworzy ładne pole wokół autora i dodaje dwa zestawy cudzysłowów.

W tym zestawie używam układu dwukolumnowego, aby pokazać dwa moduły. Po lewej stronie jest Układ 11, a po prawej Układ 12. Układ 11 dodaje nawigację w stylu standardowym.

To jest Układ 14. Zawiera również przyciski nawigacji po wpisach.

Oto kolejny dwukolumnowy układ z układem 53 po lewej stronie i układem 54 po prawej stronie. Layout 54 ma ciekawą animację suwaka – slajd kurczy się, szybko przesuwa się na bok, podczas gdy kolejny pojawia się na miejscu, a nowy slajd rośnie, wypełniając przestrzeń.

To jest Layout 55. Dodaje trochę stylu narożników i tworzy baner dla nazwy. Lubię używać koloru. Ten zawiera tę samą animację co Layout 54.

To jest Układ 56. Usuwa obrazy i tworzy ładne pudełko z banerem na nazwy.

Integracja formularzy Caldera

Witryna wydawcy zawiera szablon dla Caldera Forms do tworzenia formularza zgłoszenia referencji. Jest on zawarty w dokumentacji do pobrania i zawiera instrukcje korzystania z niego.

Za pomocą tego formularza każdy może przesłać za jego pośrednictwem opinię, która zostanie zapisana jako wersja robocza do przejrzenia. Wysyła również wiadomość e-mail do administratora ze wszystkimi informacjami.

Licencja i dokumentacja

DP Testimonials Slider jest dostępny na stronie dewelopera. Dostępne są trzy licencje:

• 1 strona – $30
• 5 stron – 40 .$
• Nieograniczone witryny – 50 USD

Dokumentacja jest dostępna w postaci pliku do pobrania na stronie sprzedaży wtyczki. Zawiera opis korzystania z wtyczki, instrukcje używania jej z Caldera Forms oraz szablon Caldera Forms.

Końcowe myśli

DP Testimonials Slider tworzy eleganckie referencje. Tworzenie referencji i korzystanie z trzech modułów jest intuicyjne. Moduły widoku siatki i listy działały świetnie w nowym edytorze zaplecza. W przypadku modułu slidera musiałem użyć klasycznego konstruktora. Wszystkie trzy wtyczki działają świetnie w klasycznym builderze, więc jeśli masz do nich dostęp, to polecam, dopóki funkcja frontendu nie zostanie dodana do modułu slidera.

Nawet użycie szablonu Caldera Forms było praktycznie bezproblemowe. Właśnie zaimportowałem plik JSON i zadziałał przy pierwszej próbie.

Jedyne problemy, jakie miałem, to zdobycie tła do pokazania w modułach. Tła sekcji i wierszy wyświetlane z referencjami bez problemu. Ponadto nie było jasne, gdzie w referencjach zostaną wykorzystane linki społecznościowe. Nie pojawiają się również w demach na stronie wydawcy.

Jestem pod wrażeniem ilości układów jakie posiada moduł slidera. Lubię też ich animacje. Wiele przesuwa się z boku, ale istnieje wiele innych animacji przesuwania, w tym od góry do dołu, kurczenia się, powiększania itp. Nadchodząca aktualizacja doda widżet i krótki kod.

Jeśli jesteś zainteresowany zarządzaniem swoimi referencjami i wyświetlaniem ich za pomocą modułu, warto zajrzeć do DP Testimonials Slider.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś DP Testimonials Slider? Daj nam znać o swoim doświadczeniu w komentarzach.

Polecane zdjęcie za pośrednictwem Blanc-k / shutterstock.com