Moduł kodu to puste płótno, które umożliwia dodawanie kodu do strony, takiego jak skróty wtyczek lub statyczny kod HTML. Jeśli chcesz użyć wtyczki innej firmy, na przykład wtyczki suwaka innej firmy, możesz po prostu umieścić krótki kod wtyczki w module kodu standardowego lub o pełnej szerokości, aby wyświetlić element bez ograniczeń.
Jak dodać moduł kodu do swojej strony
Zanim będziesz mógł dodać moduł kodu do swojej strony, musisz najpierw uzyskać dostęp do Divi Builder. Kiedyś Motyw Divi zainstalowany na twoim Witryna internetowa, zauważysz przycisk Użyj Divi Builder nad wydawcą za każdym razem, gdy tworzysz nową stronę.
Klikając ten przycisk, aktywujesz Divi Builder, który zapewnia dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym.
Możesz także kliknąć przycisk Użyj Visual Builder kiedy przeglądasz swoje Witryna internetowa upstream, jeśli jesteś zalogowany do pulpitu WordPress.
Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony.
Znajdź moduł kodu na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że możesz również wpisać słowo „kod”, a następnie nacisnąć klawisz Enter, aby automatycznie znaleźć i dodać moduł kodu! Po dodaniu modułu zostaniesz powitany listą opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .
Użyj przypadku, dodając nudny arkusz stylów, aby animować zawartość na pojedynczej stronie
W tym przykładzie dodam skrypt odsyłacza, który zaimportuje plik Animate.css w celu dodania efektów animacji do elementów strony. Ponieważ plik Animate.css zawiera dużo kodu, sensowne jest ładowanie go tylko na tej stronie, której potrzebuję.
Wystarczy dodać zwykłą sekcję i linię o pełnej szerokości (kolumna 1) i dodać moduł kodu.
W polu tekstowym treść, dodaj fragment kodu.
Wszystko, co musisz zrobić, to dodać kilka klas CSS, aby animować dowolny element strony z klasami CSS na swojej stronie. W tym przykładzie odbijam przycisk podczas ładowania strony.
W ustawieniach modułu Button, na karcie Zaawansowane, wprowadź dwie klasy „animowana” i „odbijająca” w polu tekstowym klasy CSS.
Teraz przycisk odbija się po załadowaniu strony.
Wskazówka: czasami dodanie kodu z podziałem wiersza powoduje, że kod przestaje działać. Lepiej jest utworzyć kod w edytorze tekstu i wkleić go do modułu kodu.
Opcje zawartości kodu
W zakładce treść, znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko, co kontroluje co pojawi się w module zawsze będzie na tej karcie.
Treść
Tutaj możesz umieścić dowolny kod HTML, CSS lub JavaScript, który chcesz wyświetlić na stronie w bieżącej lokalizacji. Tylko redaktorzy i administratorzy mogą publikować niefiltrowany kod HTML, co oznacza, że kod może zostać usunięty z kursu, jeśli jest używany przez autora lub współautora. W module można również umieszczać skróty. Te kody kursów (skróty) będą wyświetlane w kolumnie nadrzędnej bez żadnych dodatkowych opakowań modułów Divi.
Etykieta administracyjna
Spowoduje to zmianę etykiety modułu w generatorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawią się w bloku modułu interfejsu Divi Builder.
Opcje projektowania kodu
Na karcie Projekt znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Ta zakładka pozwala na modyfikację wyglądu Twojego modułu. Każdy moduł Divi ma długą listę ustawień projektowych, których można użyć do dostosowania prawie wszystkiego.
Maksymalna szerokość
Każda wprowadzona tutaj wartość ogranicza szerokość dowolnej treści renderowanej w module kodu do ustawionej wartości. Na przykład wpisanie 50% w polu wejściowym zmniejszy zawartość modułu kodu do 50% kolumny, która go zawiera.
Kod Opcje zaawansowane Kod
Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.
Identyfikator CSS
Wprowadź łatwy w użyciu identyfikator CSS dla tego modułu. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.
Klasa CSS
Wprowadź opcjonalne klasy CSS, które będą używane w tym module. Klasa CSS może służyć do tworzenia niestandardowych stylów CSS. Możesz dodać wiele klas oddzielonych spacją. Te zajęcia mogą być używane w twoim Motyw Divi Child lub w niestandardowym CSS, który dodajesz do swojej strony lub pliku Witryna internetowa korzystając z opcji motywu Divi lub ustawień strony Divi Builder.
Niestandardowy CSS
Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Custom CSS znajdziesz pole tekstowe, w którym możesz dodać CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już osadzone ze znacznikami stylu. Musisz więc tylko wprowadzić reguły CSS oddzielone średnikami.
widoczność
Ta opcja umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, eliminując pewne elementy ze strony.
To wszystko w tym samouczku.
