Dragi vizitatori, bine ați venit pe paginile blogului meu start-luck. Astăzi vă voi spune cât de ușor este și, cel mai important, să puneți gratuit un slider frumos pe site-ul dvs. Va fi un element de design atrăgător pentru orice articol sau o alternativă excelentă la o unitate de anunțuri pe care o puteți monetiza.

Din 2013, tot felul de studii au prezis că glisoarele vor părăsi în curând internetul, dar popularitatea lor nu a dispărut. Orice ai spune, ei „anima” portalul, atrag atenția asupra informațiilor. Te face să vrei să dai clic pe ele. Desigur, dacă glisorul este frumos și bine conceput, dar vom reveni la asta mai târziu.

Voi vorbi despre slider-ul WordPress. Cum să aduci ceva atractiv și interesant pe site-ul tău rapid, gratuit și fără a avea măcar cunoștințe speciale. Să discutăm dacă merită să o faci singur. Veți primi, de asemenea, câteva sfaturi utile de umplere.

Ei bine, să începem?

Meta Slider

Pentru început, aș dori să vă spun despre cel mai bun plugin pentru un site WordPress. Este un caz rar când reușești să găsești ceva valoros și gratuit în același timp.

Dacă ați citit articolul meu despre asta, atunci amintiți-vă cât de revoltat am fost de unele dintre sugestii. Utilitatea din publicația respectivă a costat și bani.

Ei bine, permiteți-mi să vă arăt cum să lucrați cu programul.

Instalare

Deci, puteți citi un articol detaliat despre WordPress pe blogul meu. Repetați pe scurt ce trebuie să faceți într-o anumită situație. Mergem la secțiunea de pluginuri și selectăm opțiunea „Add New” din lista din linia de căutare din colțul din dreapta sus, mergem în: „Meta Slider” și Enter. De îndată ce se deschide pagina cu aplicația dorită, faceți clic pe „Instalare”.

Nu uitați să activați Meta Slider prin fila Instalat sau în fereastra care se deschide după instalare.

Ca urmare, o nouă categorie ar trebui să apară în panoul de control din dreapta. Poți cumpăra versiunea Pro cu 19$ sau o poți folosi pe cea gratuită, după părerea mea funcțiile sale sunt suficiente, așa că achiziția nu este deloc necesară.

Posibilitati

Acum să ne dăm seama cum să creăm și să inserăm un carusel, uneori glisorul se mai numește și așa. Mergem la aplicație folosind linkul din dreapta (în panoul de administrare WordPress) și facem clic pe plus de lângă expresia „Adăugați nou”.

Puteți încărca câte fotografii doriți, dar nu vă recomand să exagerați. Nimeni nu va privi prea mult. Numărul optim variază de la trei la opt.

În dreapta imaginilor încărcate este un câmp în care poți introduce adresa paginii la care va merge o persoană când face clic pe fotografie. De asemenea, puteți adăuga descriere, decupare imagine și alt la imagini.

Aveți și 4 opțiuni de design. În videoclipul de mai jos, vă voi arăta cum arată fiecare dintre ele.

Versiunea Pro include toate opțiunile pentru efecte, adică modul în care un diapozitiv îl va înlocui pe altul, pentru fiecare metodă de afișare. Versiunea gratuită are funcții limitate. Dar sunt încă o mulțime. Veți găsi o opțiune bună.

Pe lângă cele 4 variante principale de design, puteți alege din alte patru scheme de culori.

Pe lângă toate acestea, există și o setare suplimentară. Dacă doriți să oferiți cititorului posibilitatea de a controla derularea înapoi, trebuie să bifați caseta de lângă cuvântul „Săgeți”. Navigarea este posibilă și prin puncte de referință. Asigurați-vă că lăsați cititorul să preia controlul, mai ales dacă este o unitate de anunțuri.

În ceea ce privește dimensiunile, le puteți furniza. Cu toate acestea, pluginul nu este prost, vede restricțiile maxime și este integrat automat în design. Dacă îl instalați în barele laterale ale paginii principale, puțin mai târziu voi arăta cum să faceți acest lucru, atunci proporțiile se vor schimba automat.

Următorul este Setări avansate. Aici puteți crește sau micșora durata de afișare a cadrelor și viteza animației. Nu ar trebui să se miște foarte repede, altfel vor părăsi site-ul tău. Dacă există multe fotografii, este mai bine să permiteți imaginilor să fie afișate aleatoriu.

La schimbarea imaginii, imaginea poate fi împărțită în mai multe părți. Nu vă sfătuiesc să specificați o sumă mică. În caz contrar, se va ondula în ochi. Ei bine, în loc de săgeți pentru derulare înapoi, recomand să adăugați propriul text.

În captura de ecran de mai jos puteți vedea glisorul pe care l-am creat. Pentru a fi mai ușor, vă recomand să utilizați funcția de previzualizare. În meniul de creare, există două butoane utile în dreapta sus: „Afișează” pentru a vedea modificările și pentru a salva.

În partea de jos a panoului din dreapta există un cod scurt pentru inserarea în postări și pentru . Dezvoltatorii avansați au nevoie de el, iar pentru începători, vă voi arăta cum să obțineți un efect elegant cu metode simple. Dar mai multe despre asta mai târziu.

Mai întâi, vedeți cum arată glisorul în acțiune. Desigur, totul trebuie testat pe propriul dvs. site, am ratat multe și nu am arătat-o ​​în acest videoclip, dar vă puteți crea deja o idee aproximativă despre program.

Integrarea blogului

Introducerea caruselului creat nu este dificilă. Nu trebuie să copiați nimic pentru asta. Singurul lucru pe care am uitat să-l menționez în paragraful anterior este să-ți denumești corect glisoarele pentru a nu fi confuz.

Deschideți postarea la care doriți să adăugați un nou glisor sau creați unul nou. Apoi, plasați cursorul în locul destinat unde va fi amplasat caruselul. Acum faceți clic pe „Adăugați glisor”, butonul se află în partea de sus a câmpului de lucru.

Selectați numele dorit din listă și faceți clic pe „Insert Slideshow”.

Gata. In cazul meu, pe site va arata asa.

Pentru a pune un bloc pe pagina principală, accesați categoria „Aspect” - „Widget-uri”. În partea de sus veți vedea „Meta Slider”.

Mutați această placă în locul potrivit unde ar trebui să fie glisorul. Dacă doriți să îl puneți imediat după căutare, atunci în această listă va trebui să fie aici. Selectați un glisor din lista celor create și salvați modificările.

Pe site-ul meu de testare, blocul din dreapta arată așa.

Designul acestui site presupune plasarea în zona de conținut și subsol, partea de jos a site-ului. Dacă vreau să adaug un bloc aici, atunci mută placa în locul potrivit.

Afișarea de pe site se va schimba imediat.

În concluzie, aș vrea să vă dau câteva recomandări. Dacă doriți să obțineți un venit bun din publicitate, vă sfătuiesc insistent să nu vă zgâriți cu designul imaginilor în sine. O singură persoană este nevoie de mult timp pentru a înțelege toate complexitățile marketingului, pentru a citi o mulțime de cărți despre publicitatea vizuală și pentru a-și perfecționa abilitățile de design.

Până te poți dezvolta în acest domeniu, te sfătuiesc să apelezi la ajutorul liber profesioniștilor. O poți face pe site-uri web. weblancer.net și FL.ru . Primul este puțin mai ușor, iar pe al doilea poți întâlni adevărați profesioniști.

Prețul depinde de bugetul tău, dar cred că poza te va costa maxim 500 de ruble. Pentru această sumă, poți cumpăra trei, dar în acest caz vor fi mai puține persoane care vor să onoreze comanda, ceea ce înseamnă că vei obține un rezultat mai rău.

Iti doresc succes si daca ti-a placut acest articol, aboneaza-te la newsletter. Ne mai vedem.

În același timp, există suport pentru localizare folosind fișiere po / mo. Ca bonus suplimentar, putem menționa suportul pentru lightbox la vizualizarea imaginilor mari, ceea ce implică posibilitatea de a mări imaginea făcând clic.

Slider galerie TN3

Slider for WordPress TN3 Gallery are avantajele altor glisoare, cum ar fi previzualizările imaginilor, aspectul bun și alte bunătăți menționate mai sus atunci când descriu alte plugin-uri.

Adevărat, are o mică trăsătură distinctivă, și anume suport pentru dispozitive mobile, care astăzi este un lucru foarte rar și care, vedeți, pur și simplu nu poate decât să se bucure.

Pentru a fi corect, trebuie remarcat faptul că acest avantaj este compensat de două dezavantaje simultan: pentru a descărca pluginul, trebuie să vă înregistrați fără greș și astăzi nu există nicio versiune care să accepte lucrul cu WordPress. Există doar o opțiune de script disponibilă, deși capacitățile Galeriei TN3 merită să vă jucați puțin cu setările și metoda de instalare.

Pagina de plugin

Slider de conținut WordPress

Slider pentru WordPress numit WordPress Content Slide este conceput pentru a organiza glisoare de imagine pe propria resursă.

Din motive evidente, această funcționalitate nu este necesară pentru toate site-urile. Deși, dacă te uiți la interogările de căutare ale multor utilizatori, poți descoperi că tocmai un astfel de slider este căutat de un număr suficient de mare de persoane care au nevoie de un slider cu funcții similare, fiind în același timp ușor de gestionat și configurat.

Despre pluginul WordPress Content Slide, putem spune doar că este mic, are setări bune din panoul de administrare și este complet personalizabil extern la cererea utilizatorului. Și ceea ce funcționează cu adevărat.

De fapt, acesta este un glisor destul de puternic, așa cum poate fi judecat după setări, cu care aproape toată lumea își poate da seama.

Glisor ISlidex

Glisorul ISlidex poate fi numit în siguranță un plugin destul de bun care acceptă mai multe teme în același timp.

Pe măsură ce dezvoltatorii înșiși promit, de-a lungul timpului, posibilitatea de layout SEO, decuparea automată și stocarea în cache a imaginilor, se va adăuga suport pentru WordPress 3.x. și compatibilitate între browsere până la IE7.

Caracteristicile suplimentare ale ISlidex includ posibilitatea de a fi încorporat într-un widget, ceea ce crește semnificativ valoarea acestui glisor.

Slider RoyalSlider

De asemenea, aș dori să menționez un astfel de plugin precum RoyalSlider, pe care l-am întâlnit recent. După întâlnirea cu el, au rămas doar impresii și amintiri plăcute, chiar și în ciuda faptului că a fost plătit.

Un glisor pentru WordPress numit RoyalSlider poate arăta utilizatorului orice dorește.

Pluginul vine cu mai mult de 10 șabloane de ieșire, suport pentru dispozitive mobile, propriul API și multe alte bunătăți frumoase cu care toată lumea ar trebui să se familiarizeze.

În umila mea părere, RoyalSlider este cel mai bun glisor de până acum. Costul unei astfel de plăceri este de numai 12 USD, în timp ce toate versiunile ulterioare vor fi gratuite pentru tine.

În plus, conform asigurărilor dezvoltatorilor înșiși, RoyalSlider este singurul plugin de astăzi care este capabil să suporte pe deplin IE10 instalat în Win8.

1. Pluginul jQuery Fresco

Galeria jquery receptivă (se redimensionează când rezoluția ecranului se modifică) afișată într-o fereastră pop-up cu miniaturi și legende ale imaginilor. Galeria jquery fresco funcționează corect în majoritatea browserelor, inclusiv: IE6+, Firefox 3+, Chrome 5+, Opera 9+. Versiunea gratuită a acestui plugin poate fi folosită numai pentru proiecte necomerciale.

2. Glisor „Adaptor”.

Glisor cu diverse efecte de tranziție (7 efecte diferite, inclusiv 3D). Proiect pe Github.

3. Plugin slider cu diferite efecte „jQ-Tiles”

Plugin cu diverse efecte de tranziție, cu viteză de glisare reglabilă, cu funcție de defilare automată.

4. Pluginul jQuery „Sly”

Plugin pentru a implementa scroller vertical și orizontal. Proiect pe Github.

5. Meniu animat CSS3 Makisu

6. Prezentare simplă

7. Slider jQuery funcțional „iView Slider v2.0”

Slider de conținut / prezentare de diapozitive (diapozitivul poate fi nu numai imagini, ci și clipuri video și alt conținut HTML). Pentru navigare, puteți folosi: miniaturi, butoanele Stânga/Dreapta și folosind tastatura. Proiect pe Github.com.

8. Un set de pluginuri jQuery „Vanity”

Există 7 plugin-uri în set: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder și jCollapse. Un set de aceste soluții vă va ajuta să implementați glisoare, sfaturi cu instrumente, file, ferestre pop-up și multe altele.

9. Hover CSS3 Effect

10. Meniu derulant CSS3

11.iOSlider

Un glisor conceput pentru a funcționa pe dispozitive mobile.

12. Indicator de încărcare CSS3

13. Efect de hover CSS3

14. Pluginul jQuery „Product Colorizer”.

Pluginul este o soluție ușoară pentru vizualizarea produselor în diferite opțiuni de culoare (relevant, de exemplu, pentru magazinele online de îmbrăcăminte pentru a permite vizitatorilor să aleagă schema de culori a produsului dintre mai multe opțiuni). Pluginul necesită doar două imagini pentru fiecare produs (toate culorile vor fi suprapuse ca mască). Pluginul funcționează în toate browserele majore, inclusiv IE7+ (va funcționa și în IE6 dacă remediați afișarea transparenței PNG). Proiect pe GitHub.

15. Grafice animate CSS3

16. Crearea unui efect de suprapunere la clic pe imagine

Când dați clic pe imagine, aceasta se întunecă, mergând pe fundal și apar paragrafe cu legendă. Astfel, puteți oferi o scurtă descriere a elementelor aflate pe imagine.

17. Navigare pe pagină sub forma unui meniu derulant

O soluție pentru implementarea unei navigări convenabile în documente sub forma unui meniu derulant. Conținutul este fixat în partea de sus a ecranului și rămâne întotdeauna în câmpul vizual al vizitatorului. Când selectați o secțiune din meniu, pagina derulează fără probleme la partea selectată a documentului.

18. Galerie CSS3 cu efect de hover

Când treceți cu mouse-ul peste imagine, are loc o schimbare rapidă a fotografiilor. Galeria este implementată în două versiuni: cu o descriere a imaginilor care apare după ce vizitatorul îndepărtează cursorul de galerie și fără o descriere.

19. jQuery Parallax Slider

20. Animație hover CSS3 pe blocuri

21. Panoul pop-up CSS3 jQuery

Faceți clic pe săgeata din partea de jos a ecranului de pe pagina demo pentru a vedea pictogramele pop-up.

22. Galerie de imagini HTML5 gratuită „Juicebox Lite”

O nouă galerie de imagini foarte funcțională pentru site. Galeria poate fi fie cu sau fără miniaturi, cu sau fără o descriere a imaginii, poate fi extinsă la ecran complet sau afișată pe o pagină cu dimensiuni fixe. Pe pagina demo, puteți alege tipul de galerie care vă place. O versiune gratuită a galeriei este disponibilă pentru descărcare. Pentru o funcționalitate mai avansată și pentru a elimina sigla dezvoltatorului, va trebui să plătiți.

23. Plugin „JQVMap”

24. CSS3 Parallax Slider

25. Galeria foto jQuery cu miniaturi

Dimensiunile responsive ale galeriei, imaginilor și miniaturilor se modifică odată cu dimensiunea ferestrei browserului.

26. Plugin de glisare de conținut jQuery „Horinaja”

Pluginul este ușor de instalat, personalizabil, între browsere. Orice conținut HTML poate acționa ca un diapozitiv, nu doar imagini. Puteți derula prin diapozitive folosind rotița mouse-ului în timp ce cursorul se află pe zona de diapozitive.

27. Plugin-ul jQuery Pikachoose

În trei variante: implementarea unei simple schimbări de imagini fără descriere și miniaturi; glisor cu legende și miniaturi ale imaginii; glisor cu miniaturi și a adăugat deschiderea unei imagini mai mari într-o fereastră pop-up cu efect FancyBox. Cea mai recentă versiune poate fi întotdeauna găsită pe Github.

28. Câteva stiluri CSS personalizate pentru dropdowns

Cinci stiluri diferite de meniuri derulante folosind diferite tehnici CSS.

29. Meniu restaurant cu efect 3D animat

Interesantă prezentare CSS jQuery a informațiilor de pe pagină. Făcând clic pe link, se deschide meniul broșură, iar vizitatorul poate citi mai multe despre preparatele oferite în fereastra pop-up. Animația nu se afișează corect în IE.

30. Plugin Elastislide

Implementarea unui carusel adaptiv de cauciuc (carusel de imagini vertical și orizontal) și a unei galerii de imagini. Când fereastra browserului este redusă, numărul de imagini este redus la o anumită valoare minimă și apoi dimensiunea imaginilor rămase este scalată. Proiect pe Github.

31. Slider CSS3 jQuery Slit recent

Plugin de glisare responsive (lățimea poate fi setată ca procent și se va scala automat) în două stiluri cu un efect animat interesant la schimbarea diapozitivelor (un diapozitiv este tăiat în jumătate și mutat în direcții diferite, iar unul nou îi ia locul). Navigarea prin tastatură este posibilă. Cea mai recentă versiune este întotdeauna pe Github.

32. Noua versiune a glisorului pentru imagini 3D „Slicebox”

O nouă versiune cu modificări și noi funcții adăugate: acum glisorul 3D a devenit scalabil, îl puteți vedea când reduceți fereastra browserului; S-a adăugat suport pentru Firefox; în descrierea diapozitivului, puteți utiliza deja conținut HTML (anterior, descrierea a fost extrasă din atributul link fără posibilitatea de a utiliza etichete HTML în el). Pe pagina demo, puteți vedea 4 opțiuni pentru utilizarea pluginului. Cea mai recentă versiune se află pe Github.com.

Efectul este foarte asemanator cu galeria 3D CU3ER Flash (demo , download), doar ca acest slider 3D este realizat nu cu ajutorul tehnologiilor flash, ci cu ajutorul javascript-ului.

33.jQuery Plugin „PFold”

Soluție experimentală. Pluginul implementează un efect 3D cu imitarea unei note care se desfășoară. Diverse versiuni: cu trei spread-uri, cu două spread-uri și un spread cu centrarea ulterioară a notei extinse.

34.jQuery Plugin „Windy”

Un plugin pentru navigarea prin conținut, cum ar fi imagini. Când parcurgeți fotografiile, acestea se împrăștie în direcții diferite (efectul amintește oarecum de distribuția cărților în jocul de cărți de poker). Pentru navigare, puteți folosi butoanele stânga/dreapta sau glisorul (consultați pagina demo pentru diferite opțiuni). Proiect pe

În acest articol, vă voi spune despre pluginul Meta Slider, care vă ajută să organizați orice număr de prezentari de diapozitive cu diverse efecte speciale pe site-ul dvs. Am folosit acest plugin de mai multe ori pe site-urile clienților când este necesară o soluție simplă gratuită, cu funcționalitate bună.

Puteți folosi slideshow-ul Meta Slider atât pe pagina principală, cât și în orice postare, sau în bara laterală (coloana laterală a site-ului). Setările sunt revoltător de simple, iar implementarea unui glisor pe un site WordPress este și mai ușoară.

Atenţie! Am lansat o nouă temă Romb pentru articolele și blogurile dvs. Cel mai rapid de pe Google PageSpeed ​​​​și optimizare maximă pentru SEO.

De remarcat: chiar dacă aveți deja o prezentare de diapozitive instalată pe pagina de pornire în șablonul dvs., puteți instala cu ușurință acest plugin și îl puteți utiliza în orice parte a site-ului, ceea ce va adăuga dinamică articolelor, paginilor individuale sau va face publicitate produsului dvs. informativ. în bara laterală.

Pasul 1: Creați prima prezentare de diapozitive

Facem clic pe el și ajungem la pagina unde vom vedea asta în partea de sus

Ni se oferă să creăm prima noastră prezentare de diapozitive, pe care o facem făcând clic pe +.

Dacă intenționați să faceți mai multe glisoare diferite pentru site, puteți face dublu clic pe numele lor și apoi veți putea introduce numele dvs.

Pasul 2: încărcați imagini în glisor

Acum este timpul să încărcați pozele. Vă sfătuiesc pentru fiecare prezentare individuală să faceți imagini de aceeași dimensiune ca lățime și înălțime. Pentru a ajuta PhotoShop sau programul meu preferat. Aceeași dimensiune pentru un set de imagini le va permite să fie afișate așa cum ați planificat: fără tăiere sau distorsiune.

Faceți clic și adăugați imagini pentru prezentarea de diapozitive selectată. Procesul de adăugare este standard pentru site-urile de pe WordPress. După aceea, va apărea:

Săgeata din stânga sus indică imaginea. Dacă mutați mouse-ul peste el, în colțul miniaturii va apărea un X, ceea ce vă va permite să ștergeți imaginea selectată.

Caseta de selectare din câmpul Fereastră nouă va face astfel încât, făcând clic pe imagine, linkul selectat să se deschidă într-o fereastră nouă. Restul este clar din captura de ecran.

Dacă trebuie să schimbați ordinea imaginilor, mutați cursorul peste miniatură și „prindeți”-o cu butonul stâng al mouse-ului, apoi trageți-o în locul potrivit.

Pasul 3: Ajustarea efectelor pentru glisor

În dreapta este un bloc de setări pentru designul vizual și efectele prezentării de diapozitive pe site. Blocul este lung, așa că îl vom dezasambla pe părți.

Orice ați face în prezentarea de diapozitive selectată, trebuie să o salvați după ce modificările sunt finalizate. Pentru a face acest lucru, utilizați butoanele Salvare sau Salvare și previzualizare (salvați și vedeți imediat cum va arăta).

Sub butoanele de salvare, puteți alege pe baza cărui script ar trebui să funcționeze prezentarea noastră de diapozitive. Cele mai populare sunt oferite din care să aleagă. În funcție de alegerea dvs., un alt bloc de setări va apărea mai jos. Să-l luăm ca exemplu pe primul.

Vă rugăm să rețineți că am setat lățimea (lățimea) și înălțimea (înălțimea) exact la fel ca dimensiunea imaginii mele. Tu ai stabilit marimile. Săgeata roșie arată în câmp efectul cu care glisorul va funcționa pe site.

Versiunea noastră gratuită a pluginului Meta Slider nu are multe efecte, dar sunt suficiente pentru ca vizitatorii site-ului dvs. să vă evalueze pozitiv site-ul. Oricine dorește poate cumpăra versiunea PRO a Meta Slider pentru 19 USD (veți vedea linkul).

În acest bloc, bifăm caseta dacă avem nevoie de săgeți de navigare la stânga și la dreapta (Săgeți) și putem, de asemenea, să ascundem navigarea de jos (Ascuns) sau să o afișăm sub formă de puncte

Este convenabil să părăsiți această navigare pentru un articol sau pagina principală, dar pentru produsele de informare publicitară, o puteți ascunde în siguranță.

În continuare avem blocul Setări avansate. Aici putem ajusta stilul de afișare: timp de întârziere, alternanță, direcție etc. Simțiți-vă liber să experimentați pentru a găsi setările de care aveți nevoie. Dacă încep să descriu fiecare, atunci articolul va fi incredibil de lung.

Pasul 4: încorporați glisorul creat pe site

Putem încorpora glisorul pe site folosind un shortcode sau o funcție PHP. Este convenabil să utilizați codul scurt din articol și să scrieți funcția în fișierul șablon. Tu decizi cum să o faci cel mai bine.

Vă rugăm să rețineți că există numere în codul scurt și în funcție care indică numărul prezentării dvs. de diapozitive.

Activați codurile scurte în widgetul implicit din bara laterală Text

Cine vrea să folosească glisorul din bara laterală, dar capacitatea de a elabora coduri scurte în widget-uri nu este activată, sugerez o soluție fără plugin.