Slider Revolution: Ghidul suprem

Slider Revolution este literalmente unul dintre cele mai populare pluginuri WordPress astăzi. Cu peste 400 de mii de vânzări și un rating mediu de 4,75, pluginul și-a dovedit eficacitatea și măreția.

Revolution Slider: Ce face pluginul atât de grozav

Slider Revolution a fost dezvoltat de Themepunch. Acest plugin este un constructor pentru crearea de conținut bogat și dinamic pentru pagini web. Accentul este pus pe „dinamic”, deoarece vă permite să construiți diapozitive palpitante, adăugând mișcare paginilor.

Pluginul este furnizat cu un constructor ușor de utilizat și o mulțime de opțiuni. Pachetele de setări bine elaborate permit utilizatorului să ajusteze fiecare detaliu al glisorului și permite lucrul cu tipuri absolut diferite de conținut. Glisoarele pot fi create pentru postări separate, pentru paginile întregi și părțile lor mici. Pentru a fi mai precis cu pluginul, puteți crea:

• glisoare și carusele de imagine
• glisoare pentru postări recomandate
• fluxuri de social media
• galerii media
• blocuri de eroi și primele pagini

Motive pentru care ar trebui să utilizați Slider Revolution cu site-ul dvs. web

Nu poți greși cu Slider Revolution. Un plugin cuprinzător cu instrumente ușor de utilizat este o soluție perfectă pentru a crea glisoare frumoase și iată motivele pentru care.

Plugin inclus

Astăzi, aproape fiecare temă WordPress vine cu un plugin Slider Revolution. De obicei, pachetul tematic include versiunea gratuită a pluginului. Pluginul inclus este limitat la funcții de bază, dar totuși, este foarte convenabil să obțineți tema împreună cu generatorul de glisare.

Cu toate acestea, dacă doriți să accesați multe dintre funcțiile pluginului, aveți opțiunea de a cumpăra pluginul independent. Licența obișnuită vă va costa 29 USD și o puteți obține pe piața Codecanyon.

Pentru licența extinsă, va trebui să plătiți aproximativ 150 USD și să obțineți un an de asistență tehnică doar pentru 9 USD.

Da, pluginul vă poate costa niște bani, dar puteți crea slide-uri grozave chiar și cu licența obișnuită a pluginului.

Șabloane

Pluginul uimitor nu numai că vă va impresiona cu instrumentele și funcțiile, dar are și o colecție de machete prefabricate arătoase. O colecție minunată de șabloane prefabricate și biblioteca de obiecte media gratuite pe care le puteți utiliza pe diapozitiv va simplifica și accelera crearea diapozitivelor. Puteți selecta șablonul pentru orice proiect al dvs. și, în loc să construiți un glisor de la zero, vă puteți economisi timp și puteți continua cu aspectul pre-construit.

Pur și simplu importați șablonul pe care l-ați ales și începeți să creați imediat.

Pe lângă aceasta, veți avea acces la marea bibliotecă gratuită de diferite obiecte, cum ar fi pictograme de font, imagini de fundal, obiecte PNG transparente, SVG și altele. Le puteți folosi și le puteți introduce cu ușurință în diapozitive.

Editor vizual

Slider Revolution este furnizat cu un editor WYSIWYG uimitor care face foarte simplă crearea și modificarea șabloanelor de glisare. Mulți proprietari de site-uri le este dificil să scrie coduri complexe sau să angajeze o echipă separată pentru această sarcină. Datorită editorului de glisare, vă puteți economisi timp și vă puteți bucura de funcția de glisare și plasare pentru a crea diapozitive remarcabile.

Pluginul slider vă permite să fiți mai creativ cu glisoarele pe care le construiți și să le prezentați cu ușurință pe site-ul dvs. web. Veți avea o mulțime de opțiuni personalizate, cum ar fi construirea unei locații personalizate pentru glisor, alegerea întârzierii cursorului, adăugarea de tranziții, adăugarea de straturi media și așa mai departe. acest lucru se poate face în cel mai scurt timp folosind lista derulantă. În plus, pluginul are multe funcții de navigare care vă permit să schimbați stilul de navigare și să adăugați săgeți, marcatori, file și miniaturi.

Performanță de mare viteză

Slider Revolution este bine codificat pentru a se încărca rapid. Toate aspectele glisoarelor sunt optimizate și utilizează opțiuni avansate de depanare pentru a rezolva orice problemă, încarcă automat fișierele de bază și se adaptează cu funcțiile utilizate. De asemenea, folosește încărcare inteligentă lazy și este optimizat SEO.

Aspecte receptive

Una dintre cele mai mari probleme pe care le întâmpină mulți dezvoltatori web este că glisoarele nu au răspuns. Drept urmare, acele glisoare nu funcționează bine pe dispozitivele mici sau nu sunt afișate deloc. Capacitatea de reacție este o componentă esențială a experienței utilizatorului. Având în vedere volumul uriaș de trafic care vine de la telefoane mobile, va fi păcat ca glisoarele dvs. să nu funcționeze bine pe alte dispozitive.

Slider Revolution nu este doar un simplu glisor. Pluginul este gata de răspuns, așa că indiferent de diapozitive pe care le creați, puteți fi sigur că vor fi optimizate pentru orice dispozitiv pe care vor fi utilizate.

Slider Revolution s-a asigurat că setează punctele de întrerupere de răspuns pentru fiecare glisor, făcând ca orice design să arate grozav pe diferite dispozitive și pe ecrane mici. Indiferent de opțiunea pe care o alegeți - glisor simplu, carusel sau standard, puteți fi sigur că arată perfect pe orice dispozitiv.

Opțiuni de personalizare

Un alt avantaj al plugin-ului Slider Revolution este diversele sale opțiuni de personalizare. Puteți seta întârzieri pentru diapozitive, puteți alege săgeți de navigare, fundaluri paralaxe, puteți adăuga straturi media, inserați butoane, setați fonturi personalizate, adăugați margini și multe altele.

Pluginul Slider Revolution vă permite să personalizați orice. Pentru a economisi timp, puteți salva presetări pentru a le utiliza mai târziu în tranzițiile de diapozitive, stilurile de font și animațiile straturilor.

Suplimente Slider Revolution

Doriți să vă faceți glisoarele mai complexe și diversificate cu efecte de tranziție, animații?

esti gata! Slider acceptă diferite tipuri de conținut, cum ar fi postări de blog și postări curente, vă permite să utilizați fluxuri de pe platforme sociale precum Twitter, Facebook, Vimeo, YouTube și Instagram. Puteți adăuga linkuri, videoclipuri, imagini și text în cel mai scurt timp. Cu ajutorul funcției Variații, puteți construi un diapozitiv bogat în caracteristici și plin de informații pe care vizitatorii îl pot folosi.

Securitate

Securitatea este unul dintre cele mai importante aspecte atunci când vine vorba de site-uri web. S-ar putea să auzi că există o vulnerabilitate de război afectată de Slider Revolution în urmă cu câțiva ani. Din acel moment, Themepunch a sporit protecția software-ului și acum folosește o organizație terță parte pentru a audita problemele pluginului în mod regulat. Deci, puteți fi sigur că pluginul este foarte sigur.

Suport tehnic

Pluginul vine cu documentația detaliată și secțiunea mare de întrebări frecvente cu cele mai populare întrebări despre plugin. De aceea, este foarte ușor să începeți cu revoluția slider, chiar dacă nu aveți experiență de lucru cu ea. Disponibilitatea tutorialelor detaliate simplifică crearea diapozitivelor pentru site-ul web pentru toată lumea.

Surse de conținut

Pluginul se ocupă cu succes de crearea de glisoare pentru diverse surse de conținut. Indiferent dacă este un produs WooCommerce sau o postare comună, Slider Revolution are instrumentele.

Caracteristicile puternice fac din acest plugin o alegere numărul 1 pentru toată lumea. Avantajul său principal este că prezintă categoria unei soluții all-in-one. Nu aveți nevoie de pluginuri suplimentare, totul se află în interiorul pluginului.

De asemenea, trebuie să menționăm că este accesibil. Licența obișnuită vă va costa 26 USD. Având în vedere numărul de funcții pe care le obțineți pentru preț, Slider Revolution este cel mai accesibil plugin de glisare din industrie.

În acest ghid final, vom acoperi totul, de la instalarea pluginului până la adăugarea unui nou diapozitiv și plasarea acestuia pe site.

Instalarea pluginului și configurarea primară

Mulți dintre dezvoltatorii de teme includ Slider Revolution în pachetul de teme.

Dacă ați achiziționat una dintre temele premium WordPress de la StylemixThemes, nu trebuie să instalați pluginul manual. Slider Revolution va fi instalat automat odată cu importul demo.

Dacă pachetul temei pe care o utilizați nu include pluginul, trebuie să îl descărcați și să îl instalați manual. Pentru a obține o copie a Slider Revolution, urmați acest link .

Va trebui să cumpărați pluginul. Conectați-vă la contul dvs. Envato și efectuați achiziția. După aceea, descărcați fișierul - selectați opțiunea de descărcare pentru „Numai fișier WordPress instalabil”.

Acum trebuie să adăugați un nou plugin pe site-ul dvs. Accesați tabloul de bord — Plugin-uri > Adăugați nou . Odată ce instalarea este finalizată, activați pluginul.

Felicitări, ești gata și poți începe să creezi primul tău slider!

Cum se actualizează Slider Revolution

Themepunch lansează actualizări regulate ale pluginului slider. Pentru a-l actualiza, deschideți Slider Revolution din tabloul de bord și urmați fila Actualizări. Pe această pagină puteți găsi o mică secțiune cu titlul „Actualizări de pluginuri”. Aici este specificată ce versiune a pluginului este instalată în prezent pe site-ul dvs. web și o versiune disponibilă pentru actualizare.

De asemenea, puteți utiliza modul standard și mergeți la Tabloul de bord > Actualizări și instalați noua versiune a pluginului de acolo.

Slider Revolution: Noțiuni introductive

Dacă utilizați glisorul pentru prima dată, este posibil să nu fie suficient de clar cu toată terminologia folosită acolo. Există trei elemente majore cu care poți fi confundat. Sunt module, diapozitive și straturi. Fiecare dintre ele poate face parte dintr-un altul și poate lucra individual.

De exemplu, puteți crea un modul proiectat să acționeze ca un glisor și va conține diapozitive. Pe lângă aceasta, puteți realiza module precum meniuri de navigare sau anteturi, care nu sunt deloc glisoare, dar vor conține în continuare diapozitive. Motivul pentru care este Slider Revolution a fost creat inițial ca un generator de slider, cu toate acestea, acum este folosit și ca editor complet de site-uri web. Deci, cu ajutorul acestuia, puteți construi mult mai mult decât simple diapozitive.

Relația dintre module, diapozitive și straturi

Modulele sunt containere pentru diapozitive, care sunt containere pentru straturi.

Există module pentru a conține diapozitive. Fiecare modul trebuie să aibă cel puțin un slide. Când creați un modul gol, un diapozitiv gol este adăugat automat. Puteți crea diapozitive suplimentare sau puteți adăuga totul doar într-un singur diapozitiv. Depinde pe deplin de tipul de conținut pe care îl creați.

Slide -ul este un container pentru straturi. Fiecare diapozitiv trebuie să aibă cel puțin un strat. Când este creat un nou diapozitiv, un strat de fundal este adăugat automat. Acest strat este întotdeauna acolo, poate fi redenumit și făcut invizibil, dar nu poate fi eliminat. Această zonă de fundal poate fi umplută cu straturi.

Straturile conțin elemente vizuale, audio sau de aspect și sunt adăugate la diapozitive. Text, buton, imagine, audio, video, grup și rând sunt toate tipurile de straturi. Fiecare strat reprezintă o singură bucată de suport media. Straturile pot fi animate într-un mod care să realizeze cel mai bine ideea dvs.

Cum se utilizează Slider Revolution: setări globale

După cum am menționat deja, Slider Revolution are o mulțime de opțiuni, iar aceasta nu este o exagerare. De aceea, înainte de a începe să construiți glisorul, vă recomandăm să vă uitați mai întâi prin setările globale și să aflați principalele principii de lucru cu pluginul.

Dacă faceți clic pe Slider Revolution din tabloul de bord, veți putea deschide ecranul de configurare al pluginului.

Ecran de configurare

În partea de sus a ecranului puteți găsi fila cu următoarele opțiuni:

Module, actualizări, activare, știri, globalități, întrebări frecvente, asistență.

În această etapă, vom lucra doar cu cei doi: Module - pentru a crea unul nou și Globals - pentru a analiza setările globale ale pluginului.

Setări globale

Vom începe cu Globals . Setările globale sunt împărțite în principal în mai multe secțiuni de:

• General
• Puncte de întrerupere ale grilei de aspect implicit
• Fonturi
• Diverse

Aceste setări sunt responsabile pentru opțiunile implicite ale grilei receptive care se aplică la construirea unui nou glisor, încărcarea fontului personalizat, crearea bazei de date și multe altele.

Există doar câteva opțiuni pe care va trebui să vă concentrați. În primul rând, este capacitatea de răspuns, pentru a vă asigura că glisoarele viitoare arată bine pe orice dispozitiv. Iată un ghid rapid despre dispozitive și dimensiunile acestora.

În secțiunea Punct de întrerupere a grilei de aspect implicit , puteți seta lățimea în pixeli pentru diferite tipuri de dispozitive: desktop, notebook, tabletă și mobil.

Atâta timp cât fiecare dispozitiv are propria sa dimensiune, introduceți lățimea exactă pentru fiecare tip pentru a asigura afișarea corectă a unui glisor.

• Monitoarele desktop standard au o lățime de 1920px.
• Dispozitivele notebook, care includ toate laptopurile, MacBook-urile și tabletele orientate orizontal, au o lățime de aproximativ 1600 px.
• Tabletele orientate pe verticală au o lățime care nu depășește 778px (pe baza iPad-ului).
• Și dispozitive mobile. Aceasta este o parte importantă, deoarece în prezent, mai mult de jumătate din tot traficul de internet este generat prin intermediul dispozitivelor mobile și nu va fi satisfăcător dacă utilizatorii nu pot vedea glisoarele de pe site-ul dvs. în mod corespunzător. Cu toate acestea, acest lucru poate fi confuz, iar motivul este că smartphone-urile moderne au dimensiuni absolut diferite. Vă sugerăm să utilizați numărul, nu peste 500 px.

Al doilea lucru pe care ați putea dori să îl controlați este accesul la glisor. Opțiunea Permisiune vă permite să refuzați accesul la plugin pentru alți utilizatori, cu excepția administratorilor și editorilor.

Acum puteți începe să vă construiți glisoarele! Există trei opțiuni pe care le puteți folosi. Puteți începe de la zero și puteți construi un nou glisor, puteți exporta un fișier din șabloanele Slider Revolution sau puteți importa eșantion de glisoare incluse cu tema dvs.

În articolul nostru, vom revizui prima opțiune și vom construi un nou glisor de la zero. Acest lucru ne va permite să explorăm mai multe posibilități ale pluginurilor.

Crearea unui nou glisor

Acum, când am terminat cu unele setări primare, putem continua la crearea unui nou diapozitiv. Deschideți setările Slider Revolution și faceți clic pe New Blank Module.

Vi se va oferi să parcurgeți ghidul rapid. Faceți clic pe Ghid de pornire dacă doriți să urmați o lecție scurtă. Sau părăsiți ghidul pentru a sări peste acest pas.

Ecranul tău va fi împărțit în mai multe zone: din stânga ta există un cadru în care este afișat tot conținutul, din dreapta — este un spațiu de lucru cu secțiuni și setări.

Optiuni generale

Să începem cu Opțiunile generale . Faceți clic pe pictograma roată pentru a deschide setările. În primul rând, trebuie să ne denumim modulul. În secțiunea Titlu introduceți numele și duplicați-l pentru Alias ​​cu litere mici și cu liniuțe între cuvinte în loc de spații.

Aliasul este necesar pentru a adăuga glisorul la o pagină. De asemenea, puteți utiliza codul scurt furnizat, copiendu-l și plasându-l pe pagina sau postarea pe care doriți să vă afișați glisorul.

După aceea, putem personaliza tipul și înălțimea și lățimea zonei stratului de desktop. Aceste setări se află sub fila Aspect.

Pentru tip , aveți trei opțiuni din care să alegeți:

• Glisor — mai multe diapozitive animate care se rotesc pentru a fi afișate unul câte unul.
• Scenă — un singur diapozitiv care poate fi folosit ca modul de conținut.
• Carusel — multe diapozitive cu multiple vizibile în același timp.

Următoarea setare pe care trebuie să o specificăm este dimensionarea. Există, de asemenea, trei opțiuni disponibile:

Auto - acesta este parametrul implicit care întinde glisorul la lățimea principală a containerului, așa cum este definită de tema dvs. WordPress.

Lățime completă — o opțiune de glisare pentru lățime completă se întinde de la stânga la dreapta (tot trebuie să definiți înălțimea)

Ecran complet — pentru glisoare mari care umplu întregul ecran, indiferent de dimensiunea browserului sau a dispozitivului dvs.

Cu pluginul Slider Revolution, puteți anima fiecare parte a paginii de pe site. Vă rugăm să luați în considerare, atunci când faceți acest lucru, greutatea paginii dvs. va crește și, astfel, va dura mai mult timp pentru a vă încărca pagina. Ca rezultat, poate afecta negativ clasarea SEO.

Redimensionați setările

Redimensionarea clasică sau liniară asigură că glisorul se va comprima în mod corespunzător după configurarea setărilor principale pentru dimensiunea ecranului (de exemplu, un glisor de 1000x400px se va comprima la un glisor de 500x200px cu fonturile, imaginile și alte elemente de glisor).

Moștenirea inteligentă permite crearea automată a dimensiunilor dispozitivelor pe baza setărilor desktop pe care le alegeți, cu opțiunea de ajustare.

Configurarea personalizată sau manuală vă permite să setați dimensiunea glisorului folosind pixeli exacti, cu posibilitatea de a seta dimensiunile cursorului la diferite lățimi ale ecranului - desktop, laptop, tabletă și telefon.

Reactivitatea diapozitivelor

Trecând peste. Nu am terminat încă cu receptivitatea. Există o dimensiune a zonei Layer unde puteți specifica lățimea browserului.

De obicei, opțiunile sunt setate implicit la Dimensiuni automate și sunt specificați doar parametrii desktopului. Puteți face același lucru pentru alte opțiuni, pornindu-le.

De asemenea, dacă porniți dispozitivul specific, zona dvs. de lucru (containerul de diapozitive) va fi ajustată la parametrii dispozitivului selectat, adică puteți controla afișarea glisorului pentru dispozitivul de beton.

Pentru fiecare dispozitiv, vor fi specificate dimensiuni ale grilei din setările globale. Grila este zona în care se află straturile glisante. Nu există numere stricte pe care ar trebui să le introduceți. Vă veți da seama ce funcționează cel mai bine pentru dvs. după ce încercați să explorați mai multe opțiuni.  

Acesta a fost doar începutul, câteva opțiuni generale care vă vor ușura munca ulterioară cu glisorul. Și odată ce ați terminat cu această parte, puteți trece la pasul următor.

O privire mai atentă asupra opțiunilor

Pe lângă opțiunile generale, există alte trei file cu care veți interacționa foarte mult. Dorim să vă ghidăm prin setările principale cu care veți opera. Practic, crearea diapozitivelor are în vedere mai multe componente care sunt implicate în proces. Acestea sunt opțiuni generale, setări de navigare, opțiuni de diapozitive și straturi.

Nu am glumit când spuneam că Slider Revolution are o mulțime de opțiuni. Sunt prea multe elemente de acoperit, să le descriem ușor pe toate și apoi să le revizuim mai detaliat pe cele mai importante.

1. Opțiuni generale

Am atins deja câteva elemente din Opțiunile generale, cum ar fi titlul și aspectul. Cu toate acestea, pe lângă acestea, există și alte lucruri pe care trebuie să le ajustați.

În general, opțiunile generale vă permit să configurați următoarele:

Titlu — pentru a furniza numele glisorului.
Aspect — selectați tipul glisorului (glisor, scenă sau carusel) și dimensionarea (auto, lățime completă sau ecran complet). Acest lucru vă ajută să editați lățimile și înălțimile pentru zona stratului, poziția modulului dvs., o culoare sau o imagine implicită de fundal și multe altele.
Conținut — identifică modul de adăugare a conținutului la glisor. Puteți alege dintre 9 surse de conținut.

• Setări implicite — aici vă sugerăm să vă concentrați pe un parametru important — Durata diapozitivei (cât timp va dura fiecare diapozitiv).
• General - această secțiune include setări de prezentare de diapozitive pentru rotire automată, oprire la trecerea cu mouse-ul, diapozitive în buclă și selectarea unui prim diapozitiv desemnat. De asemenea, aici puteți ascunde sau dezactiva glisorul pe mobil sau sub lățimi specificate de pixeli.
• On Scroll — acesta permite utilizatorilor să selecteze efecte de defilare, cum ar fi paralaxa, adâncimi 3D, cronologie, estompare, estompare, tonuri de gri și multe altele. Toate efectele merg cu setări personalizabile.
• Spinner — sau preîncărcare, iar pluginul are 15 opțiuni de spinner din care să alegeți.
• Opțiunile avansate vă permit să activați încărcarea leneră, să selectați o imagine de rezervă sau să simplificați glisorul în browserele vechi.
• CSS/jQuery — aici puteți adăuga propriul cod personalizat la glisoare. Rețineți că acesta este mai bine să fie folosit de profesioniști sau utilizatori familiarizați cu conceptul de programare și codare.
• Ca modal - această opțiune specială este necesară în cazul în care doriți să creați un glisor care să apară ca o fereastră pop-up sau lightbox și vă oferă opțiuni pentru poziția glisorului, culoarea copertei și codul scurt de utilizat atunci când inserați glisorul modal în pagini.
• Skin — skin prezintă presetarea pe care o puteți crea și aloca straturilor de text (specifică culoarea evidențierii, titlului, textului de conținut).

Suplimente — aici veți găsi suplimente (notă – suplimentele sunt disponibile numai dacă v-ați achiziționat propria licență slider).

2. Opțiuni de navigare

Dacă intenționați să includeți mai multe diapozitive, opțiunile de navigare vă vor ajuta să adăugați instrumente de navigare la glisor, cum ar fi marcatori, săgeți și butoane.

Toate opțiunile includ setări ușor de personalizat pentru poziție/aliniere, dimensionare, vizibilitate și stil/presetări globale.

Elementele de navigare includ:

• Progres — bară de progres sau cerc care vizualizează progresul curent al diapozitivei.
• Săgeți — facilitează accesul vizitatorilor prin diapozitive.
• Marcatori — 14 stiluri de puncte de navigare de adăugat la diapozitiv.
• File — foarte util pentru glisoarele de conținut în care este necesară navigarea în filă.
• Thumbs — este necesar pentru a afișa o imagine în miniatură ca opțiune de navigare. Există 5 opțiuni disponibile.
• Dimensiune anterioară — specifică dimensiunea imaginii de previzualizare.
• Atinge — include opțiuni pentru derulare bloc, viteză și direcție.
• Tastatură — puteți activa navigarea cu tastatura (recomandat pentru accesibilitate).
• Mouse — permite controlul mouse-ului, cum ar fi funcția carusel sau derularea inversă.
• Nav Editor — această secțiune este pentru personalizarea săgeților, marcatorilor, file sau degetele mari cu propriul cod personalizat.

3. Opțiuni slide

Următoarea parte a setărilor este legată de opțiunile de diapozitive.

• Fundal: alegeți fundalul pentru diapozitiv. Alegeți dintre transparent, colorat (puteți adăuga un gradient), imagine, imagine externă sau un videoclip (YouTube, Video sau HTML5).
• Miniatură: definiți miniatura vizibilă de administrator și miniatura utilizată pentru navigare.
• Animație: alegeți animația de tranziție pentru diapozitive.
• Filtre — 22 de filtre diferite de adăugat la diapozitive.
• Progres — permite personalizarea lungimii diapozitivului, pauzei și vizibilității pe un diapozitiv.
• Reguli de publicare — controlați dacă diapozitivul este publicat sau nepublicat.
• Etichete și link - vă ajută să adăugați date personalizate de clasă, ID și HTML pentru diapozitiv, precum și un link.
• Parametri — adăugați până la 10 parametri personalizați pentru a-i utiliza în diapozitive și navigare.
• Straturi bucle — gestionați setările buclei dacă glisorul are un singur diapozitiv.
• On Scroll — personalizați-vă paralaxa și efectele de defilare pe diapozitiv.

Adăugarea de noi diapozitive

După ce terminați de setat glisorul și de ajustat toate opțiunile, este timpul să adăugați un nou diapozitiv la proiect. Puteți vedea cadrul, care afișează conținutul diapozitivului când îl adăugați. Acum e transparent. Puteți schimba opțiunea de fundal și puteți adăuga o imagine sau puteți seta culoarea.

Puteți încărca o imagine de pe computer sau puteți utiliza o sursă externă (prin adăugarea unui link). De asemenea, puteți seta culoarea ca fundal în loc de imagine. Se poate face destul de ușor.

Doar selectați opțiunea Colorat din meniul drop-down Tip din panoul Sursă, apoi faceți clic pe butonul BG Color pentru a vă alege culoarea. Dacă doriți să utilizați videoclipul, adăugați pur și simplu sursa.

Adăugarea unui nou strat la diapozitiv

În partea de sus a ecranului, veți găsi opțiunea +Add Layer . Folosiți-l pentru a adăuga un nou strat la diapozitiv. Există 8 opțiuni diferite.

Cele mai populare opțiuni, însă, sunt imaginile și textele cu suport de butoane dacă trebuie să adăugați câteva instrumente de navigare la glisor.

Opțiuni de straturi: cum se utilizează

Flexibilitatea Slider Revolution se bazează pe disponibilitatea mai multor opțiuni și pe capacitatea de a configura fiecare detaliu separat, precum și de a ajusta întreg proiectul de glisare. Straturile nu sunt o excepție. De fiecare dată când adăugați un nou strat la diapozitiv, puteți controla fiecare opțiune pentru acesta. În exemplul de adăugare a unei noi imagini la diapozitiv, vom revizui toți parametrii pe care opțiunile de straturi vă permit să îi modificați.

Când doriți să adăugați un strat de imagine la diapozitiv, faceți clic pe Imagine în meniul derulant Adăugare strat . Apoi încărcați imaginea dorită.

Lângă cadru, veți găsi diferite opțiuni de straturi (Conținut, Stil, Dimensiune și Poziție etc.).

Conținutul stratului afișează câteva informații de bază despre strat. Puteți seta încărcare leneră și puteți modifica tipul sursei acesteia.

Folosind opțiunile de stil pentru strat veți putea adăuga un fundal de culoare.

Următoarea opțiune este Spațierea . Spațierea ne ajută să mutăm stratul de sus în jos, de la stânga la dreapta, de jos în sus și de la stânga la dreapta. Sunt marcate cu litera „M”.

Poz și dimensiune. Setați alinierea, precum și poziția și dimensiunea stratului de imagine. Atât alinierea verticală, cât și cea orizontală pot fi modificate cu ușurință, pur și simplu faceți clic pe una dintre pictogramele de aliniere.

După aceea, puteți seta poziția cu opțiunile Vertical Offset from Aligned Position. Jucați cu parametrii X și Y pentru a vă muta stratul pe diapozitiv.

Strat Opțiuni avansate

Opțiunile de stil avansate vă permit să rotiți un strat orizontal, vertical și central și vă permit să adăugați umbre la straturi.

Opțiuni de animație layer

Animația este opțiunea majoră în Slider Revolution. Ideea principală a pluginului este să adăugați pe site-ul dvs. elemente animate în loc de elemente vizuale statice, standard.

Opțiunile de animație adaugă mișcare la diapozitive, folosind această acțiune puteți să animați diapozitivele și să setați apariția și ieșirea din animații.

Există două linii pentru opțiunile de apariție și ieșire: IN și OUT.

Fiecare linie este prevăzută cu un meniu derulant cu diferite tipuri de animații. În mod implicit, opțiunea de fade-in este setată pentru toate straturile. Încercați câteva animații pentru a vedea cum arată pe diapozitiv și alegeți-o pe cea mai bună.

Secțiunea de mai jos este folosită pentru durata animației, facilitarea animației și pentru definirea animației Start . Durata definește cât timp durează animația să se termine, opțiunea Start definește durata de timp după care animația va începe odată ce diapozitivul este încărcat. Ușurarea definește viteza cu care va progresa animația.

Cronologia animației

Dacă aveți mai multe straturi adăugate la diapozitiv, probabil că nu doriți să apară toate în același timp. Cronologia animației Slider Revolution vă poate ajuta să rezolvați această problemă. Este situat chiar sub cadrul nostru de lucru.

Începutul implicit al cadrului pentru fiecare strat este setat la 0 milisecunde, ceea ce înseamnă că straturile vor apărea pe ecran după 0 milisecunde în care este încărcat. Durata de apariție este de obicei setată la 3 secunde, ceea ce înseamnă că un strat devine complet vizibil în 3 secunde. Pentru a modifica opțiunile, alegeți stratul și editați-l prin specificarea unei alte valori.  

Asigurați-vă că setați valori diferite pentru un strat diferit, astfel încât acestea să nu apară deodată și să pară dezordonate.

Acum, să aruncăm o privire mai atentă asupra opțiunilor din Timeline

1.Vizualizare listă

Aceste pictograme pot fi folosite pentru a ascunde sau afișa Straturile și pentru a ascunde sau afișa rândurile pe baza alinierii verticale. Doar administratorul site-ului are acces la aceste opțiuni.

2. Durata cronologiei
Durata totală a cronologiei este definită în Opțiuni generale modul > Valori implicite. De asemenea, poate fi setat individual în Opțiuni diapozitive > Progres.

Tragând blocul în cronologia la stânga și la dreapta, puteți ajusta cu ușurință lungimea diapozitivului. O altă opțiune pe care o puteți face este să faceți clic pe pictograma ceas și să o editați în procente.

3. Previzualizează cronologia

Pentru a previzualiza cronologia, trebuie să faceți clic pe pictograma Redare sau pur și simplu să trageți blocul inactiv.

4. Redenumiți straturile

Pentru a redenumi stratul, faceți dublu clic pe textul stratului din Timeline și redenumiți-l. De asemenea, puteți edita titlul stratului din centrul de sus al Editorului.

5. Straturi z-index / Ordine de stivuire

Pentru a seta ordinea z-index/stivuire, trebuie doar să trageți straturi în cronologia.

6. Animații

Pentru fiecare strat, există o animație de intrare și ieșire și animații suplimentare Keyframe. Toate animațiile sunt prezentate în cronologie.

Trageți un bloc de animație pentru a ajusta punctul de pornire al animației în cronologie. Și editați durata animației trăgând punctul final al blocului

Opțiuni de buclă de straturi

Fila Buclă vă permite să creați animații în buclă. Puteți alege un tip de animație, puteți defini viteza și relaxarea buclei și puteți seta o oră de început și de sfârșit pentru buclă.

Există 8 tipuri din care puteți alege: Personalizat, Pendul Loops, Effect Loops, Wave, Wiggles, Rotating, Slide and Hover și Pulse. Fiecare animație în buclă are propriul set de opțiuni.

Pendulul vă face stratul să se balanseze dintr-o parte în alta. Printre opțiunile pe care le puteți seta se numără gradul de sfârșit și de început — acesta identifică grade între care va avea loc animația și punctul de origine X și Y — acest parametru determină punctul axei de la care se va roti stratul, îl puteți specifica în procente.

Effect Loops vă permite să alegeți dintre mai multe opțiuni - Grayscale, Blink, Flattern și Lithing. Toate efectele arată diferit, așa că vă recomandăm să vă uitați la fiecare opțiune pentru a alege care este cea mai bună pentru dvs.

Animația Wave face ca stratul să se rotească într-o mișcare similară cu unda. Se rotește în jurul unei axe din afara stratului. Puteți seta un punct de rotație X și Y pentru a determina poziția axei în jurul căreia se va roti stratul, un unghi de început pentru a identifica poziția de pornire a animației și o rază pentru orbita rotației.

Bucla Wiggle va face stratul să se miște dintr-o parte în alta - de sus în jos, de la stânga la dreapta și invers. Utilizați meniul derulant pentru a alege opțiunea care vă place.

Bucla de rotație face stratul să se rotească în jurul punctului setat al axei. Stratul se va roti și va forma un cerc complet dacă alegeți primul element din meniul derulant Rotire – elementul Rotire.

Pentru a vă deplasa stratul de la stânga la dreapta, de la dreapta la stânga, de sus în jos, în diagonală, puteți utiliza animația Slide and Hover. Puteți seta o poziție de început și de sfârșit pentru animație.

Animația Pulse face stratul dvs. să mărească și să micșoreze continuu. Specificați Zoom Start și Zoom End. Valorile implicite aici sunt 1 atât pentru început, cât și pentru sfârșit. Aceasta înseamnă că stratul va rămâne la 100% din dimensiunea sa. Cu alte cuvinte, nu se va anima. Dacă introduceți 0,5 pentru Zoom Start, stratul dvs. va începe de la 50% din dimensiunea sa și va mări până la 100% din dimensiunea sa, apoi va reveni la 50% etc.

Opțiuni de trecere a stratului

Efectele de hover sunt elementele de bază ale unei bune UX. Efectele de trecere cu mouse-ul indică de obicei că acțiunea este necesară sau efectuată, mai ales că această metodă este utilizată în mod activ cu glisoarele. Cu Slider Revolution, puteți modifica straturile, textele și imaginile prin trecerea cursorului.

Adăugarea efectelor Hover în Slider Revolution

Mai întâi, trebuie să activați hoverul stratului. Selectați stratul la care doriți să adăugați efectul și faceți clic pe Hover sub Opțiuni strat. Faceți clic pe Activat pentru a-l porni.

În partea de jos, veți găsi toate opțiunile de care aveți nevoie pentru a vă seta comportamentul stratului la hover. Dacă lăsați totul așa cum este, stratul nu va afișa nicio modificare.

Setări pentru trecerea cursorului

Primul lucru pe care îl puteți seta aici este Cursorul. În meniul derulant, puteți găsi diferite opțiuni pentru Cursor. Auto și Default îndeplinesc aceleași funcții și nu vor reflecta nicio diferență. Crosshair și Pointer definesc forma cursorului mouse-ului pe ecran.

Există și mai multe stiluri de cursor aici. Unele dintre ele sunt destul de neobișnuite, totuși, majoritatea indică acțiunea pe care o are stratul atunci când este declanșat. De exemplu, dacă conectați stratul la centrul de asistență, puteți alege cursorul Ajutor.

Event Pointer este setat implicit la Auto. Nicio opțiune nu este utilizată atunci când nu există conținut legat. Această secțiune vă permite să alegeți aspectul cursorului pe strat, să activați animația și să o configurați.

Animație Hover

În continuare, există o animație Hover pe care o puteți seta în funcție de preferințele dvs. Există mai multe lucruri de care ar trebui să fii conștient. În primul rând, nu arată bine când stratul se schimbă la hover și tranziția are loc la un moment dat. Întotdeauna mai bine când tranziția are loc odată cu întârzierea. . În mod implicit, întârzierea este setată la 300 ms, lăsați-o așa dacă vă convine sau modificați valoarea.

De asemenea, puteți seta relaxarea pentru tranziție. Aveți mai multe opțiuni din care să alegeți.

Filtru

La stratul dvs., puteți adăuga Filtru. Cu alte cuvinte, puteți estompa lira într-o anumită măsură. Opțiunea este exprimată în pixeli. Cu cât valoarea este mai mare, cu atât neclaritatea este „mai groasă”.

Stil

Există, de asemenea, o parte Stil în care puteți seta culoarea de fundal și puteți ajusta chenarul, și anume să le schimbați culoarea și să selectați stilul chenarului.

Pe opțiunile stratului de defilare

Opțiunile On Scroll fac posibil ca slide-ul să se deplaseze pe derularea mouse-ului. There are three options – Parallax , Timeline Scroll Based , and Filter Effect Scroll Based .

Layer Action Options

Actions make your layers interactive. For example, you can make a layer open a link when a user clicks on it.

Click on the Action icon to choose the type of action you need. The first dropdown is where you can choose the type of action that you would like to occur . There are a lot of options here: Link Actions, Slide Actions, Layer Actions, Media Actions, and Fullscreen Actions. Your chance is full depends on you and your goals, whether you want the layer to open the link or to switch the slide.

After you made a choice of what action to add, you need to set this particular option. For example, we are going to add a link. Select the option of Simple Link, and on the new screen, you will be offered to enter some parameters such as the URL itself, selecting the interaction and action type, and more.

Layer Visibility Options

If you want your layer to be visible on all devices , then make sure the switches shown in the image below are all turned ON under the Visibility section . The first one is for desktop, the second one is for laptops and horizontally oriented tablets, the third one is for vertically oriented tablets, and the last one is for mobile phones.

If you don't want your slider to be shown on some devices, simply turn off this option.

Text layer

After we review most of the options that we need for the layer setup, let's move to the other type of layer and try to add some text to our slide.

There are two options to choose from Quick Style heading or content. The main difference between them is pre-styled options.

Let's just point out some primary options you need to set for the text layer. They are the following:

• In the Content section, we add our text, and aligned it.
• In Style changed the font and its size, weight, line-height
• Customized the Size & Pos to change the location of the layer within the slider
• In Animation, we add some effects and speed for our text.

When adding a text layer there will appear a black box. You need to enter your text there. Everything you change will be visible in your work-frame.

Moving on to the Style tab. By default the font style that is applied to the text is Roboto. Choose the font family you prefer from the dropdown. Make sure that you selected the text layer before you start editing it.

Besides choosing a font family, you can also determine the font-size, line-height, font-weight, and letter spacing here as well. All these options adjust the look and feel of the text. So take your time to set it up and play around with these options to find the best combination.

Next, choose the color for your text. You can use the color picker and find the color that suits your page and slide perfectly. After that, you can save the change and see how the slider looks on your page.

If everything is good, you can move to the next step which defines the horizontal and vertical alignment of the text layer. For instance, you would like to have your text layer start 300px from the left edge of the screen, and 100px from the top. According to this, the horizontal alignment will be set to left, and vertical alignment to top. Fill in the X and Y fields respectively and save the changes to check how the text looks.

For customizing options you can use the same options we went through during the image layer setup. You can add animations, define visibility, create actions, etc.

You can also input HTML code into your text layer field. Thanks to this option, you can insert different shortcodes and create your own HTML elements using text layers.

Cum să creați un efect de paralaxă cu revoluția cursorului

Parallax este unul dintre cele mai populare efecte care fac site-ul web mai impresionant și mai dinamic. Probabil ați văzut o mulțime de site-uri web și teme integrate cu acest efect special. Și acum vom arăta cum puteți construi unul singur folosind pluginul Slider Revolution.

Ce este Parallax?

Efectul de paralaxă poate fi definit ca un efect în care elementele din fundal și elementele din prim-plan se mișcă la viteze diferite și creează iluzia de adâncime. De obicei, elementele fundalului se mișcă mai încet

Există diferite moduri prin care puteți obține acest efect pe site-ul dvs. web. Din fericire pentru noi, Slider Revolution are toate funcționalitățile pentru a vă ajuta să obțineți efectul de paralaxă.

Crearea Parallaxului în Slider Revolution

Mai întâi porniți paralaxa . Accesați Modul General Options > On Scroll > Scroll Based Features > Parallax și puneți comutatorul Parallax Enabled pe On .

Există o mulțime de diferite valori de adâncime pe care pluginul le oferă. Selectează-l pe cel mai potrivit pentru tine. De asemenea, puteți introduce propriile valori.

Adăugarea de Parallax la imaginile de fundal

Pentru a adăuga efectul de paralaxă la imaginea de fundal, accesați Opțiuni de diapozitiv > On Scroll > Paralax & 3D Settings și alegeți adâncimea preferată din meniul drop-down.

Există reguli stricte atunci când selectați adâncimea. Este mai bine dacă încercați diferite valori și vedeți care dintre ele funcționează mai bine cu glisorul dvs. Adâncimile diferite afectează direct și creează efecte diferite. De aceea vă recomandăm să le încercați pentru a vedea rezultatul.

Adăugarea de Parallax la Straturi

În Slider Revolution, efectul de paralaxă poate fi adăugat nu doar imaginilor de fundal, ci și straturilor individuale. Ceea ce este grozav la acest efect este că le oferă utilizatorilor o iluzie dacă controlează părțile glisorului din pagină doar prin mișcarea mouse-ului. Acest lucru arată foarte bine pe site și, în plus, este foarte ușor de configurat.

Selectați-vă stratul, mergeți la Opțiuni strat > On Scroll > fila Parallax & 3D și alegeți nivelul dorit de adâncime.

Ca rezultat, veți obține stratul cu paralaxă care se activează la mișcarea mouse-ului.

Indiferent dacă este o imagine de fundal sau un strat individual, adăugarea efectului de paralaxă Slider Revolution este extrem de ușoară. Deși, nu orice glisor are nevoie de paralaxă. Utilizați-l mai ales pentru glisoare simple, deoarece cele dinamice cu multă animație probabil se vor descurca mai bine fără acest efect.

Adăugarea unui strat de buton

Cu Slider Revolution, puteți crea și proiecta butonul de adăugat la glisor pentru navigare. Pentru a face acest lucru, mai întâi, trebuie să adăugăm un strat de buton la cadrul de lucru al glisorului.

Când adăugați butonul, acesta va apărea în formularul de text, trebuie doar să-l personalizați. În partea dreaptă a ecranului, puteți găsi o mulțime de opțiuni pentru butoanele prestabilite. Puteți selecta unul dintre ele pentru butonul dvs.

Mai mult, puteți merge cu ceva original, deoarece există variații de butoane de redare, comutatoare și altele. De asemenea, este posibil să adăugați un efect de umbră și să faceți butonul să arate mai interesant.

Odată ce ați ales stilul, puteți modifica setările avansate și îi puteți personaliza aspectul. Toate setările pot fi găsite în fila Opțiuni strat.

Puteți schimba aspectul inițial al butonului, puteți schimba textul, puteți modifica afișarea acestuia la trecerea cu mouse-ul și puteți configura animații.

Cum se face Slider Responsive

La început, am setat deja câțiva parametri pentru a face diapozitivele noastre receptive. Nu este suficient. Pentru aceasta, trebuie să vă asigurați că fiecare strat din fiecare diapozitivă se adaptează perfect la toate dispozitivele și dimensiunile ecranului.

Deci, odată ce ați adăugat toate diapozitivele și straturile la glisor, este timpul să le reglați fin pentru toate celelalte dispozitive disponibile.

Când editați diapozitive în cadrul de lucru, în primul rând le configurați pentru a arăta bine pe dispozitivele desktop. Când sunteți sigur că totul arată perfect pe desktop, puteți începe să vă jucați cu aspecte pentru alte dispozitive.

Acum puteți alege dispozitivul pe care doriți să-l emulați din meniul drop-down. Porniți dispozitivul pe care doriți să verificați afișarea glisorului. Dispozitivele disponibile sunt: ​​desktop, notebook, tabletă, mobil.

Puteți modifica totul pentru fiecare dispozitiv. De exemplu, pentru straturile de text puteți seta diferite dimensiuni ale fontului, înălțimea liniei, greutatea fontului și culoarea, toate în funcție de dispozitivul pe care este vizualizat cursorul. Pentru stratul de imagine, pentru a modifica dimensiunea acestuia, trebuie să adăugați o lățime diferită, iar înălțimea imaginii va fi ajustată automat în funcție de lățime.

Acordați atenție marginilor grilei albastre. Acestea definesc marginile dispozitivului cu care lucrați în prezent. Deci, dacă oricare dintre straturi se extinde în afara granițelor, asigurați-vă că modificați setările pentru acele straturi.

În cele din urmă, salvați glisorul și vedeți cum arată live.

Adăugarea cursorului la pagină

Ai făcut o treabă bună și acum este momentul să vezi cum arată glisorul tău pe pagină. Pentru a face acest lucru, utilizați codul scurt Slider Revolution pe care l-ați creat mai devreme. Acest cod scurt poate fi găsit în fila Titlu din secțiunea Opțiuni generale.

Sau dacă deschideți Slider Revolution din tabloul de bord. Găsiți modulul curent și selectați opțiunea Încorporare.

În fereastra pop-up selectați opțiunea Pentru pagini și postări și copiați codul scurt.

Codul scurt ar trebui să arate ca [rev_slider alias="title”][/rev_slider] cu „titlul” bazat pe alias-ul pe care l-ați dat cursorului.

Afișarea Slider cu Elementor

Utilizarea metodei shortcode pentru a afișa glisorul pe pagină este destul de simplă. Cu toate acestea, există o modalitate care ar putea fi și mai ușoară. Toate glisoarele pe care le construiți cu pluginul Slider Revolution pot fi inserate în pagină folosind widget-ul Elementor. Selectați pagina pe care doriți să afișați glisorul și deschideți-o prin editorul Elementor. Apoi pur și simplu trageți și plasați elementul pe cadrul de lucru. În panoul de widget-uri, căutați widgetul Slider Revolution 6 și adăugați-l pe pagină. Când glisați widgetul, va trebui să alegeți glisorul pe care doriți să îl utilizați.

Utilizați acest mod ca alternativă la codul scurt, deoarece unor proprietari de site-uri le este mai ușor să lucreze cu widget-uri pentru generatorul de pagini.

Cum se exportă glisoare

Pentru a exporta glisorul, accesați Slider Revolution făcând clic pe fila relevantă din meniul tabloului de bord. Toate glisoarele pe care le-ați importat sau creat vor fi afișate acolo.

Treceți cu mouse-ul peste miniatura modulului pe care doriți să-l exportați. Faceți clic pe săgeata mică din colțul din dreapta jos. Dintre toate opțiunile apărute, selectați Export și faceți clic pe el.

Veți vedea dialogul de confirmare care vă va anunța că exportul poate dura ceva timp. Faceți clic pe „Da, Export Slider” și descărcarea va începe. Când descărcarea este terminată, veți avea un fișier .ZIP al glisorului dvs.

A concluziona

Aproape toate temele dezvoltate de StylemixThemes includ pluginul Slider Revolution în pachet. Ne place acest software puternic care ne oferă șansa de a face site-urile web mai atrăgătoare, mai atractive și mai interactive.

Sperăm că ghidul nostru a ajutat să înțelegem mai bine procesul de construire a glisorului cu acest plugin uimitor. Dacă căutați mai multe informații, vă rugăm să urmați pagina principală a Slider Revolution.