Wyróżnienie produktu Divi: Divi Den Pro — biblioteka układów

Divi Den Pro – Layout Library to wtyczka innej firmy z ogromną biblioteką wstępnie zaprojektowanych elementów Divi, które pomogą Ci szybciej tworzyć strony internetowe. Zawiera unikalny interfejs użytkownika, który można przeszukiwać i sortować, dzięki czemu układy są łatwe do znalezienia. W tym poście przyjrzymy się Divi Den Pro – Layout Library, aby pomóc Ci zdecydować, czy jest to odpowiedni produkt dla Twojego zestawu narzędzi do projektowania Divi.

Instalowanie Divi Den Pro – Biblioteka układów

Instalacja Divi Den Pro – Layout Library była prosta. Działa to tak samo, jak przesyłanie dowolnej wtyczki, ale musisz być zalogowany na swoje konto Divi Marketplace, aby była dostępna w Divi. Najpierw, aby zainstalować, przejdź do:

1. Wtyczki
2. Dodaj nowe
3. Prześlij wtyczki
4. Wybierz plik
5. Zainstaluj teraz

Następnie, po zainstalowaniu wtyczki, aktywuj ją jak zwykle, a zobaczysz nowe menu dodane do pulpitu nawigacyjnego.

1. Aktywuj wtyczkę

Zawartość biblioteki układów

Divi Den Pro – Layout Library zawiera 2615 elementów biblioteki. Obejmuje to 1988 sekcji i modułów, 631 układów, 39 menu i 18 kompletnych projektów stron internetowych. Wszystkie elementy są wstępnie stylizowane. Układy są oznaczone, przetestowane i zoptymalizowane pod kątem różnych rozmiarów ekranu.

Istnieje kilka sposobów wykorzystania ich w układach Divi. Układy znajdziesz w menu Divi Den Pro DM oraz w Divi Theme Builder. Menu Divi Den Pro DM to najłatwiejszy sposób korzystania z nich. Możesz wyszukiwać je według słowa kluczowego i kategorii oraz importować do swojej biblioteki Divi.

Menu Divi Den Pro DM

W kokpicie WordPress znajdziesz nowy element menu o nazwie Divi Den Pro DM. Menu zawiera wiele linków, które znajdziesz również jako zakładki w samym menu.

Wyszukiwarka układu

Pierwsza karta to Wyszukiwarka układu. Obejmuje to pole wyszukiwania z filtrami po lewej stronie i wynikami po prawej stronie. Zawiera również zakładki, dzięki którym możesz przeglądać wszystkie układy, tylko bezpłatne układy lub tylko układy profesjonalne. Filtry pokazują liczbę układów w tym typie. Są podzielone na układy, sekcje, moduły, kategorie, kolekcje, Divi Theme Builder i Plugin Theme Builder.

W obszarze wyników wyświetlana jest miniatura układu. Miniaturka będzie przewijać się po najechaniu kursorem, jeśli układ jest większy niż kontener. Możesz wyświetlić układ na innej karcie, zapisać układ w bibliotece Divi lub pobrać układ na komputer jako plik JSON.

Wybranie filtra otwiera go, aby pokazać opcje. Otworzyłem Kolekcje, które pokazują nazwy układów z Divi Den. Wybranie jednego pokazuje układy w ramach tej kolekcji w obszarze po prawej stronie.

Kliknąłem, aby wyświetlić układ i otworzyło się demo na stronie Divi Den w innej zakładce. Strona zawiera wiele układów, sekcji itp. Najeżdżam kursorem na obraz pośrodku u góry, aby pokazać efekt najechania kursorem.

Najnowszy

Zakładka Najnowsze pokazuje najnowsze posty z bloga Divi Den. To dobry sposób, aby dowiedzieć się, co nowego w Bibliotece układów.

Samouczki

Zakładka Samouczki zawiera wszystkie samouczki, które uczą, jak korzystać z Divi Den Pro – Layout Library. Zawierają osadzone filmy, które wyświetlają się po kliknięciu samouczka, dzięki czemu możesz uczyć się bezpośrednio z pulpitu nawigacyjnego Divi Den bez opuszczania WordPress. Pomaga to w użyteczności, więc jeśli potrzebujesz pomocy, znajdziesz ją tutaj.

Kreator motywów

Zakładka Theme Builder dzieli układy na Divi Theme Builder i Plugin Theme Builder. Pokazuje kolekcje, typy stron itp. Są one również dodawane do Divi Theme Builder. Możesz także uruchomić Konstruktora motywów stąd.

Konstruktor motywów wtyczek zawiera łącze do otwierania Konfiguratora motywów.

Theme Customizer dodaje trzy nowe karty dostosowywania dla strony, bloga i ustawień globalnych. Obejmuje to dodatkowe funkcje, takie jak dostosowywanie wyskakujących okienek, pasek samoprzylepny, więcej ikon, przycisk powrotu do góry, wkrótce dostępna strona, dostosowywanie szablonów i wiele więcej.

Niestandardowe pliki CSS

Karta Niestandardowe pliki CSS zawiera niestandardowe pliki CSS z układów Divi Den, które można kopiować i modyfikować. Kliknięcie jednego otwiera CSS w innej karcie. Osadzone wideo pokazuje, jak używać niestandardowego CSS.

Zaawansowany

Karta Zaawansowane obejmuje kartę White Label i kartę Więcej opcji. White Label pozwala zmienić markę wtyczki, aby pasowała do Twojej marki.

Karta Więcej opcji umożliwia przenoszenie karty Divi Den Pro w obrębie elementów Divi Builder. Ta opcja jest domyślnie włączona.

Biblioteka układów Divi Den Pro w Divi Builder

Do modułu modułów dodano zakładkę dla Divi Den Pro – Layout Library.

Wybranie zakładki otwiera menu, w którym możesz wybrać żądany układ. Układy są pobierane jako pliki JSON, więc jeśli chcesz ich użyć, musisz przesłać je na strony i posty.

Biblioteka układów Divi Den Pro w narzędziu Divi Theme Builder

Interfejs Divi Den Pro – Layout Library jest również dodany na dole ekranu Divi Theme Builder. Działa tak samo, jak w kokpicie WordPress.

Działa to tak samo w Konstruktorze motywów, jak na stronach i postach.

Przykłady bibliotek układów Divi Den Pro

Teraz, gdy widzieliśmy, jak korzystać z interfejsu Divi Den Pro – Layout Library, spójrzmy na kilka przykładów. Przyjrzymy się kilku z każdego rodzaju.

Układy

Następnie przyjrzymy się kilku układom. Załaduję je do Divi Theme Builder. Po zapisaniu układów w bibliotece Divi są one dostępne w twoich układach. Wyszukaj je i wybierz kategorie po lewej stronie.

Sklep Landing Page V3 Ragnar

To jest górna część Shop Landing Page V3 Ragnar. Zawiera sekcję bohatera z wezwaniem do działania w wiadomości e-mail. Sekcja sklepu pokazuje polecane produkty i zawiera animowaną nakładkę, która przewija wiadomość dużym tekstem po najechaniu myszką.

Oto dolna część Shop Landing Page V3 Ragnar. Bardzo duże obrazy tworzą wezwania do działania sklepu i zawierają animowane przyciski. Wyjątkowa sekcja blogu wyświetla wyróżniony obraz za tekstem, który pojawia się po jednej stronie.

Kariera Strona V1 Tina

To jest górna część strony Kariera V1 Tina. Zawiera obraz główny z nakładającym się tytułem, wstęp z objaśnieniem i dwie kolumny tekstu. Poniżej znajduje się sekcja otwartych pozycji wyświetlanych jako karty.

To jest dolna część strony Kariera V1 Tina. Notatki z animacjami po najechaniu kursorem dostarczają informacji, po których następuje wezwanie do wysłania CV i sekcja dodatków firmowych.

Strona bloga o dawnych czasach

Ten przykład to górna część strony blogu Old Times. Zawiera sekcję bohatera z komunikatem nad obrazem tła oraz przycisk z animacją najechania kursorem. Sekcja blogu zawiera post na blogu z dużym wyróżnionym obrazem po lewej stronie i posty z mniejszym wyróżnionym obrazem jako paskiem bocznym po prawej stronie. Żółta linia oddziela sekcję blogu od sekcji bohatera. Wszystkie karty blogów zawierają animacje pochylenia.

To jest dolna część strony blogu Old Times. Używa również żółtych linii do oddzielania i zawiera dwie trzykolumnowe sekcje blogu, duży formularz e-mail i stopkę.

Układ strony menu Jamie

Oto górna część układu strony menu Jamie. Zawiera sekcję bohatera z ikonami, które prowadzą do różnych kategorii menu żywności. Obejmują animacje zawisu. Następuje dwukolumnowe menu żywności z obrazem po lewej stronie i opisem po prawej. Jedzenie jest podzielone na kategorie.

Układ strony menu Jamie

To jest dolna połowa układu strony menu Jamie. Kontynuuje menu żywności i zawiera informacje kontaktowe z mapą o pełnej szerokości.

Układ strony głównej Showreel

To jest górna część układu strony głównej Showreel. Sekcja bohatera zawiera przycisk, który odtwarza osadzone wideo i kilka notatek informacyjnych na pełnoekranowym obrazie tła. Poniżej znajduje się zestaw zakładek do wyświetlania informacji. Duże obrazy z animowanymi nakładkami odsyłają do usług.

To jest dolna część układu strony głównej Showreel. Kontynuuje duże obrazy i zawiera kolejną sekcję obrazów dla usług z przechylonymi animacjami nakładek. Zawiera również stylizowane liczniki liczb, formularz wiadomości e-mail i stopkę.

Strona paska postępu wizualnego Freddie

To jest strona paska postępu wizualnego Freddie. Ma elegancki układ, ale głównym elementem, który chcę pokazać, jest pasek postępu. To jest sekcja bohatera układu. Menu znajduje się na dole ekranu. Podczas przewijania menu jest dołączane do górnej części ekranu i pokazuje postęp w układzie.

Sekcja w tym przykładzie to studia przypadków. Pasek postępu jest żółty dla każdej przewijanej sekcji. Obrazy w tej sekcji zawierają efekty pochylenia.

Sekcje

Jeśli masz sekcje Divi Den Pro — Layout Library zapisane w bibliotece Divi, zakładka Divi Den Pro DM zostanie dodana do modułu sekcji.

Moduł muzyczny Greatest Hits Freddie

Moduł muzyczny Greatest Hits Freddie udostępnia stylizowaną sekcję odtwarzacza audio z czarnym tłem i żółtymi efektami najechania kursorem.

Demo galerii stylizacji

Styling Gallery Demo zapewnia interesującą galerię obrazów z różnymi kształtami obramowań i blokiem koloru do oddzielania obrazów.

Łaska Procesu Lintang

Styling Gallery Demo zawiera listę kroków. Są one umieszczone poziomo i obejmują ukształtowane obrazy lub kolory oraz efekty najechania kursorem.

Produkt Thunderbolt Freddie

Produkt Thunderbolt Freddie to sekcja produktu, która wyświetla suwak produktu po jednej stronie i stylizowane informacje po drugiej.

Łaska osi czasu Alula

Alula Timeline Grace tworzy alternatywną pionową oś czasu z obrazami po jednej stronie i informacjami po drugiej.

Moduły

Opcja Moduły na pulpicie nawigacyjnym zawiera przyciski. Oto kilka, które pobrałem.

Dodałem wszystkie pobrane przyciski na jednej stronie. Każdy z przycisków zawiera wciągające animacje najechania kursorem.

Gdzie kupić bibliotekę układów Divi Den Pro

Divi Den Pro – Layout Library jest dostępny w Divi Marketplace za 189 USD. Obejmuje nieograniczone korzystanie z witryny, rok wsparcia i aktualizacji oraz 30-dniową gwarancję zwrotu pieniędzy.

Końcowe przemyślenia na temat biblioteki układu Divi Den Pro

Oto nasze spojrzenie na Divi Den Pro — bibliotekę układów. W tej bibliotece jest wiele układów. Interfejs użytkownika jest prosty. Wyszukiwanie, sortowanie, importowanie i pobieranie układów jest intuicyjne. Zauważyłem, że link do sekcji i modułów jest bardziej ograniczony niż pulpit nawigacyjny, gdy układy znajdą się w bibliotece, są dostępne po wybraniu opcji Dodaj z biblioteki. Jeśli chcesz dodać kilka tysięcy profesjonalnie zaprojektowanych układów do swojej biblioteki Divi, warto zapoznać się z Divi Den Pro – Layout Library.

Chcemy usłyszeć od ciebie. Czy próbowałeś Divi Den Pro – Biblioteka układów? Daj nam znać, co o tym myślisz w komentarzach.