Ce este un slider? Esențial în construcția de pagini și a șabloanelor web.

Da esențial, element care poate să fie interpretat și afișat în multiple moduri. Am să exemplific în acest tutorial câteva soluții folosind pluginul Elementor.
aprilie 3, 2020
Nivel: Începători
1+

Când folosim termenul de slider ne ducem cu gândul la un cursor de imagini, text și butoane. Da, în mare parte cam la asta se rezumă, dar simpla afișare a acestor elemente nu îmbunătățește cu nimic aspectul unui site.

Eu tratez acest element cu multă grija, ocupă locul 3 după Header (zona de sus a site-ului) și Footer (subsolul site-ului). Practic prin slider spunem povestea site-ului, iar în general aici se transmit cele mai importante mesaje.

Este bine sa se ia în calcul încă din momentul schițelor sau a machetelor create in Adobe XD. Nu trebuie sa confundam slide-ul cu zona Hero (element asemanator cu un slider, doar că-i lipsește partea dinamică).

De la început vreau să menționez, dacă proiectul dispune de un buget satisfăcător, atunci trebuie luat în calcul și o variantă cu plată. Pentru WordPress “the masterpiece” este Slider Revolution (ajuns la versiunea 6) o jucărie care îți va da frâu liber imaginației tale. Pentru o licență trebuie să pui deoparte (să-i iei în calcul) în jur de 30$, bani pe care-i recuperezi și din timpul petrecut la implementare. Pluginul se poate achizitiona de pe platforma CodeCanyon.

Slider Revolution 6 - The world's most powerful WordPress Builder with Advanced Animations
Get to Know Animate CC | Adobe Creative Cloud
Pentru cei care vor să treacă la nivelul următor, există și soluții de customizare externă a unui slider și importat ulterior. În astfel de cazuri apelăm la un program profesional, în cazul meu eu folosesc Adobe Animate. Program cu care putem crea conținut interactiv pentru web și mobil. Utilizând instrumente puternice de ilustrație și animație. Am sa tratez acest subiect într-un tutorial separat, dar pentru asta trebuie să pregătesc materialele necesare.

Totuși subiectul de astăzi se adresează celor ce sunt la început, așa că mă întorc la Elementor și o să prezint o parte din variantele standard.

Pentru asta o să folosim Elementor Slides Widget, instrument care vă permite să creați rapid un slider, fără prea mari bătăi de cap. Am să explic mai jos o parte din setarile de bază, necesare pentru afișarea și funcționarea corectă a elementului.

NOTĂ: cand spunem Elementor (este bine să ne gândim la o bibliotecă de elemente), iar în 90% din cazuri ele au aceeași structură de 3 tab-uri: CONȚINUT, STIL, AVANSAT.

How to Use the Slides Widget to Create Sliders on WordPress Sites [Pro]

Tipuri standard de afișare a unui slider

Trebuie să determinăm și dimensiunea pe care acesta o va ocupa în pagină. Cel mai important aspect este legat de dimensiunile responsive (modificările vizuale care apar atunci când schimbăm rezoluția dispozitivului de pe care accesezi site-ul).

Aceasta dimensiune poate sa fie:

  • Auto (slide-ul se scaleaza, astfel încât va fi la fel de mare, ca recipientul în care s-a introdus);
  • Fullpage / Pe toată pagina (slide-ul va avea 100% lățime și înălțimea ecranului);
  • Fullwidth / Pe toată lățimea paginii (slide-ul va avea 100% lățime, iar înălțimea automată în funcție de dimensiunea setată);
  • Fix / Încastrat (slide-ul va avea mereu aceeași dimensiune, cu cea setată inițial, pentru orice dimensiune a ecranului);
Încastrat
Slider-ul încastrat (block) este cel mai des întâlnit mod de afișare, asta prin prisma configurarii ușoare.
LĂȚIME COMPLETĂ
Un slider cu lățime completă este genul de slider, care umple zona orizontală a browserului.
TOATĂ PAGINA
Când vrei să captezi atenția, atunci soluția perfectă este alegerea unei afișări pe tot ecranul.

Etichete: ,