Divi: Cum să creați un glisor de mărturie compact pentru un antet

Doriți să inserați un glisor de mărturie compact pentru un antet Divi?

Adăugarea de mărturii pe site-ul dvs. este o modalitate eficientă de a construi credibilitatea afacerii dvs. (sau a mărcii dvs.) și de a construi încrederea utilizatorilor. vizitatori. 

Un glisor pentru mărturii este un instrument util pentru prezentarea mărturiilor într-un singur loc. Având în vedere acest lucru, este logic să adăugați un glisor compact pentru mărturie la antetul dvs., astfel încât aceste mărturii să fie unul dintre primele lucruri pe care utilizatorul le vede atunci când vă vizitează. site-ul web.

În acest tutorial, vă vom arăta cum să creați un glisor de mărturie compact pentru a prezenta mărturii scurte în antetul dvs. site-ul web. 

Pentru a face acest lucru, vom modifica Modulul Slider Divi într-un mod distractiv și unic.

Să începem!

Dar înainte de a putea descoperi ghidul nostru pe Divi, Cea mai bună temă WordPress din lume și cea mai ușor de utilizat

studiu

Iată slider-ul de mărturie compact pe care îl vom construi folosind modulul Slider Divi.

Și iată același glisor de mărturie adăugat la un antet global.

Și iată cum arată pe mobil.

Creați o pagină nouă cu Divi Builder

Pentru a începe, va trebui să faceți următoarele:

Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.

Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizați Divi Builder

Apoi faceți clic pe Începeți să construiți (Construiește de la zero)

După aceea, veți avea o pânză goală pentru a începe proiectarea în Divi.

Cum se creează un glisor compact pentru mărturie în Divi

Adăugați un nou rând și un modul de glisare

Pentru a începe, adăugați un rând cu o singură coloană la secțiune.

Apoi adăugați un modul Slider la rând.

Editați diapozitivul

În setările glisorului, eliminați al doilea slide implicit din filă Conţinut, apoi faceți clic pentru a modifica setările pentru diapozitivul rămas.

Conținut de diapozitive

Sub fila Conţinut din setările de diapozitive, actualizați următoarele:

• Titlu: „Donec solicitudin molestie malesuada. Vivamus suscipit torttor eget.
• Buton: Citiți tot
• Corp: — Tatiana Gagelman

După ce ați terminat, salvați setările pentru diapozitive.

Citiți și: Divi: Cum să utilizați setările măștii de fundal și opțiunile de transformare a modelului

Actualizați setările glisorului

Duplicați glisarea și ascundeți comenzile

După actualizarea primului slide cu cuprins, duplicați acest diapozitiv pentru a crea unul sau mai multe diapozitive suplimentare.

Apoi, sub grupul de opțiuni Elemente de, ascunde comenzile glisorului actualizând următoarele:

• Afișează control: NU

Actualizați fundalul tuturor diapozitivelor

În continuare, vom adăuga un fundal care va fi folosit pentru toate diapozitivele.

Pentru a adăuga fundalul, actualizați următoarele:

• Gradient de fundal:
  • Se oprește gradient 0%: #000000
  • Gradient se oprește 100%: #000000

• Imagine de fundal :
  • Dimensiune: Fit
  • Poziție: centru stânga
  • Amestec: Luminozitate

Setări cursor

Sub filă Amenajări, actualizați următoarele:

capac

• Utilizați suprapunerea de fundal: DA
• Culoare suprapunere fundal: rgba(0,0,0,0.7)

Textul titlului

• Titlu :
  • Nivel de titlu: H4
  • Font: Josefin Sans
  • Greutatea fontului: medie
  • Alinierea textului: stânga
  • Dimensiune text: 16 px (desktop și tabletă), 14 px (telefon)
  • Înălțimea liniei: 1,5 em

Corpul textului

• Corp :
  • Font: Josefin Sans
  • Alinierea textului: stânga
  • Culoare text: #aaaaaa
  • Spațiere între litere: 0,05 em

buton

• Utilizați dimensiune personalizată pentru buton: DA
• Buton:
  • Dimensiune text: 1 em
  • Culoare text: Implicit (Desktop), #000 (Hover)
  • Culoare de fundal (desktop): rgba(255,255,255,0.19)
  • Culoare de fundal (Hover): #ffffff
  • Lățimea chenarului: 0 pixeli
  • Spațiere între litere: 0,05 em
  • Font: Josefin Sans
  • Marja: 0px (sus și jos)
  • Umplutură: 0px (sus și jos), 0,6 em (stânga și dreapta)

Umplere automată și animație

Apoi, actualizați spațierea cursorului pentru a fi compactă și setați viteza de animație automată dorită.

• Marja: 0 pixeli (sus și jos)
• Umplutură: 1 em (sus și jos), 5% (stânga și dreapta)
• Animație automată: ON
• Viteza de animație automată: 3500

CSS personalizate

Sub filă Avansat, adăugați următorul CSS personalizat pentru a actualiza stilul fiecărui element glisor (titlu, buton și săgeți)

Titlul diapozitivului

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Acest lucru va asigura că titlul diapozitivului nu va crea o întrerupere de linie pe ecranele mai mici.

Butonul de glisare

position:absolute;
bottom: 1em;
right: 6%;

Acest lucru conferă butonului o poziție absolută, astfel încât să se așeze mult sub titlu și în dreapta diapozitivului, făcând glisorul și mai compact.

Trageți săgețile

font-size: 30px;
margin-top: -15px;

Pur și simplu face săgețile de navigare cu glisor mai mici pentru a se potrivi cu dimensiunea compactă a glisorului.

Sfat: Adăugați aceeași culoare de fundal în coloană pentru tranziții mai fluide ale diapozitivelor

Pentru a face acest lucru, deschideți setările coloanei părinte a glisorului și adăugați următoarea culoare de fundal:

• Fundal: #000000

Adăugarea imaginilor de fundal ale autorului la un diapozitiv

Dacă doriți să includeți o imagine de fundal a autorului pentru un diapozitiv, puteți face acest lucru adăugând o imagine de fundal la fiecare diapozitiv.

Odată ce ați adăugat imaginea de fundal la diapozitiv, imaginea de fundal va moșteni stilurile deja existente sub setările glisorului (nu al slide-ului).

rezultat

Vezi rezultatul final.

Adăugarea glisorului de mărturie compactă la un șablon de antet

Salvați modulul în biblioteca Divi

Înainte de a putea adăuga glisorul de mărturie compactă la un antet global, trebuie mai întâi să înregistrăm modulul în biblioteca Divi. 

Puteți face acest lucru trecând cu mouse-ul peste modulul Slider și făcând clic pe „ Adăugați la bibliotecă„. Apoi dați un nume aspectului și faceți clic pe butonul " Salvați în bibliotecă".

S-a adăugat un aspect compact al modulului de mărturie la un șablon de antet

Editați antetul personalizat

Odată ce noul modul glisor de mărturie a fost salvat în bibliotecă, suntem gata să-l adăugăm la un antet personalizat.

Accesul la Divi > Theme Builder, apoi faceți clic pe pictograma care vă permite să modificați " Antet personalizat".

Inserați modulul glisor de mărturie salvat din bibliotecă

În editorul de aspect al antetului, faceți clic pentru a adăuga modulul glisor pentru mărturie compactă acolo unde doriți să apară.

În mod „InsertModule”, selectați fila „Adăugați din bibliotecă”. Găsiți glisorul compact pentru mărturie pe care l-ați salvat mai devreme în bibliotecă și selectați-l.

Odată încărcat, salvați modificările.

Vezi si: Divi: Cum să afișați modulul Fullwidth Header pe ecran complet

Rezultat final

Mai jos este glisorul de mărturie adăugat la un antet global.

Aici avem slider-ul de mărturie fără imaginile de fundal ale autorului.

Și iată cum arată pe mobil.

Descărcați DIVI acum!!!

Concluzie

Glisorul compact pentru mărturie poate fi o nouă adăugare la antetul oricărui lucru site-ul web căutând să sporească credibilitatea serviciilor sale în cel mai vizibil loc de pe site-ul său. 

Îl poți folosi și pentru a redirecționa vizitatori la o pagină de mărturie sau o pagină de vânzări pentru a crește numărul de conversii. Sperăm că acest lucru vă va fi de folos în următoarele proiecte Divi.

Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.

De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet.

Nu ezitați să consultați și ghidul nostru despre Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...