Wyróżnienie wtyczki Divi: Kreator modułów Divi

Divi Builder zawiera wiele modułów, które pomogą Ci dodać praktycznie dowolne elementy projektu do swoich układów, ale co, jeśli chcesz tworzyć własne moduły? Wtyczka innej firmy o nazwie Divi Module Builder daje tę możliwość.

W tym artykule przyjrzę się wtyczce i zobaczę, co potrafi i jak łatwa jest w użyciu. Wymaga Divi 3.0.50 lub nowszego i działa zarówno z Divi, jak i Extra. Jest dostępny na stronie dewelopera: DiviPlugins.com.

Instalowanie kreatora modułów Divi

Po aktywacji wtyczki kliknij Strona aktywacyjna DMB . Alternatywnie możesz zobaczyć ten ekran, przechodząc do Moduły niestandardowe na pulpicie nawigacyjnym i klikając Licencja .

Wprowadź swój klucz licencyjny i kliknij Aktywuj licencję . Do pulpitu nawigacyjnego dodano nowe menu o nazwie Moduły niestandardowe . W tym menu znajdziesz wszystko, czego potrzebujesz do zbudowania swoich modułów.

Dodaj moduł

Moduły są tworzone w menu pulpitu nawigacyjnego w obszarze Moduły niestandardowe , Dodaj moduł . Istnieją dwa obszary, których użyjesz do stworzenia modułu. Obszar po lewej to miejsce, w którym utworzysz pola. Obszar po prawej to miejsce, w którym dodasz kod, którego będą używać pola. Możesz zrobić moduł standardowy lub o pełnej szerokości. Możesz zapisać wersję roboczą lub opublikować, gdy będziesz gotowy. Po opublikowaniu modułu pojawi się on w Divi Builder.

Pola

Twój moduł może mieć tyle pól, ile chcesz. Każde pole zawiera w sobie właściwości pola. Oto bliższe spojrzenie na każdą z właściwości pola:

Etykieta pola – etykieta, która będzie wyświetlana jako tytuł pola w zakładce treści modułu.

Field Identifier – unikalna wartość, której będziesz używać do odwoływania się do pola w HTML. Jako identyfikatorów pól używaj tylko małych liter, cyfr i podkreśleń.

Opis pola – dodaj własny opis, aby wyjaśnić przeznaczenie pola. Spowoduje to wyświetlenie poniżej danych wejściowych w zakładce zawartości modułu. To pole jest opcjonalne, ale zalecam dodanie informacji lub przykładów, aby pomóc użytkownikom.

Typ pola – określa typ wejścia, które widzi użytkownik. Wybierz kilka typów pól z listy rozwijanej, w tym tekst, obszar tekstu, kolor, obraz, przełącznik Tak/Nie i ikonę.

Karta Projekt – dodaje kontrolki czcionek dla tego pola w projekcie modułu. Zobaczysz tę opcję, jeśli wybierzesz tekst lub obszar tekstowy. Musisz określić, do którego elementu zastosować kontrolki czcionki, dodając klasę w kodzie HTML.

Ukryj pole – daj użytkownikom kontrolę nad czcionką elementu w wynikach HTML, nie pozwalając im kontrolować zawartości tego elementu. Ta opcja będzie dostępna tylko wtedy, gdy zostanie wybrany tekst lub obszar tekstowy Typ pola.

Dodaj etykietę pola, identyfikator, opis, wybierz typ pola, włącz kartę projektu lub wybierz ukrycie pola. Zmień kolejność pól, klikając strzałki w górę/w dół na każdym polu. Każda sekcja i pole zawiera opis i przykład.

Kod

Dodaj niestandardowy kod HTML, PHP, CSS i JavaScript, aby kontrolować dane wyjściowe. Pola HTML mogą przyjmować niestandardowe zapytania i PHP. Musisz włączyć PHP, zanim rozpozna kod. W przeciwnym razie wydrukuje kod na ekranie. Zarówno HTML, jak i PHP używają identyfikatorów pól do odwoływania się do pól.

Skróty do kodu są dostępne jako przyciski pod polami kodu. Obejmuje to tagi i identyfikatory pól. Dodaj identyfikatory pól, a następnie będzie dostępny na dole obszaru kodu, gdzie możesz kliknąć, aby dodać je do kodu. Identyfikatory HTML są widoczne jako pomarańczowe przyciski, a PHP jako zielone. Możesz użyć więcej niż to, co jest dostępne jako skróty, ale są one tutaj, aby przyspieszyć czas opracowywania.

Tworzenie modułu

Oto krótki przykład tworzenia modułu. Tytułem będzie nazwa, która pojawi się na module w Divi Builder. Dodałem etykietę pola, opis, wybrałem Tekst jako typ pola i utworzyłem identyfikator pola.

Zapisałem jako wersja robocza, aby identyfikator pojawił się w skrótach HTML. Następnie wybrałem tag H1 ze skrótów, umieściłem kursor między tagami i wybrałem etykietę ze skrótów HTML. Kiedy skończyłem, wcisnąłem publikację. Wynikiem powinien być moduł z polem, w którym użytkownicy mogą wprowadzać tekst. Wynik wyświetli tekst jako nagłówek 1.

Moduł pojawia się teraz w Divi Builder. Mogę dodać do strony tak jak każdy moduł Divi.

Karta Treść zawiera pola, które dodałem z moimi etykietami.

Moduł wyświetla tekst, który wprowadziłem do pola. Ponieważ dodałem HTML, aby wyświetlić go jako H1, tekst automatycznie ma właściwość H1. Mógłbym dodać kartę Projekt, aby uwzględnić więcej funkcji dostosowywania. Będzie to wymagało trochę kodu, aby poprawnie kierować pole.

Moduły

Możesz zobaczyć listę modułów w menu pulpitu nawigacyjnego. Przejdź do Moduły niestandardowe , Moduły . Tutaj możesz edytować lub usuwać swoje moduły. Pokazuje, czy PHP jest włączone lub wyłączone dla każdego modułu. Jeśli chcesz sklonować moduł, musisz je wyświetlić w Ustawieniach .

Ustawienia modułu niestandardowego

Menu Ustawienia zapewnia miejsce, w którym możesz zarządzać swoimi modułami. Możesz przeglądać zarówno opublikowane, jak i wersje robocze modułów.

Możesz je sklonować, co daje dobre miejsce do rozpoczęcia pracy z modułem, który wymaga dużej ilości kodu, którego użyłeś w innym module. Możesz także edytować, wyłączać lub włączać PHP (co jest pomocne, jeśli nie masz dostępu do edytora z powodu błędu kodu – zrobiłem to i użyłem tej funkcji do edycji modułu) oraz importować i eksportować swoje moduły.

Dodaj zależność

Tutaj możesz dodać zależności CSS i JavaScript innych firm. Dodaj je jako zewnętrzne lub wewnętrzne adresy URL. Wybierz CSS lub JavaScript z listy rozwijanej, dodaj nazwę i dodaj adres URL. Można ich następnie używać na dowolnej stronie. Podaje przykład użycia Font Awesome. To doskonały sposób na utworzenie zależności w jednej lokalizacji, a następnie używanie jej w dowolnym miejscu.

Przykład konstruktora modułów Divi – niestandardowa siatka blogów

Zamiast tworzyć „w porządku” moduł jako przykład, pokazuję niesamowity przykład stworzony przez programistę – Custom Blog Grid (dostępny do pobrania ze strony programisty za darmo). Zawiera 3 pola, HTML, PHP i CSS. Oto spojrzenie na każdy z nich.

Niestandardowy moduł siatki bloga

Pole 1 ma etykietę Kategorie, używa kategorii jako identyfikatora, a typ pola jest ustawiony na Tekst.

Pole 2 jest oznaczone Efektem obrazu czarno-białego. Identyfikator to filtr, a typ pola to Tak/Nie Przełącz. Filtr tworzony jest w CSS.

Pole 3 jest oznaczone tytułem posta i używa post_title jako identyfikatora. Typ pola jest ustawiony na Tekst i ma włączoną kartę Projekt. Zobaczymy dostosowania dla tego pola w module. To pole ma w HTML-u klasę H2.

Wybrano PHP, więc można go używać w polu Kod wyjściowy HTML.

Niestandardowy CSS jest dodawany do pola wyjściowego CSS.

Oto JavaScript. Aby w pełni wykorzystać tę wtyczkę, musisz dobrze rozumieć HTML, PHP, CSS i JavaScript. Innymi słowy, jest to wtyczka dla programistów.

Moduł niestandardowej siatki blogów w Divi Builder

Po opublikowaniu modułu znajdziesz go w Divi Builder.

Ustawienia, które pojawiają się w module i ich etykiety będą się różnić w zależności od dokonanych wyborów. Ten moduł umożliwia dodawanie kategorii, włączanie efektu czarno-białego oraz dodawanie tytułu posta w zakładce Treść. Zawiera również ustawienia tła (co jest domyślne dla modułów).

Karta Projekt jest włączona dla tego modułu. Zawiera ustawienia tekstu, tekstu tytułu posta, obramowania, odstępów i animacji.

Wyniki niestandardowej siatki blogów

Rezultatem jest siatka bloga z animacją najechania. Włączyłem tryb czarno-biały, więc obrazy są wyświetlane w czerni i bieli, chyba że nad nimi najeżdżam. Wolę taką formę najechania – aby odsłonić obraz po najechaniu, a nie go zasłaniać.

W tym przypadku wyłączyłem tryb czarno-biały, zmieniłem czcionkę tytułu i dodałem gradient tła. Więcej zmian można dodać w kodzie, aby zmienić przycisk, dodać nakładki itp. Jeśli potrafisz zakodować, możesz sprawić, że zrobi praktycznie wszystko, co możesz sobie wyobrazić.

Licencja i dokumentacja

Do wyboru są trzy licencje: pojedyncza, nieograniczona i dożywotnia. Licencja Unlimited obejmuje nieograniczoną liczbę stron internetowych i obejmuje 1 rok aktualizacji i wsparcia. Licencja Lifetime Unlimited Sites obejmuje dożywotnie aktualizacje i wsparcie.

Dokumentacja jest dostępna na stronie dewelopera. Przykładowy kod jest dołączony wraz z instrukcjami krok po kroku.

Końcowe przemyślenia

Divi Module Builder to potężna wtyczka z dużym potencjałem we właściwych rękach. Ponieważ wymaga dobrej znajomości kodu, nie jest dla wszystkich. Daje to programistom doskonałe narzędzie do tworzenia i udostępniania modułów. Podoba mi się, że możesz importować i eksportować z jednej witryny do drugiej. Każda witryna korzystająca z modułu będzie wymagała zainstalowania wtyczki. Jeśli dobrze znasz kod i jesteś zainteresowany tworzeniem własnych modułów Divi, warto zajrzeć do Divi Module Builder.

Chcemy usłyszeć od Ciebie. Czy wypróbowałeś Divi Module Builder? Daj nam znać, co o tym myślisz w komentarzach.

Polecane zdjęcie za pośrednictwem aliaksei kruhlenia / shutterstock.com