Jak dodać własne style CSS do strony internetowej

Dodanie własnych stylów CSS możliwe jest dla witryn z planem płatnym.

Co to są style CSS?

Własne CSS czyli kaskadowe arkusze styli to dodatkowy kod dołączany do strony. Dzięki nim możesz dodać własne reguły wyświetlania np. zmienić formatowanie wybranych elementów na stronie.

Dodawanie własnych stylów CSS pozwala na dostosowanie wyglądu Twojej witryny w sposób unikalny i precyzyjny. W zależności od potrzeb możesz zastosować różne metody – każda z nich wpływa na inny zakres witryny. Możesz również łączyć te metody, aby uzyskać pełną kontrolę nad wyglądem poszczególnych elementów.

Własne style CSS możesz dodać do strony na 4 sposoby, możesz zastosować jeden z nich lub łączyć je ze sobą:

1. Dodanie stylów dla całej witryny
2. Dodanie stylów dla konkretnej strony
3. Dodanie stylów tylko dla stron wpisów na blogu (szablon wpisu)
4. Dodanie stylów tylko dla stron produktów (szablon produktu)

W każdym przypadku wklejasz kod w pola "Dodatkowe style CSS". Dowiedz się poniżej gdzie znaleźć te pola.

dodatkowe style CSS<br>

Jak dodać style dla całej witryny

1. Przejdź do Witryny → Ustawienia → Robots/Meta

2. W polu "Dodatkowe Style CSS" wklej swój kod CSS

3. Zapisz ustawienia witryny

Jak dodać style dla konkretnej strony

1. Wejdź do Kreatora stron i wybierz stronę, do której chcesz dodać style CSS.

2. Przejdź do Ustawienia → Dodatkowe

4. W polu "Dodatkowe Style CSS" wklej swój kod CSS

5. Zapisz i opublikuj witrynę.

Style nie będą zastosowane w obszarze roboczym aby zapewnić szybkość działania Kreatora. Aby zobaczyć jak style prezentują się na stronie kliknij przycisk "Podgląd" w nawigacji Kreatora.

podgląd strony z własnym kodem css<br>

Jak dodać style dla stron wpisów na blogu

1. Wejdź do ustawień bloga Blog → Dodatkowe

2. W polu "Dodatkowe Style CSS" wklej swój kod CSS

3. Zapisz ustawienia bloga

Jak dodać style dla stron produktów w sklepie

1. Wejdź do ustawień sklepu Sklep → Dodatkowe

2. W polu "Dodatkowe Style CSS" wklej swój kod CSS

3. Zapisz ustawienia sklepu

Wskazówki dotyczące pisania stylów CSS

• Stosuj klasy i identyfikatory: Aby precyzyjnie targetować elementy, używaj klas (.nazwa-klasy) i identyfikatorów (#nazwa-id).
• Testuj na różnych urządzeniach: Upewnij się, że Twoje style działają dobrze zarówno na komputerach, jak i urządzeniach mobilnych.
• Zwracaj uwagę na wydajność: Unikaj nadmiarowych stylów, które mogą spowolnić ładowanie strony.
• Korzystaj z narzędzi developerskich: W przeglądarkach takich jak Chrome czy Firefox możesz w czasie rzeczywistym testować CSS w zakładce „Developer Tools” (F12).

Dodając własne style CSS, możesz w pełni spersonalizować wygląd swojej witryny, bloga lub sklepu internetowego, aby odpowiadał Twoim potrzebom i oczekiwaniom klientów. Dzięki różnym metodom możesz zastosować stylizację globalną lub precyzyjnie dostosować wybrane elementy na konkretnej stronie.

Wskazówka dla stron AMP

Bądź ostrożny, jeżeli tworzysz stronę AMP to aby nie stracić charakteru stron AMP:

• w stylach nie możesz odwoływać się do żadnych źródeł zewnętrznych
• Twój kod CSS nie może przekroczyć 1024 znaków (10KB)