Przejdź do głównej treści

Jak korzystać z modułu kodu w Divi Builder

Divi: najłatwiejszy w użyciu motyw WordPress

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

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. Po zainstalowaniu motywu Divi na swojej stronie internetowej 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 podczas przeglądania strony internetowej, jeśli jesteś zalogowany do pulpitu nawigacyjnego WordPress.

przycisk divi moduł budowniczy blog divi

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.

Wstaw moduł Divi Code

 

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ę.

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

Wystarczy dodać zwykłą sekcję i linię o pełnej szerokości (kolumna 1) i dodać moduł kodu.

Kod Divi Builder

W polu tekstowym zawartości dodaj fragment kodu.

Dodaj fragment kodu animate.css

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.

Dodaj animowaną klasę CSS

Teraz przycisk odbija się po załadowaniu strony.

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 701.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Animacja przycisku Divi Builder

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ści znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie na tej karcie.

Parametry kodu Divi BuilderTreść

Możesz umieścić tam dowolny kod HTML, CSS lub JavaScript, który chcesz wyświetlić na stronie w bieżącej lokalizacji. Tylko redaktorzy i administratorzy mogą publikować niefiltrowany HTML, co oznacza, że ​​kod można usunąć z modułu, jeśli jest używany przez autora lub współpracownika. W module możesz również umieszczać skróty. Te kody kursów (skróty) będą wyświetlane w kolumnie nadrzędnej bez dodatkowego opakowania modułu 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.

Kreator divi kodu modułu projektowania opcjiMaksymalna 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.

Sekcja Zaawansowanego budowania kodu modułu Divi

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.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Klasa CSS

Wprowadź opcjonalne klasy CSS do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Te klasy mogą być używane w motywie Divi Child lub w niestandardowym CSS, który dodajesz do swojej strony lub witryny za pomocą 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.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
2 akcji
udział2
ćwierkanie
Enregistrer