Jak tworzyć responsywne strony w Sitejet Builder
Responsywna strona internetowa to dziś standard — dostosuj układ, czcionki i widoczność elementów dla każdego urządzenia osobno, bez pisania kodu.
Spis treści
- Wymagania
- Krok 1 — Otwórz Sitejet Builder przez panel Plesk
- Krok 2 — Otwórz stronę w edytorze
- Krok 3 — Kliknij ikonę urządzenia w górnym menu
- Krok 4 — Sprawdź wygląd na małym ekranie
- Krok 5 — Zmień rozmiar czcionki per urządzenie
- Krok 6 — Ukryj lub pokaż elementy na konkretnym urządzeniu
- Krok 7 — Zmień układ kolumn
- Krok 8 — Przetestuj podgląd
- Często zadawane pytania
Wymagania
- Aktywne konto w Sitejet Builder (dostępne przez hosting SmartX)
- Dane logowania do panelu Plesk (z e-maila powitalnego od smartxhosting.pl)
- Istniejący projekt strony internetowej w Sitejet
- Dostęp do edytora wizualnego (przeglądarka internetowa)
Responsywna strona internetowa to dziś standard — użytkownicy przeglądają witryny na telefonach, tabletach i komputerach, oczekując płynnego doświadczenia na każdym urządzeniu. Sitejet Builder oferuje wbudowane narzędzia do tworzenia responsywnych stron bez znajomości kodu. Edytor działa w oparciu o Flexbox, a wszystkie szablony mają domyślnie włączoną responsywność. Dzięki trybom widoku Desktop, Tablet i Mobile możesz precyzyjnie dostosować układ, czcionki i widoczność elementów dla każdego urządzenia osobno — w kilku kliknięciach.
Jak tworzyć responsywne strony — 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.
W edytorze Sitejet Builder wybierz projekt strony, którą chcesz edytować. Kliknij przycisk Edytuj przy wybranej stronie, aby otworzyć edytor wizualny.
W górnym pasku edytora znajdziesz trzy ikony odpowiadające widokom: Desktop, Tablet i Mobile. Kliknij ikonę tabletu lub telefonu, aby przełączyć edytor do wybranego widoku. Wszystkie zmiany wprowadzone w danym widoku będą dotyczyć wyłącznie tego urządzenia.
Po przełączeniu do widoku Mobile edytor automatycznie dostosowuje szerokość obszaru roboczego. Przewiń stronę i zwróć uwagę na elementy, które mogą wyglądać nieprawidłowo: zbyt duże obrazy, tekst wychodzący poza kontener, nakładające się przyciski lub zbyt małe czcionki.
- Zaznacz element tekstowy, którego czcionkę chcesz zmienić.
- W panelu właściwości po prawej stronie znajdź sekcję Typografia.
- Zmień rozmiar czcionki — ikona aktywnego widoku urządzenia potwierdza, że zmiana dotyczy tylko tego widoku.
- Przełącz się na Desktop i sprawdź, że rozmiar czcionki pozostał niezmieniony.
- Przełącz się na widok, w którym chcesz ukryć element (np. Mobile).
- Zaznacz element, który ma być niewidoczny na tym urządzeniu.
- W panelu właściwości włącz opcję Ukryj na tym urządzeniu.
- Element zniknie z widoku Mobile, ale pozostanie widoczny na Desktop i Tablet.
- W widoku Mobile zaznacz kontener wielokolumnowy.
- W panelu właściwości zmień liczbę kolumn na 1 lub dostosuj szerokości poszczególnych kolumn.
- Jeśli potrzebujesz, zmień kolejność elementów w kontenerze Flexbox, przeciągając je w edytorze.
- Kliknij przycisk Podgląd w prawym górnym rogu edytora.
- Sprawdź stronę kolejno w widokach Desktop, Tablet i Mobile.
- Możesz ręcznie zmienić szerokość okna przeglądarki, aby sprawdzić płynność przejść między widokami.
- Po zakończeniu testów wróć do edytora i wprowadź ewentualne poprawki przed opublikowaniem.
Często zadawane pytania
Czy szablony Sitejet są responsywne domyślnie?
Tak, wszystkie szablony Sitejet Builder są budowane na bazie Flexbox i zaprojektowane jako responsywne od początku. Jednak zaleca się zawsze sprawdzić wygląd na każdym widoku po wprowadzeniu własnych zmian.
Jak ukryć element tylko na mobile?
Przełącz się na widok Mobile w górnym menu edytora, zaznacz wybrany element, a następnie w panelu właściwości włącz opcję Ukryj na tym urządzeniu. Zmiana dotyczy wyłącznie widoku mobilnego.
Co to jest breakpoint?
Breakpoint to konkretna szerokość ekranu, przy której układ strony zmienia swój wygląd. Sitejet Builder posiada wbudowane breakpointy dla Desktop (powyżej 1024 px), Tablet (768–1024 px) i Mobile (poniżej 768 px).
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
