Kun rakennat laskeutumissivua Elementorilla, työpöytäruudukko näyttää täydelliseltä: kolme saraketta, tiukka järjestys, kaikki hengittää. Avaa se tabletilla, ja kolmas sarake putoaa alas, rikkoo rytmin ja jättää aukon oikealle. Kuulostaako tutulta?

Elementor oletuksena rivittää sarakkeet, jotka eivät mahdu riville kapeilla näytöillä. Mutta entä jos tabletilla tarvitsetkin kolmen sijaan tasan kaksi saraketta riviä kohden, ilman katkoksia ja ilman tyhjää tilaa? Tai mobiilissa yhden sijaan kaksi?

Alla on kaksi toimivaa tapaa: sisäänrakennettu (Elementorin 2024+ versioille) ja räätälöity CSS (täysi hallinta kaikissa versioissa). Molemmat on testattu eivätkä ne ole ristiriidassa DOM-optimoinnin kanssa.

💡 Pikakatsaus:

• Aseta sarakkeiden leveydet Elementorissa Lisäasetukset-välilehdeltä jokaiselle taittopisteelle erikseen
• Jos vakioasetukset eivät riitä, lisää räätälöityä CSS:ää flex-wrap- ja media query -määrityksillä
• Tarkista asettelu kaikilla laitteilla: sarakkeet järjestyvät uudelleen ilman katkoksia ja tyhjiä tiloja

Prosessi näytetään selkeästi tällä videolla:

1. Sisäänrakennettu tapa: responsiiviset sarakeleveydet

Elementor 3.18+:sta alkaen (ja erityisesti Flexbox-säiliöihin siirtymisen myötä vuonna 2024) voit hallita sarakeleveyksiä jokaisella laitteella ilman yhtäkään koodiriviä.

Luo osio sarakkeilla

Lisää uusi osio ja valitse kolmen sarakkeen rakenne:

Kahdenna jokainen kolmesta sarakkeesta, jotta saat kuusi. Tämä tarvitaan, jotta tableteilla sarakkeet järjestyvät kahdeksi kahden riviksi sen sijaan, että kolmas jäisi yksin:

Nähdäksesi asettelun täytä sarakkeet numeroilla käyttäen "Otsikko"-widgettiä, jolloin esikatselu näyttää heti, mikä meni minnekin:

Leveyden asettaminen kullekin laitteelle

Siirry kunkin sarakkeen asetuksiin → Lisäasetukset-välilehti. Leveys-osiossa vaihda responsiiviseen tilaan (tabletti/puhelin-kuvake) ja aseta arvot Elementorin dokumentaation mukaisesti:

• Työpöytä: kolme saraketta riviä kohden (leveys jaetaan automaattisesti)
• Tabletti: kaksi riviä kohden
• Mobiili: yksi riviä kohden (tai kaksi, jos tarvitset mobiilissakin kaksi)

Avainkohta: leveys asetetaan jokaiselle kuudelle sarakkeelle erikseen, Elementor soveltaa arvon kaikkiin sarakkeisiin yhden osion sisällä. Rivittymistä ei tapahdu, koska tableteilla kuusi saraketta tuottaa tasan kaksi kahden riviä.

2. Räätälöity CSS: täysi hallinta

Sisäänrakennettu tapa kattaa useimmat skenaariot, mutta joskus tarvitset tableteille eri määrän sarakkeita (2 sijasta 3) ja mobiilille epästandardin määrän (2 sijasta 1). Tai sinulla on vanha Elementor-versio ilman responsiivisia leveyksiä. Silloin CSS.

Määritä osiolle CSS-luokka

Avaa osion asetukset → Lisäasetukset-välilehti → CSS-luokat-kenttä. Syötä yksilöllinen luokka, esimerkiksi elementor-custom-columns:

Lisää CSS-säännöt

Lisää koodi osion asetuksiin (Lisäasetukset-välilehti → Mukautettu CSS) tai teeman muokkausnäkymään (Ulkoasu → Mukauta → Lisätyylit). Tässä on nykyinen versio:

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

Nyt sarakeleveydet kullekin laitteelle media queryjen avulla. Osioille (Sections) käytä .elementor-top-column-valitsinta, säiliöille (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
}

Mitä tässä tapahtuu: flex-wrap: wrap sallii sarakkeiden rivittymisen, kun ne eivät mahdu riville, ja justify-content: center keskittää jäljelle jäävät sarakkeet (ilman aukkoa oikealla). Media queryt ohittavat leveyden kussakin taittopisteessä, juuri niin monta saraketta riviä kohden kuin tarvitaan.

Lopputulos laitteilla

Työpöydällä kolme siistiä saraketta:

Tabletilla tasan kaksi riviä kohden, ilman katkoksia ja aukkoja:

Mobiilissa yksi sarake täydellä leveydellä:

Niille, jotka ottivat DOM-optimoinnin käyttöön

Jos Elementorin asetuksissa (Elementor → Asetukset → Kokeilut) Improved DOM Optimization -vaihtoehto on aktiivinen, valitsimet muuttuvat, .elementor-row katoaa. Mukautettu CSS tälle tilalle:

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
}

Varmennettu koodiesimerkki tähän skenaarioon on saatavilla myös oooh-boin GitHub Gistissä, toimiva, testattu Elementor 3.19+:lla DOM-optimointi käytössä.

Kumpi tapa valita: vertailutaulukko

Jos sinulla on uudehko Elementor-versio ja vakioruudukko (2-4 saraketta), käytä sisäänrakennettua tapaa, se on nopeampi eikä vaadi CSS:ää. Jos tarvitset epästandardin asettelun, käytät vanhaa liitännäisversiota tai otit DOM-optimoinnin käyttöön, räätälöity CSS antaa täyden hallinnan.

⁉️🤔 Usein kysytyt kysymykset

Miksi sarakkeet rivittyvät katkoksen kanssa tableteilla?

Elementor käyttää oletuksena flex-wrap: nowrap -määritystä sarakeriville. Kun kolme saraketta ei mahdu tabletin leveyteen, muodostuu katkos: toinen sarake ensimmäiselle riville, kolmas menee toiselle ja jää yksin. flex-wrap: wrap- ja sarakeleveyksillä, jotka ovat puolet rivistä tableteilla, kuusi saraketta mahtuu tasan kolmeen kahden riviin ilman katkoksia. justify-content: center keskittää sarakkeet, jos niitä on vähemmän kuin tarvitaan viimeisellä rivillä. Ratkaisu: joko responsiivinen leveys käyttöliittymän kautta (tapa 1) tai flex-wrap: wrap media queryillä (tapa 2).

Toimiiko tapa säiliöiden (Flexbox Containers) kanssa?

Kyllä, mutta valitsimet ovat erilaiset. Säiliöille käytä .elementor-top-column-valitsimen sijaan .e-con-inner > .e-con-valitsinta ja .elementor-container-valitsimen sijaan itse säiliötä. Sisäänrakennettu responsiivinen tapa (#1) toimii säiliöiden kanssa ilman muokkauksia.

Onko sarakkeiden kahdentaminen pakollista?

Kyllä, jos tableteilla tarvitset vähemmän sarakkeita riviä kohden kuin työpöydällä. Esimerkiksi: työpöytä, 3 saraketta, tabletti, 2. Kolmea alkuperäistä saraketta ei voi järjestää kahdeksi siistiksi kahden riviksi. Kuusi saraketta (jokainen kahdennettuna) järjestyy kolmeksi kahden riviksi.

Onko tämä ristiriidassa välimuistiliitännäisten kanssa?

Osion Mukautettu CSS -kentän tai teeman mukauttimen kautta lisätyt CSS-säännöt päätyvät inline-tyyleihin tai wp_head-osioon, ne menevät minkä tahansa välimuistiliitännäisen (WP Rocket, W3 Total Cache, LiteSpeed) läpi ongelmitta. CSS:n muuttamisen jälkeen tyhjennä välimuisti.

Mitä tehdä, jos sarakkeet ovat liian kapeita mobiilissa?

Tarkista, ettei leveys periydy tabletin taittopisteestä. Elementorin asetukset ovat periytyviä: mobiili perii tabletilta, tabletti perii työpöydältä. Aseta leveys eksplisiittisesti jokaisessa taittopisteessä, vaikka arvo vastaisikin ylempää.

Kannattaako CSS:n kanssa nähdä vaivaa vuonna 2026?

Elementorin sisäänrakennetut responsiiviset asetukset riittävät useimpiin tehtäviin, käytä niitä päätyökaluna. Mutta kun tableteilla tarvitsetkaan kahta tai kolmea, vaan vaikkapa neljä erilevyistä saraketta, räätälöity CSS on ainoa tapa tehdä juuri se, mitä on tarkoitettu.

Kokeile molempia tapoja testisivulla: aloita sisäänrakennetulla (nopeampi), ja jos joustavuus puuttuu, käytä CSS-lähestymistapaa. Taito asettaa media queryjä Elementorille on hyödyllinen muissakin tehtävissä: räätälöidyt fontit laitteilla, lohkojen piilotus, epästandardit välistykset tableteille.