Jak dodać własny CSS do strony w Sitejet Builder
Sitejet Builder oferuje wbudowany edytor kodu CSS, który daje precyzyjną kontrolę nad wyglądem elementów. Skrót Ctrl+Alt+C otwiera edytor w kilka sekund.
Spis treści
- Wymagania
- Jak dodać własny CSS — krok po kroku
- Często zadawane pytania
- Zobacz też
Wymagania
- Dane logowania do panelu Plesk (z e-maila powitalnego od smartxhosting.pl)
- Aktywne konto w Sitejet Builder (dostępne przez hosting SmartX)
- Istniejący projekt strony internetowej w Sitejet
- Podstawowa znajomość składni CSS
Jak dodać własny CSS — krok po kroku
- Zaloguj się do panelu Plesk, korzystając z adresu i danych logowania podanych w e-mailu powitalnym od smartxhosting.pl.
- W menu po lewej stronie kliknij Witryny i domeny.
- Wybierz domenę, dla której chcesz edytować stronę.
- Kliknij kafelek Sitejet Builder — edytor otworzy się w nowej karcie przeglądarki.
Otwórz edytor strony w Sitejet Builder. W prawym dolnym rogu ekranu znajdziesz ikonę Code (nawiasy klamrowe). Kliknij ją lub użyj skrótu klawiszowego Ctrl+Alt+C. Otworzy się panel edytora kodu z zakładkami HTML, CSS i Config.
W panelu edytora kodu kliknij zakładkę CSS. Zobaczysz istniejące reguły CSS strony — zarówno te wygenerowane automatycznie przez Sitejet, jak i wcześniej dodane własne style. Nowe reguły możesz wpisywać na dole arkusza.
- Wróć do strony w edytorze i zaznacz element, który chcesz ostylować (np. przycisk, nagłówek, kontener).
- Otwórz edytor kodu skrótem Ctrl+Alt+C.
- W zakładce HTML znajdź podświetlony fragment kodu odpowiadający zaznaczonemu elementowi — jego atrybut
idbędzie miał formated-xxxxxx. - Skopiuj ID elementu do schowka, abyś mógł użyć go w regule CSS.
- Przejdź do zakładki CSS w edytorze kodu.
- Na końcu arkusza dodaj nową regułę, np.:
#ed-xxxxxx { color: #1a1a1a; font-size: 18px; line-height: 1.6; } - Zastąp
ed-xxxxxxrzeczywistym ID skopiowanym w poprzednim kroku. - Zmiany są stosowane do strony w czasie rzeczywistym — obserwuj efekt bez konieczności zapisywania.
- Gdy jesteś zadowolony z efektu, zapisz projekt.
- W panelu edytora kodu kliknij zakładkę Config.
- Zdefiniuj globalne zmienne CSS, np. kolory marki:
--color-primary: #2563eb; - Odwołuj się do tych zmiennych w swoich regułach CSS:
color: var(--color-primary); - Zmiana wartości zmiennej w zakładce Config automatycznie aktualizuje jej wygląd w całym projekcie.
- Po zakończeniu edycji kliknij przycisk Optimize dostępny w panelu edytora kodu.
- Sitejet przeanalizuje projekt i usunie reguły CSS, które nie są przypisane do żadnego istniejącego elementu.
- Optymalizacja zmniejsza rozmiar pliku CSS i przyspiesza ładowanie strony.
- Sprawdź podgląd strony po optymalizacji, aby upewnić się, że żadne style nie zostały usunięte przypadkowo.
Często zadawane pytania
Jak znaleźć ID elementu w Sitejet?
Zaznacz element na stronie w edytorze, a następnie otwórz edytor kodu skrótem Ctrl+Alt+C. ID elementu w formacie #ed-xxxxxx jest wyświetlane w kodzie HTML elementu lub w panelu właściwości. Możesz też użyć narzędzi developerskich przeglądarki (F12) w trybie podglądu.
Czy mogę używać SCSS?
Sitejet Builder obsługuje czysty CSS w wbudowanym edytorze kodu. Jeśli piszesz style w SCSS, musisz je wcześniej skompilować do zwykłego CSS i wkleić wynik do zakładki CSS w edytorze Sitejet.
Jak cofnąć zmiany w CSS?
Sitejet Builder posiada historię cofania zmian dostępną skrótem Ctrl+Z. Możesz cofnąć ostatnio wprowadzone zmiany w edytorze kodu. Zaleca się kopiowanie całej zawartości zakładki CSS przed wprowadzaniem większych zmian, aby mieć możliwość szybkiego przywrócenia poprzedniej wersji.
Zobacz też
Potrzebujesz pomocy z Sitejet Builder?
Zespół smartxhosting.pl pomoże Ci uruchomić i skonfigurować profesjonalną stronę internetową w Sitejet Builder.
Skontaktuj się z nami
