# Haladó elválasztók widget: hullám és alakzat

> A szakaszok közötti formázott él: animált hullám, álló ív, vízszintes és függőleges elhelyezés, beállítások és korlátok.

Az elválasztó a két szakasz közötti formázott él: hullám, ív vagy bemélyedés az egyenes vonal helyett. Magára a szakaszra rajzolódik, ezért nincs szükség háttérképre vagy egyéni CSS-re. A **Haladó elválasztók** (Advanced Separators) widget két alakzatot tud a tároló felső, alsó, bal vagy jobb szélére tenni.

Fontos tudnivalók a használat előtt:

- Csak a Pro bővítményben van meg. Ha a Pro ki van kapcsolva, a widget nincs a szerkesztőben, és az oldalon, amely már használta, nem jelenik meg elválasztó.
- Kapcsold be a **The Plus Addons → Widgets** oldalon a **Haladó elválasztók** kártyát.
- A widget elavultnak van jelölve: a **Tartalom** fül tetején egy sárga figyelmeztetés közli, hogy a widget egy későbbi kiadásban teljesen el fog tűnni, és nem nevez meg helyettesítőt. Új oldalakat ezért ne erre építs.
- A widget nem ott rajzolja az elválasztót, ahol áll: a szülő tárolóhoz kapcsolódik, ezért a kívánt szakaszba vagy oszlopba kell húzni. A saját helye az elrendezésben nem számít. Az oszlopos (függőleges) elválasztónál a belső tárolóba tedd, nem a külsőbe, mert az elválasztó annak a tárolónak a magasságát veszi fel, amelyben van.

## Elválasztó hozzáadása

1. Kapcsold be a **Haladó elválasztók** widgetet a **The Plus Addons → Widgets** oldalon.
2. Szerkeszd az oldalt az Elementorral, és húzd a widgetet abba a szakaszba vagy oszlopba, amelyiken az elválasztót szeretnéd.
3. A **Tartalom** fülön válassz képet az **Alakzat-elválasztó** alatt. Három választás van: nincs, **Hullám** (animált) és **1. alakzat** (álló ív). Az alapérték a „nincs”, és ekkor semmi nem rajzolódik.
4. A **Sor/oszlop** mezőben válaszd a **Szakasz/sor** vagy az **Oszlop** értéket. A **Szakasz/sor** a felső vagy alsó élre teszi az elválasztót, az **Oszlop** a bal vagy jobb élre állítja.
5. Az **Elválasztó pozíciója** mezőben a **Szakasz/sor** esetén az **alsó** és a **felső**, az **Oszlop** esetén a **jobb** és a **bal** ikon közül választasz. Az **Elválasztó megfordítása** tükrözi az alakzatot, és a szakasz éle mögé, a szakaszba húzza.

![A Haladó elválasztók panelje: az elavulás figyelmeztetése, az alakzat választó, a Sor/oszlop, a pozíció, a megfordítás, az Alakzat magassága és a Hullámhurok két sora](./kepek/szovegek-adatok-4-elvalaszto-panel.webp)

*A Haladó elválasztók panelje: az elavulás figyelmeztetése, az alakzat választó, a Sor/oszlop, a pozíció, a megfordítás, az Alakzat magassága és a Hullámhurok két sora* (https://minta-bolt.hu/wp-admin/post.php?post=49&action=elementor)

A képen a **Hullám** alakzat van kiválasztva a **Szakasz/sor** módban, a **Hullámhurok** két réteggel.

![Egy világoskék szakasz alsó élén kétrétegű lila hullám](./kepek/szovegek-adatok-4-elvalaszto-hullam.webp)

*Egy világoskék szakasz alsó élén kétrétegű lila hullám* (https://minta-bolt.hu/tp-elvalaszto/)

A képen a hullám a szakasz alsó éle alatt lóg, két rétege külön mozog.

### Beállítások

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Alakzat-elválasztó** | Az alakzat: nincs, **Hullám** vagy **1. alakzat** | nincs |
| **Sor/oszlop** | Vízszintes (**Szakasz/sor**) vagy függőleges (**Oszlop**) élre teszi | Szakasz/sor |
| **Elválasztó pozíciója** | Melyik él: alsó vagy felső (**Szakasz/sor**), jobb vagy bal (**Oszlop**) | alsó / jobb |
| **Elválasztó megfordítása** | Tükrözi az alakzatot, és a szakasz éle belsejébe teszi | Ki |
| **Alakzat magassága** | A hullámsáv magassága pixelben. Csak a **Hullám** alakzatnál és **Szakasz/sor** módban | 200 px |
| **Hullámhurok** | A hullámrétegek halmaza, minden sornak saját színe, magassága, csontjai, amplitúdója és sebessége van | 2 sor |
| **Kitöltési szín** | Az **1. alakzat** ívének színe | #8072fc |
| **Ikonbetűkészlet** | Az **1. alakzat** ikonjának könyvtára: **Font Awesome**, **Font Awesome 5** vagy **Icons Mind** | Font Awesome |
| **Ikon színe** | Az **1. alakzat** ikonjának színe | üres (fehér) |
| **Ikon mérete** | Az **1. alakzat** ikonjának mérete | 30 px |
| **URL** | Az egész **1. alakzatra** kerülő link | #, új lapon nyílik |

### Hogyan viselkedik

- Az elválasztó nem ott rajzolódik, ahol a widget áll. Az oldal betöltésekor a jelölése a tárolóra kerül át, és a tároló `position: relative` kapcsolatot kap.
- Ezért a szerkesztő vásznán maga a widget üres helyőrző dobozként látszik, miközben az elválasztó a szakasz szélén jelenik meg. Ez így van rendjén.
- A hullám folyamatosan mozog, az **1. alakzat** áll.
- **Alsó** pozíciónál az alakzat a szakasz alatt lóg, **felsőnél** fölötte. Az **Elválasztó megfordítása** az adott él belsejébe teszi.
- Ugyanabba a tárolóba több **Haladó elválasztók** widget is tehető, például egy felső és egy alsó.
- Amíg nem választasz alakzatot, semmi nem rajzolódik: a „nincs” értéknél a widget üres, nulla magasságú elemet ad ki.
- Két alakzat van, saját SVG-t nem tölthetsz fel.
- Az **Elválasztó megfordítása** kapcsoló akkor is látszik, ha az alakzat „nincs”, ilyenkor nem csinál semmit.

### Hibaelhárítás

- Nem jelenik meg semmi a widget hozzáadása után: az **Alakzat-elválasztó** „nincs” értéken indul. Válaszd a **Hullám** vagy az **1. alakzat** értéket.
- Az elválasztó rossz szakaszon van: a szülő tárolóhoz kapcsolódik. Húzd a widgetet abba a szakaszba vagy oszlopba, amelyiken lennie kell.
- A widget szürke, üres doboz a szerkesztőben: ez várt viselkedés, nézd a szakasz szélét.
- Az elválasztó le van vágva: az alakzat a szakaszon kívülre lóg, ezért a **Túlcsordulás: rejtett** beállítású tároló teljesen elrejti. Állítsd a túlcsordulást alapértelmezettre, vagy kapcsold be az **Elválasztó megfordítása** beállítást, hogy az alakzat a szakasz belsejébe kerüljön.
- A widget nincs a szerkesztőben: nézd meg, hogy a Pro bővítmény aktív-e, és a **Haladó elválasztók** be van-e kapcsolva a **The Plus Addons → Widgets** oldalon.

## Vízszintes elválasztó

A vízszintes elválasztó a szakasz teljes szélességében fut, a tetején vagy az alján. Ezt értik a legtöbben szakaszelválasztó alatt. Ez a **Sor/oszlop** **Szakasz/sor** értéke.

1. Húzd a widgetet abba a szakaszba, amelyiken az elválasztót szeretnéd.
2. Az **Alakzat-elválasztó** alatt válaszd a **Hullám** vagy az **1. alakzat** értéket.
3. A **Sor/oszlop** maradjon **Szakasz/sor** értéken.
4. Az **Elválasztó pozíciója** két ikonja: **alsó** (alapérték) és **felső**.
5. Kapcsold be az **Elválasztó megfordítása** beállítást, ha az alakzatot tükrözni és a szakasz belsejébe húzni szeretnéd.

- A **Hullám** a tároló teljes szélességét kitölti, nem a widgetét.
- **Alsó** pozíciónál az alakzat a tároló utolsó elemeként a tároló alatt lóg, **felsőnél** az első elemként fölötte. Egy 260 és 680 px között húzódó szakaszon az alsó elválasztó 680 px-nél rajzolódott, a felső 60 px-nél.
- Az **Elválasztó megfordítása** a szakasz belsejébe teszi: ugyanaz az alsó elválasztó 680 px helyett 480 px-nél jelent meg, vagyis a szakasz utolsó 200 pixelében.
- A vízszintes elválasztó telefonon is látszik (390 px-es nézetben is megjelent).
- Az **Alakzat magassága** itt elérhető a **Hullám** alakzatnál, így sekélyebb vagy mélyebb sávot csinálhatsz.
- Az **1. alakzat** rögzített, 200 × 44 pixeles, mindig középen áll. Nem húzható szét a szakaszra és nem mozgatható oldalra.
- Ha az elválasztó rálóg a következő szakaszra: ez az **alsó** pozíció természete. Csökkentsd az **Alakzat magasságát**, adj a következő szakasznak felső belső margót, vagy kapcsold be az **Elválasztó megfordítása** beállítást.
- Ha az elválasztó keskenyebb a szakasznál: az **1. alakzatnál** ez várt, mert rögzített 200 px-es ív. Teljes szélességhez a **Hullámot** használd.

## Animált hullám

A hullám a két szakasz közötti mozgó él. Amíg az oldal nyitva van, folyamatosan fut, ezért állóképként nem alakzatnak, hanem mozgásnak hat. A **Hullám** egy vagy több animált hullámréteget rak a szakasz szélére.

1. Húzd a widgetet abba a szakaszba, amelyiken a hullámot szeretnéd.
2. Az **Alakzat-elválasztó** alatt válaszd a középső képet, a **Hullám** értéket.
3. A **Sor/oszlop** maradjon **Szakasz/sor**, az **Elválasztó pozíciója** pedig **alsó** vagy **felső**.
4. Állítsd be az **Alakzat magassága** értékét: ez az egész hullámsáv magassága pixelben.
5. Nyiss meg egy sort a **Hullámhurok** alatt. Minden sor egy hullámréteg. Az **Alakzat színtípusa** lehet egyszínű vagy színátmenetes, és válaszd ki a színt vagy színeket.
6. Formáld a réteget a **Magasság**, a **csontok**, az **Amplitúdó** és a **Sebesség** értékkel, ezeket lásd a lenti táblázatban.
7. Az **Elem hozzáadása** gombbal újabb réteget adhatsz hozzá. A rétegek ugyanabban a sávban egymásra kerülnek, a későbbi sor rárajzol a korábbira.

### Hullámhurok beállításai

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Alakzat színtípusa** | Az egyszínű kitölti a réteget egy színnel, a színátmenet az **Alakzat színe** és az **Alakzat második színe** között vált | Egyszínű |
| **Alakzat színe** | A réteg színe, vagy a színátmenet első színe | #8072fc |
| **Alakzat második színe** | A színátmenet második színe. Csak színátmenetnél | #6fc784 |
| **Színátmenet X1 / X2 / Y1 / Y2** | Hol kezdődik és hol ér véget a színátmenet a rétegen, százalékban. Csak színátmenetnél | 0 / 70 / 0 / 50 |
| **Magasság** | A hullámvonalat tolja lejjebb a sávban. Az alapértelmezett **Alakzat magassága** mellett 40 94 px-szel, 80 134 px-szel, 160 214 px-szel lejjebb vitte. A hullám méretét nem változtatja | 80 |
| **csontok** | Hány görbeszakasz rajzolódik a szélességben. 1-nél egy görbe van, 12-nél tizenkettő | 4 |
| **Amplitúdó** | Mennyire lendül ki a vonal, vagyis mennyi mozgás látszik | 60 |
| **Sebesség** | Az animáció időzítése. A mozgás az alapérték körül a legerősebb, lásd lent | 0,15 |

![Három egymásra rakott hullámréteg egy szakasz alsó élén](./kepek/szovegek-adatok-4-elvalaszto-hullam.webp)

*Három egymásra rakott hullámréteg egy szakasz alsó élén* (https://minta-bolt.hu/tp-elvalaszto/)

A képen a rétegek külön színűek és külön mozognak, mindegyik ugyanabban a sávban.

- A hullám sosem áll meg: a körvonala 700 ezredmásodperc eltéréssel vett minden mintában más volt.
- Minden **Hullámhurok** sor külön SVG-réteg saját színnel és saját mozgással, mind az egy sávon belül.
- Az **Alakzat magassága** az egész sávot és az összes réteget átméretezi: 90-re állítva a sáv és minden réteg 90 px magas lett.
- A színátmenetes sor valódi SVG-színátmenettel rajzolódik az **Alakzat színe** és az **Alakzat második színe** között, a négy százalék szerint elhelyezve.
- A sáv a szakasz szélén kívülre lóg. Az **Elválasztó megfordítása** tükrözi, és a szakasz belsejébe teszi.
- A **Sebesség** nem egyszerűen gyorsabb vagy lassabb mozgást jelent. 320 ezredmásodpercenként mért mozgás: 2,71 0,05-nél, 3,68 az alapértelmezett 0,15-nél és 0,42 1,5-nél. Az érték az animáció sebességeként és az egyes animációs lépések hosszaként is szolgál, ezért a mozgás az alapérték körül csúcsosodik, nagyon nagy értéknél pedig lomha. Kis lépésekben változtasd, és nézd az eredményt.
- Az animáció folyamatosan fut, akkor sem áll meg, ha a szakasz kilóg a képernyőből, és a widgetben nincs csökkentett mozgás opció.
- Ha a hullám nem mozog: a nyilvános oldalon nézd, nem a szerkesztőben, és az **Amplitúdó** ne legyen nulla közeli. 10-nél a vonal csak kb. 7 pixelt mozdult, ami alig látszik.
- Ha minden réteg egyszínűnek látszik: nyisd meg a sorokat, és állítsd be mindegyiknek a saját **Alakzat színét**. A sor címe a panelen a színértéket mutatja, így könnyen megkülönbözteted őket.
- Ha a **Sebesség** növelésére lassabb lett: ez várt az alapérték fölött. Vidd vissza 0,15 közelébe, és kis lépésekben állítsd.
- Ha a hullám le van vágva: a sáv a szakaszon kívülre lóg, ezért a **Túlcsordulás: rejtett** tároló teljesen elrejti. Állítsd alapértelmezettre, vagy kapcsold be az **Elválasztó megfordítása** beállítást.

## Függőleges elválasztó

A függőleges elválasztó egy oszlop oldalán fut fel, nem a szakaszon át. Két egymás melletti tartalomterületnek ad formázott határt kemény él vagy szegély helyett. Ez az **Oszlop** érték a **Sor/oszlop** mezőben.

1. Húzd a widgetet abba az oszlopba, amelyiken az elválasztót szeretnéd.
2. Az **Alakzat-elválasztó** alatt válaszd a **Hullám** vagy az **1. alakzat** értéket.
3. A **Sor/oszlop** értéke legyen **Oszlop**.
4. Állítsd be az **Elválasztó pozícióját**: ebben a módban a két ikon **jobb** (alapérték) és **bal**.
5. Kapcsold be az **Elválasztó megfordítása** beállítást az alakzat tükrözéséhez.

![Világoskék szakasz jobb oldalán függőlegesen álló lila hullám](./kepek/szovegek-adatok-4-elvalaszto-fuggoleges.webp)

*Világoskék szakasz jobb oldalán függőlegesen álló lila hullám* (https://minta-bolt.hu/tp-elvalaszto-oszlop2/)

A képen az elválasztó az oszlop jobb élén áll fel.

- Az elválasztó ahhoz a tárolóhoz kapcsolódik, amelyben a widget van, és annak jobb vagy bal élén áll az oldalán.
- A hosszát a böngésző a tároló tartalmi magasságából számolja, ezért az oszloppal együtt nő és csökken, és az ablak átméretezésekor újra mér.
- A hossz a tartalmi doboz, nem az egész oszlop. Egy 420 px magas oszlopnál 40 px felső és alsó belső margóval az elválasztó 340 px lett, és mindkét végén rés maradt.
- A függőleges **Hullám** rögzítetten 110 pixel vastag. Az **Alakzat magassága** ebben a módban nincs felkínálva, és nincs hatása, ha korábban beállítottad.
- A **jobb** a tároló jobb élére teszi, a **bal** közvetlenül a tároló bal élén kívülre, ezért a bal szélső oszlopnál az oldalon kívülre eshet.
- Az **1. alakzat** oszlop módban egy 44 × 200 pixeles ív, az él mentén függőlegesen középen.
- A függőleges **Hullám** 767 pixeles és keskenyebb képernyőn el van rejtve (768 px-nél látszik, 767 px-nél és 390 px-nél nem). Erre nincs beállítás, ezért úgy tervezz, hogy az elrendezés az elválasztó nélkül is jól olvasható legyen telefonon. Az **1. alakzat** oszlop módban erre nem érvényes, és telefonon is látszik.
- A függőleges elválasztó vastagsága nem állítható, a stíluslapban rögzített.
- Ha az elválasztó rövidebb az oszlopnál: a hossza a tartalmi magasságból jön. Csökkentsd az oszlop felső és alsó belső margóját, vagy tedd a margót az oszlop tartalmára.
- Ha az elválasztó kilóg az oldalról: a **bal** az oszlop bal élén kívülre teszi. A bal szélső oszlopnál használd a **jobb** értéket, vagy a tőle jobbra lévő oszlopba tedd a widgetet.
- Ha az elválasztó nem méreteződik az oszloppal: a hossz betöltéskor és átméretezéskor mérődik. Ha az oszlop később nő (például betöltődő tartalom miatt), töltsd újra az oldalt, vagy méretezd át az ablakot.
- Ha az **Alakzat magassága** nem csinál semmit: csak a **Hullám** alakzatra és **Szakasz/sor** módban érvényes, **Oszlop** módban el van rejtve.

## Statikus alakzat (1. alakzat)

Az **1. alakzat** a hullám csendesebb párja: egy keskeny ív, amely a választott él közepén áll. Nem animálódik, a körvonala másodpercek múlva is ugyanaz. Háttérkép nélkül töri meg a két szakasz közötti egyenes vonalat.

1. Húzd a widgetet abba a szakaszba vagy oszlopba, amelyiken az elválasztót szeretnéd.
2. Az **Alakzat-elválasztó** alatt válaszd a harmadik képet, az **1. alakzat** értéket.
3. A **Sor/oszlop** mezőben válaszd a **Szakasz/sor** vagy az **Oszlop** értéket, majd az **Elválasztó pozíciója** mezőben a kívánt élt.
4. Állítsd be a **Kitöltési szín** értékét. Az egész ívet kiszínezi, a körvonalával együtt.
5. Válassz **Ikonbetűkészletet** és ikont az **Ikonkönyvtár** felugró panelen, majd állítsd be az **Ikon színét** és **Ikon méretét**. Az ikonról lásd a korlátokat lent.
6. Ha az alakzatnak kattinthatónak kell lennie (például a következő szakaszra mutató horgony), töltsd ki az **URL** mezőt. Az **Ikon beállításai** mellett a fogaskerékkel kapcsold ki az **Új ablakban nyílik meg** beállítást, ha az oldalon belüli horgonyról van szó.

![Világoskék szakasz alsó élén középen álló narancssárga ív](./kepek/szovegek-adatok-4-elvalaszto-alakzat.webp)

*Világoskék szakasz alsó élén középen álló narancssárga ív* (https://minta-bolt.hu/tp-elvalaszto-alakzat/)

A képen az ív a szakasz alsó élén, a **Kitöltési szín** szerinti narancssárgával áll.

- Az ív vízszintes élen 200 px széles és 44 px magas, függőleges élen 44 px széles és 200 px magas. A méretek rögzítettek, az **Alakzat magassága** nem vonatkozik rá.
- Mindig az él közepén áll, és nem mozgatható az él mentén.
- A **Kitöltési szín** a kitöltést és a körvonalat is beállítja.
- Az **Elválasztó megfordítása** elforgatja az ívet, és a szakasz éle belsejébe teszi.
- Nem animálódik. Ha mozgás kell, a **Hullámot** válaszd.
- Az alakzat fölött mindig renderelődik egy link, akkor is, ha nem nyúlsz az **URL** mezőhöz.
- Egyetlen alakzat van, saját SVG-t nem tölthetsz fel, és a görbét sem módosíthatod.

Korlátok az ikonnál és a linknél:

- Az **Ikon színe** nem hat, ha az **Ikonbetűkészlet** **Font Awesome 5**. Ez az ikon beágyazott SVG, és a **Kitöltési színt** veszi fel, ezért ugyanolyan színű, mint az alakzat, és nem látszik. Narancssárga **Kitöltési szín** és sötét **Ikon színe** mellett az ikon narancssárga lett.
- Az alapértelmezett **Font Awesome** (4-es verzió) ikonja a szerkesztőben látszik, de a közzétett oldalon nem, mert ott nincs betöltve Font Awesome 4 stíluslap. Ahol más sem tölti be, az ikon üres.
- Az **URL** előre ki van töltve egy `#` jellel, és az **Új ablakban nyílik meg** és a nofollow is be van kapcsolva. Egy érintetlen **1. alakzat** tehát egy az egész alakzaton átnyúló linket renderel, amely kattintásra üres lapot nyit.
- Ha az ikon nem látszik a nyilvános oldalon, két külön oka lehet: az alapértelmezett Font Awesome beállításnál az ikonbetűkészlet nincs betöltve, a **Font Awesome 5** esetén pedig az ikon a **Kitöltési színt** veszi fel, így beleolvad az alakzatba. Egyikre sincs beállítás, ami megoldaná.
- Ha kattintásra üres lap nyílik: ez az alapértelmezett `#` link. Az **URL** melletti fogaskerékkel kapcsold ki az **Új ablakban nyílik meg** beállítást, és írj valódi célt a mezőbe, vagy ne linkeld az alakzatot.
- Ha az ív le van vágva: kívülre lóg a szakaszból, ezért a **Túlcsordulás: rejtett** tároló elrejti. Állítsd alapértelmezettre, vagy kapcsold be az **Elválasztó megfordítása** beállítást.
- Ha az alakzat rossz színű: a **Kitöltési szín** az ívet állítja. Ellenőrizd, hogy nem **Hullámot** nézel-e, amelynek színei a **Hullámhurok** soraiból jönnek.