MagyarmagyarA konténer Haladó fülének beállításai
Margó, belső térköz, szélesség, saját igazítás, sorrend, méret, pozíció, Z-Index, CSS ID és osztályok.
A Haladó fül további lehetőségeket ad a rugalmas tervezéshez. A konténeren és a benne lévő widgeteken is ott van, de néhány beállítás (például a Szélesség) csak a widgeteken jelenik meg.
A képen a konténer Elrendezés szekciója látszik: margó, padding, saját elem igazítása, sorrend, méret és pozíció.
Egy widgetnél (itt egy Címsornál) a Padding alatt megjelenik a Szélesség is.
Margó
Szekció neve “Margó”A margó az elem „kívüli” helye. PX, EM, % és REM egységben adhatod meg, a lánc ikonnal pedig szétkapcsolhatod a négy oldalt, ha külön értékeket szeretnél.
Ha egy legfelső szintű konténeren bal vagy jobb margót adsz meg (például 200 px bal margót), a böngésző a teljes szélességet 100% + 200 px-nek számolja. Mivel ez szélesebb a képernyőnél, a konténert jobbra tolja, és vízszintes görgetősáv jelenik meg. Ha bal vagy jobb margó kell, tedd egy gyermek konténerre.
Padding
Szekció neve “Padding”A padding (belső térköz) az elem „belső” helye, ugyanúgy PX, EM, % és REM egységben, szétkapcsolható oldalakkal. A margó és a padding különbségét a Térköz margóval és paddinggel fejezet részletezi.
Szélesség (csak widgeteknél)
Szekció neve “Szélesség (csak widgeteknél)”Azt szabályozza, mennyi vízszintes helyet foglal az elem a konténerben. A lehetőségek: Teljes szélesség (100%), Beágyazott (auto) és Egyéni. Egyéni választásnál megjelenik egy csúszka és egy mező, ahol PX, % vagy VW egységben adod meg az értéket. Ez fontos beállítás, és a Tördelés bekapcsolásával együtt használva jobb elrendezést kapsz.
A Beágyazott (auto) érték konténerekben nem működik: helyette a konténer Irány beállítása dönt.
Ha egy elem pozíciója Abszolút vagy Rögzített, a Szerkezet ablakban az elem mellett fekete függőleges sáv és egy négyirányú nyíl ikon jelenik meg. Az ikon fölé víve az egyéni pozícionálás tippje látszik, így könnyű észrevenni a normál elrendezésből kilógó elemeket.
Saját elem igazítása
Szekció neve “Saját elem igazítása”Az elem igazítását adja meg a konténeren belül, és felülírja a konténer Elemek igazítása beállítását. Lehetőségek: Indítás (az elem a konténer elejére kerül), Középre, Vége (a konténer végére) és Nyújtott (kitölti a konténert).
Sorrend
Szekció neve “Sorrend”Főleg a reszponzív töréspontokkal együtt hasznos: így az elemek sorrendjét nézetenként módosíthatod (például három vagy több elemet mobilon átrendezel). Választhatsz: Kezdet, Vége, vagy Egyéni sorrendet, amikor megjelenik az Egyéni sorrend mező, ahová a számot beírod.
A Sorrend a rugalmas elrendezés (Flexbox) order tulajdonságát kezeli, amelyet CSS-ben általában az :nth választóval együtt kell használni, és ez bonyolult. Az Elementorban viszont minden konténer és widget Haladó fülén ott van, számokkal vagy gombokkal állítható. A sorrend módosításával reszponzív nézetben nem kell további, elrejtett szakaszokat felvenned: például egy három vagy több elemből álló fejlécben középre teheted a logót, vagy felcserélheted a menüikont és a kosarat.
Ha Egyéni sorrendet adsz meg, a többi elem sorrendjét is meg kell adnod, hogy az elrendezés jól álljon össze. Könnyebb, ha hátulról kezded: előbb a legutolsó elemet szerkeszd.
Méret
Szekció neve “Méret”A rugalmas növekedés és zsugorodás azt mondja meg, hogyan viselkedik az elem a konténer többi elemhez képest: Nincs, Növekedés, Zsugorítás, vagy Egyéni, ilyenkor két mező jelenik meg (egyéni növekedés és egyéni zsugorodás értéke).
A Méret a rugalmas elrendezés flex-grow és flex-shrink tulajdonságát használja: azt adja meg, hogyan viselkedik az elem a konténer többi eleméhez képest, amikor az ablak mérete változik.
- Növekedés: az elem megpróbálja kitölteni a konténer szabad helyét. Az alapérték 1.
- Zsugorítás: ha a konténer elemei együtt túl nagyok, az elem összébb húzódik. Az alapérték szintén 1.
- Egyéni: a növekedés és a zsugorodás értékét külön megadhatod. Erre akkor van szükség, ha egy vagy több elemnek a rendelkezésre álló hely meghatározott részét kell elfoglalnia.
Ha a Növekedés vagy a Zsugorítás ikont választod, az Elementor automatikusan úgy állítja be a tulajdonságot, hogy az elrendezéshez illeszkedjen.
Fontos: a Méret csak akkor működik, ha az elem Szélesség beállítása az alapértéken áll, vagy üres. Ha a szélességet megadtad, a növekedés és a zsugorítás nem hat.
Pozíció
Szekció neve “Pozíció”- Alapértelmezett: az elem a megszokott módon, az oldal természetes folyásában áll. Minden elem alapból ilyen.
- Abszolút: az elem az első pozicionált szülőjéhez képest helyezkedik el.
- Rögzített: az elem a böngészőablakhoz képest van rögzítve, görgetéskor is a helyén marad.
Abszolút vagy rögzített pozíciónál a Vízszintes tájolás és a Függőleges tájolás mező megadja a vonatkoztatási pontot (kezdet vagy vég), az Eltolás mezőkben pedig számokkal adhatod meg az X és Y helyzetet. A pozíciót eszközönként, külön állíthatod asztali gépre, táblagépre és mobilra. Widgetnél a Haladó fülön az egyéni pozícionálásnál az elemet a vásznon is megfogva az óhajtott helyre húzhatod, a pontos számokat pedig az eltolás mezőkbe írhatod.
A rögzített pozíció a nézetablakhoz, a ragadós (sticky) görgetési hatás viszont ahhoz a szakaszhoz képest működik, amelyben az elem áll. Az abszolút pozícionálás nem ajánlott elrendezések építésére, de sok esetben hasznos, ha szabadabban kell elhelyezned egy elemet.
Z-Index
Szekció neve “Z-Index”Az elemek egymásra rakódási sorrendje. A nagyobb értékű elem mindig a kisebb értékű előtt jelenik meg: a 10-es Z-Index az 5-ös fölött van. Ha negatív margó, Z-Index vagy abszolút pozíció miatt egy szakasz vagy a fogantyúja elérhetetlenné válik (másik elem takarja, vagy a sablon fejléce mögé kerül), a Szerkezet ablakban egy kattintással elérheted és szerkesztheted. Lásd: Szerkezet ablak és jelzők. A V4 elemeknél a Z-index a Stílus fül Pozíció szakaszában van, lásd: Rögzített pozíció widgetekhez.
CSS ID
Szekció neve “CSS ID”A konténerhez egyedi azonosítót adhatsz, amellyel eseményt indíthatsz vagy horgonylinket készíthetsz. A # jelet ne írd be a mezőbe.
CSS-osztályok
Szekció neve “CSS-osztályok”Az osztályokra az egyedi CSS-ben hivatkozhatsz. A . jelet ne írd be a mezőbe. Példa: a pink-link osztályt rárakhatod bármelyik elemre, ha az egyedi CSS-ben ez áll:
.pink-link a { color: #f876f8; }
A képen a lejjebb görgetett panel látszik a további szekciókkal (Mozgási hatások, Átalakítás, Reszponzív, Attribútumok, Egyedi CSS).
A widget Haladó füle
Szekció neve “A widget Haladó füle”A widgeteknél ugyanezek a beállítások vannak meg, kiegészítve a Háttér, Szegély és Maszk szekciókkal.
Készült: