När du bygger en landningssida i Elementor ser skrivbordsrutnätet perfekt ut: tre kolumner, strikt ordning, allt andas. Öppna den på en surfplatta, och den tredje kolumnen flyger ner, bryter rytmen och lämnar ett tomrum till höger. Låter det bekant?

Elementor låter som standard kolumner som inte får plats på en rad brytas på smala skärmar. Men tänk om du på surfplatta inte behöver tre, utan exakt två kolumner per rad, utan avbrott och utan tomrum? Eller på mobil, inte en, utan två?

Här är två fungerande metoder: inbyggd (för Elementor 2024+ versioner) och anpassad CSS (för full kontroll över alla versioner). Båda är testade och krockar inte med DOM-optimering.

💡 Snabb översikt:

• Ställ in kolumnbredder i Elementor via fliken Avancerat för varje brytpunkt separat
• Om standardinställningarna inte räcker, lägg till anpassad CSS med flex-wrap och media queries
• Kontrollera layouten på alla enheter: kolumner omgrupperas utan avbrott och tomrum

Processen visas tydligt i den här videon:

1. Inbyggd metod: responsiva kolumnbredder

Från och med Elementor 3.18+ (och särskilt med övergången till Flexbox-containers 2024) kan du styra kolumnbredder på varje enhet utan en enda rad kod.

Skapa en sektion med kolumner

Lägg till en ny sektion och välj en struktur med tre kolumner:

Duplicera var och en av de tre kolumnerna så att du får sex. Detta behövs för att kolumnerna på surfplattor ska omgrupperas till två rader med två, istället för att den tredje blir ensam kvar:

För att se layouten, fyll kolumnerna med siffror med hjälp av "Rubrik"-widgeten, så att förhandsvisningen direkt visar vilken som hamnade var:

Ställa in bredd för varje enhet

Gå till inställningarna för varje kolumn → fliken Avancerat. I sektionen Bredd, växla till responsivt läge (surfplatta/mobil-ikonen) och ställ in värden enligt Elementors dokumentation:

• Dator: tre kolumner per rad (bredden fördelas automatiskt)
• Surfplatta: två per rad
• Mobil: en per rad (eller två, om du också behöver två på mobil)

Viktig punkt: bredden ställs in för var och en av de sex kolumnerna separat, Elementor tillämpar värdet på alla kolumner inom en sektion. Det blir ingen radbrytning eftersom sex kolumner på surfplattor ger exakt två rader med två.

2. Anpassad CSS: full kontroll

Den inbyggda metoden täcker de flesta scenarier, men ibland behöver du ett annat antal kolumner på surfplattor (2 istället för 3), och på mobil, icke-standard (2 istället för 1). Eller så har du en gammal version av Elementor utan responsiva bredder. Då använder du CSS.

Tilldela en CSS-klass till sektionen

Öppna sektionsinställningar → fliken Avancerat → fältet CSS-klasser. Ange en unik klass, till exempel elementor-custom-columns:

Lägg till CSS-regler

Infoga koden i sektionsinställningar (fliken Avancerat → Anpassad CSS) eller i temats anpassare (Utseende → Anpassa → Extra CSS). Här är den aktuella versionen:

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

Nu, kolumnbredder för varje enhet via media queries. För sektioner (Sections) används selektorn .elementor-top-column, för containers (Containers), .e-con-inner > .e-con:

1
/* Base: three columns on desktop */
2
.elementor-custom-columns .elementor-top-column {
3
  width: 33.33%;
4
}
5
 
6
/* Tablet: two columns */
7
@media (min-width: 768px) and (max-width: 1024px) {
8
  .elementor-custom-columns .elementor-top-column {
9
    width: 50%;
10
  }
11
}
12
 
13
/* Mobile: one column */
14
@media (max-width: 767px) {
15
  .elementor-custom-columns .elementor-top-column {
16
    width: 100%;
17
  }
18
}

Vad som händer här: flex-wrap: wrap tillåter kolumnbrytning när de inte får plats på en rad, och justify-content: center centrerar de återstående kolumnerna (utan ett tomrum till höger). Media queries åsidosätter bredden vid varje brytpunkt, exakt så många kolumner per rad som behövs.

Resultat på enheter

På dator, tre prydliga kolumner:

På surfplatta, exakt två per rad, utan avbrott och luckor:

På mobil, en kolumn i full bredd:

För dig som aktiverat DOM-optimering

Om alternativet Förbättrad DOM-optimering är aktivt i Elementors inställningar (Elementor → Inställningar → Experiment), ändras selektorerna, .elementor-row försvinner. Anpassad CSS för detta läge:

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
}

Ett verifierat kodexempel för detta scenario finns också i GitHub Gist från oooh-boi, fungerande, testat på Elementor 3.19+ med DOM-optimering aktiverad.

Vilken metod ska man välja: jämförelsetabell

Om du har en ny version av Elementor och ett standardrutnät (2-4 kolumner), använd den inbyggda metoden, den är snabbare och kräver ingen CSS. Om du behöver en icke-standardlayout, använder en gammal pluginversion eller har aktiverat DOM-optimering, ger anpassad CSS dig full kontroll.

⁉️🤔 Vanliga frågor

Varför bryts kolumner med ett avbrott på surfplattor?

Elementor använder som standard flex-wrap: nowrap för kolumnraden. När tre kolumner inte får plats i surfplattans bredd uppstår ett avbrott: andra kolumnen på första raden, tredje går till andra och blir ensam kvar. Med flex-wrap: wrap och kolumnbredder på halva raden på surfplattor, passar sex kolumner exakt in i tre rader med två, utan avbrott. justify-content: center centrerar kolumner om de är färre än vad som behövs på sista raden. Lösning: antingen responsiv bredd via UI (metod 1), eller flex-wrap: wrap med media queries (metod 2).

Fungerar metoden med containers (Flexbox Containers)?

Ja, men selektorerna är annorlunda. För containers använd .e-con-inner > .e-con istället för .elementor-top-column, och istället för .elementor-container, själva containern. Den inbyggda responsiva metoden (#1) fungerar med containers utan redigeringar.

Är det obligatoriskt att duplicera kolumner?

Ja, om du på surfplattor behöver färre kolumner per rad än på dator. Till exempel: dator, 3 kolumner, surfplatta, 2. Tre ursprungliga kolumner kan inte omgrupperas till två prydliga rader med två. Sex kolumner (varje duplicerad) omgrupperas till tre rader med två.

Krockar detta med caching-plugins?

CSS-regler som läggs till via sektionens Anpassad CSS eller anpassaren hamnar i inline-stilar eller wp_head, de passerar alla cache-plugins (WP Rocket, W3 Total Cache, LiteSpeed) utan problem. Efter att du ändrat CSS, rensa cachen.

Vad gör man om kolumner är för smala på mobil?

Kontrollera att bredden inte ärvs från surfplattans brytpunkt. I Elementor är inställningarna kaskadkopplade: mobil ärver surfplatta, surfplatta ärver dator. Ställ uttryckligen in bredd vid varje brytpunkt, även om värdet matchar den högre.

Är det värt att bry sig om CSS 2026?

Elementors inbyggda responsiva inställningar räcker för de flesta uppgifter, använd dem som huvudverktyg. Men när du på surfplattor inte behöver två och inte tre, utan säg, fyra kolumner med olika bredder, förblir anpassad CSS det enda sättet att göra exakt det som är tänkt.

Testa båda metoderna på en testsida: börja med den inbyggda (snabbare), och om du saknar flexibilitet, använd CSS-metoden. Färdigheten att ställa in media queries för Elementor kommer att vara användbar för andra uppgifter: anpassade typsnitt på enheter, dölja block, icke-standardavstånd för surfplattor.