Kompletny przewodnik po modułach Divi (oficjalny i zewnętrzny)

Jeśli używasz motywu Divi lub Divi Builder, będziesz regularnie pracować z modułami. Są to bloki konstrukcyjne w motywie, które umożliwiają dodawanie elementów strony, stylizowanie ich, kontrolowanie i wykorzystywanie ich do tworzenia pięknych stron internetowych.

Problem polega na tym, że jesteś w trakcie projektowania lub próbujesz poruszać się po okolicy Divi Builder, trudno jest dokładnie określić, co jest dostępne.

Ten kompletny przewodnik po modułach Divi przedstawia 46 podstawowych modułów zawartych w Divi. Podkreśli również niektóre bezpłatne i premium moduły od programistów zewnętrznych.

Wszystko po to, abyś mógł w pełni wykorzystać Divi na stronach internetowych swoich lub swoich klientów.

Ten artykuł jest jednym z naszych wielu Recenzje Divi że CollectiveRay zrobił, aby objąć różne aspekty motywu i kreatora Divi. Sprawdź również naszą listę przykłady użycia motywu Divi tworzyć wspaniałe strony internetowe.

Chcesz kupić Divi w okazyjnej cenie? Obecnie mamy ekskluzywną zniżkę od Elegant Themes:

Kup Divi za 10% ZNIŻKI w styczeń 2022 Only

Jeśli potrzebujesz więcej motywacji do zakupu Divi i eksperymentowania z wieloma modułami Divi tutaj, zrobi to ostatnia aktualizacja wydajności.

Divi niedawno zrewolucjonizowało swój kod, dzięki czemu jest szybszy i lżejszy niż kiedykolwiek wcześniej.

W ramach ulepszeń Divi zmniejszył CSS o 94% i wprowadził dynamiczny CSS, który ładuje tylko to, co jest wymagane, wprowadził inteligentne style w celu zmniejszenia duplikatów i zmniejszenia rozmiarów plików, usunął CSS blokujący renderowanie, zoptymalizował JavaScript i dodał dynamiczny framework PHP, aby zwiększyć wydajność funkcji.

Oficjalne moduły Divi

Obecnie dostępnych jest 46 modułów Divi.

1. Akordeon

Akordeon dodaje do strony moduł suwaka akordeonu. Wiesz, kiedy widzisz pole zawartości z elementem do wybrania i przesuwa się ono w dół, aby odsłonić więcej zawartości? To akordeon.

W przypadku Divi moduł akordeonu to wybieralny element zawierający treść. Wybierz pierwszą linię i rozwinie się, aby wyświetlić krótkie wyjaśnienie lub przegląd. Wybierz następną linię, a pierwsza linia się zamknie, a druga się otworzy. To elegancki sposób na umieszczenie dużej ilości treści na małej przestrzeni.

2. audio

Moduł Audio zapewnia odtwarzacz audio, który możesz umieścić w dowolnym miejscu na stronie. Możesz połączyć odtwarzacz z lokalnie hostowanym plikiem audio, aby był odtwarzany za każdym razem, gdy wybierze go użytkownik.

W Divi moduł Audio jest prostym odtwarzaczem audio, ale jeśli znasz trochę CSS, możesz sam go stylizować.

3. Liczniki barowe

Liczniki słupków to paski postępu, które widzisz na stronach internetowych w całym Internecie. Zrobione dobrze, są natychmiast zrozumiałą miarą czegoś i mogą działać bardzo dobrze w odpowiedniej sytuacji.

Liczniki Divi Bar mogą być kolorowe, dostosowane do prawie każdego celu, ręcznie konfigurowane dla określonych poziomów i używane na wiele sposobów.

4. blog

Moduł Divi Blog umożliwia umieszczanie wpisów na blogu w dowolnym miejscu na stronie. Nie tylko możesz umieszczać te posty w dowolnym miejscu, ale także stylizować je zgodnie z Twoim motywem.

Moduł Divi Blog zapewnia pełną swobodę w zakresie miejsca i sposobu wyświetlania postów na blogu. Nie jesteś już przywiązany do tego, gdzie WordPress lub Twój motyw uważa, że ​​powinieneś je mieć w tym module.

5. Blurb

Moduł Blurb to element treści wraz z ikoną i opcjonalnymi animacjami. Są one przydatne w przypadku opisów produktów lub usług na stronach, ponieważ opcjonalny aspekt animacji może nieco zainteresować stronę.

Moduł Divi Blurb ma szereg ikon, kolorów i opcji animacji w zależności od tego, jak ich używasz. Niektóre są zawarte jako domyślne w module, podczas gdy inne można zaimplementować za pomocą CSS.

6. Przycisk

Moduł Divi Button umożliwia dodawanie przycisków w dowolnym miejscu witryny, w dowolnym kolorze i szerokiej gamie kształtów i rozmiarów. Projektem można sterować w konfiguratorze motywów, a łącza i efekty można konfigurować w tym samym czasie.

Są prostym, ale skutecznym rozszerzeniem istniejących opcji przycisków w Divi.

7. Wezwanie do działania

Wezwania do działania odgrywają kluczową rolę w konwersji. Im bardziej przekonujące możesz je zrobić, tym bardziej mogą być skuteczne. Tu właśnie wkracza ten moduł.

Moduł Divi Call to Action zapewnia łatwy sposób tworzenia własnych wezwań do działania za pomocą kombinacji pola CTA, nagłówka, treści i przycisku, aby zwiększyć liczbę konwersji w dowolnym miejscu witryny.

8. Licznik okręgów

Moduł licznika kołowego działa w podobny sposób do liczników słupkowych, ale zamiast tego używa pełnego koła graficznego. Zamiast prostego paska, moduł dodaje pełne koło z obszarami zakrytymi w zależności od tego, jaki procent oznaczysz jako ukończony.

Licznik Circle współpracuje z konfiguratorem motywów i można go w pełni dostosować do dowolnego motywu.

9. kod

Moduł Divi Code to niestandardowy element kodu, który możesz dodać do dowolnej strony. Akceptuje skrócone kody, CSS i HTML i może pomóc Ci osiągnąć wiele rzeczy na stronie.

Działają podobnie do niestandardowych elementów CSS w motywach, tylko możesz je umieścić w dowolnym miejscu i sprawić, by robiły prawie wszystko, ponieważ nie są ograniczone przez motyw.

10. Komentarze

Moduł komentarzy Divi umożliwia dodawanie komentarzy z Twojego bloga w dowolnym miejscu na stronie. Na przykład rekomendacja lub informacja zwrotna z komentarza na blogu może być polecana na stronie produktu.

Zamiast używać obrazu, możesz dołączyć prawdziwą rzecz, a następnie link do głównego komentarza, co tylko zwiększy autentyczność.

11. Formularz kontaktowy

Moduł Formularz kontaktowy jest przydatny, jeśli nie chcesz korzystać z wtyczki formularza kontaktowego innej firmy. Możesz zaimplementować formularz w dowolnym miejscu na stronie i nadać mu styl za pomocą dostosowywania motywów.

Możesz tworzyć wiele formularzy, używać walidacji pól i logiki warunkowej, aby każdy formularz działał.

12. Minutnik

Zegary odliczające są często używane do wydania produktów, odliczania do ofert specjalnych lub wyprzedaży lub do wywołania niepokoju u czytelników.

Pomaga w tym moduł Countdown Timer, który umożliwia stylizację timera, dodanie własnego odliczania i umieszczenie go w dowolnym miejscu na stronie.

13. Dzielnik

Dzielniki to małe, ale ważne sposoby na rozbicie stron internetowych i zapewnienie odbiorcom trochę przerwy przed kolejną sekcją. Większość motywów internetowych wydaje się uwzględniać je jako refleksję, i właśnie tam pojawia się Divi.

Motyw Divi ma dzielniki, ale moduł dzielnika dodaje więcej.

14. Zgoda na e-mail

Formularze zgody na e-mail są niezbędne do tworzenia list e-mailowych i zwiększania zaangażowania. E-mail jest nadal niezwykle potężnym narzędziem marketingowym, a moduł Email Opt-in ma w tym pomóc.

Za pomocą tego modułu możesz tworzyć formularze, zapisy do newslettera i elementy do generowania leadów, a następnie połączyć go z programem pocztowym, aby efektywnie nim zarządzać.

15. Filtrowalny portfel

Moduł filtrowalnego portfolio jest idealny do dołączenia atrakcyjnej sekcji portfolio na stronie. Możesz go stylizować, konfigurować własne kategorie i filtry oraz tworzyć w pełni interaktywne portfolio.

Niektóre motywy Divi mają wbudowane elementy portfolio, a Divi Builder ma je też, ale ten moduł dodaje jeszcze więcej.

16. galeria

Moduł Divi Gallery robi to samo dla galerii. Umożliwia prezentowanie obrazów i filmów w dowolnym miejscu na stronie.

Galerię można w pełni dostosować i dołączyć dowolny obraz. Możesz ustawić styl jako siatkę lub suwak i kontrolować wiele aspektów jego wyglądu i stylu z poziomu dostosowania.

17. Wizerunek

Moduł Divi Image dodaje szereg opcji podczas wyświetlania obrazów na stronie. Możesz dodać efekty lightbox, wdrożyć leniwe ładowanie, dodać animacje i sprawić, by Twoje obrazy naprawdę się wyróżniały.

Obrazy mają ogromny wpływ na zaangażowanie i czas spędzony na stronie, więc sprawiedliwe traktowanie obrazów ma sens. Ten moduł może w tym pomóc.

18. Zaloguj Się

Moduł Divi Login dodaje do stron charakterystyczny formularz logowania przy użyciu znanej stylistyki Twojego motywu. Moduł może być dopasowany do strony tak, aby znajdował się w tle lub wyróżniał się i był zauważony.

Strona logowania automatycznie zaloguje użytkownika do witryny bez przekierowywania do domyślnej strony logowania WordPress.

19. Mapa

Moduł Divi Map przyjmuje standardowy element mapy i dodaje dodatkowe opcje dostosowywania i szewless integracja ze stroną. Ponieważ mapy mogą odgrywać integralną rolę w niektórych witrynach, jest to bardzo przydatny dodatek do użycia!

Mapa integruje się z Mapami Google, aby wyróżnić lokalizacje lub dodać elementy interaktywne. Może być również dopasowany do Twojej strony.

20. Licznik liczb

Moduł licznika liczb to kolejne urządzenie graficzne do komunikacji z publicznością. Zamiast korzystać z grafiki w formie słupka lub koła, moduł ten wykorzystuje do komunikacji proste liczby.

Działa w taki sam sposób, jak te inne. Nadaj mu styl w dostosowywaniu motywów i umieść w dowolnym miejscu na stronie.

21. Osoba

Moduł Person dodaje osobowości do Twojej witryny. Niezależnie od tego, czy chcesz zaprezentować autorów, zapewnić wgląd w swój zespół, czy coś innego, moduł Person pomoże Ci to zrobić.

Możesz dodać obraz, kopię biografii, linki do mediów społecznościowych i opublikować je w dowolnym miejscu na swojej stronie internetowej. Istnieją również opcje dostosowywania, jeśli chcesz, aby pasowały do ​​istniejącego motywu.

22. portfel

Moduł Portfolio opiera się na opcjach udostępnianych przez Galerię, umożliwiając zaprezentowanie swojej pracy na wiele sposobów. Jeśli jesteś freelancerem lub małą firmą i chcesz pochwalić się swoją pracą, oto jak.

Moduł może pracować z siatkami, układami o pełnej szerokości, oferować filtry kategorii i paginację. Istnieje również kilka dostosowań, które możesz zastosować, jeśli zajdzie taka potrzeba.

23. Nawigacja po wpisach

Nawigacja po wpisach przyjmuje domyślne opcje odczytu następnego lub poprzedniego i czyni je bardziej atrakcyjnymi. Chociaż WordPress i wiele motywów ma te funkcje, opcja Divi dodaje jeszcze więcej narzędzi.

Moduł umożliwia dodawanie atrakcyjnych przycisków poprzedniego i następnego na dole postów, aby umożliwić czytelnikom poruszanie się po blogu.

24. Suwak postów

Moduł Post Slider to świetny sposób na zaprezentowanie swoich postów na blogu. Używa suwaka do przewijania zdefiniowanej serii postów na blogu, aby pochwalić się swoją pracą i przyciągnąć kliknięcia.

Podczas gdy wiele innych wtyczek oferuje wyświetlanie lub wyświetlanie postów na blogu, suwak może zawierać kolorowy obraz i fragment, który z pewnością przyciągnie uwagę. W tym module możliwe są również drobne dostosowania.

25. Tytuł posta

Moduł Post Title to mały, ale przydatny dodatek, który wykorzystuje styl Divi dla tytułów postów. Wyświetla tytuł, a także ma możliwość dodania polecanego obrazu i wszelkich metadanych, które możesz chcieć wyświetlić.

Moduł ma kilka opcji dostosowywania, których możesz użyć, aby dopasować go do motywu, ale ustawienia domyślne działają wystarczająco dobrze w większości zastosowań.

26. Tabele cenowe

Tabele cenowe to jeden z tych elementów, które bardzo niewiele motywów WordPress wydaje się działać poprawnie. Divi nie jest jednym z nich. Domyślne tabele tematyczne działają wystarczająco dobrze, ale możesz je wzmocnić za pomocą modułu Tabele cenowe.

Ten moduł dodaje konfigurowalną tabelę, którą możesz zmieścić na dowolnej stronie. W razie potrzeby możesz zmieniać kolory, waluty, liczbę funkcji i efektów.

27. Szukaj

Wyszukiwanie to kolejna z tych funkcji, która zwykle jest less niż idealny. Domyślna funkcja wyszukiwania WordPress może być powolna i pomijać oczywiste. Niektóre motywy zawierają wyszukiwanie, które często rozczarowuje. Moduł Divi Search zmienia to wszystko.

Jest to proste pole wyszukiwania, które możesz umieścić w dowolnym miejscu i dopasować do swojego motywu. Prosty, szybki i bardzo skuteczny.

28. sklep

Moduł Divi Shop to doskonałe rozszerzenie WooCommerce. Jeśli prowadzisz już sklep, ten moduł umożliwia prezentowanie produktów w osobnym elemencie w dowolnym miejscu na Twojej stronie. To doskonała okazja do cross-sellingu lub up-sellingu.

Moduł pozwala na sortowanie produktów, stylizowanie elementu, a także dokonywanie kilku dostosowań do wyświetlacza.

29. Pasek boczny

Moduł paska bocznego jest jednym z najbardziej użytecznych modułów na tej liście. Zajmuje standardowy pasek boczny i daje pełną kontrolę nad tym, jak wygląda, co zawiera i jak działa.

Moduł pozwala tworzyć niestandardowe paski boczne za pomocą dostosowywania motywów i umieszczać je na wszystkich stronach, niektórych stronach lub określonych stronach.

30. Suwak

Suwaki mogą być kontrowersyjnymi tematami, ale nie ma wątpliwości, że mogą być skuteczne, jeśli są odpowiednio zaprojektowane. Moduł Divi Slider właśnie to robi.

To prosty suwak, który można umieścić w dowolnym miejscu na stronie i dostosować do wyglądu. Możesz także używać wideo, obrazów, kontrolować typ slajdu i wiele więcej.

31. Obserwuj media społecznościowe

Przyciski śledzenia to kolejna funkcja strony, którą niewielu motywom udaje się uzyskać. Są tak prostą funkcją, ale często mogą wyglądać niezgrabnie, nie działać poprawnie lub wyglądać, jakby zostały dodane za pomocą wtyczki.

Moduł Social Media Follow jest inny. Dodaje atrakcyjne ikony z linkami i pozwala dostosować je do własnych potrzeb.

32. Tabs

Jeśli moduł Accordion nie jest tym, czego szukasz, być może moduł Tabs jest. To kolejny sposób na umieszczenie dużej ilości tekstu bez przeciążania strony.

Ten dodatek umożliwia tworzenie elementu treści z wieloma poziomymi zakładkami, które mogą zawierać kopie, obrazy lub wideo.

33. Świadectwo

Moduł Referencje dodaje dowód społecznościowy do strony. Wszyscy wiemy, jak ważny jest dowód społeczny, a ten moduł pozwala dodać go w dowolnym miejscu.

Masz kilka opcji stylizacji, aby dopasować moduł do strony, możesz dodać obrazek, niektóre kopie i linki w zależności od potrzeb.

34. Tekst

Moduł Tekst umożliwia dostęp do edytora tekstu WordPress, aby dodać niestandardowy tekst w dowolnym miejscu. To kolejny pomniejszy, ale przydatny dodatek, który oferuje znacznie większą swobodę w umieszczaniu tekstu na stronie.

35. Przełącz

Moduł Divi Toggle działa w podobny sposób do Accordion, ponieważ przełącza pola zawartości, aby się otwierały i zamykały. Podczas gdy Akordeon używa pojedynczego pudełka z wieloma slajdami, Toggle używa indywidualnych pudełek, z których każdy slajd jest indywidualnie.

Jest to przydatna alternatywa dla Akordeon, w której możesz mieć tylko kilka elementów, których chcesz użyć, lub chcesz, aby wszystkie elementy były otwierane jednocześnie.

36. Wideo

Możesz już osadzić wideo w WordPressie, ale musisz użyć całego adresu URL iFrame w widoku kodu. Moduł Divi Video zapisuje to wszystko.

Moduł umożliwia osadzenie przesłanego lub połączonego wideo w dowolnym miejscu na stronie. Możesz także ustawić niestandardowy obraz zamiast pierwszej klatki i dostosować przycisk odtwarzania.

37. Suwak wideo

Moduł Video Slider pobiera wideo i dodaje suwak. Możesz ustawić główny film i umieścić pod nim kilka innych, a także pozwolić, aby suwak przełączał się między nimi.

Moduł pozwala dostosować pierwszy obraz i przycisk odtwarzania, użyć przesłanych lub połączonych filmów i umieścić je w dowolnym miejscu na stronie.

38. Kod pełnej szerokości

Moduł Fullwidth Code współpracuje z motywami Divi o pełnej szerokości i umożliwia osadzenie kodu na stronie przy zachowaniu formatowania. Jest to prosty, ale skuteczny moduł, który może być przydatny w przypadku witryn z instrukcjami, witryn dla programistów lub czegoś innego.

39. Nagłówek o pełnej szerokości

Moduł Fullwidth Header umożliwia tworzenie nagłówka z wykorzystaniem pełnej szerokości strony. Prosty, ale bardzo skuteczny. Możesz dodać nagłówek, podtytuł i kopię wraz z maksymalnie dwoma przyciskami.

40. Obraz o pełnej szerokości

Obraz o pełnej szerokości to wersja obrazu o pełnej szerokości, ale działa bez szwulessly w projektach o pełnej szerokości. Ma te same opcje wyświetlania i dostosowywania.

41. Mapa o pełnej szerokości

Moduł mapy o pełnej szerokości działa tak samo jak Mapy, ale dla stron o pełnej szerokości. Otrzymujesz również tę samą kompatybilność z Mapami Google, opcje dostosowywania i łatwość użytkowania, co ten moduł.

42. Menu pełnej szerokościwid

Menu o pełnej szerokości zapewnia niestandardowe menu, które rozciąga się na całej stronie. Pobiera standardowe menu WordPress i zawiera je w niestandardowym elemencie. Następnie możesz dostosować menu w zwykły sposób.

43. Portfolio o pełnej szerokości

Ten moduł wykorzystuje standardowy moduł Portfolio i umożliwia pracę ze stronami o pełnej szerokości. Ma te same dostosowania i funkcje, ale działa z tym układem.

44. Suwak postów o pełnej szerokości

Suwak postów o pełnej szerokości przejmuje moduł suwaka postów i sprawia, że ​​działa on na całej szerokości strony. Ma te same opcje użytkowe i dostosowywania, co ten moduł, oferując pełną kontrolę nad tym, jak wygląda dla użytkownika.

45. Tytuł posta o pełnej szerokości

Tytuł posta o pełnej szerokości jest taki sam jak tytuł posta, ale działa na całej szerokości. Wyobrażamy sobie, że można tego używać oszczędnie na stronie, ale ten moduł Divi zapewnia, że ​​​​możesz wyświetlać tytuły o pełnej szerokości bez żadnego kodowania.

46. ​​Suwak pełnej szerokości

Slider o pełnej szerokości zajmuje moduł Slider i robi to samo. Sprawia, że ​​działa wadąlessly o pełnej szerokości. Jest to bardziej przydatny moduł z pełną kontrolą nad wyglądem i zachowaniem slajdów.

Moduły Divi WooCommerce

WooCommerce jest bardzo dobrze obsługiwany przez Divi. Niektóre rozszerzają istniejące funkcje na stronach WooCommerce, podczas gdy inne umożliwiają prezentowanie niektórych elementów sklepu na stronach innych niż sklep.

Każdy z nich warto sprawdzić, jeśli szukasz większej elastyczności w projektowaniu sklepu.

1. Moduł bułki tartej Woo

Bułki tarte są często używane na stronach internetowych, aby ułatwić nawigację. Moduł Woo Breadcrumb dla Divi robi to samo dla Twojego sklepu. Opcje są proste i obejmują stronę kursu, bieżącą stronę oraz opcjonalny link i separator.

Jest to prosty, ale skuteczny moduł, który umożliwia umieszczenie opisowych okruszków nawigacyjnych u góry strony, aby ułatwić użytkownikom nawigację.

2. Moduł tytułu Woo

Ten moduł pozwala na pełną kontrolę nad tytułami produktów. Możesz zmienić tytuł, ostylować go i dodać linki, tła i skonfigurować zgodnie z wymaganiami. Opiera się na domyślnej opcji tytułu, dodając więcej narzędzi do projektowania i kilka zaawansowanych odstępów.

Co więcej, kiedy aktualizujesz tytuł za pomocą tego modułu, możesz ustawić go tak, aby automatycznie aktualizował się wszędzie w Twojej witrynie.

3. Moduł obrazu Woo

Moduł obrazu Woo oferuje pełną kontrolę nad zdjęciami produktów w Twoim sklepie. Domyślne opcje są dobre, ale to idzie dalej. Możesz dodać wiele obrazów, użyć suwaka miniatur i dodać odznaki lub warstwy graficzne do ofert lub czegoś innego.

Moduł ma kilka opcji dostosowywania, których możesz użyć do stylizacji obrazu, a następnie pozwala umieścić go w dowolnym miejscu na dowolnej stronie.

4. Moduł galerii Woo

Moduł galerii Woo opiera się na module obrazów, włączając obrazy do galerii produktów. Oferuje podobne opcje do modułu Divi Gallery, o którym wspominaliśmy wcześniej, i oferuje możliwość stylizacji galerii i umieszczenia jej w dowolnym miejscu, na dowolnej stronie.

Obrazy sprzedają produkty, więc jest to doskonała opcja, jeśli domyślna pojemność obrazu WooCommerce nie zapewnia tego, czego potrzebujesz.

5. Moduł cen Woo

Moduł cenowy Woo rozszerza ceny i umożliwia prezentowanie produktów i cen na dowolnej stronie, nie tylko na stronach sklepu. Jest to konfigurowalny element, który wyświetla aktualną cenę, starą cenę, cenę sprzedaży i projektuje te ceny, aby pasowały do ​​Twojego motywu.

Podczas gdy standardowa wtyczka WooCommerce ma wiele wbudowanych opcji cenowych, ten moduł idzie o krok dalej i zawiera możliwość promowania na stronach innych niż produkty.

6. Moduł Dodaj do koszyka Woo

Moduł Woo Add to Cart zapewnia pełną kontrolę nad faktycznym zakupem. Dzięki niemu możesz dowolnie stylizować przycisk Kup teraz. Od tego, co mówi, do tego, jak wygląda i oddziel przycisk od domyślnego układu WooCommerce.

Jeśli z jakiegoś powodu domyślna cena i układ przycisków nie działają dla twojego motywu, ten moduł w tym pomoże. Możesz umieścić go w dowolnym miejscu, wystylizować, pokazać opcję ilości, a nawet stan zapasów.

7. Moduł oceny Woo

Oceny to wszystko w handlu detalicznym. Produkty wysoko oceniane znacznie przewyższają produkty nieocenione. Wzrost liczby recenzji i dowodów społecznych może być Twój dzięki modułowi oceny Woo.

Pozwala umieścić ocenę na stronie, wyświetlić recenzje, wyświetlić liczbę i średnią ocen tych recenzji oraz linki do nich. Każdy sklep powinien używać ocen i tak to zrobić.

8. Moduł magazynowy Woo

Moduł magazynowy Woo robi dokładnie to, co jest napisane na puszce. Umożliwia pokazanie dokładnego numeru magazynowego na wyświetlaczu produktu. Może to pomóc w zwiększeniu pilności, co z kolei zwiększa konwersję.

Możesz dostosować każdy wyświetlacz, aby pomóc w tej pilnej potrzebie, podświetlając niski stan na czerwono lub wysoki na zielono, dodaj tekst „Brak w magazynie” i umieść go w dowolnym miejscu na stronie.

9. Meta moduł Woo

Woo Meta Module zajmuje się drobnymi szczegółami, takimi jak wyświetlanie SKU, tagów, kategorii i dodatkowych danych na stronie. Jeśli chcesz zawrzeć jak najwięcej danych na stronach, ten moduł pomoże.

Nie jest to moduł o dowolnej formie, ale może pobierać wewnętrzne meta i wyświetlać je, aby wszyscy mogli je zobaczyć. Możesz jednak stylizować projekt.

10. Moduł opisu Woo

Moduł opisu Woo pozwala wyświetlić opis produktu dla konkretnego produktu w dowolnym miejscu w motywie Divi.

Jest to podstawowy, ale użyteczny moduł, który umożliwia promocję produktów na stronach blogów lub stronach serwisowych oraz pełną stylizację wyglądu i stylu tego opisu.

11. Moduł zakładek Woo

Moduł Woo Tabs działa w podobny sposób do modułu Divi Tabs. Instaluje element treści z kartami na stronie, którą możesz wypełnić dowolną treścią.

Karty mogą być przydatne do łączenia wielu źródeł informacji na jednej stronie. Na przykład szczegóły produktu, specyfikacje produktu, opcje dostawy i recenzje w jednym polu z zakładką dla każdego.

12. Moduł dodatkowych informacji Woo

Moduł dodatkowych informacji Woo jest dla tych, którzy chcą więcej. Masz produkty z dodatkowymi opcjami? To jest moduł do użycia. Na przykład, rozmiary lub różne kolory zostałyby tutaj przedstawione.

Możesz go dowolnie stylizować i umieszczać na stronie przy użyciu standardowego dostosowania. Kolejny prosty, ale cenny dodatek.

13. Moduł produktów związanych z Woo

Moduł dodatkowych informacji Woo powinien wymagać niewielkiego wprowadzenia. Sklepy thrive o cross-sellingu i upsellingu, a ten moduł to jak to robisz. Możesz dodać sekcję Produkty powiązane do strony i dodać informacje pomocnicze zgodnie z potrzebami.

Każdy sklep powinien korzystać z cross-sellingu i jeśli standardowe opcje WooCommerce nie wystarczają, ten moduł działa bezproblemowolessżyć z Divi.

14. Moduł sprzedaży dodatkowej Woo

Moduł Woo Upsell robi to samo. Możesz dodać to do stron produktów lub do dowolnej strony w swojej witrynie, aby sprzedawać produkty.

Produkty prezentowane w tym module będą tymi, które ustawiłeś jako opcje upsellingowe w WooCommerce. Ten moduł pozwala po prostu umieścić je w dowolnym miejscu na stronie.

15. Moduł powiadomień o koszyku Woo

Moduł powiadomień o koszyku Woo to opcja o wartości dodanej, która dodaje proste powiadomienie do strony produktu, informujące użytkownika, że ​​dodał produkt do koszyka. To prosty, ale użyteczny element interakcji, który może odróżnić świetny sklep od dobrego.

Powiadomienia mogą być stylami, kolorami i czcionkami. Domyślne ustawienie użyje koloru motywu, ale możesz go łatwo zmienić, jeśli wolisz.

16. Moduł recenzji Woo

Moduł recenzji Woo umożliwia umieszczanie recenzji produktów dla Twoich produktów na dowolnej stronie w Twojej witrynie. W przypadku stron promocyjnych lub postów na blogu przydatne jest dodanie tego ważnego dowodu społecznego, który pomoże wpłynąć na decyzję o zakupie.

Moduł pozwala ustawić określone pola, pokazywać liczbę komentarzy oraz wpływać na kolor i styl. To przydatny moduł, jeśli promujesz się w miejscach innych niż strony Twoich produktów.

10 najlepszych darmowych modułów Divi

Istnieje szeroka gama darmowych modułów Divi i nie wszystkie z nich są sobie równe. Uważamy, że warto wypróbować te 10 darmowych modułów Divi.

1. Divi Tweaker

Divi Tweaker to bardzo inteligentny moduł, który pomaga przyspieszyć Divi Builder i WooCommerce usuwa ciągi zapytań, które mogą spowolnić ładowanie strony i mogą zastąpić lokalne pliki motywów plikami obsługiwanymi z sieci CDN.

Moduł dodaje również kilka dodatkowych funkcji projektowania dla urządzeń mobilnych i komputerów stacjonarnych, niektóre animacje i efekty, przejścia stron, opcje układu i wiele więcej.

2. Zaawansowany moduł tekstowy Divi

Divi Advanced Text Module to mały, ale bardzo przydatny moduł, który rozszerza istniejące opcje tekstu i dodaje kilka przydatnych narzędzi. Jeśli dużo pracujesz z tekstem, tak jak my, możliwość zmiany szerokości i wysokości elementu tekstowego robi ogromną różnicę, gdy próbujesz udoskonalić układ strony. Ten moduł to robi.

Dodaje również narzędzie do przesyłania obrazów, które skraca czas projektowania w mały, ale ważny sposób.

3. Divi Slimbuilder

Divi Slimbuilder jest idealny, jeśli tworzysz strony docelowe lub dłuższe strony witryny za pomocą Divi Builder. Zmienia układ głównego okna, dzięki czemu elementy strony są cieńsze. Zmienia również sposób wyświetlania tytułów sekcji, aby cały proces projektowania przebiegał znacznie płynniej.

To drobiazg, ale oznacza, że ​​możesz zobaczyć o wiele więcej tego, co dzieje się na zapleczu projektu, bez konieczności ciągłego przewijania w górę iw dół.

4. Rozszerzenie kart artykułów

Najwyraźniej rozszerzenie kart artykułów było Elegant Themes' pierwszy w historii moduł Divi. Jest tak użyteczny, że wciąż jest popularny i nadal jest popularny. To kolejny skromny moduł, który dodaje więcej opcji stylizacji do modułu Divi Blog, aby zmienić sposób wyświetlania kart bloga.

Zmiany są skromne i obejmują efekty cieni, kolory tła, możliwość stylizowania siatki bloga oraz zmiany pozycji tytułu i meta bloga.

5. Pakiet rozszerzeń ikon Divi

Pakiet Divi Icon Expansion Pack robi dokładnie to, co mówi. Dodaje mnóstwo ręcznie rysowanych ikon do Divi Builder do wykorzystania w swoim projekcie. Są setki do wyboru i możesz je wszystkie dostosować do swojego motywu.

Dostępna jest darmowa i premium wersja tego modułu. Premia dodaje więcej ikon i opcji dostosowywania.

6. Rozwiń Divi

Rozwiń Divi to kolejny nie wymagający wyjaśnień moduł Divi. Dodaje szereg funkcji do Divi, w tym Lightbox, nową sekcję powiązanych postów, nowe pola autorów, nowy element ostatnich postów, animator do wstępnego ładowania strony, narzędzia Font Awesome i wiele więcej.

Moduł nie był aktualizowany od jakiegoś czasu, ale przetestowaliśmy go na najnowszej wersji WordPressa i Divi i działał dobrze.

7. Strój bojowy dla Divi

Oprócz bardzo fajnej nazwy, Battle Suit for Divi ma wiele do zaoferowania. Jest to moduł rozszerzający, który dodaje więcej opcji postów, stopek, galerii i obrazów, dodaje Lightbox dla obrazu i wideo, dodaje efekty graficzne, tytuł posta i opcje meta oraz mnóstwo innych narzędzi.

Biorąc pod uwagę, że jest to darmowy moduł, dużo się tutaj dzieje, a moduł sprawia, że ​​wszystko jest dostępne i bardzo łatwe w użyciu.

8. Prosty krótki kod Divi

Simple Divi Shortcode ma bardzo potężne narzędzie w WordPress, skróty i pozwala umieścić je w dowolnym miejscu w innych modułach. To kolejne bardzo proste narzędzie, które może mieć ogromne znaczenie, jeśli często używasz skrótów na swoich stronach.

Dostępna jest darmowa i premium wersja tej wtyczki, ale darmowa opcja robi wszystko, czego prawdopodobnie potrzebujesz.

9. Dodatki Surbma Divi

Surbma Divi Extras dodaje do Divi kilka dodatkowych funkcji, które niektórym z was mogą się przydać. Jedną rzeczą, która go wyróżnia, jest opcja logo tekstowego. Być może nie będziesz musiał go często używać, ale kiedy to zrobisz, samo to narzędzie sprawia, że ​​warto korzystać z tego modułu.

Moduł dodaje również opcje stylizacji, układu, menu i stopki oraz ma bardzo schludną opcję pionowego środka do kopiowania w module. To kolejne z tych narzędzi, które mogą być prawdziwym ratownikiem!

10. Wyskakujące okienka dla Divi

Wyskakujące okienka dla Divi są bardzo przydatne, jeśli chcesz utworzyć pojedyncze wyskakujące okienko, ale nie chcesz używać dedykowanej wtyczki wyskakującej do WordPress. Dodaje funkcję, dzięki której możesz utworzyć element w kreatorze i użyć go jako wyskakującego okienka w celach marketingowych.

Jest to proste rozwiązanie poważnego problemu i idealne do tworzenia podstawowych wyskakujących okienek na stronie bez konieczności używania lub płacenia za wtyczkę wyskakującą.

10 modułów Premium Divi

Istnieją setki modułów Divi premium. Niektóre są warte inwestycji, a inne mniej. Te 10 są zdecydowanie warte twoich pieniędzy!

1. Moduł karuzeli Divi 2.0

Divi Carousel Module 2.0 pomaga budować karuzele dla prawie wszystkiego w Divi. Mogą być przydatne w przypadku produktów, usług, referencji i wszelkiego rodzaju funkcji promocyjnych. Ta wtyczka sprawia, że ​​się zdarzają.

Pozwala tworzyć dowolną liczbę karuzeli i zapisywać je jako szablony do użycia w dowolnym miejscu. Masz pełną kontrolę nad tym, jak wyglądają i działają, a całe projektowanie odbywa się w kreatorze. Doskonała opcja dla wyświetlaczy.

2. Divi E-commerce

Divi Ecommerce współpracuje zarówno z Divi, jak i WooCommerce w celu stworzenia skrótu do tworzenia sklepu internetowego. Ma kilka projektów do wykorzystania jako szablony, kilka niestandardowych elementów strony, zawartość demonstracyjną, aby szybko rozpocząć pracę i wszystko, czego potrzebujesz do zbudowania podstawowego sklepu.

Moduł zawiera nawet paski boczne, udostępnianie społecznościowe, opcje układu produktu, zegary odliczające, modne moduły produktów i wiele innych opcji. Jeśli nie podoba Ci się żadna z wersji demonstracyjnych Divi, może to być moduł dla Ciebie.

3. Divi Headers Pack

Pandemia Divi Headers Pack Jest wielki. Dodaje ponad 750 nowych nagłówków, kilka funkcjonalnych, kilka nowych projektów. Dodajecanvaopcje menu, responsywne nagłówki, efekty menu, animacje menu i mnóstwo narzędzi do stylizacji nagłówków.

Ten moduł ma bardzo wąski zakres, ale warto zainwestować, jeśli masz problem ze znalezieniem idealnego nagłówka. Jeśli nie znajdziesz tego tutaj, nie znajdziesz go nigdzie!

4. Divi Najwyższy Pro

Divi Supreme Pro zawiera szereg modułów, które zwiększają Twoją kreatywność podczas korzystania z Divi. Moduły zawierają Gradient Text, Flipbox, Text Divider, Divi Typing, Supreme Button, Facebook Feed i wiele innych.

Ten moduł zawiera wiele, ponad 40 różnych modułów i 7 rozszerzeń premium. Biorąc pod uwagę cenę, Divi Supreme Pro to okazja!

5. Kalendarz wydarzeń Divi

Kalendarz wydarzeń Divi może być używany do budowy kompletnej strony internetowej do zarządzania wydarzeniami lub do dodawania wydarzeń do standardowej witryny. Używa standardu Divi Builder aby pomóc w tworzeniu wydarzeń i ma wszystko, czego potrzebujesz, aby je stylizować i wyświetlać.

Ten moduł zawiera kalendarz, karuzelę, kanał wydarzeń i moduł stron, które pomogą Ci stworzyć w pełni funkcjonalną stronę internetową wydarzeń lub sekcję wydarzeń i warto go sprawdzić.

6. Table Maker

Niektórzy uważają, że stoły są łatwe, podczas gdy inni uważają je za frustrujący bałagan. Jeśli jesteś w drugim obozie, Table Maker moduł jest dla Ciebie. Pozwala szybko osadzić tabelę na stronie i nadać jej styl.

Możesz dodawać obrazy, ikony, teksty, przyciski, a nawet zwijać wiersze dla urządzeń mobilnych. Jest to bardzo potężna wtyczka, która sprawia, że ​​dodawanie i stylizowanie tabel na dowolnej stronie jest bardzo szybkie i dlatego warto ją kupić.

7. Wyskakujące okienko modalne Divi

Jeśli chcesz korzystać z wyskakujących okienek i wyskakujących okienek dla Divi, nie wystarczy, Divi Modal Popup będzie. Jest to bogaty w funkcje moduł, który ułatwia tworzenie wyskakujących okienek na podstawie wczytania strony, opóźnienia czasowego i szeregu innych wyzwalaczy.

Co ważniejsze, możesz uwzględnić pełny zakres elementów strony, umieścić wyskakujące okienko w dowolnym miejscu, wywołać go przez cokolwiek na stronie i dodać animacje do samego wyskakującego okienka. Jeśli chcesz zwiększyć zaangażowanie w wyskakujące okienka, to właśnie tego używasz.

8. Responsywny pomocnik Divi

Divi Responsive Helper to narzędzie, które pomoże Ci dokładnie zobaczyć, jak Twoja strona załaduje się na urządzeniu mobilnym z poziomu Konstruktora. Możesz także zmienić wygląd, sposób wczytywania się, zmienić kolejność elementów i w pełni kontrolować wygląd witryny na urządzeniach mobilnych.

Moduł zawiera również bardzo inteligentne narzędzie do automatycznego utrwalania, które może ponownie zrównoważyć zdania lub akapity, aby wyglądały lepiej. Już samo to sprawia, że ​​warto go kupić!

9. Galeria murów Divi

Galeria Divi Masonry jest idealna, jeśli chcesz więcej od portfolio lub strony bloga. Przyjmuje standardowy układ murowany i dodaje możliwość tworzenia różnych kształtów, zmiany kolumn, dodawania lub usuwania przestrzeni, dodawania modalnych wyskakujących okienek i konfigurowania określonej galerii dla urządzeń mobilnych.

Jeśli projektujesz witrynę z bogatą grafiką i chcesz zrobić więcej z murarstwem, ten moduł pozwala zrobić wszystko ze znanego interfejsu Builder.

10. Divi MadMenu

Divi MadMenu dodaje więcej opcji do sekcji menu Divi Builder. Jeśli domyślne ustawienia nie wystarczą, ten moduł dodaje więcej. Dzieli również nagłówek na osobne sekcje, aby ułatwić dostosowanie.

Moduł pozwala kontrolować działanie menu na różnych rozmiarach ekranu, ustawiać różne układy dla różnych urządzeń, dodawać elementy Ajax do produktów, dodawać wywołania akcji i inne elementy. To potężny sposób na opanowanie nagłówków.

Jeśli szukasz dodatkowej funkcjonalności, zapoznaj się z naszym artykułem o Wtyczki Divi.

Jak opracować własny niestandardowy moduł Divi?

Chcesz stworzyć własny moduł Divi? Masz problem, którego nie obejmuje istniejący moduł?

Ta część artykułu jest tutaj, aby pomóc.

Przedstawimy podstawy tworzenia własnego niestandardowego modułu Divi. Aby ukończyć tę sekcję, będziesz potrzebować podstawowych umiejętności PHP, ponieważ Divi Builder definiuje moduły jako klasy PHP.

Najpierw musisz utworzyć rozszerzenie Divi. Musisz to zrobić najpierw, ponieważ Twój niestandardowy moduł Divi jest zaimplementowany w rozszerzeniu, motywie lub motywie podrzędnym, a rozszerzenie jest najłatwiejsze do utworzenia.

Przeczytaj ten przewodnik, aby utworzyć rozszerzenie. Gdy skończysz, wróć tutaj, aby utworzyć swój moduł.

Otwórz swoje rozszerzenie i zlokalizuj dołączone/moduły

Utwórz katalog o nazwie SimpleHeader

Utwórz plik w SimpleHeader i nazwij go SimpleHeader.php

Wklej następujące elementy do pliku i zapisz

class SIMP_SimpleHeader rozszerza ET_Builder_Module {

          public $slug = 'simp_simple_header';

          publiczne $vb_support = 'włączone';

          funkcja publiczna init() {

                   $this->name = esc_html__( 'Prosty nagłówek', 'simp-simple-extension' );

          }

          funkcja publiczna get_fields() {

                   return array (

                             'nagłówek' => tablica(

                                      'label' => esc_html__( 'Nagłówek', 'simp-simple-extension' ),

                                      'typ' => 'tekst',

                                      'option_category' => 'basic_option',

                                      'description' => esc_html__( 'Tu wpisz żądany nagłówek.', 'simp-simple-extension' ),

                                      'toggle_slug' => 'main_content',

                             ),

                             'treść' => tablica(

                                      'label' => esc_html__( 'Treść', 'simp-simple-extension' ),

                                      'typ' => 'tiny_mce',

                                      'option_category' => 'basic_option',

                                      'description' => esc_html__( 'Treść wprowadzona tutaj pojawi się pod tekstem nagłówka.', 'simp-simple-extension' ),

                                      'toggle_slug' => 'main_content',

                             ),

                   );

          }

          renderowanie funkcji publicznej ( $unprocessed_props, $content = null, $render_slug ) {

          }

}

nowy SIMP_SimpleHeader;

Jeśli znasz swoje PHP, zobaczysz podstawowy nagłówek, którego może użyć Divi Builder. Zobaczysz nagłówek, trochę treści i tła.

Teraz dodaj trochę kodu HTML do pliku, aby mógł się renderować.

Dodaj następujące po 'public function render( $unprocessed_props, $content = null, $render_slug ) {'

                   powrót sprintf(

                             ' %1$s

                             %2$s „,

                             esc_html( $this->rekwizyty['heading'] ),

                             $this->rekwizyty['content']

                   );

          }

}

nowy SIMP_SimpleHeader;

Twój kompletny plik powinien wyglądać tak:

class SIMP_SimpleHeader rozszerza ET_Builder_Module {

          public $slug = 'simp_simple_header';

          publiczne $vb_support = 'włączone';

          funkcja publiczna init() {

                   $this->name = esc_html__( 'Prosty nagłówek', 'simp-simple-extension' );

          }

          funkcja publiczna get_fields() {

                   return array (

                             'nagłówek' => tablica(

                                      'label' => esc_html__( 'Nagłówek', 'simp-simple-extension' ),

                                      'typ' => 'tekst',

                                      'option_category' => 'basic_option',

                                      'description' => esc_html__( 'Tu wpisz żądany nagłówek.', 'simp-simple-extension' ),

                                      'toggle_slug' => 'main_content',

                             ),

                             'treść' => tablica(

                                      'label' => esc_html__( 'Treść', 'simp-simple-extension' ),

                                      'typ' => 'tiny_mce',

                                      'option_category' => 'basic_option',

                                      'description' => esc_html__( 'Treść wprowadzona tutaj pojawi się pod tekstem nagłówka.', 'simp-simple-extension' ),

                                      'toggle_slug' => 'main_content',

                             ),

                   );

          }

          renderowanie funkcji publicznej ( $unprocessed_props, $content = null, $render_slug ) {

                   powrót sprintf(

                             ' %1$s

                             %2$s „,

                             esc_html( $this->rekwizyty['heading'] ),

                             $this->rekwizyty['content']

                   );

          }

}

nowy SIMP_SimpleHeader;

Jeśli tak, nadszedł czas, aby stworzyć React Klasa komponentów, która pozwala Divi Builder wyrenderuj moduł.

Utwórz plik i nazwij go SimpleHeader.jsx

Wklej poniższe i zapisz

// Zależności zewnętrzne

importować React, { Komponent, Fragment } z 'react';

// Zależności wewnętrzne

import './style.css';

class SimpleHeader rozszerza Komponent {

  statyczny ślimak = 'simp_simple_header';

  renderowanie() {

    powrót (

        {ten.props.content()}

    );

  }

}

eksportuj domyślny SimpleHeader;

Przejdź do include/modules/index.js w swoim pliku rozszerzenia

Dodaj i zapisz następujące

// Zależności wewnętrzne

importuj SimpleHeader z './SimpleHeader/SimpleHeader';

eksportuj domyślnie [

  Prosty nagłówek,

];

Dodaj następujące elementy do SimpleHeader.jsx po   

renderowanie() {

    powrót (

i zapisz to.

        {ten.rekwizyt.nagłówek}

Pełny plik powinien teraz wyglądać tak:

// Zależności zewnętrzne

importować React, { Komponent, Fragment } z 'react';

// Zależności wewnętrzne

import './style.css';

class SimpleHeader rozszerza Komponent {

  statyczny ślimak = 'simp_simple_header';

  renderowanie() {

    powrót (

        {ten.rekwizyt.nagłówek}

          {ten.props.content()}

    );

  }

}

eksportuj domyślny SimpleHeader;

Otwórz style.css swojego modułu i dodaj

.simp-prosty-nagłówek-{

          margines na dole: 20px;

}

To tyle, jeśli chodzi o rozwój modułu Divi. Wszystko, co musisz teraz zrobić, to przetestować!

Otwórz Divi Builder, zlokalizuj moduł Simple Header i spróbuj użyć go na stronie. Jeśli masz prawidłowy kod, zobaczysz prostą opcję nagłówka.

Podsumowanie modułów Divi

Zawarliśmy ponad 70 darmowych i premium modułów divi obejmujących wszystko, od tworzenia wyskakujących okienek po dodawanie dodatkowych funkcji projektowych do Divi Builder. Niektóre są modułami niszowymi, których nie będziesz używać zbyt często, ale niektóre są niezbędne do sprawnego i wydajnego użytkowania Divi Builder.

Uważamy, że reprezentują one przekrój tego, co jest dostępne, co działa i co jest w rozsądnej cenie. Co myślisz?

Czy używasz któregoś z tych modułów Divi? Masz jakieś moduły do ​​zasugerowania?

O autorze

Autor: David AttardStrona internetowa: https://www.linkedin.com/in/dattard/

David pracuje w branży online / cyfrowej lub w jej pobliżu od 18 lat. Ma ogromne doświadczenie w branży oprogramowania i projektowania stron internetowych przy użyciu WordPress, Joomla i otaczających je nisz. Jako konsultant ds. Cyfrowych koncentruje się na pomaganiu firmom w uzyskaniu przewagi konkurencyjnej za pomocą połączenia ich strony internetowej i dostępnych obecnie platform cyfrowych.