Elementoris (Elementor) maandumislehte luues näeb töölaua ruudustik välja täiuslik: kolm veergu, range järjekord, kõik hingab. Ava see tahvelarvutis ja kolmas veerg kukub alla, lõhub rütmi, jätab paremale tühja koha. Kõlab tuttavalt?

Elementor murrab vaikimisi veerud, mis kitsal ekraanil ritta ei mahu, järgmisele reale. Aga mis siis, kui tahvelarvutis on vaja mitte kolme, vaid täpselt kahte veergu reas, ilma murdumiste ja tühja ruumita? Või mobiilis mitte ühte, vaid kahte?

Allpool on kaks toimivat meetodit: sisseehitatud (Elementori 2024+ versioonidele) ja kohandatud CSS (täielikuks kontrolliks kõigi versioonide üle). Mõlemad on testitud ega lähe vastuollu DOM-i optimeerimisega.

💡 Kiirülevaade:

• Määra Elementoris veergude laiused vahekaardi „Täpsem" kaudu igale vaatepunktile eraldi
• Kui standardseaded ei piisa, lisa kohandatud CSS koos flex-wrap ja meediapäringutega
• Kontrolli paigutust kõigil seadmetel: veerud paigutuvad ümber ilma murdumiste ja tühjade kohtadeta

Protsessi näitab selgelt see video:

1. Sisseehitatud meetod: tundlikud veerulaiused

Alates Elementor 3.18+ (ja eriti Flexbox-konteineritele üleminekuga 2024. aastal) saad veerulaiuseid juhtida igal seadmel ilma ühegi koodireata.

Loo veergudega sektsioon

Lisa uus sektsioon ja vali kolmeveeruline struktuur:

Duplikeeri kõik kolm veergu, et saada kuus. See on vajalik selleks, et tahvelarvutites paigutuksid veerud ümber kaheks kaherealiseks reaks, selle asemel et kolmas üksi jääks:

Paigutuse nägemiseks täida veerud numbritega, kasutades „Pealkiri" vidinat, nii näitab eelvaade kohe, kumb kuhu läks:

Laiuse määramine igale seadmele

Mine iga veeru seadetesse → vahekaart Täpsem. Jaotises Laius lülitu tundlikule režiimile (tahvelarvuti/telefoni ikoon) ja määra väärtused vastavalt Elementori dokumentatsioonile:

• Töölaud: kolm veergu reas (laius jagatakse automaatselt)
• Tahvelarvuti: kaks reas
• Mobiil: üks reas (või kaks, kui vajad ka mobiilis kahte)

Võtmepunkt: laius määratakse igale kuuele veerule eraldi, Elementor rakendab väärtuse kõigile veergudele ühes sektsioonis. Murdumist ei teki, sest tahvelarvutis annab kuus veergu täpselt kaks rida kahega.

2. Kohandatud CSS: täielik kontroll

Sisseehitatud meetod katab enamiku stsenaariume, kuid mõnikord on vaja tahvelarvutites erinevat arvu veerge (2 asemel 3) ja mobiilis mittestandardset (2 asemel 1). Või on sul Elementori vana versioon ilma tundlike laiusteta. Siis tuleb mängu CSS.

Määra sektsioonile CSS-klass

Ava sektsiooni seaded → vahekaart Täpsem → väli CSS-klassid. Sisesta unikaalne klass, näiteks elementor-custom-columns:

Lisa CSS-reeglid

Sisesta kood sektsiooni seadetes (vahekaart Täpsem → Kohandatud CSS) või teema kohandajas (Välimus → Kohanda → Lisastiilid). Siin on praegune versioon:

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

Nüüd veerulaiused igale seadmele meediapäringute kaudu. Sektsioonide (Sections) puhul kasuta .elementor-top-column selektorit, konteinerite (Containers) puhul .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
}

Mis siin toimub: flex-wrap: wrap lubab veergude murdmise, kui need ritta ei mahu, ja justify-content: center tsentreerib järelejäänud veerud (ilma tühimikuta paremal). Meediapäringud alistavad laiuse igal vaatepunktil, täpselt nii palju veerge reas, kui vaja.

Tulemus seadmetel

Töölaual kolm korralikku veergu:

Tahvelarvutis täpselt kaks reas, ilma murdumiste ja tühimiketa:

Mobiilis üks veerg täislaiuses:

Neile, kes on DOM-i optimeerimise lubanud

Kui Elementori seadetes (Elementor → Seaded → Katsed) on Täiustatud DOM-i optimeerimine aktiivne, muutuvad selektorid, .elementor-row kaob. Kohandatud CSS selle režiimi jaoks:

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
}

Kontrollitud koodinäide selle stsenaariumi jaoks on saadaval ka GitHub Gist kasutajalt oooh-boi, töötav, testitud Elementor 3.19+-ga, kus DOM-i optimeerimine on lubatud.

Millist meetodit valida: võrdlustabel

Kui sul on Elementori uus versioon ja standardne ruudustik (2-4 veergu), kasuta sisseehitatud meetodit, see on kiirem ega vaja CSS-i. Kui vajad mittestandardset paigutust, kasutad vana pluginaversiooni või oled DOM-i optimeerimise lubanud, annab kohandatud CSS sulle täieliku kontrolli.

⁉️🤔 Korduma kippuvad küsimused

Miks veerud murduvad tahvelarvutis katkestusega?

Elementor kasutab vaikimisi veerurea jaoks flex-wrap: nowrap. Kui kolm veergu ei mahu tahvelarvuti laiusesse, tekib katkestus: teine veerg esimesel real, kolmas läheb teisele reale ja jääb üksi. flex-wrap: wrap ja veerulaiustega, mis on pooled reast tahvelarvutis, mahub kuus veergu täpselt kolme kahekaupa ritta, ilma katkestusteta. justify-content: center tsentreerib veerud, kui neid on viimases reas vähem kui vaja. Lahendus: kas tundlik laius kasutajaliidese kaudu (meetod 1) või flex-wrap: wrap koos meediapäringutega (meetod 2).

Kas meetod töötab konteineritega (Flexbox Containers)?

Jah, kuid selektorid on erinevad. Konteinerite puhul kasuta .elementor-top-column asemel .e-con-inner > .e-con ja .elementor-container asemel konteinerit ennast. Sisseehitatud tundlik meetod (nr 1) töötab konteineritega ilma muudatusteta.

Kas veergude duplikeerimine on kohustuslik?

Jah, kui tahvelarvutis on vaja vähem veerge reas kui töölaual. Näiteks: töölaual 3 veergu, tahvelarvutis 2. Kolme algset veergu ei saa ümber paigutada kaheks korralikuks kaherealiseks reaks. Kuus veergu (igaüks duplikeeritud) paigutuvad ümber kolmeks kaherealiseks reaks.

Kas see läheb vastuollu puhverdamise pluginatega?

Sektsiooni kohandatud CSS-i või kohandaja kaudu lisatud CSS-reeglid jõuavad inline-stiilidesse või wp_head-i, need läbivad mis tahes puhverdamise pluginat (WP Rocket, W3 Total Cache, LiteSpeed) probleemideta. Pärast CSS-i muutmist tühjenda puhver.

Mida teha, kui veerud on mobiilis liiga kitsad?

Kontrolli, et laius ei pärandu tahvelarvuti vaatepunktist. Elementori seaded on kaskaadsed: mobiil pärib tahvelarvutilt, tahvelarvuti pärib töölaualt. Määra laius selgesõnaliselt igal vaatepunktil, isegi kui väärtus ühtib kõrgema omaga.

Kas CSS-iga tasub 2026. aastal vaeva näha?

Elementori sisseehitatud tundlikest seadetest piisab enamiku ülesannete jaoks, kasuta neid peamise tööriistana. Aga kui tahvelarvutis on vaja mitte kahte ega kolme, vaid näiteks nelja ebavõrdse laiusega veergu, jääb kohandatud CSS ainsaks viisiks teha täpselt see, mis kavandatud.

Proovi mõlemat meetodit testlehel: alusta sisseehitatust (kiirem) ja kui paindlikkusest jääb puudu, kasuta CSS-lähenemist. Meediapäringute seadistamise oskus Elementori jaoks tuleb kasuks ka muude ülesannete puhul: kohandatud fondid seadmetel, plokkide peitmine, mittestandardsed vahed tahvelarvutitele.