CSS Hero, edytor motywów WordPress na żywo

Wyobraź sobie, że budujesz witrynę WordPress i natrafiasz na element, który chcesz poprawić. Odpowiedzią może być napisanie kodu CSS w celu dostosowania elementu. Jedyny problem polega na tym, że nie znasz wystarczająco CSS, aby to zmienić, a już spędziłeś godziny na szukaniu odpowiedniego kodu do użycia.

Możesz zaoszczędzić mnóstwo czasu — i pełnowymiarową migrenę — używając narzędzia, które eliminuje pisanie CSS od zera. Zapomnij o szukaniu odpowiedniego elementu w inspektorze. Możesz przestać martwić się o pamiętanie właściwego kodu CSS do użycia — i gdzie go użyć.

Wtyczka CSS Hero to w 100% rozwiązanie bez kodu, które pomoże Ci szybko i łatwo dostosować witrynę WordPress. Sprawdźmy to!

Dostosuj swoją witrynę za pomocą CSS Hero

CSS Hero to wtyczka do WordPress, która ułatwia dostosowanie wyglądu witryny. Ma pięknie zaprojektowany i intuicyjny interfejs typu „wskaż i kliknij”.

Bez względu na to, jakiego motywu WordPress używasz, możesz mieć pełną kontrolę nad dostosowaniem swojej witryny. To tak proste, jak kliknięcie elementu w witrynie, wprowadzenie zmiany i obejrzenie jej na żywo. Dzięki CSS Hero możesz kontrolować:

• Kolor
• Typografia i style czcionek
• Środki
• …i więcej!

CSS Hero jest również natywnie responsywny, co pozwala kontrolować wygląd witryny zarówno na komputerach stacjonarnych, jak i urządzeniach mobilnych. Nie musisz się też martwić o uszkodzenie witryny. Oprócz funkcji podglądu na żywo, CSS Hero zawiera ratującą życie funkcję pulpitu, dzięki czemu możesz ograniczyć zmiany tylko do pulpitu.

Możesz wprowadzić tyle zmian, ile chcesz w Edytorze motywów CSS Hero bez zmiany jakichkolwiek istniejących plików motywu. Jeśli wyłączysz wtyczkę CSS Hero, Twoja witryna po prostu wróci do poprzedniego stanu.

Jak wie doświadczony projektant WordPress, dodanie zbyt dużej ilości CSS do witryny może znacznie obniżyć wydajność. Jednak CSS Hero nie gromadzi tony kodu CSS; raczej generuje pojedynczy, statyczny, dodatkowy arkusz stylów, który zastępuje arkusz stylów motywu.

Jeśli masz już pewne doświadczenie w pisaniu CSS, możesz również dodać własny kod w edytorze kodu CSS Hero. Zapewnia taką samą funkcjonalność podglądu na żywo, jak interfejs typu „wskaż i kliknij” — i na bieżąco sprawdza kod pod kątem błędów. Ponadto możesz dodawać własne zapytania o media. Możesz także wyeksportować swój kod CSS do wykorzystania w innym miejscu.

CSS Hero działa dobrze z:

• Elementor
• Konstruktor bobrów
• GenerujNaciśnij
• WooCommerce
• Gutenberga
• temify
• NauczycielLMS
• bbNaciśnij
• Formularz kontaktowy 7
• …i więcej!

Możesz pracować w dowolnym motywie i dostosowywać dowolny element na swojej stronie.

Jak korzystać z CSS Hero, aby dostosować swoją witrynę

Podczas gdy korzystanie z CSS Hero jest satysfakcjonujące i intuicyjne, przeprowadzę Cię przez konfigurację i jak korzystać z niektórych głównych funkcji wtyczki.

Krok 1: Zainstaluj wtyczkę CSS Hero

Możesz znaleźć wtyczkę CSS Hero na ich stronie internetowej. Istnieje wiele planów zakupu, a ceny omówię nieco później. Oferują 30-dniową gwarancję zwrotu pieniędzy, więc nie ma ryzyka, aby spróbować.

Po utworzeniu konta wystarczy pobrać najnowszą wersję wtyczki z pulpitu nawigacyjnego konta.

Po zapisaniu pliku .zip na komputerze przejdź do witryny WordPress i przejdź do Wtyczki → Dodaj nowy . Wyszukaj plik zip wtyczki, prześlij go i aktywuj.

Krok 2: Połącz swoje konto

Od razu zobaczysz powiadomienie na pulpicie administratora WordPress z prośbą o aktywację licencji. Kliknij duży niebieski przycisk i postępuj zgodnie z instrukcjami, aby dodać licencję do swojej witryny.

Teraz zobaczysz zakładkę CSS Hero na górnym pasku menu. Kliknij go, aby wejść do środowiska edycji.

Krok 3: Edytuj swoją witrynę

Gdy wejdziesz w tryb edycji w CSS Hero, zobaczysz okno podglądu bieżącej strony, podobnie jak w oknie Customizer. Jednak masz teraz mnóstwo opcji edycji.

Edytor

Podczas przesuwania kursora po oknie podglądu zobaczysz przywoływane elementy strony, tak jak w inspektorze przeglądarki — ale z większą szczegółowością i przejrzystością.

W menu po lewej stronie masz zestaw narzędzi edycyjnych, które pozwalają na zmianę wybranego elementu. W moim przykładzie po prostu wybrałem element .site-title i wprowadziłem zmiany w kolorze, rozmiarze czcionki, grubości czcionki, odstępach między literami i dodałem cień. Wszystko to zostało zrobione za pomocą intuicyjnego menu z suwakami i selektorami, które przypominają pełnoprawny kreator stron. Choć moje wybory projektowe były wątpliwe, edytor jest niezwykle łatwy w użyciu. To prawdziwa wizualna edycja elementów witryny, bez konieczności pisania kodu.

Poniżej okna edytora wizualnego znajduje się edytor kodu, w którym można zobaczyć prawidłowy kod CSS wypisany podczas modyfikowania elementu. Jeśli znasz CSS i lubisz poprawiać sam kod, spodoba ci się obie opcje. Jeśli jesteś nowy w CSS, działa jako pomocne narzędzie do nauki.

Zmiany lub uzupełnienia można wprowadzać bezpośrednio w kodzie w edytorze kodu, a podgląd na żywo będzie widoczny tak samo, jak przy użyciu edytora wizualnego. CSS Hero ostrzega również o błędach kodowania podczas pracy. Na przykład po wyeliminowaniu jednego z argumentów w selektorze kolorów, ale pozostawieniu przecinka, natychmiast pojawił się alert z informacją, gdzie popełniłem błąd.

Poprawienie błędu powoduje automatyczne zniknięcie alertu.

Podgląd wielu urządzeń

Na górnym pasku edytora CSS Hero znajdziesz szereg ikon dla różnych urządzeń. Domyślnie jest to tryb pulpitu. Kliknięcie dowolnej ikony urządzenia spowoduje wyświetlenie podglądu, jak wyglądałby na tym urządzeniu i orientacji. Dodatkowo możesz dostosować rozmiar okna podglądu za pomocą uchwytów lub wpisując szerokość w pikselach w polu na dole.

Również w menu na górnym pasku znajdziesz przełącznik, który pozwala poruszać się po witrynie zamiast wybierać elementy do edycji.

Możesz klikać ikony cofania i ponawiania, a także przeglądać pełną historię zmian.

Więcej funkcji

To są główne cechy interfejsu CSS Hero. W tym edytorze możesz zrobić o wiele więcej. Kliknięcie listy rozwijanej Projekt na górnym pasku menu daje jeszcze więcej opcji.

Zmienne

Istnieją dwa rodzaje zmiennych, których możesz użyć w CSS Hero: Zmienne LESS i Zmienne CSS. Możesz dodawać często używane zmienne w LESS Variables i zarządzać nimi z jednego menu. W sekcji Zmienne CSS możesz wyszukać dowolną zmienną i edytować jej nazwę oraz wartość.

Ustawienia zapytania o media

To menu zapewnia jedno miejsce do zarządzania wszystkimi istniejącymi zapytaniami o media, a także do dodawania niestandardowych zapytań w razie potrzeby.

Punkty kontrolne

Załóżmy, że chcesz wyświetlić podgląd niektórych zmian w swojej witrynie, ale nie jesteś jeszcze gotowy do aktualizacji działającej witryny. W tym miejscu punkty kontrolne mogą ci pomóc. Wprowadź dowolne zmiany, a następnie utwórz punkt kontrolny. Możesz anulować zmiany, aby nie miały one wpływu na działającą witrynę, ale możesz wrócić w dowolnym momencie i aktywować te zmiany bez ponownego wykonywania całej ciężkiej pracy.

Niestandardowe czcionki

Możesz przesłać dowolne niestandardowe czcionki w formatach .ttf, otf i woff.

Tła wideo

Chcesz dodać jedną z tych zgrabnych i kompaktowych pętli wideo jako tło? O dziwo, możesz to zrobić bezpośrednio w edytorze. CSS Hero oferuje dużą liczbę gotowych filmów do wyboru, dostarczonych przez coverr. Po prostu wybierz element, wybierz wideo i dostosuj. To takie proste.

Przed CSS Hero i po

Obecnie możesz dodać wszystkie CSS, które chcesz w Konfiguratorze. WordPress wyświetli również podgląd.

To działa dobrze, ale weź pod uwagę kilka rzeczy:

1. Możesz nie wiedzieć zbyt wiele — lub wcale — CSS.
2. Wyszukiwanie czegoś, co wcześniej zakodowałeś, może zająć dużo czasu.
3. Cały ten CSS w Konfiguratorze może radykalnie spowolnić Twoją witrynę.

Po rozpoczęciu korzystania z edytora CSS Hero zmiany można wprowadzać szybko za pomocą edytora wizualnego — bez konieczności kodowania. Możesz łatwo znaleźć to, co zmodyfikowałeś, klikając element. Kod CSS nie spowolni Twojej witryny, ponieważ jest zawarty we własnym, starannie zorganizowanym arkuszu stylów.

cennik

CSS Hero oferuje trzy poziomy rocznych planów cenowych i plan na całe życie. Jak wspomniałem wcześniej, istnieje 100% gwarancja zwrotu pieniędzy w ciągu 30 dni od zakupu dowolnego planu. Nie ma praktycznie żadnego ryzyka, aby to wypróbować.

Rozrusznik

Ten plan jest najlepszy, gdy potrzebujesz dostosować tylko jedną witrynę. Za jedyne 29 USD rocznie otrzymujesz wszystkie aktualizacje produktu i podstawowe wsparcie.

Osobisty

Jeśli jesteś freelancerem lub prowadzisz małą agencję, następny poziom może być dla Ciebie najlepszy. Możesz zainstalować CSS Hero na maksymalnie pięciu witrynach, a otrzymasz wszystkie aktualizacje produktu i podstawowe wsparcie. Cena wynosi 59 USD rocznie.

Zawodowiec

Jak się wydaje, ten plan jest najlepszy dla profesjonalnych wydawców i większych agencji. Za 199 USD rocznie otrzymujesz aż 999 instalacji z obsługą WordPress Multisite.

Dożywotni profesjonalista

Jest to jednorazowy plan, który zapewnia 999 instalacji w witrynie, priorytetowe wsparcie i dożywotnie aktualizacje produktów… na zawsze. Przy jednorazowej wpłacie w wysokości 599 USD jesteś ubezpieczony na całe życie.

Intuicyjne i łatwe dostosowywanie CSS

Dla każdego projektanta WordPressa CSS Hero ma ogromną wartość. Nawet jeśli znasz CSS jak własną kieszeń, korzystanie z edytora CSS Hero sprawi, że edycja Twojej witryny będzie niezwykle wydajna.