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

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.

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.

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

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.

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ó.

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.