# Elemek hozzáadása és szerkesztése > Hogyan adsz hozzá, jelölsz ki, stílusozol, állítasz vissza és másolsz elemeket, egyenként és tömegesen. ## Az elemek felépítése A Bricks elrendezése elemfa. Minden elemnek van: - típusa (például **Szakasz**, **Címsor**, **Kép**, **Gomb**, Űrlap), - egyedi Bricks-azonosítója, - gyermekeleme, ha tartalmazhat másik elemet, - szülője, kivéve a gyökérelemeket, - beállítása: ebben tárolódik a tartalom, a stílus, az osztályok, a feltételek, az interakciók és az egyéni attribútumok. A gyökérelemek az oldaltartalom tetején ülnek, a beágyazottak egy másik elemen belül. A vászon a vizuális eredményt mutatja, a **Szerkezet** panel a tényleges hierarchiát. ## Elem hozzáadása Nyisd meg az elempanelt, és húzz egy elemet a vászonra vagy a **Szerkezet** panelre. A hely a célponttól függ: - beágyazható elemre ejtve az új elem belekerül, - testvérek közé ejtve ott foglal helyet, - gyökérszintre ejtve legfelső szintű elem lesz. Elrendezéselemet a [helyi menüből](https://hub.hellowp.io/hu/plugins/bricks-child/szerkeszto-helyi-menu/) is hozzáadhatsz, ha egy meglévő beágyazható elem ki van jelölve. A [parancspalettával](https://hub.hellowp.io/hu/plugins/bricks-child/szerkeszto-parancspaletta/) pedig egyszerre több elemet is beszúrhatsz. ## Elrendezéselemek Az elrendezéselemek: **Szakasz**, **Tároló**, **Blokk** és **Div**. - **Szakasz:** a szokásos legfelső szintű oldalszakasz. - **Tároló:** a szokásos, tartalomszélességű burkoló. - **Blokk:** általános blokkszintű burkoló. - **Div:** általános burkoló, kevesebb elrendezési feltevéssel. Nem minden elem tartalmazhat gyermeket. Azokat, amelyek igen, beágyazhatónak nevezzük. A nem beágyazható elemek, például a legtöbb tartalomelem, mozgathatók, stílusozhatók, másolhatók és törölhetők, de nem lehetnek szülők. ## Elem kijelölése és szerkesztése Kattints egy elemre a vásznon vagy a **Szerkezet** panelen. A panel átvált a kijelölt elemre, és megmutatja a vezérlőit. A panel fejléce az elem címkéjét mutatja. A címkét átnevezheted, hogy a **Szerkezet** panel áttekinthetőbb legyen. A címke csak a szerkesztő rendezettségét szolgálja, a HTML-címkét és az előlapi szöveget nem változtatja. A fejlécben az elemtől és a jogosultságaidtól függően gyorsműveletek is megjelenhetnek: elrejtés, feltételek, interakciók, komponensek és az örökölt globális elemek. ## Tartalom fül A **Tartalom** vezérlők az elem jelölését, adatait és viselkedését érintik. Ilyen például a **Kép** elem képforrása, a **Gomb** hivatkozása, a **Címsor** szövege vagy egy űrlap mezői és műveletei. A tartalomvezérlők nemcsak látható szöveget állíthatnak: szabályozhatnak szemantikus címkéket, attribútumokat, lekérdezési beállításokat, űrlapviselkedést, médiaforrásokat, hivatkozásokat és dinamikus adatot is. ## Stílus fül A **Stílus** vezérlők azt a CSS-t érintik, amit a Bricks a kijelölt elemhez, az aktív osztályhoz, az aktív választóhoz, az aktív pszeudóállapothoz és az aktív töréspontra generál. A vezérlők csoportjai általában: - Elrendezés - Tipográfia - Háttér - Szegély / Dobozárnyék - Színátmenet / Átfedés - Alakelválasztók - Átalakítás - CSS Módosítás előtt nézd meg, mi az aktív cél a panel tetején: - ha az elemazonosító aktív, a stílus csak erre az elemre vonatkozik, - ha egy globális osztály aktív, a stílus mindenhol érvényes, ahol az osztály szerepel, - ha pszeudóválasztó aktív, a stílus annak az állapotnak szól, - ha egy töréspont aktív, a reszponzív érték arra a töréspontra kerül. A legfontosabb szokás: előbb válaszd ki a célt, aztán módosítsd a vezérlőt. ## Osztályok, választók és reszponzív szerkesztés A **Tartalom** és **Stílus** fül fölötti választóterületen dől el, hogy az elemazonosítót, egy globális osztályt vagy egy választót/pszeudóállapotot stílusozol. Az újrahasznosítható stílushoz használj globális osztályt, az egyedihez az elemazonosítót, az állapotokhoz és a gyermekválasztókhoz pedig választót vagy pszeudóosztályt. A reszponzív szerkesztést az eszköztárban aktív töréspont vezérli. A vezérlők mellett jelző mutathatja, hogy az adott vezérlőnek van értéke az aktív vagy egy másik töréspontra. Hogy mikor jelenik meg, az a szerkesztő beállításaitól függ (lásd a [reszponzív szerkesztést](https://hub.hellowp.io/hu/plugins/bricks-child/szerkeszto-reszponziv-szerkesztes/)). ## Tömeges szerkesztés Több elemet jelölhetsz ki a Cmd/Ctrl vagy a Shift billentyűvel. A tömeges szerkesztés közös stílusmódosításhoz, osztályhozzárendeléshez, mozgatáshoz, elrejtéshez, törléshez és néhány helyi menüs művelethez hasznos. Korlátai: - a Bricks a kijelölt elemek közös beállításait számolja ki, - ha a kijelölt elemek értéke eltér, a közös vezérlő üresnek látszhat, - egy közös beállítás módosítása a kijelölt elemek mindegyikére érvényes, - ha különböző típusú elemeket jelölsz ki, csak a **Stílus** fül jelenik meg, - néhány művelet tömeges módban le van tiltva, például a mentés komponensként vagy sablonként, - a tömeges becsomagolás csak akkor működik, ha a kijelölt elemeknek közös a szülője. Tömeges szerkesztést széles, kiszámítható műveletekhez használj. Tartalmas szerkesztéshez egyszerre egy elemtípuson dolgozz. ## Elrejtés, feltételek és interakciók Az elem szintű elrejtés, feltételek és interakciók az elempanel fejlécéből nyithatók, ha elérhetők. - **Elem elrejtése:** elrejtheti az elemet a szerkesztőben, az előlapon, vagy mindkettőben. - **Feltételek:** azt szabályozzák, hogy az elem megjelenjen-e az aktuális kérésnél. - **Interakciók:** előlapi viselkedést kapcsolnak eseményindítókhoz és műveletekhez. Ezek jogosultsághoz kötöttek. Ha nem látod őket, nézd meg a [szerkesztői hozzáférést](https://hub.hellowp.io/hu/plugins/bricks-child/szerkeszto-hozzaferes/). ## Komponensek és zárolt szerkesztési állapotok Komponenspéldány kijelölésekor a Bricks a példányvezérlőket és a kitett tulajdonságokat mutatja, nem kezeli minden beágyazott elemet helyi oldaltartalomként. A komponens definíciójának szerkesztéséhez lépj a komponensszerkesztő módba. Néhány elem az Elemkezelőn keresztül le lehet tiltva, vagy nem érhető el, mert az elemtípus már nem létezik. Ilyenkor a Bricks a szokásos vezérlők helyett értesítést mutat. Az örökölt globális elemek régi oldalakon még megjelenhetnek. A Bricks elavultnak jelöli őket, és új újrahasznosítható tartalomhoz komponenseket javasol. ## Vezérlők visszaállítása Az olyan vezérlők, amelyeknek tárolt értéke van, a címke vagy a csoportcímke mellett kis jelzőt mutatnak. Vidd rá az egeret, és előjön a visszaállítás művelete. Visszaállíthatsz: - egy vezérlőt, - egy vezérlőcsoportot, például a Tipográfiát, - az elemazonosító stílusait, - az aktív osztály stílusait, ha osztályt stílusozol és nincs zárolva. A stílusvezérlők visszaállítása a tárolt stílusértékeket törli az aktuális célról. A tartalmat, például a szöveget, hivatkozást, űrlapmezőt vagy képválasztást nem érinti. Globális osztály stílusozásakor a visszaállítás magára az osztályra hat, nem csak a kijelölt elemre. ## Stílusok másolása és beillesztése Kattints jobb gombbal egy elemre a vásznon vagy a **Szerkezet** panelen, hogy megnyíljon a helyi menü. Válaszd a stílusok másolását, jelöld ki a célelemet, és illeszd be a stílusokat. A beillesztés a másolt stílusadatot és az aktuális célt veszi figyelembe: - elemstílus beillesztése a másolt stílusbeállításokat a célelemre alkalmazza, - globális osztály stílusának beillesztése akkor alkalmazza a másolt osztálystílust, ha egy osztály az aktív cél, - az alakelválasztókat, az egyéni CSS-t és más összetett stíluskezelőket stíluseadatként kezeli, ahol ez támogatott. Az osztályok, feltételek, interakciók és attribútumok másolásáról a [helyi menü](https://hub.hellowp.io/hu/plugins/bricks-child/szerkeszto-helyi-menu/) fejezetében olvasol. ## Gyakorlati ellenőrzőlista Változtatás előtt győződj meg róla, hogy: - a megfelelő elem van kijelölve, - a megfelelő választó aktív: elemazonosító, osztály vagy pszeudóválasztó, - a megfelelő töréspont aktív, - jelölést vagy adatot a **Tartalom**, CSS-t a **Stílus** fülön módosítasz, - nem komponensdefiníciót szerkesztesz, amikor a példányt akartad, - mentettél, mielőtt az előlapi viselkedést kipróbálod.