# Chalk Line Page FX

> Kézzel rajzolt hatású vonal az oldalon görgetés közben: a Page FX · Chalk Line blokk és a Chalk Line szerkesztő vonal-, stílus- és oldalbetöltési beállításai.

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.