Moduł kodu Divi

Procédure

Divi builder jest zawarty w naszych pakietachhostingowych Wordpress. Jeśli chcesz uzyskać wsparcie dla DIVI builder, musisz wykupić licencję bezpośrednio na stronie Elegent theme Divi.

Wprowadzenie

LWS oferuje 3 wtyczki premium od Elegant Themes (Divi, Bloom i Monarch). Są one regularnie aktualizowane. Gdy zostaniesz klientem LWS, będziesz mieć bezpłatny dostęp do tych wtyczek, wybierając dystrybucję "Divi Builder" podczas instalacji CMS Wordpress za pomocą naszego autoinstalatora.

Jeśli masz pakiet cPanel lub zainstalowałeś już Wordpress z tą dystrybucją, ale nie masz dostępu do wszystkich motywów lub aktualizacji, poinformuj nas o tym, podając nam dane dostępu do obszaru administracyjnego swojej witryny Wordpress, aby technik mógł zaktualizować licencję.

Uwaga: aby skorzystać ze wsparcia, należy wykupić licencję Elegant Themes. LWS nie zapewnia wsparcia dla tych produktów.

Czym jest moduł kodu Divi?

Moduł Code to puste płótno, które umożliwia dodawanie kodu do strony, takiego jak skróty wtyczek lub statyczny 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 standardowym lub pełnowymiarowym module kodu, aby wyświetlić element bez przeszkód.

Jak dodać moduł kodu do strony

Zanim będziesz mógł dodać moduł kodu do swojej strony, musisz najpierw przełączyć się na Divi Builder. Po zainstalowaniu motywu Divi w witrynie zauważysz przycisk Użyj Divi Build er nad edytorem postów za każdym razem, gdy tworzysz nową stronę. Kliknięcie tego przycisku aktywuje Divi Builder, dając dostęp do wszystkich jego modułów. Następnie kliknij przycisk Użyj Visual Builder, aby uruchomić kreator w trybie wizualnym. Możesz także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny z przodu, jeśli jesteś zalogowany do pulpitu nawigacyjnego WordPress.

Po wejściu do Visual Builder możesz kliknąć szary przycisk +, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w obrębie wierszy. Jeśli tworzysz nową stronę, nie zapomnij najpierw dodać do niej wiersza.

Znajdź moduł kodu na liście modułów i kliknij go, aby dodać go do strony. Listę modułów można przeszukiwać, co oznacza, że można również wpisać słowo "code", a następnie kliknąć przycisk Enter, aby znaleźć i automatycznie dodać moduł kodu! Po dodaniu modułu zostaniesz powitany listą opcji dla modułu. Opcje te są podzielone na trzy główne grupy: Treść, Styl i Zaawansowane.

Przykładowy przypadek użycia: Dodanie zewnętrznego arkusza stylów w celu animacji zawartości pojedynczej strony

W tym przykładzie dodam skrypt łącza, aby zaimportować 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 stronie, której potrzebuję.

Po prostu dodaj zwykłą sekcję i wiersz o pełnej szerokości (1 kolumna) i dodaj moduł Code.

W polu tekstowym treści dodaj fragment kodu.

Teraz wystarczy dodać kilka klas CSS, aby animować dowolny element na stronie z klasami CSS. W tym przykładzie zamierzam sprawić, by przycisk odbijał się po załadowaniu strony.

W ustawieniach modułu przycisku, na karcie Zaawansowane, wprowadź dwie klasy "animated" i "bounce" w polu tekstowym klasy CSS.

Przycisk będzie się teraz odbijał po załadowaniu strony.

Oto kilka innych przykładów wykorzystania modułu kodu:

1. Dodaj bloki kodu javascript lub biblioteki, które mają zastosowanie tylko do twojej strony.
2. Zintegrować wtyczki innych firm, takie jak suwak rewolucji.
3. Możesz użyć modułu kodu o pełnej szerokości, aby zintegrować standardowy formularz z bardziej interaktywnymi kwestionariuszami, formularzami kontaktowymi itp.
4. Dodaj pływające menu akcji
5. Utwórz wysuwaną reklamę na górnym pasku.
6. Dodaj pływający przycisk akcji.

Wskazówka: Czasami dodanie kodu z podziałami wierszy powoduje, że kod nie działa. Najlepiej jest utworzyć kod w edytorze tekstu i połączyć go (wszystko w jednym wierszu) przed wklejeniem go do modułu kodu.

Prezentacja wideo modułu kodu Divi

Podsumowanie

Dziękujemy za skorzystanie z tego samouczka!

Moduł kodu to kolejny sposób na spersonalizowanie i ożywienie witryny poprzez dodanie dynamicznego akcentu.

Do zobaczenia wkrótce w kolejnym samouczku ;)

Aby dowiedzieć się więcej o Elegant Themes Divi i jak z niego korzystać

Moduł komentarzy Divi

Zarządzanie modułem formularza kontaktowego Divi

> Skonsultuj się z naszą sekcją pomocy Elegant Themes Divi

Zrzuty ekranu © Elegant Themes — używane w celach informacyjnych w tym samouczku LWS.