Szakasz és Tároló elem

A Szakasz és a Tároló két a négy elrendezéselem közül (a másik kettő a Blokk és a Div, lásd Blokk és Div elem). Az elrendezéselemek közös szerepéről és arról, mikor melyiket érdemes használni, az Az elrendezés elemei fejezet szól.

Szakasz

A Szakasz az oldal legkülső építőeleme: az oldalt önálló területekre bontja (egy téma, egy szakasz), például nyitóblokkra, tartalmi részre vagy láblécre.

• Alapértelmezett szélessége 100%, a section címkét használja, és flexboxot alkalmaz.
• A teljes rendelkezésre álló szélességet kitölti, magassága a tartalmához igazodik.
• A szakaszok függőlegesen egymás alá kerülnek.
• Legfelső szinten használd. Amikor új Szakaszt adsz a vászonhoz, a Bricks automatikusan beletesz egy Tároló elemet is. Ha nincs rá szükség, törölheted, ez csak az oldalépítést gyorsító alapértelmezés.

Példa a szerkezetre: Szakasz > Tároló > Címsor.

Tipp: a szakaszokkal külön háttérrel, térközzel és elrendezéssel bíró, jól elkülönülő oldalrészeket készíthetsz.

https://minta-bolt.hu/elemek/?bricks=run

A képen a Szakasz elem HTML-címke mezője section értéket mutat, a Megjelenítés flex. Alatta az irány és az igazítás beállításai látszanak.

Tároló

A Tároló volt az egyetlen elrendezéselem a Bricks 1.5-ös változata előtt, azóta a Szakasz, a Blokk és a Div egészíti ki.

• Alapértelmezett szélessége 1100 px, középre igazított, és flexbox elrendezést használ. Így egyszerűen irányíthatod, igazíthatod és oszthatod el a benne lévő elemeket.
• Legfelső szinten vagy Szakaszon belül használd.
• A Tároló szerkesztésekor a vásznon az „oszlop” elrendezés ikonjára kattintva gyorsan beszúrhatsz egy előre megtervezett, oszlopalapú elrendezést.

https://minta-bolt.hu/elemek/?bricks=run

A képen a Tároló Lekérdezési ciklus kapcsolója, a HTML-címke (div), a Megjelenítés (flex), a térközök, az Irány és az igazítások láthatók.

Közös beállítások

A Szakasz, a Tároló, a Blokk és a Div ugyanazokat a beállításokat kínálja, az alapértékek eltérnek.

Beállítás	Mit csinál	Alapérték
Rácsoszlop	Az elem oszlopkiterjedése (grid-column), ha a szülő rácsot használ.
Rácssor	Az elem sorkiterjedése (grid-row), ha a szülő rácsot használ.
Lekérdezési ciklus	Bekapcsolja a lekérdezési ciklust dinamikus tartalomhoz. Szakaszon, Tárolón, Blokkon és Divén érhető el.	Ki
Link	Hivatkozás beállításai, ha a HTML-címke a. Ilyenkor kötelező.
HTML-címke	Az elem HTML-címkéje: div, section, a (link), article, nav, ol, ul, li, aside, address, figure vagy egyéni.	div (Szakasznál section)
Egyéni címke	Az egyéni címke neve attribútumok nélkül. Kötelező, ha a címke „egyéni”.
Megjelenítés	A CSS display értéke: flex, grid, block, inline-block, inline vagy none.	flex

Rácselrendezés (ha a Megjelenítés grid)

Beállítás	Mit csinál
Térköz	A rácselemek közti távolság (grid-gap).
Rácssablon oszlopai, Rácssablon sorai	A rács oszlopainak és sorainak sablonja. Dinamikus adatot és változókat is elfogad.
Automatikus rácsoszlopok, Automatikus rácssorok	Az automatikusan létrejövő oszlopok és sorok mérete. Dinamikus adatot és változókat is elfogad.
Automatikus rácselrendezés	A rácsba töltés iránya: row, column vagy dense.
Elemek igazítása	A rácselemek igazítása a saját cellájukban (két mező: vízszintes és függőleges).
Tartalom igazítása	A teljes rács igazítása a tárolóban (két mező: vízszintes és függőleges).

Flex-elrendezés (ha a Megjelenítés flex)

Beállítás	Mit csinál	Alapérték
Flex tördelése	Tördelés: nincs, tördelés, fordított tördelés.	Nincs
Irány	A flex-direction: sor vagy oszlop.
Saját igazítás	Az elem saját igazítása a szülőjében (align-self, !important-tal).
Főtengely igazítása	A justify-content.
Kereszttengely igazítása	Az align-items.
Oszloptávolság	Az oszlopok közti távolság (column-gap).
Sortávolság	A sorok közti távolság (row-gap).
Rugalmas növekedés	A flex-grow, legalább 0.	0
Flex zsugorítás	A flex-shrink, legalább 0.	1
Flex alapméret	A flex-basis. Dinamikus adatot és változókat is elfogad.	auto

A Sorrend (order, legalább -999, alapérték 0) akkor érhető el, ha a megjelenítés nem none.

Masonry (Stílus fül)

Beállítás	Mit csinál	Alapérték
Masonry elrendezés	Bekapcsolja a masonry elrendezést a gyermekelemeknek.	Ki
Oszlopok	A masonry oszlopainak száma (--columns).	3
Térköz	Az elemek közti távolság (--gutter).	10px
Vízszintes sorrend	Vízszintes sorrendbe rendezi az elemeket.	Ki
Átmenet: Időtartam	Az átmenetek hossza. A „0” kikapcsolja az alapanimációkat.	0,4s
Felfedési animáció	Az elemek megjelenési animációja: skálázás, áttűnés, becsúszás balról vagy jobbról, ferdítés. Csak az újonnan a DOM-ba kerülő elemekre vonatkozik.	Skálázás

A masonry részleteit a Masonry elrendezés fejezet írja le.

Régi (1.2 előtti) elrendezés átalakítása Tárolókra

Ha az oldalad a Bricks 1.2 előtt, a régi szakasz, sor és oszlop elrendezéssel készült, az adatokat át kell alakítani az új Tároló-alapú elrendezésre. A Bricks beépített átalakítóval egy kattintással elvégzi ezt, nem kell mindent újraépítened.

• Az új elrendezés teljesen rugalmas, nincs előre megadott „szakasz”, „sor” vagy „oszlop” fogalma, ezért az átalakítás után valószínűleg kézzel is igazítanod kell.
• A régi adatok a frontenden továbbra is megjelennek, de nem teljesen pontos formában.
• Az átalakító nem törli a meglévő (szakaszalapú) Bricks-adatokat, így szükség esetén visszaléphetsz egy régebbi Bricks-változatra.
• Oldalanként haladj, hogy egyetlen oldal átnézését se hagyd ki. Óvatosságból az átalakítást előbb egy másolaton vagy tesztkiszolgálón is elvégezheted.

1. lépés: az át nem alakított tartalmak megkeresése

A bejegyzések, oldalak és sablonok listáján az át nem alakított tételek címe mögött a „(not migrated)” felirat áll.

2. lépés: az átalakító futtatása

1. Jelöld ki az átalakítandó oldalt a listában.
2. A Tömeges műveletek menüben válaszd a Migrate Bricks Data műveletet.
3. Kattints az Alkalmaz gombra.

3. lépés: az eredmény ellenőrzése

Nyisd meg az átalakított oldalt a Bricksben, és végezd el a szükséges igazításokat. Nézd meg az oldalt a frontenden is, hogy az elrendezés megfelel-e az elvárásaidnak.

Átalakítási tippek

• A szakaszok alapértelmezett, 30 px-es alsó margóját a Sablonstílusok → Általános → Gyökérkonténer margója beállításnál állíthatod vissza.
• Az elemek alapértelmezett, 15 px-es alsó margóját az Elem margója beállításnál állíthatod vissza ugyanott.