CSS Hero – Zmieniaj wygląd strony WordPress jak chcesz

Każda strona ma swój wygląd – odkrycie. Zazwyczaj zarządzasz nim w sekcji “Dostosuj” lub w dedykowanym do tego celu miejscu stworzonym przez autora motywu z którego korzystasz.

Może się jednak zdarzyć, że na wygląd niektórych fragmentów strony nie masz pełnego wpływu jeśli bazujesz na dostępnych opcjach motywu.

Pojawia się to najczęściej w sytuacji gdy wykorzystujesz motyw w wersji FREE. Ma on zapewne wersję PRO z wiekszą ilością opcji dostosowania, ale nie chcesz za nie płacić. Rozumiem.

Czy to znaczy, że chcąc nie chcąc musisz zrezygnować z pełnej kontroli nad wyglądem swojej strony? Oczywiście, że nie. Od czego są kaskadowe arkusze styli CSS!

No tak – powiesz – ale nie znam składni CSS i szczerze mówiąc, nie specjalnie mam czas i ochotę się w to wszystko wgryzać. Czy da się to rozegrać jakoś inaczej?

I znowu odpowiedź jest na TAK 🙂 Możesz użyć narzędzi do generowania arkuszy CSS. Wpisz w Google frazę “CSS generator” a znajdziesz ich na pęczki. W przypadku drobnych modyfikacji w być może zaspokoją Twoje potrzeby, ale jeśli Twój projekt będzie wymagał większej ilości zmian, a do tego będziesz chciał na żywo podglądać jak zmiany w CSS wpływają na wygląd strony, prawdodpobnie będziesz potrzebował czegoś bardziej złożonego.

Praca z wyglądem strony

WordPress ma to do siebie, że można znaleźć wokół niego wiele narzędzi, których zadaniem jest ułatwienie projektowania wyglądu strony i zarządzania jej zawartością. Być może znasz kreatory takie jak Elementor. Myszka w dłoń i klikasz, aż z minuty na minutę strona staje się bliższa Twoim wyobrażeniom. Ostatecznie docierasz do celu.

Korzystając z kreatorów masz praktycznie pełną kontrolę nad każdym aspektem wizualnym swojej witryny. Dostosowanie wyglądu nie wymaga bezpośredniej modyfikacji arkuszy CSS. Pracując z kreatorem arkusze tworzą się w tle, a wiele osób nie ma nawet świadomości ich istnienia 🙂 Super, prawda?

Gdy jednak okazuje się, że arsenał możliwości jaki masz do dyspozycji nie jest w stanie doprowadzić do sytuacji w której stwierdzisz jednoznacznie TO JEST TO!, zostaniesz zmuszony do zainteresowania się składnią i możliwościami CSS.

Zaczniesz szukać informacji na temat tego jak modyfikować kolory, czcionki, przyciski, marginesy, a może dotrzesz nawet do animacji. Gdy w końcu znajdziesz to czego szukasz spróbujesz dostosować wygląd strony wstawiając własny CSS w sekcji Dostosuj WordPressa. Tak to zazwyczaj wygląda 🙂

Żeby jednak ułatwić sobie życie możesz wykorzystać wtyczkę taka jak CSS Hero 🙂

CSS Hero

Aby wizualnie dostosować swoją witrynę nie koniecznie musisz ryć na blachę składnię CSS. Wtyczka jak CSS Hero, której nazwa od razu sugeruje, że mamy do czynienia z prawdziwym bohaterem na tym polu, pomoże zaoszczędzić sporo Twojego cennego czasu.

To wtyczka WordPress, której niestety nie znajdziesz w repozytorium bezpłatnych dodatków, ale o tym na końcu.

Na pierwszy rzut oka (patrząc na interfejs wtyczki) może Ci się wydać dość skomplikowanym narzędziem. W rzeczywistości praca z nią jest prosta i intuicyjna, w czym dodatkowo pomagają tutoriale wideo dostępne na stronie pomocy.

Jeśli pracowałeś lub pracujesz z dowolnym kreatorem dla WordPressa, z pewnością szybko się oswoisz.

Owszem kodu tu nie brakuje, ale większość typowych zmian w stylach dokonasz bez jakiejkolwiek ręcznej jego modyfikacji. Kod generuje się sam, ale masz do niego wgląd i gdy poczujesz w sobie moc, możesz wprowadzać ręczne korekty. Nie jest to jednak konieczne do tego aby z wtyczki zrobić solidny użytek.

Interfejs CSS Hero

Wspomniałem powyżej, że wtyczka jest intuicyjna. To przede wszystkim zasługa interfejsu, który został tak rozplanowany, aby wprowadzane modyfikacje wyglądu były możliwie prostą czynnością.

Po instalacji i aktywacji wtyczki w górnym pasku narzędziowym WordPressa znajdziesz wyraźny link do uruchomienia interfejsu CSS Hero. Kliknij a zobaczysz coś podobnego do zrzutu poniżej.

Z lewej strony pasek, gdzie po wybraniu dowolnego obiektu strony znajdziesz narzędzia do zmian jego wyglądu. Z prawej strona internetowa czekająca cierpliwie na zmiany.

Jak działa CSS Hero

Zasada działania jest prosta. Dostosowywać możesz praktycznie cokolwiek zechcesz i w cokolwiek klikniesz. Dowolny element strony zmieni się dosłownie w kilka chwil.

Na powyższym zrzucie widoku interfejsu została wprowadzona jedna drobna zmiana. Przycisk widoczny w prawej części nagłówka zmienił kolor z ciemno-różowego na niebieski.

Aby taki przykładowy przycisk móc edytować wystarczy na nim kliknąć, w lewej części kliknąć tło (Background), z palety kolorów wybrać kolor jaki Ci odpowiada, a na koniec w prawym dolnym rogu ekranu wystarczy zapisać zmiany.

Chcesz zmienić grubość obramowania, zwiększyć odstęp pomiędzy jednym obiektem a drugim, zmienić rozmiar ikon, zdjęć, dołożyć efekty animacji….. Dzięki CSS Hero możesz to wszystko zrobić.

Jestem pewien, że sam będziesz zaskoczony, że to co wcześniej wydawało się niemożliwe do skorygowania z tą wtyczką staje się zabiegiem dziecinnie prostym.

Jak tylko uda mi się wygospodarować chwilę, to przygotuję mini kurs wideo na temat tego narzędzia i wrzucę go dla subskrybentów na wooj.pl.

Responsywność

Zdarza się, że jest z tym problem. Elementy Twojego projektu nie układają się tak jakbyś tego chciał na ekranach z mniejszymi rozmiarami. W sytuacji gdy nie znajdujesz możliwości precyzyjnego dostosowania strony pod kątem urządzeń mobilnych, z pomocą przyjdzie CSS Hero 🙂

Poza standardowo ustawionymi breakpoint’ami dla różnych wielkości ekranu, możesz łatwo dodawać własne i dopasowywać do nich wygląd strony.

Od wersji 5 pojawił się sympatyczny i praktyczny gadżet. Możesz wygenerować kod QR, który następnie odpalasz w swoim telefonie i widzisz podgląd na prawdziwym urządzeniu mobilnym 😀

Czy CSS Hero jest kompatybilny z kreatorami WordPress?

Np. z bardzo popularnym Elementorem, który zawładną sercami wielu użytkowników WordPressa. Tak, możesz go użyć także w takich przypadkach, choć to co sugeruję to upewnij się na 100% czy faktycznie Twój builder nie może wprowadzić zmian wizualnych o jakie Ci chodzi. Jeśli może, nie ma sensu korzystać z kolejnej wtyczki.

Czy CSS Hero ma wpływ na wydajność

Nieumiejętnie użyty może spowodować, że wydajność Twojej witryny WordPress spadnie. Za pomocą CSS Hero budujesz arkusze styli, które zazwyczaj nadpisują te generowane przez motyw czy dowolnego buildera. To kolejna garść kodu o jaką urasta strona. Właśnie dlatego wcześniej napisałem, że zanim zaczniesz korzystać z CSS Hero upewnij się czy faktycznie nie jesteś w stanie wprowadzić zmian wizualnych w ustawieniach motywu lub przy pomocy buildera z którego korzystasz. Dbaj o dobrą kondycję kodu, nawet jeśli traktujesz go jak alfabet Marsiaj.

Takich narzędzi jak CSS Hero zacznij używać wówczas gdy nie umiesz kodować i jednocześnie aktualizacja wizualna z poziomu motywu którego używasz nie umożliwia Ci zrobienia tego co chcesz.

Czasem zastanów się również czy to na co masz ochotę faktycznie jest warte instalacji CSS Hero, a może jest to bajer bez którego strona może się spokojnie obejść? Do każdego elementu strony podchodź w sposób przemyślany i na tyle na ile to możliwe świadomy.

Ile kosztuje CSS Hero

CSS Hero nie ma wersji bezpłatnej więc od razu pojawia się konieczność zakupu i instalacji wersji… premium? Bzdura rzecz jasna 🙂 Skoro nie ma wersji standard, lite czy jak ją tam sobie nazwiemy, to jak może być wersja premium. CSS Hero albo jest albo go nie ma, koniec kropka.

Ta przyjemność kosztuje od 29 USD na rok, choć nierzadko można dokonać zakupu w specjalnych ofertach. Przykładowy cennik promocyjny:

Zwróć uwagę na koszt wersji lifetime dla sporej ilości instalacji (super sprawa dla agencji). Bardzo przyzwoity deal zwłaszcza jeśli jest w takiej promocji 🙂

Zajrzyj na stronę produktu i sprawdź na co dziś trafisz.

Czy warto?

Jeśli przeczytałeś cały tekst, to podejrzewam, że już wyciągnąłeś pewne wnioski. Najprostsza i moim zdaniem najtrafniejsza odpowiedź na to pytanie brzmi “to zależy”. Upsss, zagwozdka 😉

Nie inwestuj, pomimo że cena może być bardzo atrakcyjna jeśli narzędzia, które masz (motyw i wtyczki) są w stanie zaspokoić Twoje potrzeby. A że w większości przypadków tak jest, to po co kupować i instalować kolejne narzędzie, tym samym dokładając kolejny kawałek bagażu do dźwigania witrynie. Wszystko z głową, a nie na zasadzie, to jest fajne.

Rzeczywiście CSS Hero jest fajnym rozwiązaniem do korygowania wyglądu i stylu strony. Błyskawicznie wprowadzisz zmiany w swojej witrynie, zapiszesz i opublikujesz ich wynik. Opcji dostosowywania poszczególnych składowych jest tu bardzo dużo. W teorii CSS Hero pozwala na wszystko, no prawie.

Z tego rozwiązania zdarza mi się korzystać, ale tylko wówczas, gdy nie mam innych możliwości, żeby dostosować każdy aspekt projektu. Bywa że wykorzystuję go tylko po to, aby z marszu wygenerować większy arkusz CSS, który potem wykorzystuję na innych stronach. Tak na marginesie Hero pozwala wyeksportować to co w nim stworzysz. Możesz go używać jako zaplecza do różnych działań związanych z kaskadowymi arkuszami styli CSS. Czy polecam? Owszem, jeśli faktycznie jest potrzebny 🙂