Hero képgaléria készítése

Ebben a fejezetben a konténer rugalmas tulajdonságaival építesz képgalériás hero részt. Egy szülő konténerben két gyermek konténer áll: az egyikben a tartalom (a bal vagy jobb oldalon), a másikban a képgaléria. A feladat jó gyakorlat a rugalmas tulajdonságok megértéséhez.

Miért nem Galéria widgetet használok? Használhatnád azt is, de a most tanult technikák segítenek a haladóbb tervekben, és a Galéria widgettel ellentétben itt az egyes képekhez külön hivatkozás is megadható.

Kezdés

Hozz létre egy új oldalt, vagy nyiss meg egy meglévőt. A példában az oldal sablonja Vászon.

Új konténer két résszel

1. Kattints a + jelre, és adj hozzá egy új konténert.
2. Válaszd a kétkonténeres szerkezetet.
3. A szülő konténeren a Haladó fülön adhatsz margót, hogy legyen „fehér hely” körülötte.

A tartalom konténer

1. Húzz egy Címsor widgetet a bal oldali gyermek konténerbe, és írd át a szöveget.
2. A Stílus fülön a Tipográfia beállításaival módosíthatod a betűméretet, vagy választhatsz előre beállított globális stílust.
3. Húzz alá egy Szövegszerkesztő widgetet, és szerkeszd a tartalmát (egyelőre maradhat a minta szöveg).
4. Adj hozzá két Gomb widgetet, és írd át a szövegüket. Ha kész a cél, hivatkozást is adhatsz nekik. A példában két gomb azért van, hogy az Irány és a Tördelés is látható legyen.

A tartalom igazítása rugalmas tulajdonságokkal

1. Jelöld ki a tartalom konténerét. Az Elrendezés fülön a Szélesség és a magasság maradjon alapértelmezett.
2. Kapcsold be a Tördelés beállítást.
3. Állítsd az Irány értékét vízszintes sorra, hogy a gombok egymás mellé kerüljenek.
4. A Haladó fülön adj a konténernek egy kis paddinget (például 21 PX).

A galéria konténer

1. Jelöld ki a jobb oldali gyermek konténert.
2. Az Elrendezés fülön a konténer szélessége és magassága maradjon alapértelmezett.
3. A Tételek részben állítsd az Irány értékét vízszintes sorra.
4. A Hézagok értéke legyen 0 px, mert a képeknél paddinget használsz. Így egyszerűbb a 50/50 vagy 33,3% szélességű képek használata (hacsak nem szeretsz számolni).
5. Kapcsold be a Tördelés beállítást.
6. A tördelés bekapcsolása után megjelenik a Tartalom igazítása. Válaszd az Indítás értéket.

Képek hozzáadása

1. Húzz egy Kép widgetet a galéria konténerbe.
2. A hivatkozás beállításainál a médiafájlra mutató hivatkozással a kép lightboxban nyílik meg, de bármilyen címre is mutathat.
3. A Haladó fülön a Szélesség legyen 50% (a widget burkolójának szélessége).
4. A képre adj paddinget (például 5 PX). Ezt használod a hézag helyett, mert gyorsabb a munka.
5. Nyisd meg a Stílus fület, és állítsd be a képet úgy, hogy a másolatok is egységesek legyenek.
6. A Szélesség csúszkát húzd 100%-ra, vagy írd be az értéket.
7. A Magasság beállítással tartsd egyforma méretűre a képeket.
8. A magasság megadása után megjelenik az objektumillesztés (Object Fit) beállítás: válaszd a kitöltés (Cover) lehetőséget. Ez a képek méretétől függően levághat belőlük egy részt, de a galéria egységes marad, anélkül hogy minden képet külön kellene szerkesztened.

Képek másolása

1. Kattints jobb gombbal a képre, és másold le. A példában négy kép van.
2. Válaszd ki a médiatárból a képeket, vagy tölts fel újakat. Mivel a szélesség, a magasság és a padding már be van állítva, a képek magukat illesztik, átméretezés nélkül.

További képsorok

1. Másold le még egyszer az utolsó képet a jobb gombos menüvel.
2. A Haladó fülön a widget burkolójának Szélessége legyen 33,3%.
3. A Stílus fülön állítsd át a kép magasságát is (például 125 PX).

További képek másolása

1. Másold a képet jobb gombbal. A példában három ilyen kép van.
2. Válaszd ki a kívánt képeket a médiatárból, vagy tölts fel újakat.

Reszponzív mód

Nyisd meg a reszponzív töréspontokat, és igazítsd a kisebb eltéréseket. Gyakran a konténer rugalmas tulajdonságai maguktól elvégzik a munka nagy részét.

Egy lépéssel tovább

A képeket keverheted videóval és más elemekkel, így még látványosabb elrendezéseket hozhatsz létre.

A kész rész a többi alapelrendezéssel együtt jól használható.