atestowa

Kroki do edycji responsywnej w Elementorze:

1. Otwórz stronę do edycji w Elementorze:

   • Z panelu administracyjnego WordPressa przejdź do “Strony” i wybierz stronę, którą chcesz edytować.
   • Kliknij przycisk “Edytuj za pomocą Elementora”.

2. Wejdź w tryb responsywny:

   • W dolnej części panelu Elementora znajdziesz ikonę przedstawiającą komputer. Kliknij na nią.
   • Pojawi się menu z trzema ikonami: “Desktop” (komputer), “Tablet” i “Mobile” (telefon). Kliknij na ikonę “Tablet” lub “Mobile”, aby przejść do podglądu i edycji dla danego urządzenia.

3. Dostosuj elementy dla wybranego urządzenia: W trybie responsywnym możesz modyfikować różne aspekty elementów (sekcji, kolumn, widgetów) tak, aby wyglądały inaczej na wybranym urządzeniu. Oto najczęściej używane opcje:

   • Układ (Layout):

     • Sekcje i Kolumny: Możesz zmieniać szerokość kolumn (np. ustawić 100% szerokości na telefonie, aby elementy układały się jeden pod drugim), wyrównanie w poziomie i w pionie, kolejność kolumn (opcja “Odwróć kolumny” w ustawieniach sekcji lub kolumny w zakładce “Zaawansowane” -> “Responsywność”).
     • Widgety: Niektóre widgety mają specyficzne opcje układu dla różnych urządzeń (np. karuzele zdjęć mogą wyświetlać inną liczbę slajdów).

   • Styl (Style):

     • Rozmiar Czcionki i Typografia: Możesz zmniejszyć rozmiar czcionki nagłówków i tekstu na urządzeniach mobilnych, aby były bardziej czytelne. Znajdziesz te opcje w zakładce “Styl” każdego widgetu tekstowego lub nagłówka. Kliknij ikonę urządzenia obok pola rozmiaru czcionki, aby ustawić inną wartość dla każdego urządzenia.
     • Marginesy i Paddingi: Możesz zmniejszyć lub zwiększyć marginesy i paddingi wokół elementów, aby lepiej dopasować je do mniejszych ekranów. Znajdziesz te opcje w zakładce “Zaawansowane” -> “Marginesy” i “Paddingi”. Ponownie, kliknij ikonę urządzenia, aby dostosować wartości dla każdego urządzenia.
     • Tło: Możesz zmieniać obrazy tła, ich pozycję, rozmiar, a nawet ukrywać je na urządzeniach mobilnych, jeśli zajmują zbyt dużo miejsca lub pogarszają czytelność. Opcje tła znajdują się w zakładce “Styl” sekcji, kolumny lub widgetu.

   • Widoczność (Visibility):

     • Możesz ukrywać całe sekcje, kolumny lub widgety na określonych urządzeniach. Przejdź do zakładki “Zaawansowane” -> “Responsywność” i zaznacz opcje “Ukryj na komputerze”, “Ukryj na tablecie” lub “Ukryj na urządzeniach mobilnych”. Jest to przydatne, gdy chcesz wyświetlić zupełnie inną treść lub układ dla różnych urządzeń.

4. Podgląd zmian:

   • Po dokonaniu zmian dla danego urządzenia, przełączaj się między trybami “Desktop”, “Tablet” i “Mobile”, aby zobaczyć, jak Twoja strona będzie wyglądać na różnych ekranach.
   • Możesz również użyć opcji “Podgląd” (ikona oka w dolnym panelu), aby zobaczyć stronę w nowej karcie przeglądarki i ewentualnie zmniejszyć okno, aby symulować różne rozmiary ekranów.

5. Zapisz zmiany:

   • Po zakończeniu edycji responsywnej kliknij przycisk “Aktualizuj” (jeśli strona już była opublikowana) lub “Opublikuj” w prawym dolnym rogu, aby zapisać wprowadzone zmiany.

Przykład użycia widoczności:

Załóżmy, że masz duży obraz na komputerze, który zajmuje zbyt dużo miejsca na telefonie. Możesz:

1. Utworzyć dwie sekcje: Jedną z dużym obrazem (widoczną tylko na komputerze) i drugą z mniejszą wersją obrazu lub innym elementem (widoczną tylko na tablecie i telefonie).
2. W ustawieniach pierwszej sekcji (z dużym obrazem): Przejdź do “Zaawansowane” -> “Responsywność” i zaznacz “Ukryj na urządzeniach mobilnych” i “Ukryj na tablecie”.
3. W ustawieniach drugiej sekcji (z mniejszym obrazem): Przejdź do “Zaawansowane” -> “Responsywność” i zaznacz “Ukryj na komputerze”.

W ten sposób użytkownicy komputerów zobaczą duży obraz, a użytkownicy tabletów i telefonów zobaczą mniejszą, bardziej dopasowaną wersję.