Chalk Line Page FX

A Chalk Line kiegészítő kézzel rajzolt hatású vonalat húz végig a WordPress-oldalon, ahogy a látogató görgeti. A vonal az oldal Slider Revolution moduljaiban lévő elemekhez rögzített pontokon halad át, így az oldal egyik szakaszából a következőbe vezet.

Page FX kiegészítő: a blokkszerkesztőben egy egész oldalra működik, nem egyetlen modulon belül. A vonal addig rajzolódik ki, amíg el nem ér egy pontot, a böngészőablak tetejétől számított 60%-nál, ezért lefelé görgetve nő, visszagörgetve rövidül.

A blokk hozzáadása

1. Szerkeszd az oldalt a blokkszerkesztőben, és kattints a blokkbeszúróra.
2. Keress rá a Chalk Line szóra.
3. Kattints a Page FX · Chalk Line blokkra.
4. A blokkon kattints a Settings gombra, ami megnyitja a Chalk Line szerkesztőt.

Egy oldalon csak egy Page FX · Chalk Line blokk lehet. A blokk a szerkesztőben rövid állapotsort mutat. Amíg nem mentettél vonalat, azt írja, hogy az effekt még nincs beállítva (Not set up yet), és kéri, hogy a Settings gombbal rajzold meg a vonalat.

A Chalk Line szerkesztő

A teljes képernyős szerkesztő a blokkszerkesztő fölött nyílik meg: jobb oldalon az élő oldalt mutatja, bal oldalon a vonal beállításait. A vonal szegmensekből áll. Egy szegmens horgonypontok sora, és minden horgony vagy az oldal egy elemére van rögzítve, vagy szabad helyzetben áll.

Felső sáv

Elem	Mit csinál
Device	Az élő oldal előnézetének szélessége: Wide (1600px), Desktop (1240px), Notebook (1024px), Tablet (778px), Mobile (480px). A horgonyoknak a Notebook, Tablet és Mobil méreten más helyzetet adhatsz: válts az adott szélességre, és mozgasd a horgonyt.
Preview	Új böngészőlapon megnyitja az oldalt az aktuális vonallal, a még el nem mentett módosításokkal együtt.
Save	Elmenti a vonalat és a beállításait. Amíg mentetlen módosítás van, a gombon pont látszik.
Effect Data	Menü a vonal oldalak vagy webhelyek közti átviteléhez JSON-fájlként: Import… (egy Chalk Line által exportált JSON-fájlból tölt be vonalat), Export… (az aktuális vonalat letölti JSON-fájlként).
Close	Bezárja a szerkesztőt, és visszavisz a blokkszerkesztőbe. Mentetlen módosításnál a böngésző megkérdezi: „Close without saving?”.

Line fül

A Line fülön a vonalat alkotó szegmensek és horgonyok listája és a kijelölt szegmens vagy horgony beállításai vannak.

Line structure. Felsorolja a vonal összes szegmensét, alattuk a szegmens horgonyaival. A listában egy bejegyzést kijelölve az alatta lévő beállítások arra vonatkoznak.

• All Segments: egyszerre kijelöli az összes szegmenst, így a Stroke style és Tip / stamp módosításai az egész vonalra érvényesek. A sor a vonal összes horgonypontjának számát is mutatja.
• Egy szegmens sora kinyitható, hogy megmutassa a horgonyait. A sorra kattintva a szegmens van kijelölve, a lenti beállítások csak rá vonatkoznak. A sor a szegmens nevét, a pontjainak számát és a vonaltípusát mutatja, például „8 pts · gradient”. Fölé víve az egér a Delete segment gombot mutatja, ami törli a szegmenst a horgonyaival együtt.
• Egy horgony sora a szegmensen belüli sorszámát mutatja (a vonal ebben a sorrendben halad át rajtuk). A sorra kattintva megjelennek az Arrival, Anchor target és helyzetbeállításai. A sor megnevezi az elemet, amelyhez a horgony rögzítve van (például Image vagy Column), vagy a Free (page %) feliratot, ha szabad helyzetű. Amíg az oldal adott része nem töltődött be az élő előnézetben, az elem azonosítóját mutatja. A jobb oldali jelvény az Arrival beállítást mutatja. Fölé víve az egér a Delete anchor gombot mutatja.
• Add anchor: új horgonyt tesz a szegmens végére. A kattintás után a sor „Click on the page…” szövegre vált, és az élő előnézet fölött felirat kéri, hogy kattints az oldalon oda, ahová a horgonyt szánod.
• Add segment: új, üres szegmenst tesz a vonal végére. Horgonyokat az Add anchor gombbal adsz hozzá.

Editing. Megmutatja, mire vonatkoznak a lenti beállítások: a szegmens nevére, a szegmens neve utáni horgonysorszámra, vagy a szegmensek számára, ha az All Segments van kijelölve.

Arrival. Csak kijelölt horgonynál látszik. Megadja a vonal alakját az előző horgonytól a kijelölt horgonyig.

Beállítás	Mit csinál
Arrival	Smooth: sima ív, ami átfolyik a szomszédos horgonyokon. Line: egyenes vonal a horgonyig. Curve: egyetlen, az egyik oldalra hajló ív (a Curve side és Bow szerint). Gap: rajzolás nélkül ugrik a horgonyhoz, így szünet marad a vonalban.
Curve side	Csak Curve esetén. Az ív a haladási irányhoz képest melyik oldalra hajlik: Left vagy Right.
Bow	Csak Curve esetén. Mennyire hajlik el az ív az egyenestől, 0 (egyenes) és 1 között. A hajlítás a két horgony távolságával nő.

Anchor target. Csak kijelölt horgonynál látszik. Megmutatja, mihez kapcsolódik a horgony.

• Anchor Target: az elemet mutatja, amelyhez a horgony rögzítve van, a nevével, az azonosítójával és a Pinned címkével. Elemhez nem kötött horgonynál Free position és a horgony helye az oldal százalékában, Free címkével. A rögzített horgony az elemmel együtt mozog, így a vonal követi az elemet, ha az elrendezés változik. Hogy másik elemhez rögzítsd, húzd a pontját az élő előnézetben arra az elemre. Üres háttérre húzva szabad helyzetű lesz.
• Detach gomb (a felirata a „free position” szavakkal folytatódik): csak elemhez rögzített horgonynál. Leválasztja a horgonyt az elemről, és ugyanazon a ponton tartja az oldalon, az oldal szélességének és magasságának százalékában tárolva.

Device Position. Csak kijelölt horgonynál, ha a Device Notebook, Tablet vagy Mobile.

• Position Status: Inherited from a wider screen, ha a horgony egy szélesebb képernyő helyzetét használja, vagy Custom position on és a képernyő neve, ha itt saját helyzete van. Egy megjegyzés kimondja, hogy az aktuális méreten elmozgatott pont a szélesebb méreteken nem mozdul.
• Reset to inherited: csak ha a horgonynak saját helyzete van az aktuális méreten. Törli, így újra a szélesebb képernyő helyzetét használja.

Stroke style. A kijelölt szegmens (vagy All Segments esetén az összes) színét, vastagságát, mintáját és rétegrendjét adja meg.

Beállítás	Mit csinál
Color	A vonal színe. A színválasztó egyszínű, lineáris vagy sugaras átmenetes színt is elfogad.
Width	A vonal vastagsága képpontban, 1 és 500 között.
Line style	Full (folytonos), Dashed (szaggatott), Dotted (pontozott).
Stacking	Over content: a vonal az oldal tartalma előtt. Behind content: a tartalom mögött.
Copy this style to all segments	A kijelölt szegmens Stroke style beállításait az összes szegmensre alkalmazza. Csak szegmens vagy horgony kijelölésekor látszik, All Segments mellett nem.

Tip / stamp. Egy alakzatot ad a vonalhoz, vagy a rajzolt végén, vagy a hossza mentén ismételve. A kapcsoló bekapcsolása megjeleníti a beállításokat.

Beállítás	Mit csinál
Mode	Pen Tip: az alakzat egyszer, a rajzolt vonal végén látszik, és a vonallal együtt halad. Stamp Trail: az alakzat a kirajzolt vonal mentén ismétlődik, a Gap szerinti távolsággal.
Shape	Beépített alakzatok: Dot (kitöltött kör), Ring (körvonal), Arrow (nyílhegy), Double (dupla nyílhegy), Heart (szív), Star (ötágú csillag), Spark (négyágú szikra), Footprint (lábnyom). Beépített alakzat választása lecseréli a könyvtári ikont vagy az egyéni SVG-t.
Icon library…	Kereshető ikonrácsot nyit, amiből beépített alakzat helyett ikont választhatsz. A választás után megjelenik az Icon beállítás.
Custom SVG…	Egyéni SVG-útvonalra váltja az alakzatot, és megjeleníti az SVG path mezőt.
SVG path	Az egyéni alakzat egy SVG-útvonal d attribútumaként. A mező helyőrzője szerint az útvonal 0 köré legyen középre téve, és körülbelül -1 és 1 között fusson.
Icon	A használt könyvtári ikon neve, vagy Pick an icon… a választás előtt. Rákattintva megnyílik az ikonrács egy másik ikonhoz.
Size	A toll hegyének vagy az egyes bélyegeknek a mérete, 2 és 60 között.
Rotation	Az alakzat rögzített szögű elforgatása, -180 és 180 fok között. Bekapcsolt Auto-rotate to line mellett ez a szög a vonal irányához adódik hozzá.
Gap	Csak Stamp Trail esetén. A bélyegek távolsága a vonal mentén képpontban, 8 és 200 között.
Auto-rotate to line	Az alakzatot a vonal adott helyen mért haladási irányába fordítja (plusz a Rotation). Kikapcsolva a Rotation szögében marad.
Alternate left / right	Csak Stamp Trail esetén. Minden második bélyeget tükröz, így a bélyegek bal és jobb változatban váltakoznak, mint egy lábnyomsor.

Settings fül

A Settings fül az egész vonalra érvényes beállításokat tartalmazza: hogyan rajzolódik, és hogyan töltődik be az oldal.

Draw behaviour.

Beállítás	Mit csinál
Roughness	Egyenetlen, kézzel rajzolt hatást ad a vonal szélének, 0 (tiszta, egyenletes) és 16 (legdurvább) között. Érintőképernyős eszközökön (telefon, tablet) nem érvényesül.
Smooth draw	Bekapcsolva a vonal kirajzolt hossza több képkocka alatt fokozatosan éri utol a görgetési helyzetet, kikapcsolva pontosan követi.
Start delay	Az oldal betöltése után mennyi ideig vár a vonal a rajzolás kezdetéig, ezredmásodpercben, 0 és 60000 (60 másodperc) között.

Page load. Betöltőképernyőt ad az oldalhoz. A kapcsoló bekapcsolása megjeleníti a beállításait.

Beállítás	Mit csinál
Preloader	A betöltőképernyő animációja: No Preloader (animáció nélkül) vagy Type 1 … Type 16.
Preloader color	Az animáció színe. Nem látszik, ha a Preloader No Preloader.
Overlay color	Az oldalt takaró betöltőképernyő háttérszíne.
Preloader Preview	A kiválasztott animációt játssza le az aktuális színekkel. Nem látszik No Preloader esetén.

Az előnézet vezérlői

• Editor tracking preview: az élő előnézetben a kirajzolt rész mögött halványan megmutatja a teljes vonal útvonalát, hogy szerkesztés közben látszódjon a teljes pálya. Csak a szerkesztőre vonatkozik, az élő oldalra nem.
• Play: az élő előnézetben elölről lejátssza a vonal kirajzolódását.
• Preview scrub: azt állítja, a vonal mekkora része van kirajzolva az előnézetben, 0% (semmi) és 100% (az egész) között, így a rajzolás bármely ponton ellenőrizhető.
• Live Page Preview: a Device szerinti szélességben mutatja az oldalt, rajta a vonallal, fölötte az eszköz nevével és szélességével. A horgonyokat az Add anchor után az oldalra kattintva helyezed el. Egy horgony pontját elemre húzva rögzíted ahhoz, üres háttérre húzva szabad helyzetű lesz.