Jak ustawić Media Queries dla sekcji

Responsywność w kreatorze Najszybsza

Wszystkie strony zbudowane w kreatorze Najszybsza są automatycznie responsywne. Oznacza to, że wygląd i układ Twojej witryny dopasowują się do ekranu, na którym są wyświetlane — od telefonu po duży monitor komputera.

Nie musisz tworzyć osobnej wersji strony dla telefonów. Struktura witryny jest zbudowana zgodnie z zasadami RWD (Responsive Web Design). Dzięki temu m.in.:

• siatki produktów wyświetlają się w kolumnach na telefonach i w rzędach na komputerach,
• czcionki i marginesy automatycznie dopasowują się do urządzenia,
• grafiki wczytywane są w mniejszych, lżejszych wersjach,
• menu nawigacji jest zwijane na urządzeniach mobilnych.

👉 Twoja strona w kreatorze już jest responsywna, więc bez dodatkowych działań wygląda dobrze na każdym ekranie.

Zaawansowane Funkcje Responsywności: Media Queries

Czasami jednak możesz potrzebować większej kontroli nad tym, które elementy strony są widoczne na danym urządzeniu. Tutaj z pomocą przychodzą Media Queries – czyli tzw. zapytania o media.

Dzięki nim możesz ustalić, czy dana sekcja strony ma być:

• wyświetlana na wszystkich urządzeniach (opcja domyślna),
• widoczna tylko na telefonach i małych tabletach,
• widoczna tylko na komputerach, laptopach i dużych tabletach.

To bardzo przydatne, gdy np. chcesz:

• pokazać uproszczony układ lub inne zdjęcie na telefonach,
• przygotować rozbudowaną wersję sekcji tylko dla użytkowników komputerów,
• ukryć niektóre elementy na małych ekranach, aby strona ładowała się szybciej.

Jak ustawić Media Queries dla sekcji

1. Otwórz kreator stron i przejdź do strony, na której chcesz zmienić ustawienia widoczności sekcji.

2. Kliknij w wybraną sekcję, aby przejść do jej ustawień.

3. Zduplikuj sekcję, zanim wprowadzisz zmiany. Dzięki temu zachowasz oryginalną wersję, którą możesz przeznaczyć np. do wyświetlania na komputerach, a nowo utworzoną kopię dostosować tylko do telefonów.

4. Przejdź do zakładki META → Media Queries dla sekcji.

ustawienia sekcji media queries<br>

5. Wybierz jedną z trzech opcji:

• Sekcja wyświetlana na wszystkich ekranach – to ustawienie domyślne. Sekcja jest responsywna i automatycznie dopasowuje się do różnych szerokości ekranów.
• Sekcja wyświetlana tylko na telefonach i małych tabletach (do 768 px) – użyj tej opcji, jeśli chcesz pokazać uproszczony układ, inną grafikę lub skróconą treść dla użytkowników mobilnych.
• Sekcja wyświetlana tylko na komputerach, laptopach i dużych tabletach (od 769px). Wybierz tę opcję, aby sekcja była widoczna tylko na większych ekranach. Przykład: wyświetlenie bardziej szczegółowych treści lub większych obrazów w tle.

💡 Wskazówka: Wcześniejsze zduplikowanie sekcji to bezpieczny sposób pracy – możesz w ten sposób przygotować dwie różne wersje treści (mobilną i desktopową), bez ryzyka utraty oryginalnego układu.

Pamiętaj, że jeżeli ustawisz wyświetlanie sekcji tylko na telefonach, dobrze jest zaprojektować jej odpowiednik na komputery. Wyjątkiem są sytuacje, gdy chcesz pokazać coś wyłącznie użytkownikom mobilnym, wtedy nie musisz tworzyć odpowiednika na większe ekrany.

Media Queries w kreatorze Najszybsza pozwalają na bardziej elastyczne i przemyślane projektowanie, masz lepszą kontrolę nad tym, jak Twoja strona wygląda i działa na różnych urządzeniach.