Konténerek és szakaszok/oszlopok különbségei

A Flexbox konténerek egyre népszerűbb alternatívái a hagyományos szakasz és oszlop felépítésnek. Segítségükkel gyorsan készíthetsz oldalelrendezéseket, és csoportosíthatod a widgeteket. Új weboldalakon a konténerek alapból be vannak kapcsolva, meglévő webhelyen a WordPress vezérlőpultjáról kapcsolhatod be őket.

Reszponzivitás

A konténerrel csoportosítod az elemeket, ezért könnyebben határozod meg, hogyan viselkedjenek különböző eszközökön és képernyőméreteken, és milyen sorrendben jelenjenek meg. Nem kell rejtett elemeket halmoznod az eszköztípusokhoz, így a látogatók is jobb élményt kapnak.

Elrendezés

A konténer nincs oszlopokhoz és sorokhoz kötve, ezért összetettebb elrendezéseket is felépíthetsz vele. Megadhatod a szélességét és a magasságát, és konténert helyezhetsz egy másik konténerbe. Ebből gyorsan készülnek összetett, ismétlődő tervelemek, amelyekkel egységes marad az oldalad. A hagyományos felépítés ezzel szemben csak szakaszokra és oszlopokra osztja a widgeteket.

Oldalsebesség

A konténerek kevesebb osztót igényelnek, mint a szakaszok, amelyek gyakran tartalmaznak oszlopokat és belső szakaszokat. Kevesebb elem a HTML-kódban kisebb dokumentumszerkezetet (DOM) jelent, és a böngészőnek kevesebb adatot kell feldolgoznia az oldal felépítéséhez, így gyorsabban betöltődik. Az oldal gyorsításához nézd meg a Szerkezet ablakot, és töröld a felesleges konténereket.

Hivatkozás

A konténert egészében kattinthatóvá is teheted: a teljes konténer ilyenkor hivatkozásként viselkedik. Ez hasznos, ha a tartalma például egy cselekvésre hívó kép. A hagyományos oszlopot csak egyedi kóddal lehetett hivatkozássá tenni, a konténernél ehhez egy „a” HTML-címkét használhatsz.

Amire figyelj

A konténer nem minden esetben a legjobb választás, ezért gondold végig, mielőtt szakaszokat alakítasz át konténerré. Az átalakítás nem visszafordítható. A lépéseit a Meglévő szakaszok átalakítása fejezet írja le, a működésüket pedig a Flexbox konténerek működése.

Átállás szakaszokról konténerekre

Az új Elementor-webhelyeken a konténer az alapértelmezett elrendezési elem. Ha eddig szakaszokkal és oszlopokkal dolgoztál, ezekre figyelj:

• A szakaszok és oszlopok függőlegesen dolgoznak: az újonnan hozzáadott elem a meglévők alá vagy fölé kerül. A konténernél te választod meg, hogy az elemek függőlegesen vagy vízszintesen sorakozzanak.
• A konténerrel összetettebb, jobban testre szabható terveket készíthetsz. Az Ikondoboz widget például egy ikont, egy címsort és egy szöveget fog össze, a beágyazott elemekkel viszont saját, egyedi „widgetet” is összeállíthatsz, például egy ikont egy címsorral és egy animált címsorral.
• A szakasz oszlopai mindig kitöltik a szakasz teljes szélességét (például két 50%-os oszlop). A konténerben a beágyazott elemek lehetnek 100%-nál szélesebbek vagy keskenyebbek is, például két beágyazott konténer, amely egyenként a szülő szélességének 60%-a.
• A konténerek nagy előnye a reszponzív tervezés rugalmassága. Példák: Reszponzív kialakítás konténerekkel, Azonos elemek térköze egy konténerben és Azonos elemek térköze beágyazott konténerekkel.
• A szakaszhoz megadhatsz minimális magasságot, a benne lévő oszlopokhoz viszont nem. A konténernél a szülő és a beágyazott elemek is kaphatnak minimális magasságot. Gyakran jobb, ha a szülő konténernek nem adsz minimális magasságot, csak a beágyazott elemeknek.

A szakaszok átalakításáról lásd a Meglévő szakaszok átalakítása konténerré fejezetet.

Szakaszok és konténerek ugyanazon a webhelyen

A konténer a fő elrendezési eszköz, de vannak, akik szakaszokkal készítettek oldalakat, vagy olyan sablont használnak, amely szakaszokat tartalmaz. Ilyenkor három lehetőséged van:

• Alakítsd át a meglévő szakaszokat konténerekké. Lásd: Meglévő szakaszok átalakítása konténerré.
• Folytasd úgy, ahogy van. Az újonnan hozzáadott elrendezési elemek konténerek lesznek, de semmi baj nincs azzal, ha ugyanazon az oldalon szakaszok és konténerek vegyesen szerepelnek.
• Kapcsold ki a konténereket, és dolgozz szakaszokkal. Ehhez lásd: Kísérletek és funkciók.