Przejdź do głównej treści

Jak korzystać z modułu kodu w Divi Builder

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: najlepszy motyw WordPress wszechczasów!

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

Moduł kodu jest pustym obszarem, który umożliwia dodawanie kodu do strony, takiego jak krótkie kody wtyczek lub statyczny kod HTML. Jeśli chcesz użyć wtyczki innej firmy, takiej jak wtyczka suwaka innej firmy, możesz po prostu umieścić krótki kod wtyczki w module kodu standardowego lub pełnej szerokości, aby wyświetlić element bez przeszkód.

Jak dodać moduł kodu do swojej strony

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

Kliknięcie tego przycisku aktywuje Divi Builder, który daje dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym.

Możesz również kliknąć przycisk Użyj Visual Builder kiedy przeglądasz swoją stronę internetową, jeśli jesteś zalogowany do pulpitu WordPress.

przycisk divi moduł budowniczy blog divi

Po wprowadzeniu do programu Visual Builder można kliknąć szary przycisk plus, aby dodać nowy moduł do strony. Nowe moduły można dodawać tylko w rzędach. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać linii do swojej strony.

Zlokalizuj moduł kodu na liście modułów i kliknij go, aby dodać go do swojej strony. Lista modułów jest przeszukiwalna, co oznacza, że ​​możesz również wpisać słowo "kod", a następnie nacisnąć Enter, aby wyszukać i automatycznie dodać moduł kodu! Po dodaniu modułu, zostaniesz powitany z 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 łącza do importowania 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 potrzebnej stronie.

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

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

W polu tekstowym treści dodaj fragment kodu.

Wszystko, co musisz zrobić, to dodać kilka klas CSS, aby animować dowolny element swojej strony klasy CSS na swojej stronie. W tym przykładzie odrzucę przycisk po załadowaniu strony.

W ustawieniach modułu przycisków na karcie Zaawansowane wprowadź dwie klasy "animowane" i "odbicia" w polu tekstowym klasy CSS.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

Teraz przycisk odbija się po załadowaniu strony.

Wskazówka: czasami dodanie kodu z podziałem wierszy uniemożliwi działanie kodu. Najlepiej jest utworzyć swój kod w edytorze tekstu i wkleić go do modułu kodu.

Opcje zawartości kodu

Na karcie treści znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko, co kontroluje co pojawia się w twoim module zawsze będzie na tej karcie.

Treść

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 modułu, jeśli jest używany przez autora lub współpracownika. Możesz również umieścić krótkie kody w module. Te skróty będą wyświetlane wewnątrz kolumny nadrzędnej bez żadnych dodatkowych owijek modułów Divi.

Etykieta administracyjna

Spowoduje to zmianę tagu modułu w generatorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w Visual Builder, etykiety te pojawią się w bloku modułów interfejsu Divi Builder.

Opcje projektowania kodu

Na karcie Projektowanie znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Ta zakładka pozwala zmienić wygląd twojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do modyfikacji prawie wszystkiego.

Maksymalna szerokość

Każda wprowadzona tutaj wartość ogranicza szerokość dowolnej treści wyświetlanej w module kodu do ustawionej wartości. Na przykład wpisanie 50% w polu wejściowym spowoduje zmniejszenie zawartości modułu kodu do 50% kolumny, która go zawiera.

Kod Opcje zaawansowane Kod

Na karcie Zaawansowane znajdziesz opcje, które bardziej doświadczeni projektanci stron internetowych mogą uznać za użyteczne, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Do modułu można również zastosować niestandardowe klasy i identyfikatory CSS, które można wykorzystać do dostosowania modułu w pliku style.css kompozycji podrzędnej.

Identyfikator CSS

Wprowadź łatwy w użyciu identyfikator CSS dla tego modułu. Identyfikatora można użyć do utworzenia niestandardowego stylu CSS lub do utworzenia linków do poszczególnych sekcji strony.

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Do utworzenia niestandardowego stylu CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Te klasy mogą być używane w kompozycji Divi Child lub niestandardowym CSS dodawanym do strony lub witryny internetowej przy użyciu opcji kompozycji Divi lub ustawień strony Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i jednego z wewnętrznych elementów modułu. W niestandardowej sekcji CSS znajdziesz pole tekstowe, w którym możesz dodać CSS bezpośrednio do każdego elementu. Pozycje CSS w tych ustawieniach są już osadzone w znacznikach stylu. Musisz tylko wprowadzić reguły CSS oddzielone średnikami.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się twój moduł. Możesz wyłączyć moduł na tabletach, smartfonach lub pulpitach indywidualnie. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne, eliminując pewne elementy strony.

To wszystko na ten samouczek.

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

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