# Az első oldal elkészítése

> A kezdőlap hero szakaszának felépítése elrendezési elemekkel és flexbox-szal.

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.