Dokonywanie personalizacji za pomocą podglądu w czasie rzeczywistym na swoim blogu jest znacznie łatwiejsze i dużo bardziej satysfakcjonujące, gdy masz możliwość zobaczenia różnych zmian natychmiast po ich wprowadzeniu. Najlepszym sposobem na wprowadzenie odpowiednich zmian w czasie rzeczywistym jest oczywiście użycie wtyczki.

CSS dostosowanie jest funkcją oferowaną przez kilka wtyczek WordPress.org. Jeśli szukasz wtyczki, która generuje arkusz stylów (Kod CSS), masz do wyboru kilka opcji. Ale chociaż istnieje wiele wtyczek, których można użyć do tworzenia niestandardowego kodu CSS, istnieje bardzo niewiele opcji, które oferują edycję kodu CSS w czasie rzeczywistym.

Po zbadaniu katalogu wtyczek, aby znaleźć rozwiązanie tego ograniczenia, udało mi się znaleźć kilka rzadkich klejnotów, które zasługują na naszą uwagę.

Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować blog WordPress w 7 krokach et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu 

Wróćmy do tego, dlaczego tu jesteśmy.

1. Żółty ołówek: Edytor stylów Visual CSS

Yellow Pencil to wizualny edytor stylów, którego możesz użyć z dowolnym motywem, aby spersonalizować swoją witrynę w ciągu kilku minut (czcionki, kolory, animacje i więcej…).Wtyczka edytora wizualnego stylu css Yellowpencil wordpress

Ce WordPress Plugin premium stworzy style CSS przez tło podczas zabawy kolorami, jakby to była gra. Został zaprojektowany zarówno dla początkujących, jak i doświadczonych użytkowników.

Odkryj także nasze Wtyczki 5 WordPress wyświetlać powiadomienia

Nie jest wymagana znajomość kodowania. Jednakże WordPress Plugin ma dobry edytor CSS dla tych, którzy lubią kodować. Za pomocą tego edytora możesz kodować na żywo i dostosowywać swój CSS.

Pobierz | Demo | hosting

2. Łatwy Custom JS i CSS 

Ce WordPress Plugin premium to potężny edytor kodu CSS i JavaScript, który pozwala dodawać je do dowolnej sekcji witryny. Pozwala zachować dostosowania nawet po dużej aktualizacji Twojego WordPress. Łatwa niestandardowa wtyczka do dostosowywania js i css do Wordpress

Masz możliwość ograniczenia zakresu wykorzystania spersonalizowanego kodu. Na przykład możesz użyć swojego kodu tylko dla artykułu mającego format wideo.

Zobacz nasze artykuły na Jak wymagać akceptacji warunków korzystania z WordPress

Lub możesz ograniczyć swój kod do WordPress konkretny; Co jest przydatne, jeśli często zmieniasz motywy dla swojego blog WordPress.

Pobierz | Demo | hosting

3. Niestandardowe JS i CSS dla Gutenberga

Wysokiej jakości wtyczka WordPress Custom JS i CSS dla Gutenberg pozwoli Ci dodać nieograniczoną liczbę niestandardowych stylów do edytora WYSIWYG dla Twoich postów i stron WordPress. Jest w pełni kompatybilny z wersją WordPress Gutenberga.

Niestandardowe js i css dla wtyczki gutenberg wordpress

Możesz po prostu stworzyć nowy styl za pomocą łatwego w użyciu edytora CSS. Ta wtyczka WordPress rozszerza funkcje pola niestandardowe witryny i umożliwia modyfikowanie niestandardowych pól za pomocą dynamicznego i wydajnego modułu personalizacji. i funkcjonalność podgląd w czasie rzeczywistym wtyczki WordPress czyni ją bardzo wygodną i przyjazną dla użytkownika.

Pobierz | Demo | hosting

4. Zaawansowany edytor CSS

Firma produktowa ThemeIsle i Wunderkind WordPress opracowała tę wtyczkę. Po zainstalowaniu i aktywacji tego ostatniego, przejdź do następującej lokalizacji „ Wygląd> Personalizacja Aby uzyskać dostęp do pulpitu nawigacyjnego i poszukać w menu „Zaawansowanego edytora CSS”. Pojawi się na górze listy pozycji menu w Customizer. Zaawansowany edytor css - wtyczka wordpress

Aby zmodyfikować kod CSS, wystarczy tylko dodać selektor i regułę, która ma do niego zastosowanie, w polu tekstowym po kliknięciu „menu”. Zaawansowany edytor CSS”.

Zobacz także Jak poprawić strony o złej jakości na swoim blogu

Reguły CSS można napisać tak, aby były stosowane ogólnie lub w celu kierowania określonego elementu na określone urządzenia (komputer, telefon, tablet itp.). Jak tylko reguły zostaną zapisane, Customizer wyświetli podgląd z wprowadzonymi zmianami.

Pobierz | Demo | hosting

5. CSS SiteOrigin

To zdecydowanie wtyczka WordPress, która oferuje najwięcej opcji na tej liście. Najbardziej niesamowitą rzeczą w tym ostatnim jest to, że jest bezpłatny. Ta wtyczka WordPress jest jedyną, której nie można znaleźć w module dostosowywania.

Siteorigin css - wtyczka wordpress

Po zainstalowaniu i aktywacji wtyczki musisz przejść do następującej lokalizacji „ Wygląd> Niestandardowy CSS Aby uzyskać dostęp do edycji CSS wtyczki. Na tej stronie możesz zobaczyć edytor tekstu, który nie oferuje podglądu na żywo. 

Przeczytaj także nasz artykuł na temat Wtyczki 10 WordPress zwiększające sprzedaż Twojej witryny

Aby uzyskać dostęp do tego ostatniego, musisz kliknąć jeden z dwóch przycisków, które pojawiają się po lewej stronie, tuż nad edytorem. Przycisk z ikoną oka wywoła wizualny edytor kodu CSS, który docenią entuzjaści. Ikona ze strzałkami rozszerzeń wyświetli edytor tekstu, co oznacza opanowanie kodów CSS.

Pobierz | Demo | hosting

Inne zalecane zasoby

Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.

Wnioski

Tutaj jest ! To wszystko na tę listę wtyczki premium WordPress które pomogą Ci wizualnie edytować CSS na swoim blogu. Jeśli masz commentaires lub sugestie, nie wahaj się dać nam znać w zarezerwowanej sekcji.

Możesz jednak również skonsultować się z naszym 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 lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Zapraszamy do udostępnij w swoich ulubionych sieciach społecznościowych.   

...