Slider-ele de conținut sunt comune în WordPress în zilele noastre, dar sunt de obicei folosite doar într-un set foarte limitat de circumstanțe – de obicei, sunt amplasate pe paginile de pornire, pentru a prezenta postări recente sau galerii de imagini. Se dezvoltă o nouă tendință, în care site-urile WordPress folosesc potențialul și flexibilitatea slider-elor de conținut pentru a spune povești convingătoare care motivează vizitatorii să acționeze – adică, sub forma unor tururi de produs.
Utilizarea unui slider de conținut pentru turul produsului tău WordPress te poate ajuta să vinzi mai bine produsele, ghidând utilizatorii prin punctele cheie în ritmul propriu – acest lucru este mai bun decât simpla utilizare a unui videoclip, deoarece aceștia pot sări înainte/înapoi la puncte specifice, definite, în loc să ghicească un cod de timp. În plus, utilizarea unui slider de conținut în acest mod profită de tot felul de medii web – ceea ce înseamnă că poți include conținut interactiv în slide-uri, în loc să-ți forțezi utilizatorul să vizioneze pasiv un videoclip.
Până de curând, trebuia să știți să codificați pentru a crea orice altceva decât cele mai simple tururi de produs cu glisare de conținut, dar am folosit un plugin de glisare grozav numit SlideDeck 2, care schimbă totul.
Acest plugin puternic face extrem de simplu crearea de glisoare uimitoare în câteva minute, fără a fi necesară o singură linie de cod. Am acoperit o altă caracteristică robustă a SlideDeck 2 într-o postare anterioară, dar ultima lor actualizare vă permite să creați glisoare de conținut personalizate și să adaptați conținutul fiecărei diapozitive pentru a crea prezentări convingătoare care motivează vizitatorii dvs. să acționeze. Am pregătit acest ghid rapid pentru a vă arăta cum să creați un tur de produs grozav pentru site-ul dvs. WordPress folosind SlideDeck 2.
Achiziționarea și instalarea pluginului
Primul și cel mai important: diapozitivele cu conținut personalizat sunt o caracteristică premium în SlideDeck 2, așa că va trebui să îl achiziționați pentru a-l utiliza pe site-ul dvs. Vă recomandăm să accesați site-ul web SlideDeck și să achiziționați pluginul – pentru puterea pe care o conține, este destul de ieftin și puteți face upgrade cu ușurință pentru a obține funcții mai bune și a-l utiliza pe mai multe site-uri.
Pentru a debloca funcționalitatea Conținut personalizat, va trebui să achiziționați fie pachetul Professional, fie Developer, apoi să instalați pluginul plus un „Addon” care deblochează funcționalitățile suplimentare.
Pentru a instala pluginul, puteți urma Ghidul nostru util Ghid pas cu pas pentru instalarea unui plugin WordPress.
Terminologie
Înainte de a începe, există câțiva termeni pe care ar trebui să îi explicăm:
- Tip diapozitiv – Există 4 tipuri diferite de diapozitive, fiecare conceput pentru a găzdui un anumit tip de conținut: imagine, video, text și HTML.
- Lentilă – Lentilele sunt ca temele pentru glisorul dvs. de conținut. Ele controlează cum arată și cum se comportă glisorul dvs., precum și cum este prezentat conținutul pe pagină. La fel ca în cazul temelor WordPress, aplicarea unei Lentile diferite la conținutul dvs. durează doar câteva secunde și poate oferi un aspect și o senzație semnificativ diferite pentru glisorul dvs.
Ok, acum că jargonul este lămurit, continuați și activați SlideDeck 2 și să începem!
Crearea unui SlideDeck cu conținut personalizat
Vă vom arăta cum să creați un glisor de conținut pentru turul produsului care combină patru tipuri diferite de conținut, folosind funcția de conținut personalizat a SlideDeck. Începeți prin a face clic pe „Gestionare” pentru a accesa tabloul de bord principal. Acest ecran vă permite să creați noi SlideDeck-uri și să sortați SlideDeck-urile existente.
În secțiunea Conținut personalizat, faceți clic pe butonul albastru „Creare SlideDeck”. Veți fi direcționat către ecranul Editor conținut personalizat pentru a crea primul dvs. diapozitiv. Odată ajuns pe Editor conținut personalizat, începeți prin a denumi SlideDeck-ul dvs. Veți observa că primul dvs. diapozitiv a fost creat și aveți de ales între trei sau patru tipuri diferite de diapozitive, în funcție de pachetul SlideDeck 2 pe care îl utilizați – utilizatorii pachetului Profesional vor avea acces la tipurile de diapozitive Imagine, Video și Text; utilizatorii pachetului Dezvoltator vor putea alege tipul de diapozitiv HTML pe lângă cele trei.
Sub acest meniu pop-up se află una dintre cele mai unice caracteristici ale SlideDeck 2 – fereastra de previzualizare live (este unul dintre motivele pentru care SlideDeck 2 este un plugin WordPress recomandat în WPBeginner’s Blueprint). Aici, vedeți glisorul dvs. actualizându-se în timp real pe măsură ce îl editați.
Începând cu un slide de imagine
Să începem cu o diapozitivă de imagine – ceva ce oferă vizitatorilor noștri o imagine de ansamblu rapidă și captivantă vizual a turului pe care urmează să-l facă. Faceți clic pe Tipul de diapozitiv „Diapozitiv de imagine”. Meniul pop-up se va reîmprospăta pentru a vă afișa toate opțiunile relevante pentru crearea unei diapozitive de imagine:
Încărcați o imagine | Specificați un URL – Alegeți dacă doriți să încărcați imaginea în Galeria Media WordPress sau pur și simplu să lipiți un URL, dacă este găzduită în altă parte.
Legendă | Text corp | Niciunul – Spuneți SlideDeck dacă doriți ca o legendă text să se suprapună peste imagine sau să aveți un text corp scurt care să o însoțească. Alternativ, puteți pur și simplu să afișați întreaga imagine, fără text asociat.
Link diapozitiv – Specificați un URL de vizitat, dacă utilizatorul face clic oriunde pe diapozitiv.
Titlu – Dați diapozitivului un titlu care să fie afișat fie în zonele de legendă, fie de text corp.
Descriere – Introduceți textul descriptiv pentru diapozitiv. Puteți introduce text îmbogățit aici!
Poziție legendă – Determină poziția suprapunerii textului pe diapozitiv. Legendele pot fi sus/jos, iar textul corp poate fi în stânga/dreapta.
Odată ce ați configurat diapozitivul așa cum doriți, pur și simplu apăsați butonul „Aplicare”, iar zona de Previzualizare live se va reîmprospăta pentru a vă arăta primul diapozitiv. În exemplul nostru, am creat diapozitivul specificând un URL, cu o legendă în partea de jos și fără link de diapozitiv.
Deci, acesta este primul nostru diapozitiv cu conținut personalizat creat – ușor, nu-i așa? Acum, vom adăuga un al doilea pentru a adăuga un videoclip care arată demonstrația produsului nostru.
Crearea diapozitivei video
SlideDeck 2 suportă conținut video din trei surse – YouTube, Vimeo și Dailymotion – ceea ce înseamnă că tot ce trebuie să facem este să încărcăm videoclipul demo al produsului nostru pe unul dintre aceste servicii și apoi să lipim URL-ul paginii video & să apăsăm „Actualizare”.
La fel ca în cazul tipului de diapozitiv Imagine, puteți alege să adăugați un titlu și o scurtă legendă sau un paragraf de text pentru a oferi vizitatorilor o idee despre ce vor vedea în videoclip. Implicit, SlideDeck 2 va prelua conținutul legendei pe care îl aveți pe pagina dvs. YouTube/Vimeo/Dailymotion, dar îl puteți ajusta pentru a se potrivi nevoilor dvs. pentru turul produsului.
Ca și înainte, apăsați Apply și faceți un clic rapid prin slider – veți putea acum să navigați înainte și înapoi între diapozitivele cu imagini și cele video.
Crearea unui glisor text
Uneori, aveți pur și simplu nevoie de spațiu pentru text – pentru a afișa o listă de caracteristici, de exemplu, sau pentru a partaja o cotație dintr-o recenzie strălucitoare a produsului. În cazuri ca acestea, putem folosi tipul de diapozitiv Text.
Acesta este un tip de diapozitiv foarte simplu, cu doar câteva opțiuni de luat în considerare:
Aspect – Aspectul de bază plasează pur și simplu titlul în partea de sus a diapozitivului, cu textul curgând dedesubt. Multi-coloană oferă mai mult un format de tip ziar, prin încadrarea automată a textului în două coloane. Citat bloc vă permite să evidențiați o scurtă secțiune de text cu o tipografie mare, aldine. Ca și înainte, apăsați pe Aplicare pentru a adăuga diapozitivul în SlideDeck-ul dvs.
Rearanjarea diapozitivelor
În acest moment, s-ar putea să vă gândiți că ați dori să începeți cu diapozitivul video în loc de imagine, astfel încât să vă puteți face utilizatorii să interacționeze și să se implice imediat în tur. SlideDeck vă permite să faceți acest lucru instantaneu – în zona antetului diapozitivului, faceți clic și trageți diapozitivul video și plasați-l în spațiul strălucitor din stânga diapozitivului cu imagine. Super-simplu!
Mergând mai departe – utilizarea tipului de diapozitiv HTML
Tipul de diapozitiv HTML este un plus puternic la pachetul Developer al SlideDeck 2, care vă permite să introduceți propriul cod HTML într-un diapozitiv. Este perfect pentru layout-uri mai complexe ale conținutului dvs. sau pentru adăugarea de interacțiuni mai puternice la glisorul dvs. de conținut. De exemplu, puteți încorpora un formular de înscriere, astfel încât clienții să poată opta pentru a primi un newsletter prin e-mail la sfârșitul turului produsului – un apel la acțiune puternic, dacă a existat vreodată unul!
Selectați tipul de diapozitiv HTML pentru a dezvălui editorul HTML în meniul pop-up.
În câmpul Inserează HTML, puteți lipi codul dvs. personalizat. Veți observa că acesta colorează automat diferitele etichete pentru a vă ajuta să vă asigurați că este structurat corect. Câteva puncte importante de reținut:
- Puteți include reguli de stil CSS pentru conținutul diapozitivului între etichetele <style></style>, iar acestea se vor aplica tuturor diapozitivelor din SlideDeck
- Deoarece previzualizarea live a SlideDeck nu poate prezice cum ar putea interacționa stilurile temei dvs. cu glisorul de conținut, pentru stiluri complexe veți obține o previzualizare mai precisă dacă o vizualizați în pagina pe care intenționați să publicați SlideDeck-ul.
Cu codul la locul lui, apăsați Apply, iar glisorul va fi adăugat în rotație.
Configurarea lentilei
Acum ați creat primul dvs. SlideDeck cu conținut personalizat! Continuați și acordați-vă câteva minute pentru a face clic pe diapozitive în Previzualizarea live și bucurați-vă de satisfacția unei sarcini bine îndeplinite.
Acum, este timpul să o facem să arate perfect pe site-ul dvs. configurând Lens-ul. SlideDeck conține o cantitate uriașă de opțiuni pentru controlul aspectului noului dvs. tur de produs, personalizând Lens-ul.
Salvarea și publicarea SlideDeck-ului dvs.
Conținut grozav? Verificat. Temă drăguță aleasă și personalizată? Verificat. Se pare că sunteți gata să publicați noul tur al produsului și să vă transformați vizitatorii în clienți!
SlideDeck oferă trei modalități de a încorpora glisoarele dvs. pe site-ul dvs. WordPress – inserându-l în conținutul unei pagini sau postări existente, creând o pagină sau postare nouă cu glisorul încorporat și, în final, inserându-l în șablonul paginii dvs., ceea ce este cel mai probabil cea mai bună opțiune dacă doriți să adăugați turul produsului pe pagina dvs. de pornire.
Încheiere
Deși glisoarele de conținut sunt de obicei folosite doar pentru galerii de imagini sau postări prezentate, SlideDeck 2 vă oferă o mulțime de flexibilitate pentru a explora potențialul glisoarelor de conținut pentru a crea experiențe convingătoare care mențin vizitatorii dvs. angajați și care revin. Noi, la WPBeginner, vă recomandăm cu tărie să-l verificați! Un exemplu live al modului în care folosim un SlideDeck personalizat poate fi văzut pe pagina noastră Configurare gratuită blog WordPress.
Aveți un exemplu de SlideDeck pe care doriți să-l împărtășiți? Anunțați-ne în comentarii! De asemenea, consultați prima parte a acestei serii, unde vă arătăm cum să creați SlideDeck-uri cu surse dinamice.
Glisoarele cu interfață tactilă sunt viitorul designului web. Obțineți SlideDeck acum. Folosiți codul de cupon: WPB-SD2 pentru a obține 20% reducere.
Ai o întrebare sau o sugestie? Te rugăm să lași un comentariu pentru a începe discuția.