Wyróżnienie produktu Divi: Divi Designer Pack

Divi Designer Pack to pakiet układu zawierający ponad 720 elementów projektu, których możesz użyć z Divi Builder, aby bez wysiłku stworzyć kolejną stronę internetową. Zawiera zarówno jasne, jak i ciemne układy oraz różnorodne projekty dla każdej sekcji strony. W tym poście przyjrzymy się niektórym układom, które są dostarczane z Divi Designer Pack, aby sprawdzić, czy jest to odpowiedni produkt dla Ciebie.

Zacznijmy!

Instalowanie pakietu Divi Designer

Divi Designer Pack jest dostarczany jako plik .ZIP zawierający pliki Divi Library .json. Układy są spakowane w taki sposób, że można zainstalować wszystkie układy, wszystkie układy określonej kategorii lub wszystkie jasne lub ciemne układy określonej kategorii, w zależności od potrzeb.

Aby zainstalować układy, zacznij od rozpakowania pliku .ZIP w menedżerze plików. Następnie otwórz pulpit nawigacyjny WordPress i przejdź do strony Divi Library. Kliknij opcję Importuj i eksportuj u góry, a następnie wybierz kartę importu. Wybierz plik pakietu układu .json do zaimportowania, a następnie wybierz Importuj układy Divi Builder.

Po zaimportowaniu układu otwórz swoją stronę w Divi Builder. Kliknij niebieską ikonę plusa, aby dodać nową sekcję, a następnie wybierz opcję Dodaj z biblioteki.

Znajdź układ, którego chcesz użyć w bibliotece Divi.

Następnie kliknij przycisk Użyj tej sekcji, aby załadować układ na swoją stronę.

Pakiet projektanta Divi

Divi Designer Pack zawiera ponad 720 układów dla różnych sekcji witryny z jasnymi i ciemnymi projektami. Każdy z układów można dostosować do własnych upodobań, a zawartość można zastąpić własną. Ponieważ ten pakiet zawiera tak wiele różnych układów, nie możemy omówić ich wszystkich w tym poście. Przyjrzymy się kilku układom z każdej kategorii, aby dać Ci wyobrażenie o tym, jakie projekty możesz uzyskać dzięki Divi Designer Pack. Możesz także zobaczyć wszystkie układy na stronie demonstracyjnej na żywo.

Sekcje projektowe Divi Designer

Divi Designer Informacje o sekcjach

W sumie jest 25 układów sekcji. Układ 2 zawiera obraz i nakładające się pole tekstowe z liczbą. Po prawej stronie znajduje się tekst wraz z niektórymi modułami prezentacji.

Oto ciemna wersja układu 2.

Układ 11 zawiera dwukolorowy projekt z tekstem po lewej stronie i obrazem po prawej stronie, przyciskiem wezwania do działania i niektórymi modułami prezentacji z ikonami mediów społecznościowych.

Informacje o układzie 17 wykorzystuje kształty gradientu wokół obrazu. Po lewej stronie znajduje się trochę tekstu i przycisk wezwania do działania, a także kilka modułów prezentacji z ikonami strzałek.

Sekcje bloga projektanta Divi

W sumie jest 7 sekcji bloga, z ciemnymi i jasnymi odmianami. W tych sekcjach są wyświetlane wybrane posty na Twoim blogu. Layout 1 ma prosty i minimalistyczny wygląd, z efektem powiększenia najechania na obrazy i podkreślenia najechania na tytuł posta.

Trzeci układ bloga zawiera przycisk wezwania do działania w prawym górnym rogu i karty z lekkim efektem najechania cieniem.

Oto ciemna odmiana układu bloga 5. Zawiera efekt najechania kursorem, który dodaje podkreślenie do tytułu posta i lekko przesuwa kartę w górę.

Układ bloga 7 zawiera kartę z informacjami o wpisie u góry, obrazem pośrodku i przyciskiem Czytaj więcej u dołu.

Sekcje karuzeli Divi Designer

Istnieje 16 różnych projektów karuzeli, z kilkoma różnymi rodzajami karuzel. Pierwszym przykładem jest karuzela 4, karuzela członków zespołu. Każda karta członka zespołu zawiera zdjęcie, imię i nazwisko, stanowisko, opis i ikony mediów społecznościowych.

Układ 7 to karuzela referencji. To jest ciemny układ. Każdy element karuzeli zawiera zdjęcie profilowe, tekst referencji, imię i nazwisko oraz stanowisko.

Carousel 13 to karuzela postów na blogu. Jest to prosty układ kart z kategorią bloga w prawym górnym rogu obrazu i tytułem postu poniżej.

Sekcje kontaktowe projektanta Divi

Divi Designer zawiera 20 układów sekcji kontaktów. To jest układ 4, który zawiera tekst i informacje kontaktowe po lewej stronie oraz formularz kontaktowy po prawej stronie.

Układ kontaktu 6 to prosta sekcja z numerem telefonu, tekstem i przyciskiem wezwania do działania po lewej stronie, z obrazem po prawej.

Układ 15 zawiera formularz kontaktowy po lewej stronie z informacjami kontaktowymi po prawej stronie na gradientowym tle.

To jest ciemna odmiana układu 15.

Sekcje liczników Divi Designer

W sumie jest 16 układów liczników. Pierwszy układ ma na celu uzyskanie bezpłatnej wyceny i zawiera tekst i przycisk CTA po lewej stronie oraz obraz i kilka liczników liczb poniżej.

Układ 9 zawiera tekst u góry i liczniki liczb z ikonami poniżej.

Układ licznika 11 ma pasek licznika, który wypełnia się podczas ładowania strony. To jest ciemny układ.

Układ licznika 15 zawiera tekst po lewej stronie i przycisk wezwania do działania, a po prawej trochę więcej tekstu, a następnie liczniki liczb.

Sekcje wezwania do działania Divi Designer

W pakiecie Divi Designer znajduje się 15 układów CTA. Ten pierwszy przykład to układ 5. Jest to sekcja CTA, która wyróżnia aplikację mobilną i zawiera obrazy, które mogą prowadzić do sklepu Google Play i App Store.

To jest układ CTA 7 w ciemnej odmianie. Ma ciemny nałożony obraz z ikoną, tekstem i dwoma przyciskami CTA.

Layout 9 zawiera moduł blurb z tekstem i przyciskiem wezwania do działania nakładającym się na obraz z zaokrąglonymi rogami.

Układ 10 zawiera tekst i ikony mediów społecznościowych.

Sekcje często zadawanych pytań Divi Designer

Dostępnych jest 15 układów sekcji FAQ. To jest pierwsza sekcja FAQ. Zawiera duży obraz po jednej stronie i przełączane pytania FAQ po prawej stronie.

A to jest ciemna wersja pierwszej sekcji FAQ.

Układ FAQ 4 ma układ przełączania o pełnej szerokości.

Wreszcie, układ FAQ 7 zawiera przełączanie pytań FAQ po lewej stronie oraz obraz, tekst i przycisk wezwania do działania po prawej stronie.

Sekcje Divi Designer Hero

W sumie dostępnych jest 30 układów sekcji bohaterów. Pierwsza, układ 8, zawiera tekst po lewej stronie i przezroczysty obraz osoby po prawej stronie.

Układ bohatera 9 zawiera przyciemniony obraz tła z dużym tekstem bohatera i paskiem wyszukiwania. Poniżej paska wyszukiwania znajdują się trzy karty graficzne z tekstem opisu i przyciskiem Czytaj więcej.

Układ 19 wykorzystuje duży, przyciemniony obraz tła i zawiera tekst oraz dwa przyciski.

Sekcje cen Divi Designer

Istnieje również 20 układów cenowych. To jest układ cenowy 7. Zawiera różowe tło i dwie karty cenowe z tekstem po prawej stronie. Każda karta wyceny ma nagłówek i podtytuł, cenę, szczegóły i przycisk Kup teraz.

Układ cenowy 8 obejmuje trzy poziomy cenowe. Tytuł i cena wraz z podtytułem znajdują się po lewej stronie. Funkcje znajdują się po prawej stronie, oznaczone znacznikami wyboru, a przycisk Kup teraz znajduje się po prawej stronie. Środkowa opcja jest podświetlona na zielono.

Układ 12 zawiera trzy karty z ikoną, tytułem i podtytułem oraz ceną u góry każdej karty. Jest zielony baner, który oddziela górę od funkcji, a następnie listę funkcji, po której następuje przycisk. Każda karta ma efekt zawisu, który przesuwa kartę w górę po najechaniu myszką.

Oto ciemna wersja układu cenowego 19. U góry ma kilka ikon prezentacji, aby wyróżnić funkcje, oraz trzy bloki planu cenowego.

Sekcje usług Divi Designer

Divi Designer Pack zawiera 25 układów usług. Układ 3 zawiera nagłówek, trzy moduły prezentacji na ciemnym tle z tekstem opisu i przycisk.

Układ usług 14 zawiera trzy karty z ikoną u góry, tekstem opisu, numerowaną listą tekstową i linkiem do wyświetlenia szczegółów.

Układ 19 zawiera tekst nagłówka i opis, a także sześć modułów prezentacji z ikonami reprezentującymi każdą usługę.

To jest ciemna wersja układu usług 25. Zawiera cztery sekcje usług z efektem najechania, który powoduje przyciemnienie karty.

Sekcje suwaka Divi Designer

W sumie dostępnych jest 15 układów suwaków. Układ suwaka 1 zawiera mały suwak tekstowy z liczbą, tekstem i przyciskiem na każdym slajdzie. Nad suwakiem znajduje się sekcja tytułu z zielonym tłem i obrazem po prawej stronie.

Układ suwaka 8 to duży suwak obrazu z ciemną nakładką. Po lewej stronie znajduje się tekst, a poniżej przycisk.

Układ suwaka 12 ma duży obraz tła i slajdy tekstowe na białym tle, które zmienia się z każdym slajdem. Na każdym slajdzie znajduje się również przycisk.

Sekcje zespołu Divi Designer

W sumie dostępnych jest 25 układów sekcji drużyn. Układ 8 zawiera nagłówek i trzy obrazy członków zespołu z efektem najechania kursorem. Po najechaniu kursorem na obraz pojawia się ciemna nakładka, na której wyświetlane są imię i nazwisko członka zespołu, stanowisko oraz ikony mediów społecznościowych.

Oto ciemna wersja układu 8.

Układ 13 ma nagłówek i tekst po lewej stronie, a także przycisk CTA. Po prawej stronie znajdują się trzy okrągłe obrazy członków zespołu. Podobnie jak w przypadku ostatniego projektu, po najechaniu kursorem na obraz ujawnia się imię i nazwisko członka zespołu, stanowisko oraz ikony mediów społecznościowych.

Ten projekt ma układ 18 i zawiera karty ze zdjęciami członków zespołu, tytułami stanowisk i linkami do mediów społecznościowych. Po prawej stronie znajduje się nagłówek i opis, a następnie przycisk wezwania do działania.

Sekcje opinii projektanta Divi

Istnieje 25 różnych sekcji świadectw. To jest układ 1 i zawiera nagłówek i treść u góry, a następnie trzy sekcje z referencjami. Każda opinia ma ikonę, obraz, treść, imię i nazwisko, stanowisko i firmę.

Ta sekcja ma układ 2. Zawiera dwie karty referencji z ikoną cytatu, tekstem, obrazem, nazwiskiem, stanowiskiem i nazwą firmy na tle obrazu z ciemną nakładką. Po lewej stronie znajduje się tekst nagłówka, tekst główny i przycisk wezwania do działania.

To jest ciemna wersja układu 5, zawierająca kolorowe sekcje zawierające referencje klientów.

Układ 7 zawiera suwak opinii po lewej stronie z obrazem, tekstem opinii i nazwą na dole. Po prawej stronie znajduje się tekst nagłówka, tekst główny i przycisk wezwania do działania.

Szablony kreatora motywów Divi Designer

Dalej są szablony konstruktorów motywów. Są to szablony nagłówka, stopki i treści, które można przesłać z kreatora motywów w ustawieniach Divi na pulpicie nawigacyjnym WordPress.

Szablony stopek Divi Designer

W sumie dostępnych jest 20 szablonów stopek. Pierwszy to układ stopki 4. Ten projekt zawiera logo, ikony mediów społecznościowych i informację o prawach autorskich po lewej stronie. Po prawej stronie znajdują się dwie kolumny pozycji menu.

Układ stopki 13 zawiera formularz kontaktowy po lewej stronie oraz informacje kontaktowe i ikony mediów społecznościowych po prawej stronie. Dostępny jest również pasek pod stopką z informacjami o prawach autorskich.

Układ stopki 19 zawiera logo, adres i godziny otwarcia po lewej stronie. Pośrodku znajduje się pasek menu, a po prawej formularz zapisu do newslettera i linki do mediów społecznościowych. Na samym dole znajduje się informacja o prawach autorskich.

Szablony nagłówków Divi Designer

W pakiecie Divi Designer Pack znajduje się również 20 szablonów nagłówków. To jest nagłówek 7. Zawiera dodatkowy pasek menu w kolorze zielonym z informacjami kontaktowymi i przyciskiem wezwania do działania. Główny pasek menu zawiera logo po lewej stronie i pozycje menu wyrównane do prawej.

Układ nagłówka 8 zawiera informacje kontaktowe z wbudowanym logo u góry. Poniżej pozycje menu.

Układ nagłówka 13 zawiera ikony mediów społecznościowych po lewej stronie, logo pośrodku i przycisk wezwania do działania po prawej stronie. Poniżej znajdują się pozycje menu wyrównane do lewej oraz pasek wyszukiwania wyrównany do prawej.

Szablony Divi Designer 404

Istnieje 25 różnych szablonów stron 404. Pierwszy projekt, układ 6, zawiera litery „OOPS” za tekstem błędu 404. Ten układ ma również pomarańczowy przycisk, aby przejść do strony głównej.

To jest układ 9. Zawiera duży zacieniony tekst i błąd 404, a także przycisk powrotu do strony głównej, a następnie kilka ikon mediów społecznościowych.

Layout 12 zawiera cyfry 404 zapisane dużą czcionką i ma przycisk powrotu do strony głównej.

Szablony blogów Divi Designer

Szablony stron bloga Divi Designer

W pakiecie Divi Designer Pack znajduje się 20 szablonów blogów. Układ bloga 1 zawiera nagłówek obrazu z tytułem i przyciskiem. Posty są wymienione po lewej stronie z wyróżnionym obrazem, informacjami o postach i przyciskiem Czytaj więcej. Po prawej stronie znajduje się pasek boczny z paskiem wyszukiwania, ostatnimi wpisami i ostatnimi komentarzami. Na dole znajduje się inny obraz z nałożonym tekstem.

Oto ciemna wersja układu bloga 1.

Układ bloga 8 zawiera zakrzywione przekładki sekcji oraz sekcję nagłówka z tekstem i przyciskiem u góry. Posty na blogu mają układ przypominający kartę z obrazem, szczegółami wpisu i przyciskiem Czytaj więcej. U dołu strony znajduje się kolejna sekcja tekstowa.

Układ bloga 18 zawiera sekcję nagłówka z tekstem i przyciskiem, po której następują dwie kolumny blogu. Lewa kolumna wyświetla posty z dużym wyróżnionym obrazem. Prawa kolumna zawiera tylko szczegóły posta i przycisk Czytaj więcej. Na koniec w stopce znajduje się dodatkowy tekst.

Szablony postów Divi Designer

W pakiecie znajduje się 20 różnych szablonów postów. Układ posta 4 ma wyróżniony obraz na samej górze strony, z tytułem postu, informacjami o wpisie i nałożonym przyciskiem. Poniżej znajduje się treść postu i komentarze. Po prawej stronie znajduje się pasek boczny, który zawiera pasek wyszukiwania, ostatnie posty i ostatnie komentarze. Na dole strony znajduje się dodatkowy tekst.

Oto ciemna wersja układu postu 5. Wyróżniony obraz znajduje się u góry z zakrzywioną przegrodą. Treść posta i komentarze znajdują się na ciemnym tle, a następnie sekcja z obrazem i nałożonym tekstem promującym ofertę.

Układ 11 zaczyna się od tytułu wpisu u góry, a następnie dużego wyróżnionego obrazu. Następnie możesz znaleźć treść posta i komentarze. Po prawej stronie znajduje się karta zawierająca informacje o poście.

Układ postu 13 zawiera również tytuł u góry, a następnie wyróżniony obraz. Informacje o poście są wymienione pod obrazem. Dalej jest treść posta i komentarze, a na końcu sekcja wpisów powiązanych wyświetlająca karty z innymi postami z bloga.

Szablony Divi Designer Woo

Szablony Woo to układy współpracujące z wtyczką Woo Commerce.

Szablony koszyków Divi Designer

W pakiecie znajduje się 13 szablonów koszyków. Układ koszyka 1 zawiera niebieski motyw kolorystyczny. Na górze znajduje się nagłówek, a następnie koszyk, w którym można zobaczyć zawartość koszyka, zastosować kupon i zaktualizować koszyk. Poniżej znajduje się przycisk powrotu do sklepu. Po prawej stronie znajduje się suma koszyka, a następnie przycisk Przejdź do kasy.

Układ koszyka 2 ma nagłówek z ikoną koszyka. Następnie jest koszyk, w którym można zobaczyć produkty. Po lewej stronie znajdują się informacje o kuponach, a po prawej suma koszyka i przycisk przejścia do kasy.

Układ koszyka 8 zaczyna się od nagłówka, po którym następuje zawartość koszyka. Poniżej znajdują się ikony prezentacji i przycisk powrotu do sklepu. Po tym następuje suma koszyka i przycisk Przejdź do kasy. Po prawej stronie znajduje się moduł akordeonowy z kilkoma często zadawanymi pytaniami.

A oto ciemna wersja układu koszyka 8.

Szablony kasy Divi Designer

Łącznie dostępnych jest 13 szablonów kasy. Układ kasy 3 zawiera łącza do stron sklepu i koszyka u góry, a następnie sekcja wprowadzania kuponów. Poniżej po lewej stronie znajdują się dane do faktury i dodatkowe informacje, a po prawej suma zamówienia i płatność. To jest ciemna wersja.

To jest 4 szablon. Zawiera kilka ikon u góry, które są połączone z koszykiem i sklepem, po których następuje wpis kodu kuponu. Po lewej stronie znajdują się dane do faktury i informacje dodatkowe, a po prawej suma zamówienia i sposób płatności.

Oto ciemna wersja układu kasy 4.

Układ kasy 10 zawiera tytuł i wpis kuponu u góry, a następnie szczegóły rozliczenia i dodatkowe informacje. Po prawej stronie znajduje się suma zamówienia, płatność i niektóre moduły prezentacji.

Szablony produktów Divi Designer

Istnieje również 13 szablonów produktów. To jest układ 2, który zawiera duży obraz produktu u góry. Następnie znajduje się nazwa produktu, koszt, opis i przycisk Dodaj do koszyka. Poniżej znajdują się powiązane produkty i recenzje.

Układ produktu 6 ma ciemniejsze tło i zawiera zdjęcie produktu po lewej stronie oraz informacje o produkcie po prawej, z przyciskiem dodaj do koszyka. Poniżej znajduje się opis, recenzje i powiązane produkty.

Układ produktu 10 ma układ karty z informacjami o produkcie i przyciskiem Dodaj do koszyka po lewej stronie. Po prawej zdjęcie produktu. Poniżej znajdują się recenzje i powiązane produkty.

Oto ciemna wersja układu produktu 10.

Szablony sklepu Divi Designer

Wreszcie, w pakiecie Divi Designer Pack znajduje się również 10 szablonów sklepów. To jest układ 4, który zawiera nagłówek z obrazem, a następnie pasek boczny i produkty. Na dole znajdują się moduły blurb z dużymi ikonami.

Układ sklepu 8 zawiera nagłówek z tekstem i obrazem, produkty poniżej z obramowaniem, a następnie kilka modułów prezentacji.

To jest ciemna wersja layoutu sklepu 8.

Wreszcie układ sklepu 9 zawiera nagłówek z obrazem, następnie produkty po lewej stronie i pasek boczny po prawej stronie, a następnie kilka modułów prezentacji na dole.

Kup pakiet Divi Designer

Divi Designer Pack jest dostępny w Divi Marketplace. Kosztuje 19 USD za nieograniczone korzystanie z witryny i dożywotnie aktualizacje. Cena obejmuje również 30-dniową gwarancję zwrotu pieniędzy.

Końcowe przemyślenia

W tym artykule właśnie dotarliśmy do czubka góry lodowej, w pakiecie Divi Designer Pack jest o wiele więcej układów do odkrycia, wszystkie z różnymi stylami i zastosowaniami. Oczywiście każdy układ można całkowicie dostosować za pomocą własnych treści i zmienić, aby pasował do konkretnego przypadku użycia, a także można łączyć wiele różnych układów sekcji, aby łatwo tworzyć układy całej strony. Aby wyświetlić podgląd wszystkich różnych układów dostępnych w pakiecie Divi Designer Pack, obejrzyj prezentację na żywo.

Chcielibyśmy usłyszeć od ciebie! Czy próbowałeś Divi Designer Pack? Daj nam znać, co o tym myślisz w komentarzach!