MagyarmagyarDiv-blokk és Flexbox elem
A két atomikus tároló elem: felvétel, törlés, HTML-címke, hivatkozás és a Stílus fül szakaszai, lépésről lépésre mintával.
A Div-blokk és a Flexbox az atomikus szerkesztő két tároló eleme. Mindkettő más elemeket tartalmaz, akár egymást is.
- Div-blokk: általános tároló. A Flexbox konténerhez hasonló, de könnyebb, és gyorsabban betöltődik. Egyszerű tervekhez kiváló.
- Flexbox: rugalmas elrendezésű tároló összetett, pontos tervekhez.
A Div-blokk kísérleti funkció, ezért előbb be kell kapcsolnod az Elementor kísérleti funkcióinál.
Elem hozzáadása és törlése
Szekció neve “Elem hozzáadása és törlése”- A szerkesztőben kattints a + jelre. Megjelenik az összes elérhető elem.
- Kattints az elemre, vagy húzd a vászonra.
- Törléshez jelöld ki az elemet a vásznon, és nyomd meg a Delete billentyűt.
Beállítások
Szekció neve “Beállítások”Mindkét elemnek van Általános, Stílus és Interakciók füle.
A képen a Beállítások rész látszik.
| Beállítás | Mit csinál |
|---|---|
| HTML-címke | A tartalomnak megfelelő címke. A helyes címke segíti a keresőket is. Választható: Div, Header, Section, Article, Aside, Footer |
| Link | A + jelre kattintva megadhatsz egy hivatkozást: a látogató a blokkra kattintva megnyitja. Ha a tárolónak van hivatkozása, a benne lévő elemek már nem lehetnek kattinthatók. |
| Megnyitás új lapon | Hivatkozásnál jelenik meg, az új lapon nyitást kapcsolja be. |
| ID | Egyéni azonosító a tárolónak |
Az Attribútumok és a Megjelenítési feltételek Pro funkció, ezek koronával jelennek meg.
Stílus fül
Szekció neve “Stílus fül”A Stílus fülön a következő szakaszok találhatók: Elrendezés, Térközök, Méret, Pozíció, Tipográfia, Háttér, Szegély, Hatások és Egyedi CSS (utóbbi Pro).
A képen a Pozíció szakasz látszik a Pozíció, Z-index és Horgonyeltolás mezőkkel.
Példa: Div-blokk háttérképpel
Szekció neve “Példa: Div-blokk háttérképpel”- Adj egy Div-blokkot a vászonhoz.
- Kattints a Stílus fülre, és nyisd meg a Méret szakaszt.
- Állítsd be: szélesség 1000 PX, magasság 500 PX.
- Nyisd meg a Háttér szakaszt, és adj hozzá háttérképet.
A képen a Div-blokk szerkesztőpanelje látszik, az osztályok és a Stílus fül szakaszaival.
Példa: Flexbox kétoszlopos hero
Szekció neve “Példa: Flexbox kétoszlopos hero”- Adj egy Flexbox elemet a vászonhoz.
- A Stílus fül Elrendezés szakaszában az Irány legyen Sor.
- Tegyél két gyermek Flexboxot az elsőbe, egymás mellé.
- Jelöld ki a bal oldalit, nyisd meg az Elrendezés szakaszt, és az Irány legyen Oszlop.
- A Méret szakaszban a minimális magasság 600 PX, a minimális szélesség 60%.
- A Háttér szakaszban adj hozzá háttérszínt.
- Adj hozzá két Címsor elemet és egy Gomb elemet, és formázd őket.
- Jelöld ki a jobb oldali Flexboxot, és az Elrendezés szakaszban állítsd a magasságot 600 PX-re, a szélességet 40%-ra.
- A Háttér szakaszban adj hozzá háttérképet.
Az elrendezés pontos beállításairól további részleteket a Rács beállításai és a Flexbox konténerek működése fejezetekben olvashatsz.
Készült: