W artykule:
Jeśli jesteś jednym z wielu początkujących, którzy chcą dostosować projekt witryny WordPress bez dotykania CSS, masz szczęście. Wtyczka CSS Hero dla WordPress pozwala na dostosowanie projektu bez dotykania pojedynczej linii kodu. W tej zaktualizowanej recenzji CSS Hero pokażemy, jak używać CSS Hero do dostosowywania witryny i dlaczego uważamy, że jest to jedna z wtyczek, które powinien wypróbować każdy początkujący WordPress.
Nasza recenzja CSS Hero
CSS Hero to wtyczka premium WordPress, która pozwala zaprojektować własny motyw WordPress bez pisania pojedynczej linii kodu (nie wymaga HTML ani CSS).
Masz możliwość cofania zmian, co jest niezwykle pomocne dla początkujących. Wszystkie zmiany są zapisywane jako dodatkowy arkusz stylów, co oznacza, że możesz uaktualnić swój motyw WordPress bez obawy o utratę zmian.
Jeśli jesteś projektantem lub programistą, znajdziesz CSS Hero równie dobry. Działa dobrze ze wszystkimi popularnymi motywami i frameworkami WordPress. Możesz szybko wprowadzić zmiany do motywu podrzędnego, a następnie wyeksportować go do użycia w witrynie klienta.
CSS Hero może zaoszczędzić wiele czasu i frustracji, jeśli chodzi o dostosowywanie projektu.
Zwykle jesteśmy bardzo sceptycznie nastawieni do wtyczek dostosowywania projektów typu point-and-click ze względu na ich nadęty rozmiar. Jednak CSS Hero naprawdę zrobił na nas wrażenie od samego początku.
Jeśli poprosisz nas o uczciwą recenzję bohatera CSS, nadamy mu 5 z 5 gwiazdek.
Jak używać CSS Hero, aby dostosować swój motyw WordPress
Najpierw musisz zainstalować i aktywować wtyczkę CSS Hero. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Jest to wtyczka premium WordPress z cenami zaczynającymi się od $29 za pojedynczą witrynę (całkowicie warta inwestycji, biorąc pod uwagę czas i kłopoty, które Cię uratują).
Użyj kodu kuponu CSS Hero: WPBeginner aby uzyskać specjalny rabat w wysokości 34% od. Jeśli kupujesz plan PRO, ten sam kod zapewni Ci solidny rabat 40%.
Po aktywacji zostaniesz przekierowany, aby uzyskać klucz licencyjny CSS Hero. Po prostu postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, a zostaniesz przekierowany z powrotem do swojej witryny za pomocą kilku kliknięć.
Celem CSS Hero jest dostarczenie interfejsu WYSIWG (what you see is what you get) do edycji motywu. Po prostu odwiedź swoją witrynę po zalogowaniu, a zauważysz przycisk CSS Hero na pasku administracyjnym WordPress.
Kliknięcie przycisku spowoduje przekształcenie witryny w Podgląd na żywo. Teraz będzie można zobaczyć pasek narzędzi bohatera CSS.
Następnie po prostu kliknij dowolny element na swojej stronie, a CSS Hero pokaże Ci właściwości CSS używane przez Twój motyw dla tego konkretnego elementu.
Będą one obejmować typowe właściwości CSS dla wybranego elementu, takie jak tło, typografia, obramowania, odstępy i inne. Możesz kliknąć dowolny element, aby go rozwinąć, a następnie edytować właściwości CSS za pomocą prostego interfejsu użytkownika.
Podczas wprowadzania zmian zauważysz, że Niestandardowy CSS magicznie pojawia się poniżej. Jeśli uczysz się CSS, warto zobaczyć, jak różne zmiany CSS są stosowane z wynikiem w podglądie na żywo.
Masz problem ze znalezieniem zdjęć royalty free na swojej stronie internetowej? CSS Hero ma wbudowaną integrację Unsplash, która pozwala przeglądać, wyszukiwać i używać pięknych zdjęć w projekcie witryny.
CSS Hero zawiera również gotowe fragmenty, które można zastosować do różnych elementów na swojej stronie internetowej. Wystarczy przejść do zakładki urywki w lewej kolumnie.
Podczas wprowadzania zmian w witrynie CSS Hero automatycznie zapisuje te zmiany, ale nie publikuje ich. Aby zastosować te zmiany w swojej witrynie, musisz kliknąć przycisk Zapisz i opublikuj.
Jak cofnąć zmiany w CSS Hero
Jedną z najlepszych cech CSS Hero jest możliwość cofnięcia wszelkich zmian wprowadzonych w dowolnym momencie. CSS Hero przechowuje historię wszystkich zmian wprowadzonych do motywu. Po prostu kliknij przycisk Historia na pasku narzędzi Bohatera CSS, aby zobaczyć listę zmian.
Możesz kliknąć datę i godzinę, aby zobaczyć, co wyglądała Twoja witryna w tym momencie. Jeśli chcesz powrócić do tego stanu, po prostu zapisz lub wznów edycję od tego punktu.
Nie oznacza to, że zmiany wprowadzone po tym punkcie znikną. Będą one nadal przechowywane i można wrócić do tego czasu, jak również. Nic prostszego.
Ale co, jeśli chcesz tylko przywrócić zmiany wprowadzone do określonego elementu?
W takim przypadku nie musisz używać narzędzia historia. Po prostu kliknij element, który chcesz przywrócić,a następnie kliknij przycisk reset.
Spowoduje to powrót elementu do domyślnych ustawień zdefiniowanych przez motyw WordPress.
Dostosowywanie witryny do urządzeń mobilnych w CSS Hero
Najtrudniejszym aspektem projektowania stron internetowych jest kompatybilność urządzeń. Musisz upewnić się, że Twoja witryna wygląda równie olśniewająco na wszystkich urządzeniach i rozmiarach ekranu. Projektanci stron internetowych używają różnych narzędzi do testowania zgodności przeglądarki i urządzenia. Na szczęście dla Ciebie, CSS Hero jest wyposażony we wbudowane narzędzie podglądu.
Po prostu kliknij ikonę pulpitu na pasku narzędzi CSS Hero, a następnie kliknij typ urządzenia. Możesz wybierać spośród urządzeń mobilnych, tabletów i komputerów stacjonarnych. Obszar podglądu zmieni się na wybrane urządzenie.
Możesz teraz edytować witrynę, przeglądając ją na urządzeniach mobilnych. To narzędzie jest szczególnie przydatne do dostosowania projektu motywu na telefony komórkowe i Tablety.
CSS Hero Theme Compatibility
Oficjalna strona CSS Hero ma stale rosnącą listę kompatybilnych motywów. Ta lista zawiera wiele najlepszych darmowych motywów WordPress. Posiada również najpopularniejsze motywy premium ze sklepów takich jak CSSIgniter, Themify, StudioPress i innych.
A co z motywami, których nie ma na liście kompatybilności motywów?
CSS Hero jest wyposażony w funkcję o nazwie Rocket Mode Auto-detection. Jeśli używasz motywu nieuwzględnionego na liście kompatybilności motywów, CSS Hero automatycznie zacznie używać trybu rakietowego.
Tryb Rocket próbuje samodzielnie odgadnąć selektory CSS z Twojego motywu. To działa doskonale przez większość czasu. Jeśli twój motyw jest zgodny ze standardami kodowania WordPress, będziesz mógł edytować prawie wszystko.
Możesz również skontaktować się z twórcą motywu i poprosić go o zapewnienie zgodności z CSS Hero.
Które wtyczki są kompatybilne z CSS Hero?
CSS Hero jest regularnie testowany z najlepszymi wtyczkami WordPress pod kątem zgodności. Obejmuje to wtyczki formularzy kontaktowych, popularne kreatory stron, WooCommerce i inne.
Jeśli używasz wtyczki WordPress, która generuje wyjście, które nie jest edytowalne przez bohatera CSS, możesz poprosić autora wtyczki o naprawienie tego. Naprawdę nie muszą robić wiele, aby zapewnić kompatybilność z CSS Hero.
Mamy nadzieję, że nasza recenzja CSS Hero okazała się dla ciebie przydatna. Możesz również zobaczyć nasz najlepszy przewodnik dotyczący poprawy szybkości i wydajności WordPress dla początkujących.
Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.
