- \n
- Zmodyfikuj rodzin\u0119 czcionek, rozmiar czcionki i kolor dowolnego tekstu<\/li>\n
- Zmie\u0144 kolory i obrazy t\u0142a<\/li>\n
- Dostosuj odst\u0119py mi\u0119dzy dowolnymi elementami<\/li>\n<\/ul>\n
A to tylko pr\u00f3bka niesamowitych mo\u017cliwych dostosowa\u0144.<\/p>\n
Czym nie jest bohater CSS?<\/h2>\n
Za pomoc\u0105 CSS Hero nie mo\u017cesz tworzy\u0107 nowych szablon\u00f3w ani ca\u0142kowicie nowych uk\u0142ad\u00f3w. Po to s\u0105 tw\u00f3rcy<\/a> stron, tacy jak Elementor<\/a>.<\/p>\n
Og\u00f3lnie rzecz bior\u0105c, je\u015bli chcesz dokona\u0107 zmiany w swojej witrynie, kt\u00f3ra wymaga dodania nowej tre\u015bci, CSS Hero nie jest odpowiednim narz\u0119dziem. Je\u015bli chcesz dokona\u0107 czysto wizualnej modyfikacji, takiej jak zmiana koloru lub rozmiaru elementu, CSS Hero jest idealny.<\/p>\n
Jak korzysta\u0107 z CSS Hero<\/h2>\n
Chocia\u017c ma mn\u00f3stwo opcji, korzystanie z CSS Hero<\/a> jest w rzeczywisto\u015bci bardzo proste.<\/p>\n
Kliknij tutaj, aby samemu wypr\u00f3bowa\u0107 CSS Hero<\/a><\/p>\n
Instalacja<\/h3>\n
CSS Hero jest \u0142adowany za pomoc\u0105 menu Wtyczki, tak jak ka\u017cda inna wtyczka. Po zainstalowaniu pojawi si\u0119 przycisk z pro\u015bb\u0105 o uzyskanie klucza licencyjnego.<\/p>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bab38c4.png\")
<\/a><\/p>\nKlikni\u0119cie tego przycisku powoduje przej\u015bcie do strony w ich witrynie z innym przyciskiem do klikni\u0119cia, a nast\u0119pnie aktywacja licencji.<\/p>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0bca53eb.png\")
<\/a><\/p>\nPro\u015bciej si\u0119 nie da.<\/p>\n
Interfejs<\/h3>\n
Po aktywacji CSS Hero Twoja witryna b\u0119dzie mia\u0142a nowy element Edytuj z CSS Hero dodany do paska narz\u0119dzi administratora.<\/p>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0be832d5.png\")
<\/a><\/p>\nKlikni\u0119cie tego spowoduje przej\u015bcie do interfejsu projektowania CSS Hero.<\/p>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c0c755d.png\")
<\/a><\/p>\nPokazuj\u0119 CSS Hero z naszym darmowym motywem Ignite<\/a><\/p>\n
Interfejs jest podobny do narz\u0119dzia Customizer (opisanego w naszym podstawowym przewodniku po dostosowywaniu<\/a> ). Po lewej stronie znajduje si\u0119 panel z narz\u0119dziami dostosowywania, a po prawej podgl\u0105d, kt\u00f3ry aktualizuje si\u0119 na bie\u017c\u0105co w miar\u0119 wprowadzania modyfikacji. Podobnie jak w przypadku dostosowania, \u017cadna z tych zmian nie jest widoczna dla odwiedzaj\u0105cych, dop\u00f3ki nie klikniesz przycisku Zapisz i opublikuj.<\/p>\n
Wybierz element<\/h3>\n
Proces dostosowywania w CSS Hero rozpoczyna si\u0119 od wybrania elementu.<\/p>\n
Gdy poruszasz mysz\u0105 po podgl\u0105dzie witryny, zobaczysz niebieski kontur okre\u015blaj\u0105cy dowolne elementy, kt\u00f3re mo\u017cna wybra\u0107. Klikni\u0119cie dowolnego elementu pozwoli Ci go edytowa\u0107. Oto jak wybra\u0142bym nag\u0142\u00f3wek motywu Ignite:<\/p>\n
Dostosowywanie element\u00f3w witryny<\/h3>\n
Po wybraniu elementu w\u0142a\u015bciwo\u015bci, kt\u00f3re mo\u017cna dostosowa\u0107, s\u0105 dodawane do lewego panelu.<\/p>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c41dda0.png\")
<\/a><\/p>\nTe same w\u0142a\u015bciwo\u015bci s\u0105 dost\u0119pne dla wszystkich element\u00f3w<\/p>\n
To s\u0105 wszystkie r\u00f3\u017cne dostosowania, kt\u00f3re mo\u017cesz wprowadzi\u0107 do dowolnego elementu za pomoc\u0105 CSS Hero.<\/p>\n
Przyjrzyjmy si\u0119 bli\u017cej kilku z tych w\u0142a\u015bciwo\u015bci, aby dowiedzie\u0107 si\u0119, jak mo\u017cna je wykorzysta\u0107 do dostosowania witryny.<\/p>\n
Prze\u0142\u0105cz czcionki<\/h4>\n
Po zaznaczeniu nag\u0142\u00f3wka mog\u0119 wybra\u0107 opcj\u0119 Typografia, a nast\u0119pnie wybra\u0107 now\u0105 czcionk\u0119. Wybrana czcionka zostanie automatycznie zastosowana do ca\u0142ego tekstu znajduj\u0105cego si\u0119 w nag\u0142\u00f3wku. Jest to znacznie szybsze ni\u017c pr\u00f3ba indywidualnego przypisania czcionki do menu lub tytu\u0142u witryny.<\/p>\n
CSS Hero daje Ci dost\u0119p do zestawu czcionek systemowych (czcionek zainstalowanych w Twoim systemie operacyjnym) oraz jednych z najpopularniejszych czcionek z Google Fonts<\/a>. Istnieje r\u00f3wnie\u017c \u201emened\u017cer czcionek”, kt\u00f3ry pozwala doda\u0107 dowoln\u0105 czcionk\u0119 z Google Fonts do witryny za pomoc\u0105 jednego klikni\u0119cia.<\/p>\n
Zmie\u0144 kolory tekstu<\/h4>\n
Inn\u0105 cz\u0119st\u0105 mo\u017cliwo\u015bci\u0105 dostosowania CSS Hero jest zmiana koloru tekstu na stronie.<\/p>\n
Aby zmieni\u0107 kolor tekstu dowolnego elementu na stronie, zaznacz go, wybierz opcj\u0119 Typografia i kliknij ustawienie koloru. CSS Hero udost\u0119pnia prosty selektor kolor\u00f3w, kt\u00f3rego mo\u017cesz u\u017cy\u0107 do szybkiej zmiany koloru.<\/p>\n
Dostosuj granice<\/h4>\n
Motyw Ignite ma pomara\u0144czow\u0105 ramk\u0119 u g\u00f3ry strony. Jest to tak \u0142atwe do zmiany, jak ka\u017cdy kolor tekstu w CSS Hero<\/a>.<\/p>\n
Mog\u0119 wybra\u0107 nag\u0142\u00f3wek, wybra\u0107 opcj\u0119 Obramowania, a nast\u0119pnie wybra\u0107 ikon\u0119 g\u00f3rnej granicy, aby edytowa\u0107 tylko g\u00f3rn\u0105 granic\u0119. Kolor mo\u017cna zmieni\u0107 za pomoc\u0105 tej samej opcji pr\u00f3bnika kolor\u00f3w, kt\u00f3ra jest dost\u0119pna do zmiany kolor\u00f3w tekstu.<\/p>\n
Dodaj obraz t\u0142a<\/h4>\n
Mo\u017cesz zmieni\u0107 kolor t\u0142a dowolnego elementu lub zastosowa\u0107 obraz t\u0142a.<\/p>\n
Je\u015bli chcesz uzyska\u0107 teksturowany wygl\u0105d, mo\u017cesz doda\u0107 ma\u0142y obraz t\u0142a i powt\u00f3rzy\u0107 go w pionie i poziomie. Mo\u017cesz tak\u017ce utworzy\u0107 statyczny obraz t\u0142a, kt\u00f3ry wype\u0142ni ca\u0142e t\u0142o witryny. CSS Hero zapewnia wszystkie elementy steruj\u0105ce potrzebne do dodania obrazu t\u0142a z dowolnym rodzajem pozycjonowania i rozmiaru.<\/p>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0c873f76.png\")
<\/a><\/p>\nChocia\u017c mo\u017cesz przes\u0142a\u0107 dowolny obraz, CSS Hero ma r\u00f3wnie\u017c integracj\u0119 z Unsplash,<\/a> kt\u00f3ra zapewnia dost\u0119p do tysi\u0119cy bezp\u0142atnych zdj\u0119\u0107 w wysokiej rozdzielczo\u015bci, co jest niezwykle wygodne.<\/p>\n
Dostosuj odst\u0119py<\/h4>\n
Ostatni\u0105 funkcj\u0105 dostosowywania w CSS Hero, kt\u00f3r\u0105 om\u00f3wi\u0119, s\u0105 w\u0142a\u015bciwo\u015bci odst\u0119p\u00f3w.<\/p>\n
Margines s\u0142u\u017cy do tworzenia przestrzeni mi\u0119dzy elementami. Na przyk\u0142ad mog\u0119 zmniejszy\u0107 przestrze\u0144 nad tym przyciskiem i zwi\u0119kszy\u0107 przestrze\u0144 pod nim za pomoc\u0105 w\u0142a\u015bciwo\u015bci margin CSS.<\/p>\n
Z drugiej strony wy\u015bci\u00f3\u0142ka s\u0142u\u017cy do tworzenia przestrzeni wewn\u0105trz element\u00f3w. Mog\u0119 zwi\u0119kszy\u0107 wy\u015bci\u00f3\u0142k\u0119 ze wszystkich czterech stron przycisku, aby by\u0142a wi\u0119ksza i \u0142atwiejsza do klikni\u0119cia.<\/p>\n
A wiesz, co jest jeszcze bardziej imponuj\u0105ce?<\/p>\n
Te zmiany s\u0105 automatycznie stosowane do wszystkich przycisk\u00f3w \u201eCzytaj wi\u0119cej” w witrynie, wi\u0119c wystarczy wprowadzi\u0107 t\u0119 zmian\u0119 tylko raz.<\/p>\n
Opcje dodatkowe<\/h2>\n
CSS Hero zawiera r\u00f3wnie\u017c sekcje do modyfikowania border-radius (zaokr\u0105glone rogi) i styl\u00f3w list, ale nie b\u0119dziesz ich u\u017cywa\u0107 tak cz\u0119sto.<\/p>\n
Istnieje r\u00f3wnie\u017c sekcja Dodatki, kt\u00f3ra zawiera kilka losowych w\u0142a\u015bciwo\u015bci, takich jak krycie, cienie i widoczno\u015b\u0107 (ukryj dowolny element), aby wymieni\u0107 tylko kilka.<\/p>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-218395-6171b0cc7fd09.png\")
<\/a><\/p>\nCzy powiniene\u015b u\u017cywa\u0107 CSS Hero?<\/h2>\n
Je\u015bli masz tylko kilka poprawek, mo\u017ce by\u0107 trudno uzasadni\u0107 zakup nowej wtyczki. Na przyk\u0142ad, je\u015bli chcesz tylko zmieni\u0107 rozmiar tytu\u0142u swojej witryny, prawdopodobnie mo\u017cesz wys\u0142a\u0107 e-maila do programisty swojego motywu, aby uzyska\u0107 fragment kodu CSS, kt\u00f3ry to zrobi.<\/p>\n
To powiedziawszy, CSS Hero kosztuje tylko 29 USD, co czyni go bardzo przyst\u0119pnym cenowo. Alternatyw\u0105 jest samodzielne ustalenie rzeczy, co mo\u017ce zaj\u0105\u0107 wiele godzin. Nie b\u0119dziesz w stanie zatrudni\u0107 programisty do pracy nad Twoj\u0105 witryn\u0105 za 29 USD.<\/p>\n
Kliknij tutaj, aby sprawdzi\u0107 teraz CSS Hero<\/a><\/p>\n
Je\u015bli cz\u0119sto chcesz dostosowa\u0107 swoj\u0105 witryn\u0119, my\u015bl\u0119, \u017ce licencja na wiele witryn jest dobrze uzasadniona, aby zapewni\u0107, \u017ce zawsze mo\u017cesz wprowadzi\u0107 zmiany, kt\u00f3re chcesz w projekcie witryny.<\/p>\n
Podsumowuj\u0105c, CSS Hero<\/a> jest doskona\u0142ym narz\u0119dziem do dostosowywania witryny i wype\u0142nia wa\u017cn\u0105 nisz\u0119. Aby dokona\u0107 drastycznych zmian w witrynie,<\/a> wybierz nowy motyw<\/a> lub dowiedz si\u0119, jak korzysta\u0107 z narz\u0119dzia do tworzenia stron<\/a>.<\/p>\n
Kliknij tutaj, aby znale\u017a\u0107 wi\u0119cej sposob\u00f3w na dostosowanie witryny<\/a>.<\/p>\n