Divi Plugin Highlight – Owl Carousel Pro

Czy kiedykolwiek chciałeś wyświetlać posty, projekty, niestandardowe typy postów i obrazy w karuzeli za pomocą Divi Builder? Posty i obrazy są zazwyczaj wyświetlane w suwaku, który wyświetla jeden post lub obraz na raz, ale co, jeśli chcesz mieć rzeczywistą karuzelę wyświetlającą wiele postów jednocześnie? Możesz to łatwo zrobić za pomocą wtyczki o nazwie Owl Carousel Pro.

Owl Carousel Pro to wtyczka innej firmy, która dodaje dwa nowe moduły do ​​Divi Builder. Pierwsza wyświetla typy postów, takie jak projekty, posty i niestandardowe typy postów. Drugi to karuzela obrazów konkurująca z edytorem wizualnym, aby dodać dowolny rodzaj treści.

Dostępna jest darmowa wersja wtyczki. Przyglądam się wersji pro, która dodaje kilka nowych funkcji, w tym:

• niestandardowe typy postów
• wyświetl pola niestandardowe
• zapytanie niestandardowe
• zmień rozmiar miniatury
• zmień liczbę wyświetlanych obrazów
• otwórz obraz w lightbox

Obrazy do przykładów pochodzą z Unsplash.com.

Instalowanie Owl Carousel Pro

Prześlij i aktywuj wtyczkę jak zwykle. Zobaczysz wtedy dwa nowe moduły w Divi Builder: DP Owl Carousel i DP Owl Image Carousel. Moduły są pokolorowane inaczej niż standardowe moduły Divi, aby pomóc im się wyróżnić. To jest moja preferencja dla modułów innych firm, ponieważ ułatwia to ich znalezienie.

Karuzela DP Sowa

DP Owl Carousel wyświetla posty i projekty oraz niestandardowe typy postów w karuzeli. Wyświetli Twoje ostatnie 10 postów lub z wybranych przez Ciebie kategorii lub tagów. Jego zakładka zawiera ustawienia treści i elementów. Karta projektu zawiera tekst, tekst tytułu posta, meta tekst postu, tekst fragmentu posta, niestandardowy tekst, odstępy, strzałki, elementy sterujące i miniatury.

Zakładka Zaawansowane zawiera oczekiwane ustawienia CSS, ale dodaje również akcję kliknięcia, animację (określa czas przewijania), tło i widoczność. Kolory tła w obu modułach są tylko jednym kolorem, więc nie ma dostępnych gradientów ani obrazów. Normalnie nie zaglądałbym do zakładki Zaawansowane, chyba że chciałem użyć CSS, więc przegapiłbym te ustawienia, ponieważ oczekiwałem, że znajdą się w zakładce treści.

Możesz utworzyć niestandardowe zapytanie (przykłady podane na stronie) lub możesz użyć ustawień w module, aby kontrolować, co jest wyświetlane. Zawiera kilka ustawień do kontrolowania wyświetlania, takich jak liczba postów, numer przesunięcia, niestandardowa nazwa typu postu, kategorie, tagi do uwzględnienia i tagi do wykluczenia. Automatycznie dodał moje niestandardowe typy postów.

Zapytania niestandardowe są dodawane do motywu potomnego w kodzie PHP (zawsze wprowadzaj zmiany PHP w motywie potomnym, a nie w motywie nadrzędnym, aby nie utracić swoich zmian po aktualizacji motywu). Strona dewelopera zawiera kilka przykładów.

Uwaga – zawsze wypróbuj kod w witrynie testowej przed dodaniem go do działającej witryny.

Przykłady karuzeli DP Owl

To jest standardowy projekt (dodałem tło, aby się wyróżnić). Wyświetla moje ostatnie 10 postów we wszystkich kategoriach. Dołączyłem nagłówek Divi i meta postu, aby pokazać, jak wygląda na stronie. Kliknięcie dowolnego obrazu przeniesie Cię do posta.

Ten dodaje tytuł, kategorię i datę. Możesz także wyświetlić pola niestandardowe, jeśli je masz.

Ten pokazuje tytuł i fragment postu przy użyciu domyślnych 270 znaków.

W tym ustawiłem fragment postu na 70 znaków.

W tym wyłączyłem strzałki i kontrolki. Animacja nadal działa, ale użytkownicy nie mogą przeglądać slajdów.

W tym przypadku zmieniłem rozmiary i kolory czcionek, uczyniłem strzałki czerwonymi, zwiększyłem rozmiar kontrolek i uczyniłem je fioletowymi, zwiększyłem rozmiar miniatur, zmniejszyłem margines do 0 i ustawiłem wyświetlanie 3 obrazów. Drugi kolor kontrolek to ciemniejsza wersja koloru, który wybrałem. Drugi kolor jest dostarczany przez wtyczkę.

W tym przypadku dodałem tło w samym module i zmieniłem margines elementu tak, aby tło było widoczne między postami. Zmieniłem też kolory czcionek i tym razem dostosowałem wysokość i odstępy między wierszami. Pokazuje 4 posty na ekranie i zmniejszyłem rozmiar miniatury. Ustawiłem strzałki na duże, a kontrolki na małe.

Gdy zmienisz rozmiar miniatury, dopasuje się on tylko do liczby wyświetlanych postów. Jeśli więc chcesz, aby obrazy były większe, musisz ręcznie zmniejszyć liczbę wyświetlanych postów.

Karuzela obrazów DP Sowa

Karuzela obrazów DP Owl wyświetla obrazy w karuzeli. Pozwala dodawać obrazy oraz wyświetlać strzałki i elementy sterujące. Ustawienia projektu obejmują tekst, tekst tytułu obrazu, tekst zawartości obrazu, odstępy, strzałki, elementy sterujące i miniatury. Zakładka Zaawansowane jest taka sama jak moduł DP Owl Carousel.

Możesz dodać tyle obrazów, ile chcesz, otworzyć je w lightbox i użyć skopiowanej wersji obrazu lub oryginalnego obrazu. Celowo wybrałem obrazy o różnych rozmiarach, aby zobaczyć, jak to działa.

Obrazy ładnie się wyświetlają. Podoba mi się, że możesz linkować do adresu URL lub otworzyć je w lightbox. Chciałbym zobaczyć nakładki dodane do obrazów, ponieważ jeszcze bardziej poprawiłoby to wrażenia.

Przykłady karuzeli obrazów DP Owl

Oto jak moduł wygląda na stronie przy ustawieniach domyślnych. Dodałem tło w sekcji, aby się wyróżnić.

W tym przykładzie dodałem tytuły i tekst do obrazów. Ustawiłem również strzałki i kontrolki na duże i zmienione kolory dla każdego.

Ten wyświetla 4 obrazy. Zwiększyłem rozmiar obrazu i zmniejszyłem margines elementu z 8 do 4. Następnie dostosowałem rozmiary i kolory czcionek, strzałek i kontrolek. Czcionki tytułu mają zwiększone odstępy.

Ten używa ciemnego tła z nowymi kolorami czcionek, kontrolek i strzałek.

Oto jak wyglądają obrazy po otwarciu ich w lightbox. Animacja przewijania nadal działa w tle.

Niestandardowe typy postów

W module Owl Carousel Pro upewnij się, że zapytanie niestandardowe jest wyłączone (jest to używane tylko wtedy, gdy chcesz tworzyć własne niestandardowe filtry zamiast wybierać kategorie z listy) i wybierz typ posta w polu Nazwa niestandardowego typu posta. Zainstalowałem WooCommerce i teraz automatycznie mam opcję Produkt.

Każda z moich kategorii produktów jest automatycznie dodawana do listy kategorii. Teraz mogę przewinąć w dół i wybrać produkty, które chcę wyświetlić w karuzeli.

Produkty będą wyświetlane, ale aby wyświetlić ceny, muszę włączyć pole niestandardowe, wybrać pole do wyświetlenia i dodać etykietę, aby pokazać żądany symbol waluty. Przewiń w dół i włącz opcję Pokaż pola niestandardowe. Dodaj _price do niestandardowych nazw pól i $ do niestandardowych etykiet pól.

Mam teraz karuzelę produktów, która pokazuje wybrane przeze mnie kategorie WooCommerce. Wybrałem wyświetlanie postów 4, zwiększyłem rozmiar obrazu, zmieniłem kolory czcionki dla tytułu, meta i pól niestandardowych oraz zwiększyłem rozmiary czcionek dla pól tytułu i pól niestandardowych. W tym przykładzie pokazuję tylko datę dla meta, ale tak jak zwykłe posty, mogę pokazać dowolną informację meta i fragment.

Korzystanie z Owl Carousel Pro z dodatkiem i wtyczką Divi Builder

Owl Carousel Pro świetnie współpracuje również z Extra. To jest karuzela obrazów.

Oto spojrzenie na wtyczkę z wtyczką Divi Builder zainstalowaną w motywie Twenty Seventeen WordPress. Ten wyświetla moje produkty WooCommerce.

Licencja

Wtyczka może być używana na nieograniczonej liczbie stron internetowych dla Ciebie i Twoich klientów. Obejmuje 1 rok aktualizacji i wsparcia.

Końcowe przemyślenia

Owl Carousel Pro dodaje dwa fajne moduły do ​​Divi Builder, które pozwalają wyświetlać posty, projekty, niestandardowe typy postów i obrazy w dostosowywanej karuzeli. Uwzględniono większość oczekiwanych dostosowań modułu Divi, a także kilka nowych funkcji sterowania wyświetlaczem.

Uważam, że prawie każda funkcja i ustawienie jest intuicyjne. Uważam, że niestandardowe filtry są mylące dla przeciętnego użytkownika. Chciałbym zobaczyć kilka kompletnych przykładów tworzenia filtrów, ponieważ zademonstruje to ogromne możliwości tej wtyczki. Nawet jeśli nie chcesz zajmować się kodem, wersja pro dodaje wystarczająco dużo funkcji, aby warto ją rozważyć.

Chcielibyśmy usłyszeć od Ciebie. Czy próbowałeś Own Carousel Pro? Daj nam znać o swoim doświadczeniu w komentarzach.

Polecany obraz za pośrednictwem gst / shutterstock.com