Cum să creezi ușor un slider responsive în WordPress

Ați ajuns vreodată pe un site web și ați fost impresionați de o galerie frumoasă, glisantă, pe pagina principală? Este o modalitate excelentă de a prezenta cel mai bun conținut al dvs., dar a face să arate bine pe fiecare dispozitiv poate fi o adevărată bătaie de cap.

Știm cât de frustrant este atunci când un slider arată perfect pe computer, dar este greoi sau defect pe un smartphone. O experiență mobilă proastă poate alunga cu ușurință vizitatorii.

După ce am testat zeci de instrumente pe propriile noastre site-uri, am găsit cele mai simple moduri de a crea slidere care funcționează impecabil peste tot. Nu aveți nevoie de abilități de codare pentru a construi unul care să atragă atenția vizitatorilor dumneavoastră.

În acest articol, vă vom arăta câteva metode ușoare pentru a adăuga un slider responsive pe site-ul dvs. WordPress.

De ce să adăugați un slider WordPress receptiv pe site-ul dvs. web?

Un slider de conținut sau o prezentare de imagini este o modalitate excelentă de a evidenția cele mai populare produse WooCommerce, cele mai recente videoclipuri YouTube, recenziile clienților și multe altele.

Unii glisoare se redau automat, deci se deplasează între diapozitive automat. Acest lucru vă permite să afișați o mulțime de informații într-un spațiu mic, lăsând mult spațiu pentru alt conținut.

Amintește-ți doar, cheia unui glisor grozav este utilizarea imaginilor de înaltă calitate, dar bine optimizate. Acest lucru va menține glisorul tău arătând clar, fără a încetini site-ul tău web. 👍

Din acest motiv, multe site-uri web folosesc glisoare pe paginile lor cele mai importante, cum ar fi o pagină de destinație, pagina de pornire sau o pagină de vânzări.

Chiar dacă un glisor este setat să se deruleze automat, vizitatorii se pot deplasa de obicei între diapozitive manual, folosind butoanele de navigare. În acest fel, un glisor încurajează vizitatorii să interacționeze cu site-ul dvs., ceea ce îl face mai captivant.

Puteți vedea în GIF-ul de mai jos cât de dinamic poate face o pagină un slider video.

Acestea fiind spuse, să vedem cum puteți crea cu ușurință un slider responsive în WordPress. Pur și simplu utilizați linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați.

• Metoda 1. Creați un slider WordPress responsive folosind un plugin (rapid și ușor)
• Metoda 2. Creați un slider receptiv folosind un Page Builder (Mai personalizabil)
• Metoda 3. Crearea unui slider folosind Smash Balloon (cel mai bun pentru postări sociale și recenzii)
• Întrebări frecvente despre glisoarele responsive
• Resurse suplimentare

Metoda 1. Creați un slider WordPress responsive folosind un plugin (rapid și ușor)

Dacă doriți să creați un slider simplu care arată bine pe desktop și mobil, atunci vă recomandăm să utilizați pluginul Soliloquy.

Acest plugin slider WordPress vă permite să creați diapozitive folosind imagini din biblioteca dvs. media și poate afișa, de asemenea, videoclipuri găzduite pe platforme terțe precum YouTube.

Puteți adăuga, de asemenea, text alternativ și legende fiecărui diapozitiv, ceea ce este excelent pentru a crea conținut prietenos cu SEO.

Mai întâi, va trebui să vă înregistrați pentru un cont Soliloquy. După aceea, puteți instala și activa pluginul Soliloquy pe site-ul dvs. web. Pentru mai multe detalii, urmați ghidul nostru despre cum să instalați un plugin WordPress.

La activare, accesați Soliloquy » Setări în tabloul de bord WordPress și introduceți cheia de licență.

Cheia poate fi găsită conectându-vă la contul dvs. pe site-ul Soliloquy. După introducerea acestor informații, faceți clic pe butonul „Verify Key”.

Cu asta făcut, puteți adăuga un nou slider pe site-ul dvs. WordPress accesând Soliloquy » Add New.

Puteți începe prin a introduce un titlu. Acesta este doar pentru referința dvs., deci puteți folosi orice vă ajută să identificați slider-ul în tabloul de bord WordPress.

Apoi, este timpul să adăugați imagini și videoclipuri în slider. Puteți fie să trageți și să plasați fișiere pe editor, fie să faceți clic pe „Selectați fișiere din alte surse”.

Dacă doriți să utilizați imagini, atunci puteți adăuga acele fișiere în același mod în care adăugați imagini în editorul de blocuri WordPress.

Dacă doriți să includeți videoclipuri, vă recomandăm să le încărcați pe un site de găzduire video precum YouTube sau Vimeo. Încărcarea directă a videoclipurilor pe site-ul dvs. web nu este o idee bună, deoarece poate încetini site-ul dvs. și poate consuma mult spațiu de stocare.

Între timp, platforme precum YouTube sunt optimizate pentru video, astfel încât puteți afișa videoclipuri de înaltă rezoluție în glisoarele dvs. fără a afecta negativ site-ul dvs.

După ce ați ales o platformă de găzduire video, trebuie să încărcați toate videoclipurile pe care doriți să le includeți în sliderul WordPress. Dacă nu sunteți sigur cum să încărcați videoclipuri, vă recomandăm să citiți documentația oficială sau manualul de utilizare pentru platforma video aleasă.

Cu asta gata, pur și simplu faceți clic pe butonul „Selectați fișiere din alte surse” și apoi selectați „Inserare diapozitiv video”.

Acum puteți merge mai departe și lipiți URL-ul videoclipului în câmpul „Video URL”.

Soliloquy afișează toate formatele de link acceptate pe partea dreaptă, așa că asigurați-vă că linkul dvs. folosește unul dintre aceste formate.

Odată ce acest lucru este făcut, puteți introduce un titlu în câmpul „Titlu”. Acesta este doar pentru referința dvs., deci puteți folosi orice doriți. Puteți adăuga, de asemenea, text alternativ, care va ajuta motoarele de căutare să înțeleagă despre ce este vorba în acest slide.

După aceea, puteți tasta o legendă opțională în câmpul „Legendă”. Aceasta va fi afișată într-o bară gri în partea de jos a videoclipului înainte ca vizitatorul să apese „Redare”.

Dacă nu doriți să afișați această bară, atunci pur și simplu lăsați câmpul „Legendă” gol.

Când sunteți mulțumit de informațiile introduse, puteți crea mai multe diapozitive făcând clic pe „Adăugați un alt diapozitiv video”.

Pentru a configura acest nou slide, urmați pur și simplu același proces descris mai sus.

Odată ce ai creat toate slide-urile, apasă pe „Inserează în slider”.

Acum veți vedea toate slide-urile dvs. în secțiunea „În prezent în slider-ul dvs.”.

Apoi, puteți face clic pe fila „Configurare” și puteți utiliza setările glisorului pentru a-l personaliza. De exemplu, puteți alege o nouă temă pentru glisor, puteți modifica dimensiunea imaginii și puteți modifica poziția glisorului și a legendelor.

De asemenea, puteți personaliza săgețile glisorului și butonul de pauză/redare, puteți ajusta viteza de tranziție, puteți schimba timpul de întârziere și multe altele.

Apoi, veți dori să vă asigurați că slider-ul dvs. arată la fel de bine pe dispozitivele mobile, precum arată pe computere și laptopuri.

Acestea fiind spuse, faceți clic pe fila „Mobil” și bifați căsuța de lângă „Creează imagini pentru sliderul mobil”.

Puteți apoi să introduceți dimensiunile pe care doriți să le utilizați pentru imagini și videoclipuri pe dispozitivele mobile. Atunci când luați aceste decizii, poate fi util să vizualizați versiunea mobilă a site-ului dvs. WordPress pe un desktop.

În mod implicit, Soliloquy va ascunde legendele pentru utilizatorii mobili. Adesea, acest lucru ajută slide-urile să se potrivească mai confortabil pe ecranele mai mici utilizate de obicei de smartphone-uri și tablete.

Din acest motiv, recomandăm să lăsați această setare dezactivată, dar puteți bifa caseta de lângă „Afișați legende pe mobil” dacă preferați.

După ce ați terminat, faceți clic pe fila „Misc”. Aici puteți adăuga CSS personalizat glisorului dvs., puteți edita titlul și slug-ul glisorului și puteți exporta glisorul.

Când ești mulțumit de configurarea glisorului, apasă pe butonul „Publică”.

Soliloquy va crea automat un shortcode pe care îl puteți adăuga la orice pagină, postare sau zonă pregătită pentru widget-uri.

Pentru mai multe informații despre cum să plasați shortcode-ul, vă rugăm să consultați ghidul nostru despre cum să adăugați un shortcode în WordPress.

Pentru utilizatorii avansați, Soliloquy oferă, de asemenea, fragmente de cod care pot fi adăugate direct la fișierele temei dvs. WordPress. Această metodă oferă un control mai precis, dar este recomandată doar dacă vă simțiți confortabil editând codul. Pentru majoritatea utilizatorilor, rămânerea la bloc sau shortcode este cea mai ușoară și mai sigură modalitate!

Pentru instrucțiuni pas cu pas, consultați ghidul nostru despre cum să adăugați ușor cod personalizat în WordPress.

Cel mai simplu mod de a adăuga slider-ul pe site-ul dvs. este utilizând blocul Soliloquy din editorul Gutenberg. Pur și simplu accesați pagina sau postarea unde doriți să afișați slider-ul și apoi faceți clic pe butonul „+”.

În fereastra pop-up care apare, tastați „Soliloquy”.

Când apare blocul corect, faceți clic pentru a-l adăuga pe blogul sau site-ul dvs. WordPress.

După aceea, deschideți blocul Soliloquy și selectați sliderul pe care tocmai l-ați creat.

Acum puteți face clic pe butonul „Update” sau „Publish” pentru a face sliderul live.

Metoda 2. Creați un slider receptiv folosind un Page Builder (Mai personalizabil)

Dacă doriți să creați un slider simplu de videoclipuri sau imagini, atunci un plugin precum Soliloquy este o alegere excelentă. Cu toate acestea, dacă doriți să integrați perfect un slider într-un design de pagină complet personalizat, cum ar fi o pagină de destinație sau o pagină principală, atunci recomandăm să utilizați în schimb un plugin de page builder.

SeedProd este cel mai bun constructor de pagini WordPress drag-and-drop. Vă permite să creați pagini de destinație personalizate și chiar să creezi o temă WordPress personalizată fără a fi nevoie să scrii o singură linie de cod.

De asemenea, are un bloc Image Carousel pe care îl puteți folosi pentru a crea slidere uimitoare.

Puteți pur și simplu să plasați acest bloc gata făcut oriunde pe o pagină și apoi să îl personalizați folosind puternicul editor drag-and-drop.

Mai întâi, trebuie să instalați și să activați pluginul SeedProd. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activarea pluginului, SeedProd vă va solicita cheia de licență.

Puteți găsi această cheie de licență în contul dvs. de pe site-ul SeedProd. După introducerea informațiilor, faceți clic pe butonul „Verificați cheia”.

Cu asta făcut, mergeți la SeedProd » Pagini de destinație în tabloul de bord WordPress.

1. Alegeți un șablon de pagină

SeedProd vine cu peste 180 de șabloane proiectate profesional, grupate pe categorii. Deasupra, vei vedea categorii care îți permit să creezi pagini frumoase de tip coming soon, să activezi modul de mentenanță, să creezi o pagină de autentificare personalizată pentru WordPress și multe altele.

Toate șabloanele SeedProd sunt ușor de personalizat, astfel încât puteți folosi orice design doriți. Când găsiți un șablon care vă place, pur și simplu treceți mouse-ul peste el și faceți clic pe pictograma de bifă.

Acum puteți introduce un nume pentru pagina dvs. de destinație în câmpul „Nume pagină”. SeedProd va crea automat un „URL pagină” folosind numele paginii.

Este inteligent să incluzi cuvinte cheie relevante în acest URL ori de câte ori este posibil, deoarece acest lucru va ajuta motoarele de căutare să înțeleagă despre ce este pagina. Acest lucru poate îmbunătăți adesea SEO-ul WordPress.

Pentru a schimba URL-ul generat automat al paginii, pur și simplu tastați în câmpul „URL pagină”.

Când sunteți mulțumit de informațiile introduse, faceți clic pe „Salvare și începerea editării paginii”. Aceasta va încărca interfața de creare a paginilor SeedProd.

2. Personalizați aspectul paginii dvs.

Constructorul drag-and-drop al SeedProd afișează o previzualizare live a designului paginii dumneavoastră în dreapta. În stânga se află un meniu cu toate blocurile și secțiunile diferite pe care le puteți adăuga la pagină.

Când găsiți un bloc pe care doriți să îl adăugați, pur și simplu trageți-l și plasați-l pe șablonul dvs.

Pentru a personaliza un bloc, pur și simplu faceți clic pentru a selecta acel bloc în editorul SeedProd. Meniul din stânga se va actualiza acum pentru a afișa toate setările pe care le puteți utiliza pentru a-l personaliza.

Pe măsură ce construiți pagina, puteți muta blocurile în aspectul dvs. prin glisare și fixare. Pentru instrucțiuni mai detaliate, consultați ghidul nostru despre cum să creați o pagină de destinație cu WordPress.

3. Adăugați și proiectați glisorul dvs. responsiv

Pentru a crea un slider receptiv folosind SeedProd, pur și simplu găsiți blocul Carusel de imagini în meniul din stânga și apoi trageți-l pe aspectul dvs.

Apoi, faceți clic pentru a selecta blocul Carousel de imagini în editorul de pagină.

Acum puteți continua și adăuga toate imaginile pe care doriți să le afișați în slider. Pentru a începe, faceți clic pe elementul „Imagine 1” pe care SeedProd îl creează implicit.

Acum puteți folosi o fotografie din biblioteca încorporată a SeedProd sau puteți face clic pe „Utilizați propria imagine” și alegeți un fișier din biblioteca media WordPress.

După ce ați ales o imagine, puteți adăuga o legendă care va apărea sub acea imagine. SeedProd nu afișează legende în mod implicit, dar vă vom arăta cum să le activați mai târziu în acest articol.

Când sunteți mulțumit de modul în care este configurat slide-ul, faceți clic pe butonul „Adăugare imagini” pentru a crea un alt slide.

Pentru a adăuga mai multe slide-uri, urmați pur și simplu același proces descris mai sus.

După ce ați adăugat toate imaginile la glisorul dvs., este timpul să personalizați cum arată și cum funcționează acel glisor.

În meniul din stânga, faceți clic pentru a extinde secțiunea „Setări carousel”.

Pentru a începe, puteți comuta între modurile deschis și întunecat pentru butoanele de navigare ale glisorului.

Pentru a încerca aceste moduri diferite, faceți clic pe butoanele de lângă „Navigation Color Mode”. Previzualizarea live se va actualiza automat, astfel încât să puteți vedea ce mod vă place cel mai mult.

În mod implicit, caruselul afișează un singur diapozitiv, iar vizitatorii vor trebui să utilizeze controalele de navigare pentru a vedea mai mult conținut.

Cu toate acestea, s-ar putea să dorești să afișezi mai multe diapozitive simultan deschizând meniul derulant „Diapozitiv de afișat” și alegând un număr din listă. Acest lucru poate fi util dacă sliderul are mult conținut și te îngrijorezi că vizitatorii s-ar putea să nu dea clic pe toate diapozitivele.

Implicit, vizitatorii vor trebui să facă clic pentru a vedea următorul diapozitiv. Având în vedere acest lucru, ați putea dori să activați redarea automată, deoarece aceasta crește adesea numărul de diapozitive pe care le vede un vizitator.

Pentru a face acest lucru, faceți clic pentru a activa comutatorul „Redare automată” și apoi specificați cât timp ar trebui să rămână fiecare slide pe ecran introducând un număr în „Viteză redare automată”.

Dacă ați adăugat legende imaginilor, asigurați-vă că faceți clic pe glisorul „Afișare legendă” pentru a-l schimba din „Nu” în „Da”.

Puteți schimba, de asemenea, alinierea legendei.

În funcție de culoarea de fundal, este posibil să fie necesar să schimbați culoarea legendei înainte ca aceasta să fie vizibilă vizitatorilor.

Pentru a face acest lucru, faceți clic pe fila „Avansat” și apoi utilizați setările „Culoare legendă”.

Puteți stiliza în continuare textul făcând clic pe butonul „Edit” de lângă „Caption Typography”.

Acest lucru adaugă câteva setări unde puteți schimba dimensiunea fontului, înălțimea liniei, spațierea și multe altele.

Când sunteți mulțumit de aspectul legendelor, puteți adăuga diferite umbre de cutie la slide-uri folosind meniul derulant „Stiluri imagini slider”.

Aceste umbre pot face cu adevărat ca diapozitivele să iasă în evidență, așa că merită să încercați diferite umbre pentru a vedea dacă se potrivesc designului paginii dvs.

În fila „Avansat” veți găsi, de asemenea, setări care vă permit să adăugați o bordură, să schimbați spațierea și chiar să creați o animație de intrare.

Explorați cu încredere aceste setări avansate pentru a vedea toate efectele diferite pe care le puteți crea. De exemplu, puteți adăuga o bordură pentru a face sliderul să iasă în evidență sau puteți folosi animații pentru a atrage atenția vizitatorului! ✨

4. Publică-ți pagina de destinație

Când sunteți mulțumit de aspectul slider-ului, puteți continua să lucrați la restul paginii. Pur și simplu trageți blocuri în designul dvs. și apoi personalizați-le folosind setările din meniul din stânga.

Dacă doriți să ștergeți un bloc, pur și simplu treceți cu mouse-ul peste el și apoi faceți clic pe pictograma coșului de gunoi când apare.

Când vi se cere, faceți clic pe „Da, ștergeți-l.”

Când sunteți mulțumit de aspectul paginii, faceți clic pe butonul „Salvare” pentru a o face live. În cele din urmă, selectați „Publicare” pentru a face glisorul dvs. live.

Metoda 3. Crearea unui slider folosind Smash Balloon (cel mai bun pentru postări sociale și recenzii)

Suntem mai predispuși să încercăm lucruri pe care le vedem pe alții cumpărând, folosind sau recomandând. Acesta este motivul pentru care este o idee bună să arăți dovadă socială pe site-ul tău web, inclusiv recenzii ale clienților, testimoniale sau chiar comentarii pozitive pe social media.

Cea mai ușoară modalitate de a afișa dovezi sociale pe site-ul dvs. este prin utilizarea Smash Balloon. Smash Balloon are pluginuri care vă permit să încorporați conținut de pe Instagram, Facebook, Twitter și YouTube.

De asemenea, are un plugin pentru fluxul de recenzii pe care îl puteți utiliza pentru a afișa recenzii de pe Facebook, Tripadvisor, Yelp, Trustpilot, WordPress.org și Google.

Cu toate acestea, afișarea multor comentarii și recenzii pozitive pe magazinul tău online sau pe site poate ocupa mult spațiu.

De aceea Smash Balloon vine cu layout-uri și șabloane de carusel integrate pe care le puteți folosi pentru a crea glisoare responsive. Acest lucru vă permite să creați slideshow-uri de social media și recenzii cu doar câteva clicuri.

Mai bine, Smash Balloon va prelua automat conținutul nou, astfel încât slider-ul va afișa întotdeauna cele mai recente postări.

O altă opțiune este afișarea conținutului din propriile dvs. conturi de social media.

Dacă vizitatorilor le place ceea ce văd, s-ar putea să decidă să vă urmărească pe rețelele sociale.

Pentru a te ajuta să obții mai mulți urmăritori, Smash Balloon vine cu butoane de apel la acțiune gata făcute pe care le poți adăuga la glisoarele tale.

Pentru instrucțiuni detaliate, pas cu pas, vă rugăm să consultați ghidurile noastre despre cum să adăugați fluxuri de social media în WordPress și cum să afișați recenziile Google, Facebook și Yelp în WordPress.

Întrebări frecvente despre glisoarele responsive

Echipa noastră primește multe întrebări despre utilizarea sliderelor în WordPress. Mai jos sunt răspunsuri la unele dintre cele mai frecvente pe care le auzim de la cititorii noștri.

Ce este un slider WordPress responsive?

Un glisor receptiv este o componentă de prezentare de diapozitive care își ajustează automat dimensiunea și aspectul pentru a se potrivi oricărui ecran. Acest lucru asigură că arată grozav și este ușor de utilizat pe desktop-uri, tablete și smartphone-uri.

Sunt slider-ele rele pentru SEO?

Deși glisoarele prost codificate pot încetini site-ul dvs. și pot afecta SEO, pluginurile moderne sunt construite având în vedere performanța. De exemplu, un plugin precum Soliloquy folosește încărcarea leneșă și o structură HTML adecvată pentru a fi prietenos cu SEO.

Este, de asemenea, important să adăugați text alternativ descriptiv imaginilor dvs. de diapozitive. Acest lucru ajută motoarele de căutare să vă înțeleagă conținutul.

Încetinesc sliderii site-ul dvs. web?

Glisoarele pot afecta timpii de încărcare a paginii dacă conțin fișiere de imagine mari, neoptimizate. Cu toate acestea, cele mai bune pluginuri de glisoare WordPress sunt ușoare și optimizate pentru viteză.

Pentru a vă asigura că glisorul dvs. nu încetinește site-ul dvs., recomandăm comprimarea imaginilor înainte de a le încărca în WordPress. Acest lucru reduce dimensiunea fișierului fără a sacrifica calitatea.

Care este cel mai bun plugin de glisare responsiv pentru WordPress?

Cel mai bun plugin depinde de nevoile dumneavoastră specifice. Recomandăm Soliloquy ca cea mai bună alegere generală pentru ușurința în utilizare și performanța rapidă.

Dacă vrei să construiești layout-uri personalizate de pagină, blocul Carousel de Imagini de la SeedProd oferă mai multă flexibilitate în design. Pentru afișarea fluxurilor de social media sau a recenziilor clienților într-un glisor, Smash Balloon este instrumentul perfect.

Resurse suplimentare

Sperăm că acest articol v-a ajutat să învățați cum să creați cu ușurință un glisor responsive în WordPress. S-ar putea să doriți, de asemenea, să consultați aceste alte ghiduri de pe site-ul nostru:

• Cum să creezi un slider video și imagine WordPress (modul ușor)
• Cele mai bune plugin-uri PDF pentru WordPress (Vizualizator, Încorporare și Descărcări)

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.