Når du bygger en landingsside i Elementor, ser desktop-rutenettet perfekt ut: tre kolonner, streng rekkefølge, alt puster. Åpne den på et nettbrett, og den tredje kolonnen flyr ned, bryter rytmen og etterlater et hull til høyre. Høres det kjent ut?

Elementor bryter som standard kolonner som ikke får plass i en rad på smale skjermer. Men hva om du på nettbrett ikke trenger tre, men nøyaktig to kolonner per rad, uten brudd og uten tomrom? Eller på mobil, ikke én, men to?

Nedenfor finner du to metoder som fungerer: innebygd (for Elementor 2024+ versjoner) og tilpasset CSS (for full kontroll over alle versjoner). Begge er testet og kommer ikke i konflikt med DOM-optimalisering.

💡 Rask oversikt:

• Angi kolonnebredder i Elementor via Avansert-fanen for hvert brytningspunkt separat
• Hvis standardinnstillingene ikke er nok, legg til tilpasset CSS med flex-wrap og media queries
• Sjekk layouten på alle enheter: kolonner omorganiseres uten brudd og tomrom

Prosessen vises tydelig i denne videoen:

1. Innebygd metode: responsive kolonnebredder

Fra og med Elementor 3.18+ (og spesielt med overgangen til Flexbox-containere i 2024) kan du kontrollere kolonnebredder på hver enhet uten en eneste linje kode.

Opprett en seksjon med kolonner

Legg til en ny seksjon og velg en struktur med tre kolonner:

Dupliser hver av de tre kolonnene for å få seks. Dette er nødvendig for at kolonnene på nettbrett skal omorganiseres til to rader med to, i stedet for å la den tredje være alene:

For å se layouten, fyll kolonnene med tall ved hjelp av «Overskrift»-widgeten, slik at forhåndsvisningen umiddelbart viser hvilken som havnet hvor:

Angi bredde for hver enhet

Gå til innstillingene for hver kolonne → Avansert-fanen. I Bredde-seksjonen bytter du til responsiv modus (nettbrett/mobil-ikon) og angir verdier i henhold til Elementor-dokumentasjonen:

• Desktop: tre kolonner per rad (bredden fordeles automatisk)
• Nettbrett: to per rad
• Mobil: én per rad (eller to, hvis du også trenger to på mobil)

Nøkkelpunkt: bredde angis for hver av de seks kolonnene separat, Elementor bruker verdien på alle kolonner innenfor én seksjon. Det vil ikke bli noen brytning fordi seks kolonner på nettbrett gir nøyaktig to rader med to.

2. Tilpasset CSS: full kontroll

Den innebygde metoden dekker de fleste scenarier, men noen ganger trenger du et annet antall kolonner på nettbrett (2 i stedet for 3), og på mobil, ikke-standard (2 i stedet for 1). Eller du har en gammel versjon av Elementor uten responsive bredder. Da blir det CSS.

Tildel en CSS-klasse til seksjonen

Åpne seksjonsinnstillinger → Avansert-fanen → CSS-klasser-feltet. Skriv inn en unik klasse, for eksempel elementor-custom-columns:

Legg til CSS-regler

Sett inn koden i seksjonsinnstillinger (Avansert-fanen → Tilpasset CSS) eller i temaets tilpasser (Utseende → Tilpass → Ekstra stilsett). Her er den gjeldende versjonen:

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

Nå, kolonnebredder for hver enhet via media queries. For seksjoner (Sections) bruk .elementor-top-column-velgeren, for containere (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
}

Det som skjer her: flex-wrap: wrap tillater kolonnebrytning når de ikke får plass i en rad, og justify-content: center sentrerer de gjenværende kolonnene (uten et hull til høyre). Media queries overstyrer bredden ved hvert brytningspunkt, nøyaktig så mange kolonner per rad som nødvendig.

Resultat på enheter

På desktop, tre ryddige kolonner:

På nettbrett, nøyaktig to per rad, uten brudd og hull:

På mobil, én kolonne i full bredde:

For de som har aktivert DOM-optimalisering

Hvis alternativet Forbedret DOM-optimalisering er aktivt i Elementor-innstillingene (Elementor → Innstillinger → Eksperimenter), endres velgere, .elementor-row forsvinner. Tilpasset CSS for denne modusen:

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
}

Et verifisert kodeeksempel for dette scenariet er også tilgjengelig i GitHub Gist fra oooh-boi, fungerende, testet på Elementor 3.19+ med DOM-optimalisering aktivert.

Hvilken metode bør du velge: sammenligningstabell

Hvis du har en nyere versjon av Elementor og et standard rutenett (2-4 kolonner), bruk den innebygde metoden, den er raskere og krever ikke CSS. Hvis du trenger en ikke-standard layout, bruker en gammel plugin-versjon eller har aktivert DOM-optimalisering, gir tilpasset CSS deg full kontroll.

⁉️🤔 Ofte stilte spørsmål

Hvorfor brytes kolonner med et brudd på nettbrett?

Elementor bruker som standard flex-wrap: nowrap for kolonneraden. Når tre kolonner ikke får plass i nettbrettbredde, dannes et brudd: andre kolonne på første rad, tredje går til andre og forblir alene. Med flex-wrap: wrap og kolonnebredder på halve raden på nettbrett, passer seks kolonner nøyaktig inn i tre rader med to, uten brudd. justify-content: center sentrerer kolonner hvis det er færre enn nødvendig i siste rad. Løsning: enten responsiv bredde via UI (metode 1), eller flex-wrap: wrap med media queries (metode 2).

Fungerer metoden med containere (Flexbox Containers)?

Ja, men velgerne er forskjellige. For containere i stedet for .elementor-top-column bruk .e-con-inner > .e-con, og i stedet for .elementor-container, selve containeren. Innebygd responsiv metode (#1) fungerer med containere uten endringer.

Er det obligatorisk å duplisere kolonner?

Ja, hvis du på nettbrett trenger færre kolonner per rad enn på desktop. For eksempel: desktop, 3 kolonner, nettbrett, 2. Tre opprinnelige kolonner kan ikke omorganiseres til to pene rader med to. Seks kolonner (hver duplisert) omorganiseres til tre rader med to.

Kommer dette i konflikt med hurtigbuffer-plugins?

CSS-regler lagt til via seksjonens Tilpasset CSS eller tilpasser havner i inline-stiler eller wp_head, de passerer gjennom enhver hurtigbuffer-plugin (WP Rocket, W3 Total Cache, LiteSpeed) uten problemer. Etter endring av CSS, tøm hurtigbufferen.

Hva gjør jeg hvis kolonner er for smale på mobil?

Sjekk at bredde ikke arves fra nettbrettets brytningspunkt. I Elementor er innstillinger kaskaderende: mobil arver nettbrett, nettbrett arver desktop. Angi bredde eksplisitt ved hvert brytningspunkt, selv om verdien samsvarer med den høyere.

Er det verdt å bry seg med CSS i 2026?

Elementors innebygde responsive innstillinger er nok for de fleste oppgaver, bruk dem som hovedverktøy. Men når du på nettbrett ikke trenger to og ikke tre, men for eksempel fire kolonner med ulik bredde, forblir tilpasset CSS den eneste måten å gjøre nøyaktig det som er tiltenkt.

Prøv begge metodene på en testside: start med den innebygde (raskere), og hvis du mangler fleksibilitet, bruk CSS-tilnærmingen. Ferdigheten med å sette opp media queries for Elementor vil være nyttig for andre oppgaver: tilpassede fonter på enheter, skjule blokker, ikke-standard avstand for nettbrett.