Dostosowywanie kodu motywu Extra

Procédure

Wprowadzenie

LWS oferuje 3 wtyczki premium od Elegant Themes (Divi, Bloom i Monarch). Są one regularnie aktualizowane. Gdy zostaniesz klientem LWS, uzyskasz 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.

Dostosowywanie kodu motywu Extra

Możesz użyć modułu Code, aby dodać niestandardowy kod HTML i/lub krótkie kody WordPress do swoich układów. W powyższym przykładzie dodaliśmy formularz zgody na e-mail przy użyciu krótkiego kodu dostarczonego przez wtyczkę Bloom.

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

Teraz przycisk odbija się po załadowaniu strony!

Wnioski

Dziękujemy za skorzystanie z tego samouczka!

Użyj modułu kodu, aby umieścić niestandardowy kod na swojej stronie, taki jak HTML i JS, lub wprowadź krótkie kody innych firm.

Do zobaczenia wkrótce w kolejnym poradniku ;)

Aby dowiedzieć się więcej o motywie Extra i sposobie jego używania

Tworzenie bloga z motywem Extra

Moduł tekstowy Extra

> Zapoznaj się z naszą sekcją pomocy motywu Extra