Jeśli używasz motywu Divi lub Divi Builder, będziesz regularnie pracować z modułami Divi. Są to podstawowe elementy motywu, które umożliwiają dodawanie elementów strony, stylizowanie ich, kontrolowanie i wykorzystywanie do tworzenia pięknych witryn.
Problem pojawia się, gdy jesteś w trakcie projektowania lub próbujesz poruszać się po Divi Builder, trudno jest dokładnie zobaczyć, co jest dostępne.
Ten kompletny przewodnik po modułach Divi przedstawi 46 podstawowych modułów zawartych w Divi. Podkreśli również niektóre bezpłatne i premium moduły od zewnętrznych deweloperów.
Wszystko po to, abyś mógł w pełni wykorzystać Divi na swojej stronie internetowej lub stronie swojego klienta.
{automatycznie}
Ten artykuł jest jednym z wielu naszych Recenzje Divi że CollectiveRay zrobił, aby objąć różne aspekty motywu Divi i konstruktora. Sprawdź również naszą listę przykłady użycia motywu Divi aby tworzyć olśniewające strony internetowe.
Potrzebujesz Divi w okazyjnej cenie? Obecnie mamy ekskluzywną zniżkę od Elegant Themes:
Zdobądź Divi z 10% ZNIŻKĄ w czerwiec 2025 Only
Jeśli potrzebujesz dodatkowej motywacji do zakupu Divi i eksperymentowania z wieloma modułami Divi dostępnymi tutaj, ostatnia aktualizacja wydajności załatwi sprawę.
Divi niedawno zrewolucjonizowało swój kod, dzięki czemu jest on szybszy i lżejszy niż kiedykolwiek wcześniej.
W ramach udoskonalenia Divi zmniejszyło CSS o 94% i wprowadziło dynamiczny CSS, który ładuje tylko to, co jest wymagane, wprowadziło inteligentne style w celu zmniejszenia liczby duplikatów i zmniejszenia rozmiarów plików, usunęło blokujący renderowanie CSS, zoptymalizowało JavaScript i dodało dynamiczny framework PHP w celu zwiększenia wydajności funkcji.
Oficjalne moduły Divi
Obecnie dostępnych jest 46 modułów Divi.
1. Akordeon
Akordeon dodaje moduł suwaka akordeonu do strony. Znasz to uczucie, gdy widzisz pole zawartości z wybieralnym elementem i przesuwa się ono w dół, aby odsłonić więcej zawartości? To jest akordeon.
W przypadku Divi moduł akordeonu to wybieralny element zawierający treść. Wybierz pierwszy wiersz, a rozwinie się, aby odsłonić krótkie wyjaśnienie lub przegląd. Wybierz następny wiersz, a pierwszy wiersz się zamknie, a drugi 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 odtwarzał się za każdym razem, gdy użytkownik go wybierze.
W Divi moduł Audio jest prostym odtwarzaczem audio, ale jeśli znasz trochę CSS, możesz go samodzielnie wystylizować.
3. Blaty barowe
Liczniki pasków to paski postępu, które widzisz na stronach internetowych w całym internecie. Dobrze zrobione, są natychmiast zrozumiałym pomiarem czegoś i mogą działać bardzo dobrze w odpowiedniej sytuacji.
Lady barowe Divi można kolorować, dostosowywać do niemal każdego celu, konfigurować ręcznie dla konkretnych poziomów i wykorzystywać na wiele sposobów.
4. blog
Moduł Divi Blog pozwala na umieszczanie postów blogowych w dowolnym miejscu na stronie. Nie tylko możesz umieszczać te posty w dowolnym miejscu, ale także możesz je stylizować, aby pasowały do Twojego motywu.
Moduł Divi Blog zapewnia pełną swobodę w zakresie tego, gdzie i jak wyświetlasz posty na blogu. Dzięki temu modułowi nie jesteś już przywiązany do tego, gdzie WordPress lub Twój motyw uważają, że powinieneś je umieścić.
5. Rozmowa
Moduł Blurb to element treści z ikoną i opcjonalnymi animacjami. Są one przydatne do opisów produktów lub usług na stronach, ponieważ opcjonalny aspekt animacji może dodać stronie trochę zainteresowania.
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 zapewnia środki do dodawania przycisków w dowolnym miejscu na Twojej stronie, w dowolnym kolorze i szerokiej gamie kształtów i rozmiarów. Projekt można kontrolować w narzędziu do dostosowywania motywu, a linki i efekty można konfigurować w tym samym czasie.
Są prostym, ale efektywnym 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 uczynić, tym bardziej skuteczne mogą być. Właśnie tutaj wkracza ten moduł.
Moduł Divi Call to Action zapewnia prosty sposób tworzenia własnych wezwań do działania przy użyciu kombinacji pola CTA, nagłówka, treści i przycisku, co pomaga zwiększyć konwersję w dowolnym miejscu witryny.
8. Licznik okręgów
Moduł Circle Counter działa podobnie jak Bar Counters, ale używa grafiki pełnego koła. Zamiast prostego paska moduł dodaje pełne koło z obszarami pokrytymi w zależności od tego, jaki procent oznaczysz jako ukończony.
Circle Counter współpracuje z edytorem motywów i można go w pełni dostosować do dowolnego motywu.
9. Kodowanie
Moduł Divi Code to niestandardowy element kodu, który możesz dodać do dowolnej strony. Akceptuje shortcode'y, 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, z tą różnicą, że można je umieścić w dowolnym miejscu i używać niemal dowolnego z nich, ponieważ nie są ograniczone przez motyw.
10. Komentarze
Moduł Divi Comments umożliwia dodanie komentarza z bloga w dowolnym miejscu na stronie. Na przykład rekomendacja lub opinia z komentarza bloga może zostać umieszczona na stronie produktu.
Zamiast używać zdjęcia, możesz umieścić prawdziwy obiekt i zamieścić odnośnik do głównego komentarza, co tylko zwiększy autentyczność.
11. Formularz kontaktowy
Moduł Formularza kontaktowego jest przydatny, jeśli nie chcesz używać wtyczki formularza kontaktowego innej firmy. Możesz zaimplementować formularz w dowolnym miejscu na stronie i nadać mu styl za pomocą narzędzia do dostosowywania motywu.
Możesz utworzyć wiele formularzy, użyć walidacji pól i logiki warunkowej, aby sprawić, by każdy formularz działał.
12. Minutnik
Timery odliczające są często używane przy okazji wprowadzania na rynek nowych produktów, odliczania do ofert specjalnych i wyprzedaży lub w celu wywołania u czytelników niepokoju związanego z upływem czasu.
Moduł Countdown Timer ułatwia to zadanie, ponieważ umożliwia określenie stylu timera, dodanie własnego odliczania i umieszczenie go w dowolnym miejscu na stronie.
13. Dzielnik
Dzielniki to małe, ale ważne sposoby na podzielenie stron internetowych i zapewnienie odbiorcom chwili wytchnienia przed następną sekcją. Większość motywów internetowych wydaje się zawierać je jako przemyślenie na końcu, w czym pomaga Divi.
Motyw Divi ma dzielniki, ale moduł Dzielnik dodaje ich więcej.
14. Zgoda na otrzymywanie wiadomości e-mail
Formularze opt-in e-mail są niezbędne do budowania list e-mailowych i zwiększania zaangażowania. E-mail jest nadal niezwykle potężnym narzędziem marketingowym, a moduł opt-in e-mail ma w tym pomóc.
Za pomocą tego modułu możesz tworzyć formularze, zapisy do newslettera i elementy generowania potencjalnych klientów, a następnie połączyć go ze swoim programem pocztowym, aby usprawnić zarządzanie nim.
15. Filtrowalny portfel
Moduł Filterable Portfolio jest idealny do umieszczenia atrakcyjnej sekcji portfolio na stronie. Możesz nadać mu styl, skonfigurować własne kategorie i filtry oraz utworzyć w pełni interaktywne portfolio.
Niektóre motywy Divi zawierają wbudowane elementy portfolio i Divi Builder również je ma, 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 uwzględnić dowolny obraz, jaki chcesz. Możesz ustawić styl jako siatkę lub suwak i kontrolować wiele aspektów wyglądu i stylu z poziomu narzędzia do dostosowywania.
17. Wizerunek
Moduł Divi Image dodaje szereg opcji podczas wyświetlania obrazów na stronie. Możesz dodawać efekty lightbox, implementować lazy loading, dodawać animacje i sprawić, by Twoje obrazy naprawdę się wyróżniały.
Obrazy mają potężny wpływ na zaangażowanie i czas spędzony na stronie, więc oddanie sprawiedliwości obrazom ma sens. Ten moduł może w tym pomóc.
18. Zaloguj Się
Moduł Divi Login dodaje do stron charakterystyczny formularz logowania, wykorzystując znany styl Twojego motywu. Moduł można stylizować tak, aby pasował do strony, aby znajdował się w tle lub wyróżniał się i był zauważalny.
Strona logowania automatycznie zaloguje użytkownika do serwisu, bez przekierowywania na domyślną stronę logowania WordPress.
19. Mapa
Moduł Divi Map bierze standardowy element mapy i dodaje dodatkowe opcje dostosowywania oraz płynną integrację ze stroną. Ponieważ mapy mogą odgrywać integralną rolę w niektórych witrynach, jest to bardzo przydatny dodatek!
Map integruje się z Google Maps, aby wyróżnić lokalizacje lub dodać interaktywne elementy. Można ją również dostosować do swojej strony.
20. Licznik liczb
Moduł Number Counter to kolejne narzędzie graficzne do komunikacji z odbiorcami. Zamiast używać grafiki słupkowej lub okręgowej, ten moduł używa prostych liczb do komunikacji.
Działa tak samo jak te inne. Stylizuj go w dostosowywaczu motywu 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ół lub coś innego, moduł Person jest tym, jak 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 potrzebujesz, aby pasowały do istniejącego motywu.
22. portfel
Moduł Portfolio opiera się na opcjach udostępnianych przez Gallery, umożliwiając prezentowanie swojej pracy na wiele sposobów. Jeśli jesteś freelancerem lub prowadzisz małą firmę i chcesz zaprezentować swoją pracę, oto jak to zrobić.
Moduł może pracować z siatkami, układami pełnej szerokości, oferować filtry kategorii i paginację. Istnieją również pewne dostosowania, które możesz zastosować, jeśli zajdzie taka potrzeba.
23. Nawigacja po wpisach
Nawigacja po wpisach bierze domyślne opcje czytaj dalej lub poprzednio i sprawia, że są bardziej atrakcyjne. Podczas gdy WordPress i wiele motywów ma te funkcje, opcja Divi dodaje jeszcze więcej użyteczności.
Ten moduł umożliwia dodawanie atrakcyjnych przycisków „Poprzedni” i „Dalej” na dole wpisów, dzięki czemu czytelnicy mogą łatwiej poruszać się po Twoim blogu.
24. Suwak postu
Moduł Post Slider to świetny sposób na prezentację wpisów na blogu. Używa suwaka, aby przewijać zdefiniowaną serię wpisów na blogu, aby pokazać swoją pracę i przyciągnąć kliknięcia.
Podczas gdy wiele innych wtyczek oferuje wyświetlanie wpisów na blogu, suwak może zawierać kolorowy obraz i fragment, co z pewnością zaangażuje. W tym module możliwe są również drobne dostosowania.
25. Tytuł posta
Moduł Post Title to mały, ale przydatny dodatek, który używa stylu Divi do tytułów postów. Wyświetla tytuł, a także ma opcję dodania wyróżnionego obrazu i wszelkich metadanych, które chcesz wyświetlić.
Moduł ma kilka opcji dostosowywania, dzięki którym możesz dopasować go do motywu, ale ustawienia domyślne sprawdzają się w większości zastosowań.
26. Tabele cenowe
Tabele cenowe to jeden z tych elementów, które niewiele motywów WordPress wydaje się dobrze obsługiwać. Divi nie jest jednym z nich. Domyślne tabele motywów działają wystarczająco dobrze, ale możesz je doładować modułem Pricing Tables.
Ten moduł dodaje dostosowywalną tabelę, którą możesz dopasować do dowolnej strony. Możesz zmieniać kolory, waluty, liczbę funkcji i efektów według potrzeb.
27. Szukaj
Wyszukiwanie to kolejna z tych funkcji, która zwykle jest daleka od ideału. Domyślna funkcja wyszukiwania WordPress może być powolna i pomijać oczywiste rzeczy. Niektóre motywy zawierają wyszukiwanie, które często rozczarowuje. Moduł wyszukiwania Divi zmienia to wszystko.
To proste pole wyszukiwania, które możesz umieścić w dowolnym miejscu i dostosować do swojego motywu. Proste, szybkie i bardzo skuteczne.
28. sklep
Moduł Divi Shop to doskonałe rozszerzenie WooCommerce. Jeśli już prowadzisz sklep, ten moduł pozwala Ci na prezentowanie produktów w samodzielnym elemencie w dowolnym miejscu na Twojej stronie. To doskonała okazja do cross-sellingu lub upsellingu.
Moduł ten umożliwia sortowanie produktów, stylizowanie elementów i wprowadzanie pewnych dostosowań wyświetlania.
29. Pasek boczny
Moduł Sidebar jest jednym z najbardziej użytecznych modułów na tej liście. Przejmuje standardowy sidebar i daje Ci pełną kontrolę nad tym, jak wygląda, co zawiera i jak działa.
Ten moduł umożliwia tworzenie niestandardowych pasków bocznych za pomocą narzędzia dostosowywania motywu i umieszczanie ich na wszystkich stronach, niektórych stronach lub określonych stronach.
30. Suwak
Suwaki mogą być przedmiotem sporów, ale nie ma wątpliwości, że mogą być skuteczne, jeśli są odpowiednio wystylizowane. Moduł Divi Slider właśnie to robi.
To prosty suwak, który możesz umieścić w dowolnym miejscu na stronie i dostosować do projektu. Możesz również używać wideo, obrazów, kontrolować typ slajdu i wiele więcej.
31. Obserwuj w mediach społecznościowych
Przyciski Follow to kolejna funkcja strony, którą niewiele motywów potrafi dobrze wykonać. Są tak prostą funkcją, ale często mogą wyglądać niezgrabnie, nie działać prawidłowo lub wyglądać, jakby zostały dodane za pomocą wtyczki.
Moduł Social Media Follow jest inny. Dodaje kilka atrakcyjnych ikon z linkami i pozwala dostosować je do swoich 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 szeregiem poziomych zakładek, które mogą zawierać tekst, obrazy lub wideo.
33. Świadectwo
Moduł Testimonial dodaje dowód społeczny 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 umieścić obraz, tekst i linki, zależnie od swoich potrzeb.
34. Free access to the pitch for the local community Free access to the pitch for the local community - on XNUMX one of the many football activities for the local community (XNUMX-XNUMX years old) took place under the guidance of the coach of the Academy Espanola in order to activate local youth to practice sport - football.
Moduł Tekst umożliwia dostęp do edytora tekstu WordPress, aby dodać niestandardowy tekst w dowolnym miejscu. To kolejny drobny, ale przydatny dodatek, który oferuje znacznie większą swobodę w zakresie umieszczania tekstu na stronie.
35. Przełącz
Moduł Divi Toggle działa podobnie jak Accordion, ponieważ przełącza pola zawartości, aby przesuwać się w górę i w dół. Podczas gdy Accordion używa pojedynczego pola z wieloma slajdami, Toggle używa pojedynczych pól, z których każde przesuwa się osobno.
Jest to przydatna alternatywa dla akordeonu, jeśli chcesz użyć tylko kilku elementów lub chcesz otworzyć wszystkie elementy jednocześnie.
36. Wideo
Możesz już osadzać wideo w WordPressie, ale musisz użyć całego adresu URL iFrame w widoku kodu. Moduł Divi Video zapisuje to wszystko.
Moduł pozwala osadzić przesłane lub połączone wideo w dowolnym miejscu na stronie. Możesz również 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łówne wideo i wyróżnić kilka innych pod spodem i pozwolić suwakowi przełączać się między nimi.
Ten moduł umożliwia dostosowanie pierwszego obrazu i przycisku odtwarzania, wykorzystanie przesłanych lub połączonych filmów oraz umieszczenie ich 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 osadzanie kodu na stronie przy zachowaniu formatowania. To prosty, ale skuteczny moduł, który może być przydatny w witrynach typu „jak to zrobić”, witrynach dla programistów lub czymś innym.
39. Nagłówek pełnej szerokości
Moduł Fullwidth Header pozwala na utworzenie nagłówka przy użyciu pełnej szerokości strony. Proste, ale bardzo skuteczne. Możesz umieścić nagłówek, podnagłówek i tekst wraz z maksymalnie dwoma przyciskami.
40. Obraz pełnej szerokości
Fullwidth Image to wersja Image o pełnej szerokości, ale działa bezproblemowo w projektach o pełnej szerokości. Ma również wszystkie te same opcje wyświetlania i dostosowywania.
41. Mapa pełnej szerokości
Moduł Fullwidth Map działa tak samo jak Maps, ale dla stron o pełnej szerokości. Otrzymujesz również tę samą zgodność z Google Map, opcje dostosowywania i łatwość użytkowania, co ten moduł.
42. Menu pełnej szerokości
Fullwidth Menu zapewnia niestandardowe menu, które rozciąga się na całą stronę. Przyjmuje standardowe menu WordPress i umieszcza je w niestandardowym elemencie. Następnie możesz dostosować menu w zwykły sposób.
43. Portfolio pełnej szerokości
Ten moduł bierze standardowy moduł Portfolio i sprawia, że działa on 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
Fullwidth Post Slider bierze moduł Post Slider i sprawia, że działa na całej szerokości strony. Ma takie same funkcje i opcje dostosowywania jak ten moduł, oferując pełną kontrolę nad tym, jak wygląda dla użytkownika.
45. Tytuł posta na całą szerokość
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 używałbyś go oszczędnie na stronie, ale ten moduł Divi zapewnia, że możesz używać tytułów o pełnej szerokości bez żadnego kodowania.
46. Suwak pełnej szerokości
Fullwidth Slider bierze moduł Slider i robi to samo. Sprawia, że działa bezbłędnie z projektem pełnej szerokości. Jest to bardziej użyteczny moduł z pełną kontrolą nad wyglądem i odczuciami slajdów.
Moduły WooCommerce Divi
WooCommerce jest bardzo dobrze obsługiwany przez Divi. Niektóre rozszerzają istniejące funkcje na stronach WooCommerce, podczas gdy inne umożliwiają wyświetlanie niektórych elementów sklepu na stronach innych niż sklep.
Warto zapoznać się z każdym z nich, jeśli zależy Ci na większej elastyczności przy projektowaniu sklepu.
1. Moduł ścieżki nawigacyjnej Woo
Breadcrumbs 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.
To prosty, ale efektywny moduł umożliwiający umieszczenie opisowych ścieżek na górze strony, które 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ł, nadać mu styl, dodać linki, tła i skonfigurować zgodnie z wymaganiami. Opiera się na domyślnej opcji tytułu, dodając więcej narzędzi projektowych i zaawansowane odstępy.
Co więcej, aktualizując tytuł za pomocą tego modułu, możesz ustawić jego automatyczną aktualizację w całej witrynie.
3. Moduł obrazu Woo
Moduł Woo Image oferuje pełną kontrolę nad obrazami 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 dla ofert lub czegoś innego.
Moduł ten ma kilka opcji dostosowywania, dzięki którym możesz nadać obrazowi odpowiedni styl, a następnie umieścić go w dowolnym miejscu na dowolnej stronie.
4. Moduł galerii Woo
Moduł Woo Gallery bazuje na module Image, włączając obrazy do galerii produktów. Oferuje podobne opcje do modułu Divi Gallery, o którym wspominaliśmy wcześniej, i daje możliwość stylizowania galerii i umieszczania jej w dowolnym miejscu, na dowolnej stronie.
Obrazy sprzedają produkty, więc jest to doskonałe rozwiązanie, jeśli domyślna pojemność WooCommerce w zakresie obrazów nie zapewnia tego, czego potrzebujesz.
5. Moduł cenowy Woo
Moduł Woo Price rozszerza cennik i umożliwia wyświetlanie 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 tak, aby pasowały do Twojego motywu.
Podczas gdy standardowa wtyczka WooCommerce ma wbudowanych wiele opcji cenowych, ten moduł idzie o krok dalej i umożliwia promocję na stronach innych niż produkty.
6. Moduł Woo Dodaj do koszyka
Moduł Woo Add to Cart zapewnia pełną kontrolę nad faktycznym zakupem. Dzięki niemu możesz stylizować przycisk Kup teraz w dowolny sposób. Od tego, co mówi, po to, jak wygląda, i oddzielić przycisk od domyślnego układu WooCommerce.
Jeśli z jakiegoś powodu domyślna cena i układ przycisków nie działają w Twoim motywie, ten moduł pomoże Ci to zrobić. Możesz umieścić go w dowolnym miejscu, nadać mu styl, wyświetlić opcję ilości, a nawet wyświetlić pozostały zapas.
7. Moduł oceny Woo
Oceny są wszystkim w handlu detalicznym. Produkty wysoko oceniane przewyższają sprzedażą produkty bez oceny o znaczną marżę. Wzrost liczby recenzji i dowodów społecznych może być Twoją kontrolą dzięki modułowi Woo Rating.
Umożliwia umieszczenie oceny na stronie, wyświetlanie recenzji, wyświetlanie liczby i średniej oceny tych recenzji oraz linków do nich. Każdy sklep powinien używać ocen i oto jak to zrobić.
8. Moduł Woo Stock
Moduł Woo Stock robi dokładnie to, co sugeruje jego nazwa. Umożliwia wyświetlanie dokładnego numeru magazynowego na wyświetlaczu produktu. Może to pomóc zwiększyć pilność, co z kolei zwiększa konwersję.
Możesz dostosować styl wyświetlania, aby zwiększyć poczucie pilności, podświetlając niski stan magazynowy na czerwono lub wysoki stan magazynowy na zielono, dodając tekst „Brak w magazynie” i umieszczając go w dowolnym miejscu na stronie.
9. Moduł Woo Meta
Moduł Woo Meta dba o drobne szczegóły, takie jak wyświetlanie SKU, tagów, kategorii i danych uzupełniających na stronie. Jeśli chcesz uwzględnić jak najwięcej danych na stronach, ten moduł Ci pomoże.
Nie jest to moduł o dowolnej formie, ale może przyjmować wewnętrzne meta i wyświetlać je dla wszystkich. Możesz jednak stylizować projekt.
10. Moduł opisu Woo
Moduł Woo Description umożliwia wyświetlanie opisu konkretnego produktu w dowolnym miejscu motywu Divi.
To podstawowy, ale użyteczny moduł, który umożliwia promowanie produktów na stronach blogów lub stronach usług, a także pełną kontrolę wyglądu i charakteru tego opisu.
11. Moduł zakładek Woo
Moduł Woo Tabs działa podobnie do modułu Divi Tabs. Instaluje element zawartości z zakładkami 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 kartą dla każdego z nich.
12. Moduł dodatkowych informacji Woo
Moduł Woo Additional Information jest dla tych, którzy chcą więcej. Masz produkty z dodatkowymi opcjami? To jest moduł, którego należy użyć. Na przykład rozmiary lub różne kolory byłyby tutaj wyróżnione.
Możesz nadać mu dowolny styl i umieścić go na stronie za pomocą standardowego narzędzia do dostosowywania. Kolejny prosty, ale cenny dodatek.
13. Moduł produktów powiązanych z Woo
Moduł Woo Additional Information nie wymagałby zbytniego wprowadzenia. Sklepy thrive na temat cross-sellingu i up-sellingu, a ten moduł pokazuje, jak to zrobić. Możesz dodać Podobne produkty sekcję do strony i dodaj informacje pomocnicze według uznania.
Każdy sklep powinien korzystać z funkcji cross-sellingu. Jeśli standardowe opcje WooCommerce nie wystarczają, ten moduł bezproblemowo współpracuje z Divi.
14. Moduł Woo Upsell
Moduł Woo Upsell robi mniej więcej to samo. Możesz dodać go do stron produktów lub do dowolnej strony w swojej witrynie, aby zwiększyć sprzedaż produktów.
Produkty prezentowane w tym module to te, które ustawiłeś jako opcje upsellingu w WooCommerce. Ten moduł pozwala po prostu umieścić je w dowolnym miejscu na stronie.
15. Moduł powiadomień Woo Cart
Moduł powiadomień Woo Cart to opcja o wartości dodanej, która dodaje prostą informację do strony produktu, informując użytkownika, że dodał produkt do koszyka. To prosty, ale przydatny element interakcji, który może odróżnić świetny sklep od po prostu dobrego.
Powiadomienia mogą być stylami i kolorami oraz czcionkami. Domyślne ustawienie będzie używać koloru motywu, ale możesz je łatwo zastąpić, jeśli wolisz.
16. Moduł recenzji Woo
Moduł Woo Reviews pozwala na umieszczanie recenzji produktów dla Twoich przedmiotów na dowolnej stronie w Twojej witrynie. Jest on przydatny dla stron promocyjnych lub wpisów na blogu, aby dodać ten ważny dowód społeczny, który pomoże wpłynąć na decyzję o zakupie.
Moduł pozwala ustawić określone pola, wyświetlić liczbę komentarzy i wpłynąć na kolor i styl. Jest to przydatny moduł, jeśli promujesz w miejscach innych niż strony swoich produktów.
10 najlepszych darmowych modułów Divi
Istnieje szeroka gama darmowych modułów Divi i nie wszystkie są sobie równe. Uważamy, że tych 10 darmowych modułów Divi jest wartych wypróbowania.
1. Divi Tweaker
Divi Tweaker to bardzo inteligentny moduł, który pomaga przyspieszyć Divi Builder i WooCommerce, usuwa ciągi zapytań, które mogą spowalniać ładowanie stron, a także umożliwia zastąpienie lokalnych plików motywu plikami dostarczanymi z sieci CDN.
Moduł ten dodaje także dodatkowe funkcje projektowania dla urządzeń mobilnych i komputerów stacjonarnych, animacje i efekty, przejścia między stronami, opcje układu i wiele więcej.
2. Moduł Divi Advanced Text
Divi Advanced Text Module to mały, ale bardzo przydatny moduł, który rozszerza istniejące opcje tekstowe 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 w niewielkim, ale istotnym stopniu skraca czas projektowania.
3. Divi Slimbuilder
Divi Slimbuilder jest idealny, jeśli tworzysz strony docelowe lub dłuższe strony witryn 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, dzięki czemu cały proces projektowania jest znacznie płynniejszy.
To drobna rzecz, ale dzięki niej możesz zobaczyć o wiele więcej z tego, co dzieje się w tle projektu, bez konieczności ciągłego przewijania w górę i w dół.
4. Rozszerzenie kart artykułów
Rozszerzenie Article Cards było najwyraźniej pierwszym modułem Divi firmy Elegant Themes. Jest tak użyteczne, że nadal istnieje i jest popularne. 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 cienia, kolory tła, możliwość stylizacji siatki bloga oraz zmiany położenia tytułu bloga i metadanych.
5. Pakiet rozszerzeń ikon Divi
Divi Icon Expansion Pack robi dokładnie to, co obiecuje. Dodaje mnóstwo ręcznie rysowanych ikon do Divi Builder do wykorzystania w Twoim projekcie. Są setki do wyboru i możesz dostosować je wszystkie do swojego motywu.
Istnieje darmowa i premium wersja tego modułu. Premium dodaje więcej ikon i opcji dostosowywania.
6. Rozszerz Divi
Expand Divi to kolejny moduł Divi, który sam się wyjaśnia. Dodaje on 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 stron, narzędzia Font Awesome i wiele więcej.
Moduł ten nie był aktualizowany od jakiegoś czasu, ale przetestowaliśmy go na najnowszej wersji WordPressa i Divi i działał dobrze.
7. Battle Suit dla Divi
Oprócz bardzo fajnej nazwy Battle Suit for Divi ma wiele do zaoferowania. To moduł rozszerzający, który dodaje więcej opcji postów, stopek, galerii i obrazów, dodaje Lightbox dla obrazów i wideo, dodaje efekty obrazów, tytuł posta i opcje meta i mnóstwo innych narzędzi.
Biorąc pod uwagę, że jest to darmowy moduł, dzieje się tu naprawdę sporo, a moduł sprawia, że wszystko jest dostępne i bardzo łatwe w użyciu.
8. Prosty krótki kod Divi
Simple Divi Shortcode to bardzo potężne narzędzie w WordPressie, shortcode'y, które możesz umieścić w dowolnym miejscu w innych modułach. To kolejne bardzo proste narzędzie, które może zrobić ogromną różnicę, jeśli często używasz shortcode'ów na swoich stronach.
Dostępna jest wersja darmowa i płatna tej wtyczki, ale opcja bezpłatna oferuje wszystkie potrzebne funkcje.
9. Dodatki Surbma Divi
Surbma Divi Extras dodaje kilka funkcji do Divi, które mogą się niektórym z was przydać. Jedną z rzeczy, która go wyróżnia, jest opcja logo tekstowego. Być może nie będziesz musiał jej często używać, ale kiedy już to zrobisz, samo to narzędzie sprawia, że warto używać tego modułu.
Moduł dodaje również opcje stylizacji, układu, menu i stopki oraz ma bardzo schludną opcję pionowego środka dla tekstu w module. To kolejne z tych narzędzi, które mogą być prawdziwym wybawieniem!
10. Okienka pop-up dla Divi
Popups for Divi jest bardzo przydatny, jeśli chcesz utworzyć pojedynczy popup, ale nie chcesz używać dedykowanej wtyczki popup dla WordPressa. Dodaje funkcję, w której możesz utworzyć element w kreatorze i używać go jako popup do marketingu.
To proste rozwiązanie poważnego problemu, idealne do tworzenia podstawowych okienek pop-up w obrębie strony, bez konieczności używania lub płacenia za wtyczkę do okienek pop-up.
10 modułów Premium Divi
Istnieją setki modułów premium Divi. Niektóre są warte inwestycji, a inne niekoniecznie. Te 10 zdecydowanie są warte Twoich pieniędzy!
1. Moduł karuzeli Divi 2.0
Divi Carousel Module 2.0 pomaga Ci budować karuzele dla niemal wszystkiego w Divi. Mogą być przydatne dla produktów, usług, referencji i wszelkiego rodzaju funkcji promocyjnych. Ta wtyczka sprawia, że się dzieją.
Umożliwia tworzenie dowolnej liczby karuzel i zapisywanie ich jako szablonów do wykorzystania w dowolnym miejscu. Masz pełną kontrolę nad ich wyglądem i odczuciami, a całe projektowanie odbywa się w kreatorze. Doskonała opcja do wyświetlania.
2. Divi Ecommerce
Divi Ecommerce współpracuje zarówno z Divi, jak i WooCommerce, aby przyspieszyć budowę sklepu internetowego. Ma kilka projektów do wykorzystania jako szablony, kilka niestandardowych elementów strony, zawartość demonstracyjną, aby szybko zacząć działać, 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, moduły popularnych produktów i wiele innych opcji. Jeśli nie podoba Ci się żadna z wersji demonstracyjnych Divi, ten moduł może być dla Ciebie.
3. Divi Headers Pack
Kolekcja Divi Headers Pack jest ogromny. Dodaje ponad 750 nowych nagłówków, niektóre funkcjonalne, niektóre nowe wzory. Dodaje off-canvaOpcje 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 jest wart inwestycji, jeśli masz problem ze znalezieniem idealnego nagłówka. Jeśli nie znajdziesz go 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 obejmują Gradient Text, Flipbox, Text Divider, Divi Typing, Supreme Button, Facebook Feed i wiele innych.
W tym module jest wiele rzeczy, 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żna wykorzystać do zbudowania kompletnej witryny do zarządzania wydarzeniami lub do dodawania wydarzeń do standardowej witryny. Używa standardowej Divi Builder aby pomóc w tworzeniu wydarzeń i ma wszystko, czego potrzebujesz do ich stylizacji i prezentacji.
Ten moduł zawiera kalendarz, karuzelę, kanał wydarzeń i moduł strony, które pomogą Ci utworzyć w pełni funkcjonalną witrynę internetową poświęconą wydarzeniom lub sekcję wydarzeń. Zdecydowanie warto się z nim zapoznać.
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 należysz do tej drugiej grupy, Table Maker moduł jest dla Ciebie. Umożliwia szybkie osadzenie tabeli na stronie i stylizowanie wszystkiego, co się z nią wiąże.
Możesz dodawać obrazy, ikony, teksty, przyciski, a nawet zwijać wiersze dla urządzeń mobilnych. To bardzo mocna wtyczka, która umożliwia szybkie dodawanie i stylizowanie tabel na dowolnej stronie i z tego powodu warto ją kupić.
7. Okno dialogowe Divi Modal
Jeśli chcesz wykorzystać wyskakujące okienka, a same wyskakujące okienka dla Divi nie wystarczą, Divi Modal Popup będzie wystarczający. To bogaty w funkcje moduł, który umożliwia szybkie tworzenie wyskakujących okienek na podstawie ładowania strony, opóźnienia czasowego i szeregu innych wyzwalaczy.
Co ważniejsze, możesz uwzględnić pełen zakres elementów strony, umieścić wyskakujące okienko w dowolnym miejscu, wywołać je przez cokolwiek na stronie i dodać animacje do samego wyskakującego okienka. Jeśli chcesz zwiększyć zaangażowanie w wyskakujące okienka, użyj tego.
8. Pomocnik responsywny Divi
Divi Responsive Helper to narzędzie, które pomoże Ci zobaczyć dokładnie, jak Twoja strona będzie się ładować na urządzeniach mobilnych z poziomu Buildera. Możesz również zmienić jej wygląd, sposób ładowania, zmienić kolejność elementów i w pełni kontrolować, jak Twoja witryna wygląda na urządzeniach mobilnych.
Moduł zawiera również bardzo inteligentne narzędzie do automatycznego naprawiania, 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 Divi Masonry
Divi Masonry Gallery jest idealne, jeśli chcesz więcej od portfolio lub strony bloga. Ma standardowy układ masonry i dodaje możliwość tworzenia różnych kształtów, zmiany kolumn, dodawania lub usuwania przestrzeni, dodawania modalnych wyskakujących okienek i konfigurowania konkretnej galerii dla urządzeń mobilnych.
Jeśli projektujesz witrynę internetową z dużą ilością obrazów i chcesz wykorzystać elementy murarskie w większym stopniu, ten moduł umożliwi Ci wykonanie wszystkich czynności z poziomu znanego interfejsu Buildera.
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. Rozbija również nagłówek na osobne sekcje, aby ułatwić dostosowywanie.
Moduł pozwala kontrolować, jak menu działa na różnych rozmiarach ekranu, ustawiać różne układy dla różnych urządzeń, dodawać elementy Ajax dla produktów, dodawać wezwania do działania i inne elementy. To potężny sposób na opanowanie nagłówków.
Jeśli szukasz dodatkowych funkcji, zapoznaj się z naszym artykułem na ten temat Wtyczki Divi lub sprawdź nasza recenzja DiviFlash.
Jak stworzyć własny niestandardowy moduł Divi
Chcesz opracować własny moduł Divi? Masz problem, który nie jest objęty istniejącym modułem?
Ta część artykułu ma Ci 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ć jako pierwsze, ponieważ Twój niestandardowy moduł Divi jest implementowany w rozszerzeniu, motywie lub motywie potomnym, a rozszerzenie jest najłatwiejsze do utworzenia.
Przeczytaj ten przewodnik, aby utworzyć rozszerzenie. Po zakończeniu wróć tutaj, aby utworzyć moduł.
Otwórz rozszerzenie i znajdź elementy include/modules
Utwórz katalog o nazwie SimpleHeader
Utwórz plik w SimpleHeader i nazwij go SimpleHeader.php
Wklej poniższy tekst do pliku i zapisz
klasa SIMP_SimpleHeader rozszerza ET_Builder_Module {
publiczny $slug = 'simp_simple_header';
publiczny $vb_support = 'włączony';
funkcja publiczna init() {
$this->name = esc_html__( 'Prosty nagłówek', 'simp-simple-extension' );
}
funkcja publiczna get_fields() {
zwróć tablicę(
'nagłówek' => tablica(
'etykieta' => esc_html__( 'Nagłówek', 'simp-simple-extension' ),
'typ' => 'tekst',
'option_category' => 'podstawowa_opcja',
'description' => esc_html__( 'Wpisz tutaj żądany nagłówek.', 'simp-simple-extension' ),
'toggle_slug' => 'main_content',
),
'zawartość' => tablica(
'etykieta' => esc_html__( 'Zawartość', 'simp-simple-extension' ),
'typ' => 'tiny_mce',
'option_category' => 'podstawowa_opcja',
'description' => esc_html__( 'Treść wpisana w tym miejscu pojawi się pod tekstem nagłówka.', 'simp-simple-extension' ),
'toggle_slug' => 'main_content',
),
);
}
publiczna funkcja render( $unprocessed_props, $content = null, $render_slug ) {
}
}
nowy SIMP_SimpleHeader;
Jeśli znasz PHP, zobaczysz podstawowy nagłówek, z którego można skorzystać Divi BuilderZobaczysz nagłówek, trochę treści i tło.
Teraz dodaj do pliku kod HTML, aby można go było renderować.
Dodaj poniższe po 'public function render( $unprocessed_props, $content = null, $render_slug ) {'
zwróć sprintf(
' %1$s
%2$s ',
esc_html( $this->props['heading'] ),
$this->props['zawartość']
);
}
}
nowy SIMP_SimpleHeader;
Twój kompletny plik powinien wyglądać następująco:
klasa SIMP_SimpleHeader rozszerza ET_Builder_Module {
publiczny $slug = 'simp_simple_header';
publiczny $vb_support = 'włączony';
funkcja publiczna init() {
$this->name = esc_html__( 'Prosty nagłówek', 'simp-simple-extension' );
}
funkcja publiczna get_fields() {
zwróć tablicę(
'nagłówek' => tablica(
'etykieta' => esc_html__( 'Nagłówek', 'simp-simple-extension' ),
'typ' => 'tekst',
'option_category' => 'podstawowa_opcja',
'description' => esc_html__( 'Wpisz tutaj żądany nagłówek.', 'simp-simple-extension' ),
'toggle_slug' => 'main_content',
),
'zawartość' => tablica(
'etykieta' => esc_html__( 'Zawartość', 'simp-simple-extension' ),
'typ' => 'tiny_mce',
'option_category' => 'podstawowa_opcja',
'description' => esc_html__( 'Treść wpisana w tym miejscu pojawi się pod tekstem nagłówka.', 'simp-simple-extension' ),
'toggle_slug' => 'main_content',
),
);
}
publiczna funkcja render( $unprocessed_props, $content = null, $render_slug ) {
zwróć sprintf(
' %1$s
%2$s ',
esc_html( $this->props['heading'] ),
$this->props['zawartość']
);
}
}
nowy SIMP_SimpleHeader;
Jeśli tak, nadszedł czas na utworzenie React Klasa komponentu, która pozwala Divi Builder wyrenderuj moduł.
Utwórz plik i nazwij go SimpleHeader.jsx
Wklej poniższy tekst i zapisz
// Zależności zewnętrzne
importować React, { Komponent, Fragment } z 'react';
// Zależności wewnętrzne
importuj './style.css';
klasa SimpleHeader rozszerza Component {
statyczny ślimak = 'simp_simple_header';
renderowanie() {
powrót (
{ta.treść.rekwizytów()}
);
}
}
eksportuj domyślny SimpleHeader;
Przejdź do pliku include/modules/index.js w pliku rozszerzenia
Dodaj i zapisz następujące elementy
// Zależności wewnętrzne
importuj SimpleHeader z './SimpleHeader/SimpleHeader';
eksportuj domyślne [
ProstyNagłówek,
];
Dodaj następujący kod do SimpleHeader.jsx po
renderowanie() {
powrót (
i zapisz to.
{nagłówek tego.props}
Pełny plik powinien teraz wyglądać następująco:
// Zależności zewnętrzne
importować React, { Komponent, Fragment } z 'react';
// Zależności wewnętrzne
importuj './style.css';
klasa SimpleHeader rozszerza Component {
statyczny ślimak = 'simp_simple_header';
renderowanie() {
powrót (
{nagłówek tego.props}
{ta.treść.rekwizytów()}
);
}
}
eksportuj domyślny SimpleHeader;
Otwórz plik style.css swojego modułu i dodaj
.simp-simple-header-heading {
margines na dole: 20px;
}
To wszystko, jeśli chodzi o rozwijanie modułu Divi. Teraz wystarczy go tylko przetestować!
Otwórz Divi Builder, zlokalizuj swój moduł Simple Header i spróbuj użyć go na stronie. Jeśli kod jest poprawny, zobaczysz opcję Simple Header.
Podsumowanie modułów Divi
Dołączyliśmy ponad 70 bezpłatnych i płatnych modułów Divi obejmujących wszystko, od tworzenia wyskakujących okienek po dodawanie dodatkowych funkcji projektowych. Divi Builder. Niektóre z nich to moduły specjalistyczne, których nie będziesz używać zbyt często, ale niektóre są niezbędne do płynnego i wydajnego korzystania z Divi Builder.
Uważamy, że stanowią one przekrój tego, co jest dostępne, co działa i co ma rozsądną cenę. Co o tym myślisz?
Czy używasz któregoś z tych modułów Divi? Masz jakieś moduły do zasugerowania?