Responsywna strona to nie opcjonalna — to wymóg. 60% internetu przychodzi z mobilów. Jeśli Twoja strona nie działa idealnie na telefonie, Google będzie ją karać. Elementor ma narzędzia. Trzeba wiedzieć jak ich użyć.
Breakpoints — desktop, tablet, mobile
Elementor domyślnie ma 3 breakpoints: Desktop (pełna szerokość), Tablet (768px), Mobile (mniej niż 768px). Ale możesz dodać custom breakpoints.
W edytorze, widzisz ikony powiększające — klik na mobile icon i edytujesz layout dla mobilów. To jest key feature. Projektuj dla wszystkich rozmiaru.
Visibility controls — ukrywaj elementy na mobilach
Duży hero image? Ukryj na telefonie. Sidebar z 10 widgetów? Ukryj, pokaż w accordion. Elementor ma hide/show by device size — Advanced → Responsive → Hide On.
Font size responsywne — nie static
24px na desktop to 6px na mobile (jeśli skalujesz viewport). Nieczytelne. Elementor pozwala custom font sizes per breakpoint. Desktop H1 = 48px, Mobile H1 = 28px. Optimize dla każdego device’a.
Test na rzeczywistych urządzeniach
Chrome DevTools to dobrze, ale QA na rzeczywistym iPhone + Android phone jest najlepsze. Testuj scroll, testuj buttons (czy są clickable czy too small), testuj форmularze (czy easy to fill na mobile).