Kiedy tworzy Pan/Pani landing page w Elementorze, siatka na desktopie wygląda idealnie: trzy kolumny, wyraźny porządek, wszystko gra. Otwiera Pan/Pani na tablecie i trzecia kolumna zjeżdża w dół, psuje rytm, zostawia dziurę po prawej. Brzmi znajomo?

Elementor domyślnie przenosi kolumny, które nie mieszczą się w rzędzie na wąskim ekranie. Ale co, jeśli na tablecie potrzebuje Pan/Pani nie trzech, a dokładnie dwóch kolumn w rzędzie, bez przerw i bez pustego miejsca? Albo na urządzeniu mobilnym nie jednej, a dwóch?

Poniżej dwie działające metody: wbudowana (dla wersji Elementora 2024+) i niestandardowy CSS (dla pełnej kontroli nad dowolnymi wersjami). Obie są przetestowane i nie kolidują z optymalizacją DOM.

💡 Szybki przegląd:

• Proszę ustawić szerokość kolumn w Elementorze w zakładce Zaawansowane osobno dla każdego punktu kontrolnego
• Jeśli standardowe ustawienia nie wystarczają, proszę dodać niestandardowy CSS z flex-wrap i zapytaniami medialnymi
• Proszę sprawdzić układ na wszystkich urządzeniach: kolumny przebudowują się bez przerw i pustych miejsc

Proces został pokazany w tym filmie:

1. Metoda wbudowana: responsywna szerokość kolumn

Począwszy od Elementora 3.18+ (a zwłaszcza po przejściu na kontenery Flexbox w 2024 roku), można zarządzać szerokością kolumn na każdym urządzeniu bez ani jednej linii kodu.

Tworzymy sekcję z kolumnami

Proszę dodać nową sekcję i wybrać strukturę z trzema kolumnami:

Proszę zduplikować każdą z trzech kolumn, powstanie sześć. Jest to potrzebne, aby na tablecie kolumny przebudowały się w dwa rzędy po dwie, a nie zostawiły trzeciej samej:

Aby widzieć układ, proszę wypełnić kolumny numerami za pomocą widżetu „Nagłówek", wtedy na podglądzie od razu widać, która gdzie trafiła:

Ustawienia szerokości dla każdego urządzenia

Proszę wejść w ustawienia każdej kolumny → zakładka Zaawansowane (Advanced). W sekcji Szerokość (Width) proszę przełączyć się na tryb responsywny (ikona tabletu/telefonu) i ustawić wartości zgodnie z dokumentacją Elementora:

• Desktop: trzy kolumny w rzędzie (szerokość zostanie podzielona automatycznie)
• Tablet: dwie w rzędzie
• Urządzenia mobilne: jedna w rzędzie (lub dwie, jeśli na urządzeniu mobilnym również potrzebne są dwie)

Kluczowy moment: szerokość ustawia się dla każdej z sześciu kolumn osobno, Elementor stosuje wartości do wszystkich kolumn wewnątrz jednej sekcji. Nie będzie żadnych przeniesień, ponieważ na tablecie sześć kolumn daje dokładnie dwa rzędy po dwie.

2. Niestandardowy CSS: pełna kontrola

Wbudowana metoda pokrywa większość scenariuszy, ale czasem potrzebna jest inna liczba kolumn na tablecie (2 zamiast 3), a na urządzeniu mobilnym niestandardowa (2 zamiast 1). Albo ma Pan/Pani starą wersję Elementora bez responsywnej szerokości. Wtedy CSS.

Przypisujemy klasę CSS do sekcji

Proszę otworzyć ustawienia sekcji → zakładka Zaawansowane → pole Klasy CSS. Proszę wpisać unikalną klasę, na przykład elementor-custom-columns:

Dodajemy reguły CSS

Proszę wkleić kod w ustawieniach sekcji (zakładka Zaawansowane → Niestandardowy CSS) lub w customizerze motywu (Wygląd → Dostosuj → Dodatkowy CSS). Oto aktualna wersja:

1
selector.elementor-custom-columns .elementor-container {
2
  flex-wrap: wrap;
3
  justify-content: center;
4
}

A teraz szerokość kolumn dla każdego urządzenia za pomocą zapytań medialnych. Dla sekcji (Sections) proszę użyć selektora .elementor-top-column, dla kontenerów (Containers) .e-con-inner > .e-con:

1
/* Базово: три колонки на десктопе */
2
.elementor-custom-columns .elementor-top-column {
3
  width: 33.33%;
4
}
5
 
6
/* Планшет: две колонки */
7
@media (min-width: 768px) and (max-width: 1024px) {
8
  .elementor-custom-columns .elementor-top-column {
9
    width: 50%;
10
  }
11
}
12
 
13
/* Мобильный: одна колонка */
14
@media (max-width: 767px) {
15
  .elementor-custom-columns .elementor-top-column {
16
    width: 100%;
17
  }
18
}

Co tu się dzieje: flex-wrap: wrap pozwala na przenoszenie kolumn, gdy nie mieszczą się w rzędzie, a justify-content: center wyrównuje pozostałe kolumny do środka (bez dziury po prawej). Zapytania medialne nadpisują szerokość w każdym punkcie kontrolnym, dając dokładnie tyle kolumn w rzędzie, ile potrzeba.

Rezultat na urządzeniach

Na desktopie trzy schludne kolumny:

Na tablecie dokładnie dwie w rzędzie, bez przerw i pustych przestrzeni:

Na urządzeniu mobilnym jedna kolumna na całą szerokość:

Dla tych, którzy włączyli optymalizację DOM

Jeśli w ustawieniach Elementora (Elementor → Ustawienia → Eksperymenty) aktywowano opcję Improved DOM Optimization, selektory się zmieniają, .elementor-row znika. Dostosowany CSS dla tego trybu:

1
selector.elementor-custom-columns {
2
  display: flex;
3
  flex-wrap: wrap;
4
  justify-content: center;
5
}
6
 
7
.elementor-custom-columns .elementor-top-column {
8
  width: 33.33%;
9
}
10
 
11
@media (min-width: 768px) and (max-width: 1024px) {
12
  .elementor-custom-columns .elementor-top-column {
13
    width: 50%;
14
  }
15
}
16
 
17
@media (max-width: 767px) {
18
  .elementor-custom-columns .elementor-top-column {
19
    width: 100%;
20
  }
21
}

Sprawdzony przykład kodu dla tego scenariusza jest również dostępny w GitHub Gist od oooh-boi, działający, przetestowany na Elementorze 3.19+ z włączoną optymalizacją DOM.

Którą metodę wybrać: tabela porównawcza

Jeśli ma Pan/Pani świeżą wersję Elementora i standardową siatkę (2-4 kolumny), proszę wybrać metodę wbudowaną, jest szybsza i nie wymaga CSS. Jeśli potrzebny jest niestandardowy układ, używa Pan/Pani starej wersji wtyczki lub włączył optymalizację DOM, niestandardowy CSS da pełną kontrolę.

⁉️🤔 Często zadawane pytania

Dlaczego kolumny przenoszą się z przerwą na tablecie?

Elementor domyślnie używa flex-wrap: nowrap dla rzędu kolumn. Gdy trzy kolumny nie mieszczą się w szerokości tabletu, powstaje przerwa: druga kolumna w pierwszym rzędzie, trzecia przechodzi do drugiego i zostaje sama. Z flex-wrap: wrap i szerokością kolumn równą połowie rzędu na tablecie, sześć kolumn układa się dokładnie w trzy rzędy po dwie, bez przerw. justify-content: center centruje kolumny, jeśli w ostatnim rzędzie jest ich mniej niż potrzeba. Rozwiązanie: albo responsywna szerokość przez UI (metoda 1), albo flex-wrap: wrap z zapytaniami medialnymi (metoda 2).

Czy metoda działa z kontenerami (Flexbox Containers)?

Tak, ale selektory są inne. Dla kontenerów zamiast .elementor-top-column proszę użyć .e-con-inner > .e-con, a zamiast .elementor-container samego kontenera. Wbudowana metoda responsywna (nr 1) działa z kontenerami bez poprawek.

Czy duplikowanie kolumn jest obowiązkowe?

Tak, jeśli na tablecie potrzebuje Pan/Pani mniej kolumn w rzędzie niż na desktopie. Na przykład: desktop 3 kolumny, tablet 2. Trzech wyjściowych kolumn nie da się przebudować w dwa równe rzędy po dwie. Sześć kolumn (każda zduplikowana) przebudowuje się w trzy rzędy po dwie.

Czy koliduje to z wtyczkami buforującymi?

Reguły CSS dodane przez Niestandardowy CSS sekcji lub customizer trafiają do stylów inline lub wp_head, przechodzą przez każdą wtyczkę buforującą (WP Rocket, W3 Total Cache, LiteSpeed) bez problemów. Po zmianie CSS proszę wyczyścić pamięć podręczną.

Co zrobić, jeśli na urządzeniu mobilnym kolumny są zbyt wąskie?

Proszę sprawdzić, czy szerokość nie jest dziedziczona z punktu kontrolnego tabletu. W Elementorze ustawienia są kaskadowe: urządzenie mobilne dziedziczy po tablecie, tablet dziedziczy po desktopie. Proszę jawnie ustawić szerokość w każdym punkcie kontrolnym, nawet jeśli wartość pokrywa się z wyższym.

Czy warto zawracać sobie głowę CSS w 2026 roku?

Wbudowane ustawienia responsywne Elementora wystarczają do większości zadań i to ich proszę używać jako głównego narzędzia. Ale kiedy na tablecie potrzebne są nie dwie i nie trzy, a powiedzmy cztery kolumny o nierównej szerokości, niestandardowy CSS pozostaje jedynym sposobem, by zrobić dokładnie to, co zaplanowano.

Proszę wypróbować obie metody na stronie testowej: zacząć od wbudowanej (szybciej), a jeśli brakuje elastyczności, sięgnąć po podejście CSS. Umiejętność konfigurowania zapytań medialnych dla Elementora przyda się również przy innych zadaniach: niestandardowe czcionki na urządzeniach, ukrywanie bloków, niestandardowe odstępy pod tablety.