Modul "Articles Slider" ili Posts Slider na WordPress tema Divi vam omogućuje da na istaknut način prikažete članke po vašem izboru na početnoj stranici. Na mnogim se blogovima ova vrsta modula općenito koristi za prikaz istaknutih članaka. No, možete ga drugačije upotrijebiti i primjerice prikazati prijedloge članaka.

Kako dodati modul klizača članka na Divi Builder

Prije nego što na svoju stranicu možete dodati modul klizača članka, prvo morate prijeći na Divi Builder. Jednom Divi tema instaliran na vašoj web stranici, primijetit ćete a Bouton Koristite Divi Builder iznad izdavača svaki put kada stvorite novu stranicu. Kliknite ovaj gumb da biste aktivirali Divi Builder i pristupili svim modulima Divi Builder. Zatim kliknite na gumb Koristite Visual Builder za pokretanje generatora u vizualnom načinu. Također možete kliknuti gumb Koristite Visual Builder kada pregledavate web stranicu u prvom planu ako ste povezani na svoju WordPress nadzornu ploču.

Graditelj Divi

Nakon što uđete u Visual Builder, možete kliknuti sivi gumb plus da biste na svoju stranicu dodali novi modul. Novi moduli mogu se dodavati samo unutar redaka. Ako započinjete novu stranicu, ne zaboravite prvo dodati redak na svoju stranicu.

članci cursor.png

Pronađite modul "Objavi klizače" na popisu modula i kliknite ga da biste ga dodali na svoju stranicu. Popis modula je pretraživ, što znači da možete upisati i riječ "Post Cusors", a zatim kliknuti "Enter" za automatsko pronalaženje i dodavanje modula Post Cusors! Nakon dodavanja modula, dočekat će vas popis opcija modula. Te su opcije podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .

Primjer upotrebe: Objavi klizače (članke) za prikaz nedavnih

U ovaj ću primjer dodati klizač postova kako bih prikazao tri najnovija posta na vrhu stranice bloga. Svaki slajd prikazuje odabranu sliku posta kao pozadinsku sliku, naslov i meta objave te gumb Pročitaj više.

primjer bloga divi.jpg

Koristeći Visual Builder, dodajte novi standardni odjeljak na vrh stranice bloga s retkom pune širine (1 stupac). Zatim umetnite modul Post Slider u novi redak.

kreiranje novog stupca divi.png

U odjeljku Postavke kursora ažurirajte sljedeće mogućnosti:

Opcije sadržaja

Broj poruka: 3

Mogućnosti dizajna

Font zaglavlja: Roboto (Kapitali) zaglavlje Veličina fonta: 50px Boja teksta zaglavlja: # edef5d Razmak slova zaglavlja: 1px Veličina fonta teksta: 16 Razmak slova tijela: 1px Visina crte tijela: 1.4em Meta font: Open Sans, Kurziv, velika slova Meta font: 18px Boja meta teksta: #cccccc Visina meta linije: 2em Upotrijebite prilagođene stilove za gumb: DA Veličina teksta: 26px Gumb Boja teksta: # edef5d Širina gumba: 0px Ikona gumba:> Prikaži samo ikonu

primjer gumba divi.jpg

Spremite postavke

To je sve!

primjer bloga u akciji divi.gif

Klizač modul članaka o mogućnostima sadržaja

Na kartici Sadržaj pronaći ćete sve elemente sadržaja modula, kao što su tekst, slike i ikone. Sve to kontrolira što se pojavljuje u vašem modulu uvijek će se naći na ovoj kartici.

opcija sadržaj curser divi modul klizač articles.png

Broj predmeta (broj postova)

Odaberite broj stavki koje želite prikazati na klizaču.

Uključi kategorije

Odaberite klizače koje želite uključiti u klizač.

Redoslijed po

Ovdje možete prilagoditi redoslijed prikazivanja članaka.

Tekst gumba

Definirajte tekst koji će se prikazivati ​​na gumbu "Pročitaj više". ostavite prazno za zadano (Pročitajte više)

Prikaz sadržaja

Prikazivanje cjelovitog sadržaja neće skratiti vaše postove u klizaču. Prikaz isječka prikazuje samo tekst isječka.

Upotrijebite izvadak iz članka ako je definiran

Onemogućite ovu opciju ako želite preskočiti ručno definirane isječke i dalje ih automatski generirati.

Duljina automatskog izdvajanja

Odredite duljinu automatski generiranih izvoda. Ostavite prazno za zadano (270)

Pokažite strelice

Ova postavka aktivirat će i deaktivirati navigacijske strelice.

Prikaži kontrole

Ova postavka omogućit će i onemogućiti gumbe kruga na dnu pokazivača.

Prikaži Pročitajte više

Ova postavka omogućit će i onemogućiti gumb Pročitaj više.

Prikaži poruku Meta

Ova će postavka omogućiti i onemogućiti meta odjeljak.

Prikaži istaknutu sliku

Ova postavka uključuje i isključuje sliku odabranu na klizaču.

Slika mjesta

Odaberite način na koji želite prikazati odabranu sliku na dijapozitivima

Boja pozadine

Pomoću birača boja odaberite boju pozadine za ovaj modul.

Pozadinska slika

Prenesite željenu sliku ili upišite URL slike koju želite koristiti kao pozadinu klizača.

Položaj pozadinske slike

Odaberite CSS pozicioniranje pozadinske slike za svaki slajd.

Veličina pozadinske slike

Odaberite veličinu CSS pozadinske slike koja se koristi za svaki slajd.

Oznaka administratora

Ovo će promijeniti oznaku modula u konstruktoru radi lakše identifikacije. Kada koristite prikaz WireFrame u Visual Builderu, ove se oznake pojavljuju u modulnom bloku sučelja Divi Builder.

Mogućnosti dizajna modula klizača

Na kartici Dizajn pronaći ćete sve mogućnosti oblikovanja modula, poput fontova, boja, veličine i razmaka. Ovo je kartica koju ćete koristiti za promjenu izgleda vašeg modula. Svaki Divi modul ima dugački popis postavki dizajna pomoću kojih možete bilo što promijeniti.

dizajn opcija divi articles.png

Uklonite unutarnju sjenu

Ovo će ukloniti unutarnju sjenku CSS-a primijenjenu na sve slajdove prema zadanim postavkama.

Upotrijebite prekrivač u pozadini

Kad je omogućeno, prilagođena boja preklapanja bit će dodana iznad vaše pozadinske slike i iza sadržaja klizača.

Boja presvlake u pozadini

Pomoću birača boja odaberite boju za pozadinu.

Koristite tekstualni sloj

Kad je ova opcija omogućena, iza teksta kursora dodaje se boja pozadine kako bi bila čitljivija na pozadinskim slikama.

Radijus granica tekstualnog prekrivanja

Polumjer obruba utječe na zaobljenost kutova područja prekrivanja teksta. Prema zadanim postavkama, uglovi imaju blago zaobljeni rub od 3 piksela. Ovu vrijednost možete smanjiti na 0 da biste stvorili pravokutni okvir ili povećali vrijednost kako biste kutove učinili još zaobljenijima.

Prekrivajući modul Divi

Koristite Parallax efekt

Omogućivanjem ove opcije pozadinske će slike dobiti fiksni položaj tijekom pomicanja.

Parallax metoda

Ovdje možete postaviti metodu koja se koristi za efekt paralaksa - CSS ili True Parallax.

Strelice u boji

Kada zadržite pokazivač iznad modula klizača, pojavljuju se strelice koje posjetitelju omogućuju navigaciju kroz svaki slajd. Prema zadanim postavkama ove strelice nasljeđuju boju glavnog teksta slajda. Međutim, pomoću ove postavke možete definirati prilagođenu boju za ove strelice.

Dot Nav prilagođena boja

U svakom pokazivaču stavke navigacije točke pojavljuju se ispod sadržaja kursora. Ti elementi omogućuju korisniku kretanje kursorom. Pomoću alata za odabir boja u ovoj postavci možete definirati prilagođenu boju za ove elemente.

Boja teksta

Ovdje možete odabrati hoće li vaš tekst biti svijetli ili tamni. Ako imate slajd s tamnom pozadinom, odaberite svijetli tekst. Ako ti
imati jasnu pozadinu, koristite tamni tekst.

Odjeljak meta modula klizač diviFont zaglavlja

Font teksta zaglavlja možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima izvrsnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Veličina fonta zaglavlja

Ovdje možete prilagoditi veličinu teksta zaglavlja. Možete povući klizač raspona da biste povećali ili smanjili veličinu teksta ili izravno unijeli željenu vrijednost veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Boja teksta zaglavlja

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta zaglavlja, odaberite željenu boju iz alata za odabir boja pomoću ove opcije.

Razmak zaglavlja u slovima

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu zaglavlja, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina reda zaglavlja

Visina retka utječe na razmak između svakog retka teksta zaglavlja. Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje polje za unos desno od kursora. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Font tijela

Font vašeg tijela možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima izvrsnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Veličina fonta tijela

Ovdje možete prilagoditi veličinu teksta tijela. Možete povući klizač raspona da biste povećali ili smanjili veličinu teksta ili izravno unijeli željenu vrijednost veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Boja teksta tijela

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta, odaberite željenu boju iz alata za odabir boja pomoću ove opcije.

Prostor tijela slova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina tijela linije

Visina retka utječe na razmak između svakog retka teksta u vašem tijelu. Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos smješteno desno od kursora. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Meta policija

Font svog meta teksta možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima izvrsnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Veličina fonta Meta

Ovdje možete prilagoditi veličinu svog meta-teksta. Možete povući klizač raspona da biste povećali ili smanjili veličinu teksta ili izravno unijeli vrijednost željene veličine teksta u polje za unos s desne strane klizača. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Meta tekst boja

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju metateksta, odaberite željenu boju iz alata za odabir boja pomoću ove opcije.

Meta Letter spacing

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u vašem metatekstu, upotrijebite klizač raspona za podešavanje prostora ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina Meta reda

Visina retka utječe na razmak između svakog retka vašeg meta-teksta. Ako želite povećati razmak između svakog retka, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos smješteno desno od kursora. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Gornja obloga

Ovaj parametar kontrolira unutarnji prostor između vrha modula i tekstualnog sadržaja u modulu. Ako želite povećati ili smanjiti ovaj prostor, ovdje unesite željenu vrijednost. Na primjer, da biste smanjili prostor i ukupnu veličinu kursora, možete unijeti vrijednost od 100 piksela. Također možete unijeti vrijednost postotka, na primjer 10%, kako biste visinu učinili dinamičnijom.

Donje obloge

Ovaj parametar kontrolira unutarnji prostor između dna modula i tekstualnog sadržaja u modulu. Ako želite povećati ili smanjiti ovaj prostor, ovdje unesite željenu vrijednost. Na primjer, da biste smanjili prostor i ukupnu veličinu kursora, možete unijeti vrijednost od 100 piksela. Također možete unijeti vrijednost postotka, na primjer 10%, kako biste visinu učinili dinamičnijom.

Koristite prilagođene gumbeUpotrijebite prilagođene stilove za gumb

Omogućavanjem ove opcije otkrivaju se razne postavke prilagodbe gumba pomoću kojih možete promijeniti izgled gumba vašeg modula.

Veličina teksta gumba

Ova se postavka može koristiti za povećanje ili smanjenje veličine teksta na gumbu. Gumb se prilagođava kako se veličina teksta povećava i smanjuje.

Boja teksta gumba

Prema zadanim postavkama, gumbi usvajaju boju naglaska vaše teme kako je definirano u programu za prilagođavanje tema. Ova vam opcija omogućuje da gumbu ovog modula dodijelite prilagođenu boju teksta. Odaberite prilagođenu boju pomoću alata za odabir boje da biste promijenili boju gumba.

Boja pozadine gumba

Prema zadanim postavkama, gumbi imaju prozirnu boju pozadine. To se može promijeniti odabirom željene boje pozadine iz alata za odabir boja.

Širina obruba gumba

Svi Divi gumbi prema zadanim postavkama imaju obrub od 2 piksela. Ova se granica može povećati ili smanjiti pomoću ove postavke. Granice se mogu ukloniti unosom vrijednosti 0.

Boja rubova gumba

Prema zadanim postavkama obrubi gumba usvajaju boju naglaska vaše teme kako je definirano u programu za prilagođavanje tema. Ova vam opcija omogućuje da gumbu ovog modula dodijelite prilagođenu boju obruba. Odaberite prilagođenu boju pomoću alata za odabir boja da biste promijenili boju obruba gumba.

Radijus graničnika gumba

Polumjer obruba utječe na zaobljenost kutova gumba. Prema zadanim postavkama, gumbi u Diviu imaju mali radijus obruba koji zaokružuje uglove za 3 piksela. Ovu vrijednost možete smanjiti na 0 da biste stvorili kvadratni gumb ili ga znatno povećali da biste stvorili gumbe s kružnim rubovima.

Razmak slova gumba

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu gumba, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje za unos s desne strane klizača. Polja za unos podržavaju različite jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Policijski gumb

Font teksta gumba možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima izvrsnih fontova koje pokreće Google Fonts. Prema zadanim postavkama Divi koristi font Open Sans za sav tekst na vašoj stranici. Također možete prilagoditi stil teksta koristeći podebljano, kurziv, velika slova i opcije podcrtavanja.

Dodajte ikonu gumba

Onemogućeno, ova postavka uklonit će ikone s vašeg gumba. Prema zadanim postavkama, svi Divi gumbi prikazuju ikonu strelice na lebdenju.

Ikona gumba

Ako su ikone omogućene, pomoću ove postavke možete odabrati ikonu koju ćete koristiti na svojem gumbu. Divi ima različite ikone na izbor.

Gumb ikone u boji

Prilagodba ove postavke promijenit će boju ikone koja se pojavljuje na vašem gumbu. Prema zadanim postavkama boja ikone jednaka je boji teksta gumba, ali ova postavka omogućuje vam neovisno podešavanje boje.

Gumb za postavljanje ikona

Možete odabrati prikaz ikone gumba s lijeve ili desne strane gumba.

Pokažite ikonu samo kad zadržite pokazivač iznad gumba

Prema zadanim postavkama ikone gumba prikazuju se samo kada lebdite. Ako želite da se ikona uvijek prikazuje, isključite ovu postavku.

Boja teksta na gumbu

Kad mišem zadržite pokazivač iznad gumba, koristit će se ova boja. Boja će se promijeniti od osnovne boje definirane u prethodnim postavkama.

Boja pozadine gumba miša

Kad mišem zadržite pokazivač iznad gumba, koristit će se ova boja. Boja će se promijeniti od osnovne boje definirane u prethodnim postavkama.

Border gumb za prebojavanje u boji

Kad mišem zadržite pokazivač iznad gumba, koristit će se ova boja. Boja će se promijeniti od osnovne boje definirane u prethodnim postavkama.

Gumb za zaobljenje graničnog polumjera

Kad se mišem zadrži pokazivač iznad gumba, koristit će se ova vrijednost. Vrijednost će se promijeniti od osnovne vrijednosti definirane u prethodnim postavkama.

Tipka razmaka razmaka

Kad se mišem zadrži pokazivač iznad gumba, koristit će se ova vrijednost. Vrijednost će se promijeniti od osnovne vrijednosti definirane u prethodnim postavkama.

Napredne mogućnosti klizača posta

Na naprednoj kartici pronaći ćete opcije koje bi iskusnijim web dizajnerima mogle biti korisne, poput prilagođenih CSS i HTML atributa. Ovdje možete primijeniti prilagođeni CSS na bilo koji od mnogih elemenata modula. Na modul također možete primijeniti prilagođene CSS klase i ID-ove koji se mogu koristiti za prilagodbu modula u datoteci style.css vaše dječje teme.

modul pokazivača

CSS ID

Unesite neobavezni CSS ID koji ćete koristiti za ovaj modul. ID se može koristiti za stvaranje prilagođenog CSS stila ili za povezivanje na određene odjeljke vaše stranice.

CSS klasa

Unesite neobavezne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za izradu prilagođenog CSS stila. Možete dodati više klasa odvojenih razmakom. Te se klase mogu koristiti u vašoj podređenoj temi Divi ili u prilagođenom CSS listu stilova koji dodate na svoju stranicu ili na svoje web mjesto pomoću opcija teme Divi ili postavki stranice Divi Builder.

Prilagođeni CSS

Prilagođeni CSS također se može primijeniti na modul i bilo koji od unutarnjih dijelova modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati prilagođene CSS stilske tablice izravno u svaki element. CSS unosi u ovim postavkama već su omotani stilskim oznakama. Dakle, samo unesite CSS pravila odvojena zarezom.

Modul klizača Divi člankaAutomatska animacija

Ako želite pokazivač kliziti automatski, bez da posjetitelj klikne sljedeći gumb, omogućite tu opciju, a zatim podesite brzinu rotacije ako želite.

Automatska brzina animacije (u ms)

Ovdje možete naznačiti koliko brzo kursor blijedi između svakog slajda ako je gore omogućena opcija "Automatsko animiranje". Što je broj veći, to je duža pauza između svake rotacije.

Nastavi Auto slide na Hoveru

Uključivanjem to će omogućiti automatsko klizanje za nastavak na pokazivač miša.

Sakrij sadržaj na mobitelu

Kako se veličina zaslona smanjuje na mobilnim uređajima, nekretnine na zaslonu postaju sve vrijednije. Ponekad je dobro isključiti neke manje važne elemente kursora kako biste smanjili veličinu kursora i učinili ga čitljivijim. Omogućavanje ove postavke skriva sadržaj teksta kursora na mobilnom uređaju.

Sakrij CTA na mobilnom uređaju

Kako se veličina zaslona smanjuje na mobilnim uređajima, nekretnine na zaslonu postaju sve vrijednije. Ponekad je dobro isključiti neke manje važne elemente kursora kako biste smanjili veličinu kursora i učinili ga čitljivijim. Omogućivanjem ove postavke sakrit će se gumbi poziva na akciju na mobilnom uređaju.

Pogledajte sliku / video na mobitelu

Kako se veličina zaslona smanjuje na mobilnim uređajima, nekretnine na zaslonu postaju sve vrijednije. Ponekad je dobro isključiti neke manje važne elemente kursora kako biste smanjili veličinu kursora i učinili ga čitljivijim. Omogućavanjem ove postavke prikazuju se dijapozitivne slike i videozapisi na mobitelu (oni su onemogućeni prema zadanim postavkama).

deaktiviranje

Ova vam opcija omogućuje upravljanje uređajima na kojima se pojavljuje vaš modul. Možete odabrati da deaktivirate svoj modul na tabletima, pametnim telefonima ili stolnim računalima pojedinačno. To je korisno ako želite koristiti različite modove na različitim uređajima ili ako želite pojednostaviti dizajn mobilnih uređaja uklanjanjem određenih elemenata sa stranice.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]PREUZMI DIVI TEMU [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]PREUZMITE predlošci DIVI[/vcex_button][/vc_column][/vc_row]

Ostali Divi tutoriali