MagyarmagyarSlider Revolution
Vizuális WordPress-bővítmény csúszkák, körhinták és hős szekciók építéséhez: telepítés, első lépések és tartalomjegyzék.
A Slider Revolution egy vizuális, húzd-és-ejtsd szerkesztő a WordPresshez. Vele modulokat készíthetsz: diavetítést (csúszkát), körhintát vagy hős szekciót (az oldal tetején álló, nagy, animált nyitókép). A modulokat az oldalaidba blokkal vagy shortcode-dal illesztheted be.
A bővítmény fő részei:
- Bővítmény-vezérlőpult: itt látod a moduljaidat, itt hozol létre újat, itt éred el a globális beállításokat, a sablonmintákat és a kiegészítőket.
- Modulszerkesztő: a vizuális munkaterület a rétegekhez, diákhoz, animációkhoz és interakciókhoz.
- Sablonminták és kiegészítők: kész modulok és bővítő funkciók, amelyek a licenc regisztrálása után érhetők el.
Követelmények
Szekció neve “Követelmények”- WordPress, a hivatalos WordPress-követelmények szerint: ajánlott PHP 7.2 vagy újabb, MySQL 5.6 vagy újabb, HTTPS-támogatás.
- Időnként kimenő kapcsolat a gyártó szervereihez (frissítésekhez és prémium sablonminták letöltéséhez). Részletek: Rendszerkövetelmények és hibaelhárítás.
Telepítés és első lépések
Szekció neve “Telepítés és első lépések”- Telepítsd és aktiváld a bővítményt, majd regisztráld a licenckulcsot (Telepítés, licenc, frissítés).
- Nyisd meg a Slider Revolution → Bővítmény-vezérlőpult oldalt (Bővítmény-vezérlőpult).
- Szükség esetén állítsd be a globális beállításokat.
- Hozd létre az első modult (Modulok létrehozása).
- Szerkeszd a modult a modulszerkesztőben.
- Globális beállításokA bővítmény egészére érvényes alapértelmezések: jogosultságok, töréspontok, betűtípusok, optimalizálás, adatvédelem.
- A modulszerkesztőA vizuális szerkesztő öt területe: felső sáv, színpad, idővonal, bal és jobb oldalsáv.
- Adatvédelem és GDPRMit küld és mit nem küld a bővítmény, és hogyan állítsd be a helyi betűtípusokat, a süti-hozzájárulást és a YouTube cookie nélküli módot.
- Áttérés az SR6-ról az SR7-reMi változott a Slider Revolution 7-ben, és hogyan frissíthetsz a 6-os verzióról.
- Gyakori kérdésekLicenc, AI-kreditek, SR6-SR7 áttérés és használat: rövid válaszok a leggyakoribb kérdésekre.
Első lépések, vezérlőpult és frissítés
- Telepítés, licenc, frissítésA bővítmény telepítése, a licenckulcs regisztrálása és a frissítések kezelése.
- Bővítmény-vezérlőpultA Slider Revolution kezdőoldala: felső sáv, hírek, frissítések és licenc, modulkönyvtár.
- Modulok létrehozásaÚj modul létrehozása üres vászonról, a Gyorsindító-generátorral vagy sablonmintából; importálás és a modul beillesztése.
- Modulkönyvtár és modulmenüA vezérlőpult modulok szekciója: eszköztár, szűrés, mappák, a modulmenü műveletei, a lomtár és a beágyazás rövidkódja.
- SablonkönyvtárA sablonminták böngészése, szűrése, előnézete és telepítése, a csomagok és az oldalak létrehozása.
- Gyors szerkesztésA gyorsszerkesztő: szövegek, képek, videók, színek és betűk módosítása a modulszerkesztő megnyitása nélkül, az AI-támogatással együtt.
- Licenckulcs kezelése és feloldásaMire való a licenckulcs, mikor záródik le, hogyan oldatod fel, és hogyan költöztetheted másik tartományra.
- Frissítés FTP-vel és a gyorsítótárak ürítéseA bővítmény frissítése FTP-n át, és a gyorsítótárak ürítése frissítés után.
- Tömeges stílusszerkesztőSzínek, betűcsaládok és stílusértékek cseréje a modul sok rétegén egyszerre: útvonalak, szűrők, célrétegek és a futtatás.
- Slider Revolution blokkModul beillesztése oldalba vagy bejegyzésbe a blokkszerkesztőben: modulválasztás, elrendezés, felugró ablak, eltolások, mélység és az oldalpanel.
- Rendszerkövetelmények és hibaelhárításSzerver- és böngészőkövetelmények, a rendszerellenőrzés pontjai és a gyakori problémák megoldása.
A szerkesztő bemutatója
- A szerkesztő felső sávjaA felső sáv három része: a panelgombok, az eszközválasztó és az előnézeti eszköztár.
- A színpadA szerkesztő központi munkaterülete: átméretezés, rétegek kijelölése, rétegeszköztár és helyi menü.
- Tervezési módA tervezési mód nyolc panelje: réteg, stílus, extra stílus, interakció, parallax, láthatóság, attribútumok és akadálymentesség.
- Animációs módAz animációs mód: kész animációk az Alapok módban, részletes vezérlés a Haladó módban, animációs célpontok, kulcsképkockák és sávok szétválasztása.
- Műveleti módA műveleti mód (action mode) nyolc műveletkategóriája: hivatkozás, dia, jelenet, réteg, görgetés, modál, média és teljes képernyő.
- Az idővonalAz idővonal felépítése: felső sáv, sávok és kulcsképkockák, attribútumsávok, jelenetváltó és a gyors jelenetbeállítás.
- A Diák oldalsávA statikus dia, a dialista és a diabeállítások fülei: bélyegkép, előrehaladás, ütemezés, paraméterek, akadálymentesség.
- A Rétegek oldalsávRétegek kijelölése, rendezése, átnevezése, zárolása, elrejtése, szűrése és tömeges szerkesztése a Rétegek oldalsávon.
- A Hozzáadás oldalsávRétegek felhelyezése a színpadra: Gyors hozzáadás és az összes rétegtípus.
- A Beállítások oldalsávA modulszintű beállítások panelei: modulbeállítások, tartalomforrás, körhinta, diavetítés, navigáció, görgetés, modál, extra stílus, akadálymentesség, böngésző, egyéni szkriptek, kiegészítők.
Szerkesztő: felületelemek és panelek
- Réteg panel: tartalomA réteg tartalmát meghatározó szakaszok: dia háttere, szöveg, számláló, kép, hang, SVG és videó.
- Réteg panel: pozíció, méret és elrendezésA Réteg panel elrendezési szakaszai: sorok és oszlopok, pozíció és méret, tartalom viselkedése, elrendezés, átméretezés eszközök között.
- Stílus panelA Stílus panel szakaszai: szöveg, SVG-stílus, kiemelések, háttér, tárolósormagasság, szegély és térközök.
- Extra stílus panel (réteg)A réteg extra stílusai: 3D forgatás, átlátszatlanság, keverési és szűrési módok, üveg-, ragyogás-, elmosás- és anyageffektek, minták, árnyékok, körvonal és tüskék.
- Láthatóság panel (réteg)Melyik eszközméreten látszik a réteg, mikor jelenik meg, melyik diákon van jelen egy globális réteg, és hogyan ütemezheted.
- Attribútumok panel (réteg)HTML-azonosító, osztályok, rel, tabulátorindex, a média alt- és title-szövege, valamint a burkolóelem attribútumai.
- Akadálymentesség panel (réteg)Hogyan jelenik meg egy réteg a képernyőolvasóknak: elrejtés, szerepkör, név és felugró ablak jelzése.
- Akadálymentesség panel (modul)A modul képernyőolvasó-támogatása: ARIA-attribútumok, diaváltások bejelentése, a navigációs elemek címkéi és a beépített ellenőrzés.
- Böngésző és eszköz panelHogyan viselkedik a modul a böngészőben és mobilon: figyelés, szüneteltetés, deep link, képfelbontás, kimenet, gyorsítótár és mobilkorlátozások.
- Modálként való használat panelA modulból nyíló modális (felugró) ablak helye, sebessége, oldalgörgetése, háttérrétege és beágyazási lehetőségei.
- Gyorsbillentyűk panelA modulszerkesztő billentyű- és egérparancsai a munkaterületen, az idővonalon és általánosan.
- Navigáció panelHogyan lapozhatnak a látogatók a modulban: vezérlők, egérgörgő, billentyűzet és érintés.
- Navigációs vezérlők paneleiA nyilak, felsorolásjelek, fülek, bélyegképek és a csúszka stílusa, elrendezése, viselkedése és stíluszerkesztője.
- Modulbeállítások panelA modul címe és típusa, a reszponzív viselkedés, a méretkorlátok, a tartalomfolyam-konténer és a haladó HTML-, térköz-, pozíció- és skálázási beállítások.
- Carousel beállításai panelA körhinta típusú modul elrendezése, görgetése, stílusa és a szomszéd diákra ható átmeneti effektek.
- Diavetítés, sorrend és folyamat panelAutomatikus lapozás, ismétlések, szüneteltetés, folyamatjelző sáv, alapértelmezett dia-időtartam, kezdő dia, sorrend és a modul indítása.
- Interakció panel (réteg)Egérkurzor, az egér mozgására reagáló réteg és rámutatáskor megjelenő stílus beállítása, valamint a kattintásra váltó második szöveg.
- Parallax panel (réteg)Görgetésre és egérmozgásra elmozduló réteg: késleltetés, easing, elmozdulás, méretezés, forgatás, szűrők és görgetésvezérelt idővonal.
- Görgetés és parallaxis panel (modul)A modul parallaxishatásának be- és kikapcsolása, az egeres és a körhintahúzásos parallaxis, a 3D-effektus és a görgetésalapú idővonal.
- Egyéni szkriptek panelA modul saját CSS- és JavaScript-kódja, a beszúrható elemnevek, API-parancsok, események és kész példaszkriptek.
- Történetmesélés panel (modul)Hogyan halad egy Történetmesélés típusú modul a látogató görgetésére: igazítás, tempó, simítás, mobil beállítások és a görgetési sáv.
- Tartalom forrása panelHonnan származzon a modul tartalma: egyéni galéria, WordPress-bejegyzések, WooCommerce-termékek vagy közösségi média, szűrők, rendezés és korlátok.
- SzínválasztóA szerkesztő minden színmezőjéből nyíló színválasztó: egyszínű és színátmenetes kitöltés, értékek, palettek és arculati színek.
- KépszerkesztőKépréteg képének vágása, forgatása, tükrözése, perspektívája, színkorrekciója, szűrői és elmosása a beépített képszerkesztőben.
- Egy réteg HTML-címkéjének módosításaHogyan cserélheted a réteg alapértelmezett HTML-elemét például h2 címkére keresőoptimalizálási célból.
- Egyedi betűtípusok hozzáadásaSaját betűtípusfájlok feltöltése, külső CSS-címről (Adobe Fonts, Bunny Fonts) betöltött és saját szerveren tárolt betűtípusok beállítása, tippek és hibaelhárítás.
- Képoptimalizálás és ideális képarányA képek automatikus optimalizálása mentéskor, a beállítások finomhangolása és a megfelelő képarány kiválasztása.
Animációk
- Be és Ki animációkAz Alapok mód Be és Ki gyűjteménye: minden belépő és kilépő előbeállítás mozgása, beállításai és alapértékei.
- Additional animációkAz Additional gyűjtemény: egyszeri mozdulatok, ismétlődő mozgások, képpásztázás és nagyítás, megjelenések és stilizáló hatások.
- Szöveges animációkSzöveg- és gombrétegek külön előbeállításai: sorok, szavak és betűk szerint animáló Be és Ki előbeállítások.
- Háttérátmenetek: áttűnés, felfedés és színA dia hátterének Átmenet gyűjteménye: az Áttűnés, a Kivágás / felfedés és a Szín kategória előbeállításai.
- Háttérátmenetek: csúsztatás, zoom és 3DA dia hátterének Átmenet gyűjteménye: a Csúsztatás, a Zoom és a 3D kategória előbeállításai, beállításai és hosszuk.
- Háttérátmenetek: folyékony és torzítóA dia hátterének Átmenet gyűjteménye: a Fluid és a Distort kategória előbeállításai, beállításai és hosszuk.
- Háttér: pásztázás és nagyításA dia hátterének Pásztázás és nagyítás gyűjteménye: tizenöt kész mozgás a háttérképhez, és a mozgás eltávolítása.
- Háttér: szűrőkA dia hátterének Szűrés gyűjteménye: szemcse, hibahatás, elmosás és stilizáló szűrők az átmenet idejére.
- Animációs célpontok: szöveg felosztásaA Chars, Words és Lines célpont: szövegréteg karakterenkénti, szavankénti és soronkénti animálása kulcsképkockákkal.
- Animációs célpontok: rétegA Réteg célpont: egy réteg átlátszatlansága, pozíciója, mérete, forgatása, árnyékai, színei és az SVG-körvonal rajzolása kulcsképkockánként.
- Animációs célpontok: háttérA Háttér célpont: a diák háttere közti átmenet időzítése, a bejövő és a távozó háttér mozgása, színszűrők, utófeldolgozó effektek és 3D hatások.
- Animációs célpontok: maszkolásA Maszk eltolása és a Tartalomvágás célpont: a réteg elcsúsztatása egy maszkon belül, illetve egy részének levágása animáció közben.
- Animációs célpontok: burkolóelem és szűrőA Burkolóelem mozgása és a Szűrőanimáció célpont: a réteget tartó doboz mozgatása mozgáspályán, valamint elmosás és színszűrők a rétegen és a háttérén.
- Animációs célpontok: pásztázás és nagyításA Pásztázás és nagyítás célpont: a kép pozíciója, nagyítása és forgatása kulcsképkockánként, mozdulatlan keretben (Ken Burns hatás).
- Animációs célpontok: effektek (WebGL)Az Effects (WebGL) célpont: elmosás, szemcse, glitch, színezés és más vizuális effektek kép-, alakzat- és videórétegeken, kulcsképkockánként.
Akciók és interakciók
- Műveleti mód: az oldalsáv és a közös beállításokHogyan adsz hozzá, másolsz és törölsz műveleteket, és mit jelent a Típus, az Esemény, a Trigger és az Időzítés minden művelet paneljén.
- HivatkozásműveletekMenülink és görgetés, egyszerű link, visszahívási függvény és iOS-giroszkóp engedélye: a rétegekből induló hivatkozások és szkriptek beállításai.
- DiaműveletekUgrás egy megadott diára, valamint a diavetítés szüneteltetése, folytatása és váltogatása rétegekről.
- JelenetműveletekJelenet lejátszása és két jelenet váltogatása rétegekről induló műveletekkel.
- Réteg- és számlálóműveletekCSS-osztály váltása, kattintás szimulálása másik rétegen, valamint számlálók indítása és alaphelyzetbe állítása.
- Görgetési műveletekAz oldal sima görgetése egy elemhez vagy a modul alá: azonosító, eltolás, időtartam és easing-görbék.
- Modálműveletek és modul megnyitása modálkéntModális ablak megnyitása és bezárása műveletekkel, és lépésről lépésre: modul előkészítése, beágyazása és négy megnyitási módja.
- MédiaműveletekLightbox megnyitása, hang- és videórétegek lejátszása, leállítása, némítása, újraindítása, időponthoz ugrás és hangerő beállítása.
- Teljes képernyős műveletekA modul böngészőablakot kitöltő nézete: belépés, kilépés és váltás rétegekről induló műveletekkel.
Addonok és könyvtárak
- KiegészítőkönyvtárA Kiegészítők ablak: kategóriák, szűrés, rendezés, a csempék jelzései, a részletek panel, a modulhoz adás és a globális kiegészítők.
- EffektkönyvtárKész effektek böngészése, szűrése és hozzáadása réteghez, dia háttérhez vagy modulhoz: kategóriák, célszűrő, gyűjtemények, jelvények és a hozzáadás menete.
- ElemkönyvtárA Slider Revolution kész ikonjai, képei és videói: kategóriák, keresés, rendezés, kedvencek, a részletek ablak és a beszúrás menete.
- Filmstrip kiegészítőEgy kép-, videó- vagy alakzatrétegből sok képből és videóból álló mozgó sáv: előbeállítások, elrendezések, mozgás, interakció és a médialista.
- Filmstrip: az elrendezések beállításaiA Filmstrip panel Advanced fülének tíz elrendezés-specifikus szakasza: Coverflow, Path, Stack, Cascade, Zoom Slide, 3D Showcase, Sphere, Tornado, Spiral és Band.
- Filmstrip Page FXMozgó kép- és videósáv bejegyzésbe vagy oldalra: a Page FX · Filmstrip blokk, a Galéria és Oszlopok blokkra tett effekt, és a Filmstrip párbeszédablak beállításai.
- Chalk Line Page FXKé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.
- Pan & Zoom Page FXLassú nagyítás vagy pásztázás egy képen bejegyzésben vagy oldalon: önálló Page FX blokk vagy effekt Kép és Borító blokkon, a párbeszédablak beállításaival.
- Commerce Revolution kiegészítőA modulok összekötése a WooCommerce-bolttal: termékforrás, variációválasztók, feltételes megjelenítés, ismétlők, szűrők és a WooCommerce metaváltozók.
- AI Translate kiegészítőA modulok szövegeinek gyors, automatikus fordítása több nyelvre AI-val: modulszintű beállítások, rétegenkénti fordítások, előnézet és nyelvenkénti láthatóság.
- Modulok fordítása az AI Translate kiegészítővelLépésről lépésre: a kiegészítő felvétele, fordítás a beépített AI-motorral vagy a WPML bővítménnyel, tudnivalók és hibaelhárítás.
Teljesítmény, kompatibilitás és hibaelhárítás
- Betöltési sebesség és teljesítményHogyan mérd az oldalad sebességét, mit jelent a Lighthouse és a Core Web Vitals, és mit tehetsz a modulokkal és a tárhellyel a gyorsabb betöltésért.
- LCP (Largest Contentful Paint) és a Slider RevolutionMit mér az LCP, mikor érdemes foglalkozni vele, és hogyan javíthatod a modulok képeivel, videóival és a PageSpeed-kapcsolóval.
- Szerver- és böngészőtömörítés (gzip, brotli)Mi a szervertömörítés, miért gyorsítja az oldalt, hogyan ellenőrizheted, és mit tegyél, ha nincs bekapcsolva.
- WP Rocket kompatibilitásMit állíts be a WP Rocketben, ha a modulok nem jelennek meg: a JavaScript-fájlok kizárása a késleltetésből.
- Ütközések tesztelése és megoldása (WPBakery is)Lépésről lépésre, hogyan derítheted ki, hogy a modul hibáját a téma vagy egy másik bővítmény okozza, és hogyan javítható a WPBakeryben balra tolódó modul.
- Biztonságos kísérletezés: helyi vagy tesztoldal használataHogyan szerkeszthetsz modult az éles oldal érintése nélkül egy offline vagy staging oldalon, exportálással és importálással.
- Tárhely-kapcsolati hibák javításaMit tegyél, ha egyes tárhelyeken (például OVH, Hostinger) a bővítmény nem éri el a frissítési szervert: a javítóbővítmény telepítése.
- Biztonság és sebezhetőségek bejelentéseHogyan védi a gyártó a bővítményt két biztonsági csatornával, mit tehetsz te ügyfélként, és hogyan jelenthet be hibát egy biztonsági kutató.
Fejlesztőknek
- Hookok: dinamikus tartalom és kimenetA Slider Revolution stabil, harmadik fél számára szánt action és filter hookjai a dinamikus tartalomhoz, a poststreamekhez és a megjelenített HTML-hez.
- Hookok: modul- és diaéletciklus, import és exportA modulok és diák létrehozásához, mentéséhez, törléséhez, importjához és exportjához tartozó hookok.
- Hookok: betöltés, beállítások, szerepkörök és kiegészítőkA frontend betöltés, a globális beállítások, a jogosultságok és a kiegészítők AJAX-felületének hookjai.
- Egyedi kód átvezetése: JavaScript és PHPHogyan működik a modulok automatikus frissítése a Velocity motorra, és mit kell lecserélni az SR6-os egyedi JavaScript és PHP kódban.
- Kimeneti HTML és CSS szelektorok változásaiAz SR6-os azonosítók, elemnevek és osztályok megfelelői az SR7 Velocity motorban egyedi CSS-hez és JavaScripthez.
Készült: