Az első oldal elkészítése

Itt építed meg a kezdőlap hero szakaszát. Közben megismered az alapfolyamatot és az elrendezési elemek működését. Később további szakaszokat (például a legfrissebb bejegyzések rácsát) is hozzáadunk.

A Home oldal megnyitása

Ha a szerkesztő már nincs nyitva:

1. A vezérlőpulton nyisd meg az Oldalak → Összes oldal menüpontot.
2. Keresd meg a Home oldalt.
3. Vidd fölé az egeret, és kattints az Edit with Bricks (Szerkesztés Bricks-szel) hivatkozásra.

Ha még nincs Home oldalad, hozz létre egyet, és nyisd meg a szerkesztőben.

Az oldal beállítása kezdőlapnak

1. A vezérlőpulton nyisd meg a Beállítások → Olvasás oldalt.
2. A A kezdőlapod megjelenítése résznél válaszd a Statikus oldal lehetőséget.
3. A Kezdőlap mezőben válaszd ki a Home oldalt.
4. Ha szeretnéd, a Bejegyzések oldala legyen egy „Blog” nevű oldal (vagy hagyd az alapértéket).
5. Kattints a Változtatások mentése gombra.

Hogyan épül fel egy weboldal?

Görgetés közben a legtöbb oldalon ezt látod:

• legfelül a fejléc (logó és navigáció, általában globális),
• a hero szakasz, ami bemutatja az oldalt,
• egy vagy több tartalmi szakasz (funkciók, vélemények, bejegyzések, kapcsolat),
• legalul a lábléc.

Vizuálisan az oldal vízszintes sávok függőleges halmaza. A Bricks-ben ezeket a sávokat a Szakasz elemmel építed. A háttérben minden szakasz egy szemantikus HTML-doboz, amelyben további dobozok, azokban pedig a tartalom van.

Elrendezési elemek

Négy elrendezési elemed van, ezek tartanak minden más elemet:

Szakasz → Tároló → Blokk / Div → Elemek

• Szakasz: a gyökér sáv, a képernyő teljes szélességét kitölti. Az oldal nagy részeit különíti el (fejléc, hero, funkciók, lábléc).
• Tároló: a szakaszon belül van; középre igazítva és korlátozott szélességben (alapból 1100 px) tartja a tartalmat.
• Blokk: flexboxot használó elrendezési doboz, alapból 100% szélességű. Oszlopokhoz és kártyákhoz jó.
• Div: egyszerű, stílus nélküli div, ami a tartalmához igazodik. Könnyű körbefogó elem, ha teljes kontrollt szeretnél.
• Elemek: a tényleges tartalom (címsor, kép, gomb), ami az elrendezési dobozokban van.

Mikor melyiket használd?

• Szakasz: új vízszintes sávhoz. Egy tipikus oldalon külön szakasz van a hero-nak, a funkcióknak, a véleményeknek és a kapcsolatnak.
• Tároló: ha a szakasz tartalmának rögzített maximális szélességet és középre igazítást szeretnél. A legtöbb szakaszban pontosan egy tároló van.
• Blokk: ha a tárolót oszlopokra vagy ismétlődő dobozokra osztod. A hero-ban egy blokk a szövegnek, egy a képnek; a funkciók szakaszban egy blokk jut egy kártyára.
• Div: ha egyszerű dobozra van szükség más elrendezési elemeken belül, például egy címsor és egy ikon csoportosítására.

A stílus helye számít:

• a szakaszon megadott háttérszín és szegély a teljes szélességű sávra hat,
• a tárolón megadott stílus a középre igazított tartalmi területre,
• a blokkon vagy divén megadott stílus csak az adott oszlopra vagy kártyára.

Ha később a böngésző fejlesztői eszközeivel fölé viszed az egeret az elemeknek, színes rávetítésen látod a tartalmat, a belső és a külső margót: ez a dobozmodell.

A hero szakasz felépítése

Egy nagyon gyakori mintát készítünk: balra szöveg és gomb, jobbra kép, mindkettő függőlegesen középre igazítva.

1. Szakasz hozzáadása

1. A bal oldali beállítópanelen, az Elrendezés csoportban kattints a Szakasz elemre.
2. A vászonra bekerül egy szakasz, benne automatikusan egy tárolóval.

2. A hero tartalma

Először az összes tartalmat felvesszük, utána alakítjuk kétoszlopossá.

1. Jelöld ki a tárolót a szerkezet panelen vagy a vásznon kattintva.
2. Adj hozzá egy Címsor elemet.
3. Adj hozzá egy Formázott szöveg elemet a címsor alá.
4. Adj hozzá egy Gomb elemet a szöveg alá.
5. Adj hozzá egy Kép elemet a gomb alá.

Most minden egy oszlopban, egymás alatt van.

3. Tartalom csoportosítása blokkokkal

A blokkok oszlopokhoz kiválóak. Üres blokkok húzogatása helyett a meglévő elemeket csomagoljuk be blokkokba.

Bal oszlop (szöveg és gomb):

1. Nyisd meg a jobb oldali szerkezet panelt.
2. A tárolóban kattints a címsorra.
3. Tartsd lenyomva a Shift billentyűt, és kattints a gombra. Így a címsor, a szöveg és a gomb együtt van kijelölve (egyenként a Cmd/Ctrl lenyomásával is jelölhetsz).
4. Jobb gombbal kattints a kijelölésre, és válaszd a Wrap → Block (Becsomagolás blokkba) menüpontot.

A Bricks új blokkba csomagolja a három elemet: ez lesz a bal oszlop.

Jobb oszlop (kép):

1. A szerkezet panelen jelöld ki a képet.
2. Jobb gombbal kattints rá, és válaszd a Wrap → Block menüpontot.

Így a tárolóban két blokk van: egy a szövegnek és gombnak, egy a képnek. Ezeket a következő lépésben oszlopokká rendezzük.

4. Az oszlopok elrendezése

A flexbox segítségével egymás mellé tesszük a blokkokat.

1. Jelöld ki a tárolót.
2. Nyisd meg a Tartalom → Elrendezés részt.
3. Az Irány legyen Sor (vízszintes).
4. A Keresztirányú igazítás legyen Közép (függőlegesen középre igazít).
5. Az Oszlopköz legyen 24 (térköz az első és a második oszlop között).
6. A Stílusok lapon, a Háttér résznél állíts be háttérszínt.

Röviden a flexboxról

A CSS-ben a display tulajdonság határozza meg, hogyan helyezkednek el az elemek. Alapból sok elem block (egymás alatt) vagy inline (a szöveggel együtt folyó). A flexbox egy elrendezési mód, amellyel egy elem gyermekeit könnyen sorba vagy oszlopba rendezheted. A Bricks-ben a Szakasz, a Tároló és a Blokk alapból flexboxot használ.

Ha az irányt Sor-ra állítod, a gyermekek vízszintesen sorakoznak; Oszlop esetén egymás alá kerülnek. A fő vezérlők:

• Irány: a fő tengely (sor = egymás mellett, oszlop = egymás alatt).
• Térköz (gap): a gyermekek közötti hely a fő tengely mentén (itt a szövegblokk és a kép között).
• Elemek igazítása: a keresztirányú igazítás (itt függőleges), hogy mindkét oszlop ugyanazon a függőleges középvonalon legyen.

A flexbox egydimenziós elrendezésekhez ideális, mint ez a kétoszlopos hero.

5. A tartalom stílusa

Bal oszlop blokkja:

1. Jelöld ki a blokkot.
2. A Sorköz legyen 8 (hely a címsor, a szöveg és a gomb között).

Címsor:

1. A szöveg legyen: „Welcome to Bricks”.
2. A Címke legyen H1.

Kép:

1. Jelöld ki a Kép elemet.
2. Válassz egy fotót a médiatárból.

A Bricks által generált HTML

A Bricks tiszta, szemantikus kódot ad. Nézzük meg, mit jelent ez:

1. Az eszköztáron kattints az Előnézet gombra, így megnyílik a kezdőlap a weboldalon.
2. A böngészőben jobb gombbal kattints a hero szakaszra, és válaszd a Vizsgálat (Inspect) menüpontot.
3. Keresd meg a <main> elemet, és nyisd ki.

Nagyjából ezt látod:

• egy <section> a hero-nak,
• benne egy <div> (a tároló),
• abban a tartalmi dobozok és elemek (címsor, szöveg, gomb, kép).

Nincsenek rejtélyes extra körbefogó elemek, sem általad nem létrehozott beágyazott tárolók. Amit a szerkesztőben hozzáadsz, az kerül a kódba, így az elrendezés és a teljesítmény teljes mértékben a kezedben van.

A térköz problémája

A szakasz jól néz ki, de a képernyő tetejéhez és aljához tapad: belső margó (padding) kell neki. Beállíthatnál 80px paddinget a szakaszon, de ezt minden szakasznál meg kellene tenni, ami fárasztó és nehezen karbantartható. A megoldás a sablonstílusok: egyetlen globális szabállyal („minden szakasz paddingje 80 px”) beállítható az egész webhelyre.