Želite li umetnuti kompaktni klizač izjave za Divi zaglavlje?
Dodavanje svjedočanstava na vašu stranicu učinkovit je način za izgradnju vjerodostojnosti vaše tvrtke (ili robne marke) i izgradnju povjerenja među posjetitelji.
Klizač svjedočanstava praktičan je alat za prikazivanje svjedočanstava na jednom mjestu. Imajući to na umu, ima smisla dodati kompaktni klizač svjedočanstava u vaše zaglavlje tako da te svjedočanstva budu jedna od prvih stvari koje korisnik vidi kada posjeti vaš web stranica.
U ovom vodiču pokazat ćemo vam kako izraditi kompaktni klizač svjedočanstava za prikazivanje kratkih svjedočanstava u zaglavlju vašeg web stranica.
Kako bismo to učinili, modificirat ćemo Divi Slider Module na zabavan i jedinstven način.
Započnimo!
Ali prije nego što otkrijete naš vodič o Divi, Najbolja WordPress tema na svijetu i najjednostavnija za upotrebu
pregled
Ovo je kompaktni klizač s izjavama koji ćemo izraditi koristeći Divijev modul Slider.
I ovdje je taj isti klizač svjedočanstava dodan u globalno zaglavlje.
A evo kako to izgleda na mobitelu.
Stvorite novu stranicu s Divi Builderom
Da biste započeli, morat ćete učiniti sljedeće:
S WordPress nadzorne ploče idite na Stranice> Dodaj novo za stvaranje nove stranice.
Dajte mu naslov koji vam ima smisla i kliknite Koristite Divi Builder
zatim kliknite Počnite graditi (Gradi od ogrebotina)
Nakon toga imat ćete prazno platno za početak dizajniranja u Divi.
Kako stvoriti kompaktni klizač s izjavama u Diviju
Dodajte novi redak i modul klizača
Za početak, odjeljku dodajte redak s jednim stupcem.
Zatim dodajte modul klizača u red.
Uredi slajd
U postavkama klizača uklonite zadani drugi slajd ispod kartice Sadržaj, zatim kliknite za promjenu postavki za preostali slajd.
Sadržaj slajda
Pod karticom Sadržaj iz postavki slajdova ažurirajte sljedeće:
- Naslov: “Donec solicitudin molestie malesuada. Vivamus suscipit tortor eget.
- Gumb: Pročitaj sve
- Tijelo: — Tatiana Gagelman
Kada završite, spremite postavke slajda.
Pročitajte također: Divi: Kako koristiti postavke pozadinske maske i opcije transformacije uzorka
Ažurirajte postavke klizača
Dupliciraj slajd i sakrij kontrole
Nakon ažuriranja prvog slajda s sadržaj, duplicirajte ovaj slajd da biste stvorili jedan ili više dodatnih slajdova.
Zatim pod grupom opcija Elementi, sakrijte kontrole klizača ažuriranjem sljedećeg:
- Show Control: NE
Ažurirajte pozadinu svih slajdova
Zatim ćemo dodati pozadinu koja će se koristiti za sve slajdove.
Da biste dodali pozadinu, ažurirajte sljedeće:
- Gradijent pozadine:
- Zaustavljanje gradijenta 0%: #000000
- Zaustavljanje gradijenta 100%: #000000
- Pozadinska slika :
- Veličina: Fit
- Pozicija: Sredina lijevo
- Mješavina: Luminosity
Postavke klizača
Ispod kartice dizajnažurirajte sljedeće:
poklopac
- Koristi pozadinski sloj: DA
- Boja sloja pozadine: rgba(0,0,0,0.7)
Tekst naslova
- Naslov:
- Razina naslova: H4
- Font: Josefin Sans
- Težina fonta: Srednja
- Poravnanje teksta: lijevo
- Veličina teksta: 16 px (stolno računalo i tablet), 14 px (telefon)
- Visina linije: 1,5 em
Tijelo teksta
- Tijelo:
- Font: Josefin Sans
- Poravnanje teksta: lijevo
- Boja teksta: #aaaaaa
- Razmak između slova: 0,05 em
dugme
- Koristi prilagođenu veličinu za gumb: DA
- Dugme :
- Veličina teksta: 1em
- Boja teksta: Zadana (Desktop), #000 (Hover)
- Boja pozadine (Desktop): rgba(255,255,255,0.19)
- Boja pozadine (prelazak pokazivačem): #ffffff
- Širina obruba: 0 piksela
- Razmak između slova: 0,05 em
- Font: Josefin Sans
- Margina: 0px (gornja i donja)
- Ispod: 0px (gore i dolje), 0,6 em (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 (gornja i donja)
- Ispuna: 1em (gore i dolje), 5% (lijevo i desno)
- Automatska animacija: UKLJUČENO
- Brzina automatske animacije: 3500
Prilagođeni CSS
Ispod kartice napredan, dodajte sljedeći prilagođeni CSS za ažuriranje stila svakog elementa klizača (naslov, gumb i strelice)
Naslov slajda
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;Ovo će osigurati da naslov slajda neće stvoriti prijelom retka na manjim zaslonima.
Klizno dugme
position:absolute;
bottom: 1em;
right: 6%;To gumbu daje apsolutni položaj tako da se nalazi dosta ispod naslova i desno od slajda, čineći klizač još kompaktnijim.
Povucite strelice
font-size: 30px;
margin-top: -15px;Samo smanjuje navigacijske strelice klizača kako bi se prilagodile kompaktnoj veličini klizača.
Savjet: dodajte istu boju pozadine u stupac za glatkije prijelaze slajdova
Da biste to učinili, otvorite postavke nadređenog stupca klizača i dodajte sljedeću boju pozadine:
- Pozadina: #000000
Dodavanje pozadinskih slika autora na slajd
Ako želite uključiti 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
Provjerite krajnji rezultat.
Dodavanje kompaktnog klizača izjave u predložak zaglavlja
Spremite modul u Divi biblioteku
Prije nego što možemo dodati kompaktni klizač izjave u globalno zaglavlje, najprije moramo registrirati modul u Divi biblioteci.
To možete učiniti tako da zadržite pokazivač iznad modula Klizač i kliknete na " Dodaj u biblioteku“. Zatim dodijelite ime izgledu i kliknite na gumb " Spremi u biblioteku".
Predlošku zaglavlja dodan kompaktni izgled modula svjedočanstava
Uredi prilagođeno zaglavlje
Nakon što se novi modul klizača svjedočanstava spremi u biblioteku, spremni smo ga dodati u prilagođeno zaglavlje.
Pristup Divi > Izrada tema, zatim kliknite na ikonu koja vam omogućuje izmjenu " Prilagođena zaglavlja".
Umetnite spremljeni modul klizača izjave iz biblioteke
U uređivaču izgleda zaglavlja kliknite da biste dodali modul kompaktnog klizača izjave na mjesto na kojem želite da se pojavi.
U mod “InsertModule”, odaberite karticu “Dodaj iz biblioteke”. Pronađite kompaktni klizač s izjavama koji ste ranije spremili u knjižnici i odaberite ga.
Nakon učitavanja, spremite promjene.
Vidi također: Divi: Kako prikazati modul Fullwidth Header na cijelom zaslonu
Konačni rezultat
Ispod je klizač svjedočanstava dodan u globalno zaglavlje.
Ovdje imamo klizač svjedočanstava bez pozadinskih slika autora.
A evo kako to izgleda na mobitelu.
Preuzmite DIVI sada!!!
Zaključak
Kompaktni klizač s izjavama može biti novi dodatak zaglavlju bilo čega web stranica nastojeći povećati vjerodostojnost svojih usluga na što vidljivijem mjestu na svojoj web stranici.
Možete ga koristiti i za preusmjeravanje posjetitelji na stranicu s izjavama ili stranicu za prodaju 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 raspravljati o tome.
Također se možete konzultirati naši resursi, ako vam je potrebno više elemenata za provođenje projekata kreiranja internetskih stranica.
Ne ustručavajte se također konzultirati naš vodič o Izrada bloga WordPress ili onaj koji je uključen Divi: najbolja WordPress tema svih vremena.
Ali u međuvremenu, ovaj članak podijelite na svojim različitim društvenim mrežama.
...
