Alapelrendezések konténerekkel

A konténerekkel kevesebb beágyazással is megépítheted a leggyakoribb oldalrészeket. Az alábbi öt elrendezés a legtöbb weboldalon előfordul. Mindegyik ugyanarra a pár tulajdonságra épül: irány, igazítás, szélesség és tördelés.

Nyitó rész (intro)

Az oldal első, üdvözlő része: egy cím és egy rövid szlogen. Jó hely az első interakcióra is: gombokkal a látogatót tovább lehet vezetni további információhoz vagy vásárláshoz. A lépéseit a Nyitó rész készítése fejezet írja le.

Hero

A hero általában egy képből és egy leíró szövegből áll, gyakran gombbal. A gomb vezethet egy bemutatkozó oldalra vagy egy termékhez.

1. Hozz létre egy szülő konténert, amelynek az iránya vízszintes sor, és a tartalma középre igazított.
2. Tedd bele a képet egyéni szélességgel (például 40% és 60% arányban).
3. Mellé tegyél egy másik konténert, amelynek az iránya függőleges oszlop.
4. Ebbe kerülnek a címsorok, a szöveg és a gombok, a tervnek megfelelő térközzel.

A részletes lépések a Hero szakasz készítése fejezetben vannak.

Hero képgalériával

A hero szövege mellett képgalériát is mutathat. Egy nagy szülő konténerben az egyik gyermek konténer a szöveget (Szövegszerkesztő widget), a másik a képeket tartalmazza. A képek méretét a rugalmas (flex) beállításokkal igazítod. A lépéseit a Hero képgaléria készítése fejezet írja le.

Felhívás (Call to Action)

Szövegből és egy gombból áll, amely interakcióra hív: például űrlap-felugró ablakot nyit, feliratkozást ajánl vagy árlistára visz. A szülő konténer iránya vízszintes sor, az elemek függőlegesen középre igazítottak, a tartalom pedig Térköz az elemek között elosztású. A szövegszerkesztő szélességét állítva (például 60%) kapod meg a megfelelő belső térközt. A lépéseit a Felhívás szakasz készítése fejezet írja le.

https://minta-bolt.hu/kontener-demo/

A képen felül a felhívás, alatta a kétoszlopos hero rész látható.

Szolgáltatások

Egyszerű, de gyakran használt rész. A szülő konténerben egy Címsor és több Ikondoboz widget áll. Ha a szülő konténeren bekapcsolod a Tördelés beállítást, a gyermek elemek az egyedi szélességük szerint egymás mellé, majd új sorba rendeződnek. Ugyanígy használhatod a Képdoboz widgetet is. A lépéseit a Szolgáltatások szakasz készítése fejezet írja le.

Hogyan tovább

Ha ezek az elrendezések megvannak, a konténerekből sablonokat is készíthetsz az oldalad visszatérő részeihez, például fejléchez.