Az elrendezés elemei

A tartalom csoportosításához és elrendezéséhez a Bricks négy elrendezéselemet ad: Szakasz, Tároló, Blokk és Div. Ha új vagy a webdizájnban, a Szakasszal, a Tárolóval és a Blokkal kezdd: ezek előre beállított értékekkel jönnek, így a leggyakoribb beállításokat nem kell elemenként megismételned.

• Szakasz: az oldal tagolására szolgál (egy téma, egy szakasz).
• Tároló: a tartalmat 1100 px szélességben, középre igazítva fogja össze.
• Blokk: 100% széles flexbox, például egy oszlop.
• Div: sima, stílus nélküli div, amely a benne lévő elemekhez igazodva nő.

A Szakasz, a Tároló és a Blokk valójában előre beállított Div. Alapból a flexbox elrendezési modellt használják, így könnyen irányíthatod, igazíthatod és oszthatod el bennük az elemeket. A Div a legalapvetőbb csoportosító elem: a Bricksben nincs előre megadott stílusa, így úgy formázod, ahogy akarod.

Minden elrendezéselem rendelkezik Megjelenítés (display) beállítással. Maradhatsz a flexnél, válthatsz grid-re a CSS Grid vezérlőihez, vagy használhatod a block, inline-block, inline és none értéket, ha az elrendezés ezt kívánja. Bármelyik elrendezéselem alapértékét átállíthatod a sablonstílusokban.

Elem	Címke	Megjelenítés	Szélesség	Hol használd
Szakasz	section	flex	100%	Legfelső szinten
Tároló	div	flex	1100 px	Szakaszban
Blokk	div	flex	100%	Szakaszban vagy Tárolóban
Div	div	nincs Bricks-alapérték	-	Bárhol

Szakasz

A Szakasz a legkülső építőelem: az oldal egyes részeit választja el és tartja távol egymástól. A rendelkezésre álló szélesség 100%-át foglalja el, magassága a tartalmához igazodik, és a szakaszok egymás alatt sorakoznak.

Új Szakasz beszúrásakor a Bricks automatikusan egy Tároló elemet is tesz bele. Ezt törölheted, ha semmit nem kell „összetartanod”, például egy teljes magasságú (100vh) hős szakasznál.

A szakaszok alapértékeit a Stíluskezelő → Sablonstílusok → Elem → Szakasz részben írhatod felül. A szakaszok közötti távolságot a margin vagy a padding beállításával adhatod meg, és módosíthatod az alapértelmezett display és height értéket is.

Tároló

A Tároló automatikusan középre kerül, alapszélessége 1100 px. Ezt a Stíluskezelő → Sablonstílusok → Elem → Tároló részben módosíthatod. A Tárolót Szakaszba tedd, a Blokk vagy Div elemeket pedig a Tárolóba, ha több oszlopos vagy több soros elrendezést akarsz.

Egy tipikus példa: egy 60 px belső margójú Tároló egy háttérképes Szakaszban.

Blokk

A Blokk ugyanazokat a vezérlőket kínálja, mint a Tároló (elrendezés, lekérdezési ciklus és így tovább). Az egyetlen különbség, hogy az alapszélessége 100%, nem rögzített 1100 px. Egyenlő oszlopok vagy sorok kialakítására használd Szakaszon vagy Tárolón belül.

Többoszlopos elrendezés készítése

Háromoszlopos elrendezés egy Tárolóban:

1. Jelöld ki a Tárolót.
2. Az Irány beállítást állítsd Vízszintesre.
3. A vásznon a kis „+” ikonra háromszor kattintva szúrj be három Blokkot.

Az eredmény: Szakasz, benne Tároló, benne három Blokk.

A leggyorsabb mód: jelöld ki a Tárolót, kattints a vásznon a kis „oszlop” elrendezés ikonra, és válaszd ki az előre elkészített oszloposztások egyikét. A beszúrt elrendezés alapból Blokk elemekből áll. Az „Oszlop” felirat csak címke, az elem továbbra is Blokk: ezt a szerkezetpanelen az ikon mutatja, és ha az elem ikonja fölé viszed az egeret, kiírja az elem nevét is.

Div

A Div a legáltalánosabb csoportosító elem. A többi elrendezéselemmel ellentétben a Bricksben teljesen stílus nélküli, így a jelölése és a formázása fölött teljes a szabadságod. Ha más elrendezéselemen belül használod, a benne lévő elemekhez igazodva nő vagy zsugorodik.

Elemek beszúrása, becsomagolása és átalakítása

Bármely elrendezéselemen jobb gombbal kattintva előjön a helyi menü. Itt egy kattintással beszúrhatsz, becsomagolhatsz és átalakíthatsz elrendezéselemeket. Például a szerkezetpanelen a „Hős” gyökérszintű Tárolóra jobb gombbal kattintva az Átalakítás alatt a Szakasz ikont kiválasztva a Tároló Szakasszá alakul.

Elrendezéselem szerkesztésekor a vásznon a „+” ikon fölé víve a Tároló, Blokk és Div lehetőséget kapod. A Cmd / Ctrl lenyomva tartásával az elemet az aktív elem után szúrja be a Bricks.

Az alapértelmezett elem megváltoztatása

A Bricks → Beállítások → Szerkesztő → Elemműveletek részben módosíthatod, melyik elrendezéselemet használja alapból a Beszúrás, a Becsomagolás és az elrendezés eszköz.

Meglévő Tároló-alapú webhely átalakítása

Ha a webhelyed eddig Tárolókra épült, az új Szakasz és Blokk elemekre az átalakítóval térhetsz át: a Bricks → Beállítások → Általános → Átalakító részben kapcsold be a „Tároló” elemek átalakítását az új „Szakasz” és „Blokk” elemekre, majd futtasd az átalakítót.

Masonry elrendezés

Minden elrendezéselemnél bekapcsolhatod a masonry (kváderes, egymásba illeszkedő) elrendezést a Stílus → Elrendezés → Masonry részben. Részletek: Masonry elrendezés.