Elementor: Jak dodać niestandardowy CSS do bezpłatnej wersji

Niedawno jeden z naszych czytelników, który nie miał wersji Pro Elementora, rzucił nam wyzwanie, jak dodać niestandardowy CSS do swojej witryny.

Ponieważ problem jest nieco bardziej złożony, pomyśleliśmy, że kilku użytkowników może napotkać ten problem. Postanowiliśmy więc zamieścić szczegółowy artykuł o tym, jak się tam dostać.

W tym artykule pokażemy, jak łatwo dodać niestandardowy kod CSS do strony lub witryny Elementora.

Trzy sposoby dodawania niestandardowego kodu CSS do strony lub witryny Elementora są następujące:

• Dodaj kod CSS za pomocą elementu HTML.
• Za pomocą wtyczki Fragment kodu.
• Korzystanie z narzędzia do dostosowywania motywów Elementora

Metoda 1: Dodaj kod CSS z elementu HTML Elementora

Użyj tej metody, jeśli chcesz dodać CSS tylko do jednej strony.

Krok 1: Przeciągnij i upuść element HTML Elementora

Możesz umieścić ten element HTML w dowolnym miejscu na stronie i będzie działał dobrze.

Krok 2: Kliknij ikonę Edytuj HTML

Kliknij ikonę Edytuj html po prawej stronie elementu HTML Elementora. Kliknięcie go spowoduje wyświetlenie przybornika do edycji HTML po lewej stronie ekranu.

Krok 3: Dodaj swój kod CSS

1. Kliknij zakładkę Treść i otwórz listę rozwijaną Kod HTML.
2. Umieść swój kod CSS w latarnie.

Metoda 2: Niestandardowy CSS dla Elementora za pomocą wtyczki Code Snippets

Korzyści z używania wtyczki Code Snippets:

• Jeśli chcesz zmienić lub zaktualizować motyw WordPress, CSS będzie zawsze stosowany.
• Jest to najwygodniejszy i najskuteczniejszy sposób dodawania kodu CSS, ponieważ możesz włączyć lub wyłączyć kod CSS, taki jak wtyczki.

Krok 1: Otwórz menu rozszerzeń na pulpicie nawigacyjnym

Krok 2: Dodaj nową wtyczkę

Kliknij przycisk Dodaj dniu »Aby uzyskać dostęp do strony dodawania nowych wtyczek.

1. Poszukaj wtyczki " Fragmenty kodu ”.
2. Zainstaluj go, klikając przycisk zainstalować teraz gdy wyniki badań są pozytywne.

Krok 3: Aktywuj wtyczkę

Kliknij przycisk aktywować »Po zakończeniu instalacji, aby aktywować wtyczkę Fragmenty kodu.

Krok 4: Otwórz stronę wtyczki i dodaj fragment kodu

1. Otwórz menu Ekstrakty z Twojego pulpitu nawigacyjnego
2. Kliknij przycisk Nouveau dodać nowy fragment kodu

Krok 5: Utwórz fragment i aktywuj go

1. Nadaj swojemu fragmentowi kodu nazwę.
2. Wewnątrz tagu napisz swój kod. Ten kod jest dostępny do skopiowania poniżej.
3. Kliknij przycisk Zapisz zmiany Aby zapisać fragment kodu.
4. Po zapisaniu CSS kliknij „ aktywować Aby aktywować kod CSS.

Skopiuj kod

add_action( 'wp_head', function () { ?>
<style>
//VOTRE CODE ICI
</style>
<?php } );

Metoda 3: Użyj konfiguratora motywów Elementor

Uwaga: Zachowaj ostrożność przed użyciem tej metody, ponieważ jeśli zmienisz motyw, utracisz ten niestandardowy CSS.

Krok 1: Otwórz konfigurator motywu

Przejdź do swojej witryny i kliknij opcję dostosuj na górnym pasku nawigacyjnym. Otworzy się okno dostosowywania motywu.

Krok 2: Kliknij dodatkową kartę CSS

Otworzy się strona wpisów CSS.

Krok 3: Dodaj swój kod CSS

Dobrze ! Teraz wiesz, jak łatwo dodać niestandardowy CSS do strony lub witryny Elementora. Dzięki temu projektowanie unikalnych stron internetowych w Elementor Free będzie bardziej elastyczne.

Pobierz Elementor Pro teraz!

Odkryj także niektóre wtyczki premium WordPress  

Możesz użyć innych WordPress wtyczki aby nadać nowoczesny wygląd i zoptymalizować obsługę Twojego bloga lub strony internetowej.

Oferujemy tutaj kilka premium wtyczek WordPress, które pomogą Ci to zrobić.

1. FileBird

Czy kiedykolwiek miałeś trudności z zarządzaniem tysiącami plików graficznych, wideo lub dokumentów przesłanych na Twój serwer FTP WordPress? tak lub nie, to nie ma znaczenia, ważne jest, aby wiedzieć, że WordPress Plugin FileBird pomoże Ci z łatwością zarządzać plikami multimedialnymi i wniesie więcej mocy do Twojej biblioteki.

Bezproblemowy interfejs użytkownika i menu kontekstowe pozwalają użytkownikom przeciągać i upuszczać pliki do folderów lub mieć niezbędne uprawnienia do szybkiego tworzenia, zmieniania nazw lub usuwania folderów w taki sam sposób, jak na komputerze.

Dzięki tej wtyczce Twoje pliki multimedialne będą systematycznie uporządkowane i możesz łatwo wybrać obraz do wstawienia na stronę lub opublikowania go. Ponadto ta wtyczka jest w pełni kompatybilna z najpopularniejszymi wtyczkami, zwłaszcza z WooCommerce , a także obsługuje dużą liczbę języków.

Aby dowiedzieć się więcej, odkryj Jak zarządzać plikami i folderami WordPress

Więc jeśli chcesz wzmocnić zarządzanie biblioteką multimediówThe WordPress Plugin FileBird może być twoją tajną bronią.

Pobierz | Demo | hosting

2. Najwyższe kategorie rozwijane WooCommerce

Ce WordPress Plugin pozwala łatwo modyfikować długie listy nudnych kategorii WooCommerce i zastępować je różnymi poziomami podpunktów w menu akordeonowym.

Jego główne funkcjonalności to: możliwość aktywacji i wreszcie to, że działa automatycznie (bez parametrów!), Obsługa wielu poziomów kategorii (kategorii, podkategorii itp.), Podświetlanie kategoria aktywna, otwieranie wszystkich kategorii nadrzędnych, jeśli aktualna kategoria jest w środku, zgodność z dowolnymi Motyw WooCommercereaguje na życzenie, bezpłatne aktualizacje i bardzo aktywna obsługa klienta.

Pobierz | Demo | hosting

3. WavePlayer

Jak można się domyślić z nazwy, WavePlayer to wtyczka odtwarzacza audio, która przyjmuje kształt fali odtwarzanego pliku audio. Dzięki tej wtyczce będziesz mógł hostować utwory lub po prostu zintegrować je z innymi usługami.hosting w chmurze, takie jak SoundCloud.

Może być również używany do celów podcastingu i oferuje inne funkcje, takie jak: obsługa HTML5, responsywny układ, integracja z WooCommerce itp.

Będziesz także mógł wizualnie utworzyć listę odtwarzania przed jej opublikowaniem. Kolejną istotną cechą jest szybkość i wydajność.

Pobierz | Demo | hosting

Polecane zasoby

Dowiedz się o innych zalecanych zasobach, które pomogą Ci zbudować witrynę i zarządzać nią.

• Jak do kompresji i rozmiar zdjęć na WordPressie
• Jak uzyskać adres e-mail z hostingiem WordPress
• Jak zmienić nazwę zdjęcia na bloga WordPress
• Jak znaleźć link do strony logowania WordPress

Wnioski

Tutaj ! To wszystko w tym samouczku, mamy nadzieję, że pomoże Ci bezpłatnie dodać niestandardowy CSS do Elementora. Nie wahaj się udostępnij znajomym w swoich ulubionych sieciach społecznościowych. 

Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress.

Jeśli masz sugestie lub uwagi, zostaw je w naszej sekcji commentaires.

...