Želite li umetnuti kompaktni klizač izjave za Divi zaglavlje?
Dodavanje izjava na vašu web stranicu je efikasan način za izgradnju kredibiliteta vašeg poslovanja (ili vašeg brenda) i izgradnje povjerenja kod korisnika. posjetitelja.
Klizač za izjave je zgodan alat za izlaganje izjava na jednom mjestu. Imajući to na umu, ima smisla dodati kompaktni klizač za izjave u zaglavlje kako bi ova svjedočanstva bila jedna od prvih stvari koju korisnik vidi kada posjeti vašu sajt.
U ovom tutorijalu pokazat ćemo vam kako da napravite kompaktni klizač za svjedočanstvo da biste prikazali kratka svjedočanstva u zaglavlju vašeg site Web.
Da bismo to učinili, modificirat ćemo Divi Slider Module na zabavan i jedinstven način.
Krenimo!
Ali prije nego što otkrijete naš vodič Divi, najbolja WordPress tema na svijetu i najjednostavnija za upotrebu
pregled
Evo kompaktnog klizača za izjave koji ćemo napraviti koristeći Divi-jev Slider modul.
A evo tog istog klizača za svjedočanstvo dodanog u globalno zaglavlje.
A evo kako to izgleda na mobilnom.
Kreirajte novu stranicu sa Divi Builder-om
Da biste započeli, morat ćete učiniti sljedeće:
Sa WordPress kontrolne table idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder
Zatim kliknite na Start Building (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi-ju.
Kako napraviti kompaktni klizač za izjave u Diviju
Dodajte novi red i modul klizača
Za početak dodajte red s jednom kolonom u odjeljak.
Zatim dodajte modul Slider na liniju.
Uredi slajd
U postavkama klizača uklonite zadani drugi slajd ispod kartice sadržaj, a zatim kliknite da promijenite postavke za preostali slajd.
Sadržaj slajda
Pod karticom sadržaj iz postavki slajda, ažurirajte sljedeće:
- Naslov: “Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
- Dugme: Pročitaj sve
- Telo: — Tatjana Gagelman
Kada završite, sačuvajte postavke slajda.
Pročitajte takođe: Divi: Kako koristiti postavke maske u pozadini i opcije transformacije uzorka
Ažurirajte postavke klizača
Duplirajte slajd i sakrijte kontrole
Nakon ažuriranja prvog slajda sa sadržaja, duplicirajte ovaj slajd da biste kreirali jedan ili više dodatnih slajdova.
Zatim pod grupom opcija elementi, sakrijte kontrole klizača ažuriranjem sljedećeg:
- Prikaži kontrolu: NE
Ažurirajte pozadinu svih slajdova
Zatim ćemo dodati pozadinu koja će se koristiti za sve slajdove.
Da dodate pozadinu, ažurirajte sljedeće:
- Gradijent pozadine:
- Gradijent zaustavlja 0%: #000000
- Gradijent zaustavlja 100%: #000000
- Pozadinska slika :
- Veličina: Fit
- Pozicija: centar lijevo
- Mješavina: Luminosity
Postavke klizača
Ispod kartice dizajn, ažurirajte sljedeće:
poklopac
- Koristi preklapanje pozadine: DA
- Boja prekrivanja pozadine: rgba(0,0,0,0.7)
Naslov teksta
- Naslov:
- Nivo naslova: H4
- Font: Josefin Sans
- Težina fonta: srednja
- Poravnanje teksta: lijevo
- Veličina teksta: 16px (Desktop i tablet), 14px (telefon)
- Visina linije: 1,5 em
Telo teksta
- Tijelo:
- Font: Josefin Sans
- Poravnanje teksta: lijevo
- Boja teksta: #aaaaaa
- Razmak između slova: 0,05em
dugme
- Koristi prilagođenu veličinu za dugme: DA
- Dugme:
- Veličina teksta: 1em
- Boja teksta: zadano (Desktop), #000 (lebdenje)
- Boja pozadine (Desktop): rgba(255,255,255,0.19)
- Boja pozadine (lebdenje): #ffffff
- Širina ivice: 0 piksela
- Razmak između slova: 0,05em
- Font: Josefin Sans
- Margina: 0px (vrh i dno)
- Padding: 0px (vrh i dno), 0,6em (lijevo i desno)
Automatsko popunjavanje i animacija
Zatim ažurirajte razmak klizača tako da bude kompaktan i postavite željenu brzinu automatske animacije.
- Margina: 0px (gore i dno)
- Padding: 1em (gornji i donji), 5% (lijevo i desno)
- Automatska animacija: UKLJUČENO
- Brzina automatske animacije: 3500
Prilagođeni CSS
Ispod kartice Napredan, dodajte sljedeći prilagođeni CSS da ažurirate stil svakog elementa klizača (naslov, dugme i strelice)
Naslov slajda
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;Ovo će osigurati da naslov slajda neće stvoriti prijelom reda na manjim ekranima.
Klizni taster
position:absolute;
bottom: 1em;
right: 6%;Ovo dugmetu daje apsolutnu poziciju tako da se nalazi dosta ispod naslova i desno od slajda, čineći klizač još kompaktnijim.
Povucite strelice
font-size: 30px;
margin-top: -15px;To samo čini strelice za navigaciju klizača manjim kako bi se prilagodio kompaktnoj veličini klizača.
Savjet: Dodajte istu boju pozadine koloni za glatkije prijelaze slajdova
Da biste to učinili, otvorite postavke roditeljskog stupca klizača i dodajte sljedeću boju pozadine:
- Pozadina: #000000
Dodavanje pozadinskih slika autora na slajd
Ako želite da uključite pozadinsku sliku autora za slajd, to možete učiniti dodavanjem pozadinske slike svakom slajdu.
Nakon što dodate pozadinsku sliku na slajd, pozadinska slika će naslijediti stilove koji su već postavljeni pod postavkama klizača (ne slajda).
rezultat
Pogledajte krajnji rezultat.
Dodavanje kompaktnog klizača za izjave u predložak zaglavlja
Sačuvajte modul u Divi biblioteci
Prije nego što možemo dodati kompaktni klizač izjave u globalno zaglavlje, prvo moramo registrirati modul u Divi biblioteci.
To možete učiniti tako da zadržite pokazivač miša iznad modula Slider i kliknete na " Dodaj u biblioteku“. Zatim dajte naziv izgledu i kliknite na dugme " Sačuvaj u biblioteku".
Dodan je kompaktni izgled modula za svjedočanstvo u predložak zaglavlja
Uredite prilagođeno zaglavlje
Nakon što je novi modul klizača za izjave sačuvan u biblioteci, spremni smo da ga dodamo u prilagođeno zaglavlje.
Pristup Divi > Theme Builder, zatim kliknite na ikonu koja vam omogućava da izmijenite " Custom Header".
Ubacite sačuvani modul klizača izjave iz biblioteke
U uređivaču izgleda zaglavlja kliknite da dodate kompaktni modul klizača za izjave tamo gdje želite da se pojavi.
U mod “InsertModule”, odaberite karticu “Dodaj iz biblioteke”. Pronađite kompaktni klizač za izjave koji ste ranije sačuvali u biblioteci i odaberite ga.
Nakon učitavanja, sačuvajte promjene.
Vidi također: Divi: Kako prikazati modul Fullwidth Header na cijelom ekranu
Konačni rezultat
Ispod je klizač za svjedočanstvo koji je dodan globalnom zaglavlju.
Ovdje imamo klizač izjave bez pozadinskih slika autora.
A evo kako to izgleda na mobilnom.
Preuzmite DIVI sada!!!
zaključak
Kompaktni klizač za izjave može biti novi dodatak zaglavlju bilo čega site Web nastojeći da poboljša kredibilitet svojih usluga na najvidljivijem mjestu na svojoj web stranici.
Možete ga koristiti i za preusmjeravanje posjetitelja na stranicu sa preporukama ili prodajnu stranicu kako biste povećali konverzije. Nadamo se da će vam ovo biti korisno u vašim sljedećim Divi projektima.
Ako imate bilo kakvih nedoumica ili prijedloga, pronađite nas u odjeljak komentara da razgovaramo o tome.
Takođe možete konsultovati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se da konsultujete i naš vodič o Izrada bloga WordPress ili onaj on Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
