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

Adăugarea de mărturii pe site-ul dvs. este o modalitate eficientă de a spori credibilitatea afacerii (sau a mărcii) dvs. și de a construi încredere cu vizitatorii. Un glisor pentru mărturii este un instrument convenabil pentru prezentarea mărturiilor într-un singur loc. Având în vedere acest lucru, este logic să adăugați un glisor de mărturie compact 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.

În acest tutorial, vă vom arăta cum să creați un glisor de mărturii compact pentru prezentarea unor mărturii scurte în antetul site-ului dvs. web. Pentru a face acest lucru, vom modifica modulul Slider Divi într-un mod distractiv și unic.

Să începem!

Trage cu ochiul

Iată glisorul de mărturie compact pe care îl vom construi folosind modulul glisant Divi.

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

Iată cum arată pe mobil.

Descărcați aspectul și șablonul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Importați aspectul în biblioteca Divi

Pentru a importa aspectul secțiunii în biblioteca Divi, navigați la biblioteca Divi.

Faceți clic pe butonul Import.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer. Acesta va fi fișierul JSON numit „divi-short-testimonial-slider-module-layout.json”.

Apoi faceți clic pe butonul de import.

După ce ați terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Importați șablonul de antet în Generatorul de teme Divi

Dacă doriți să importați șablonul de antet cu glisorul de mărturie compact adăugat la antet, va trebui să navigați în Divi> Theme Builder.

Apoi utilizați pictograma de portabilitate din partea dreaptă sus a paginii pentru a importa fișierul JSON. Acesta va fi fișierul numit „divi-short-testimonial-slider-header-template.json”.

Să trecem la tutorial, nu-i așa?

Ce trebuie să începeți

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

1. Dacă nu ați făcut-o încă, instalați și activați tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina din partea frontală (builder vizual).
3. Alegeți opțiunea „Build From Scratch”.

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

Cum să creați un glisor de mărturie compact în Divi

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

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

Apoi adăugați un modul glisant pe rând.

Editați diapozitivul

Sub setările glisorului, ștergeți al doilea diapozitiv implicit de sub fila conținut și apoi faceți clic pentru a edita setările glisantei rămase.

Slide Content

Sub fila conținut a setărilor diapozitivelor, actualizați următoarele:

• Titlu: „Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget. ”
• Text buton: Citește totul
• Corp: - Tatiana Gagelman

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

Actualizați setările glisorului

Duplicați comenzile pentru diapozitive și ascunderi

După actualizarea primului diapozitiv cu conținut, copiați diapozitivul pentru a crea unul sau mai multe diapozitive suplimentare.

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

• Afișați comenzile: NU

Actualizați fundalul pentru toate diapozitivele

Apoi, vom adăuga un fundal care va fi utilizat pentru toate diapozitivele. Acest fundal va include un gradient de fundal și un stil de imagine de fundal (pentru când / dacă adăugați o imagine de fundal de autor la un diapozitiv individual).

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

• Culoarea din stânga a gradientului de fundal: # 000000
• Culoarea dreaptă a gradientului de fundal: # 000000
• Dimensiunea imaginii de fundal: potrivită
• Poziția imaginii de fundal: Centrul Stânga
• Amestec de imagine de fundal: luminozitate

Este important să rețineți că nu adăugăm o imagine de fundal aici. Adăugăm doar dimensiunea, poziția și modul de amestecare pentru imaginea care va fi utilizată de un slide individual. Este mai ușor să îl adăugați aici, mai degrabă decât să adăugați același stil la fiecare diapozitiv separat. Mai târziu, vă vom arăta cum să adăugați imagini la diapozitivele individuale.

Setări de proiectare a cursorului

Sub fila Proiectare, actualizați următoarele:

Acoperire

• Utilizați suprapunerea în fundal: DA
• Culoare suprapunere fundal: rgba (0,0,0,0,7)

Textul titlului

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

Corpul textului

• Font corp: Josefin Sans
• Alinierea textului corpului: stânga
• Culoarea textului corpului: #aaaaaa
• Spațierea literelor corporale: 0,05em

Buton

• Utilizați stiluri personalizate pentru buton: DA
• Dimensiune text buton: 1em
• Culoarea textului butonului: implicit (desktop), # 000 (trecere)
• Culoare fundal buton (desktop): rgba (255.255.255,0.19)
• Culoarea fundalului butonului (hover): #ffffff
• Lățimea chenarului butonului: 0 px
• Distanța dintre litere și butoane: 0,05em
• Buton Font: Josefin Sans
• Marja butonului: 0 px sus, 0 px jos
• Buton de umplere: 0 px sus, 0 px jos, 0,6 em stânga, 0,6 em dreapta

Căptușire și animație automată

Apoi actualizați spațiul glisorului astfel încât să fie compact și setați viteza automată de animație pe care o doriți pentru glisor.

• Marja: 0 px de sus, 0 px de jos
• Căptușeală: 1em sus, 1em jos, 5% stânga, 5% dreapta
• Animație automată: ON
• Viteza de animație automată: 3500

CSS personalizat

Sub fila avansată, adăugați următoarele CSS personalizate pentru a actualiza stilul fiecărui element glisant (Titlu, Buton și Săgeți)

Titlu diapozitiv

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

Acest lucru se va asigura că Titlul diapozitivului nu va crea o întrerupere de linie pe ecrane mai mici.

Buton Slide

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

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

Glisați săgețile

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

Acest lucru simplifică săgețile de navigație ale glisorului pentru a se potrivi cu dimensiunea compactă a glisorului.

Sfat: Adăugați aceeași culoare de fundal la coloană pentru tranziții de diapozitive mai fine

În prezent, animația fiecărui diapozitiv va anima culoarea de fundal împreună cu conținutul diapozitivului, pentru a împiedica afișarea fundalului acestei animații, putem da aceeași culoare de fundal coloanei, astfel încât tranziția să fie mai lină.

Pentru aceasta, deschideți setările pentru coloana părinte a glisorului și adăugați următoarea culoare de fundal:

• Culoare fundal: # 000000

Adăugarea de imagini de fundal de autor într-o diapozitivă

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

După ce adăugați imaginea de fundal la diapozitiv, imaginea de fundal va moșteni stilurile deja existente sub setările glisorului (nu diapozitivului).

Rezultat

Verificați rezultatul final.

Adăugarea glisorului de mărturie compact într-un șablon de antet

Salvarea modulului în biblioteca Divi

Înainte de a putea adăuga glisorul de mărturie compact într-un antet global, trebuie mai întâi să salvăm modulul în Biblioteca Divi. Puteți face acest lucru trecând cu mouse-ul peste modulul glisor și făcând clic pe pictograma „Salvare în bibliotecă”. Apoi dați aspectului un nume și faceți clic pe butonul „Salvați în bibliotecă”.

Adăugarea aspectului compact al modulului de mărturie la un șablon de antet

Editați antetul personalizat

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

Navigați la Divi> Theme Builder, apoi faceți clic pentru a edita antetul personalizat pentru șablon.

Inserați aspectul modulului glisor mărturie salvat din bibliotecă

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

În modul Insert Module, selectați fila Adăugare din bibliotecă. Găsiți glisorul de mărturie compact pe care l-ați salvat anterior în bibliotecă și selectați-l.

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

Rezultat final

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

Și aici este același glisor de mărturie fără imaginile de fundal ale autorului.

Iată cum arată pe mobil.

Gânduri finale

Glisorul de mărturie compact poate fi un nou plus la antetul oricărui site web care dorește să sporească credibilitatea serviciilor lor în cel mai vizibil loc al site-ului lor web. De asemenea, îl puteți folosi pentru a redirecționa vizitatorii către o pagină de mărturie sau o pagină de vânzări crește conversiile. Sperăm că vă va fi de folos.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!