Divi tutorial: Kako koristiti navigacijski modul u člancima

Prije nego što dodate Divi modul za navigaciju članaka na svoju stranicu, prvo morate uskočiti u Divi Builder. Jednom Divi tema instaliran na vašoj web stranici, primijetit ćete gumb Koristite Divi Builder iznad uređivača postova kad god izradite novu stranicu. Pritisnite 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.

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.

Pronađite navigacijski modul 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č "nakon navigacije", a zatim kliknuti enter za automatsko pronalaženje i dodavanje navigacijskog modula. 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: Dodavanje prilagođenih navigacijskih veza na dno posta na blogu

Imati navigacijske veze do sljedećih i prethodnih članaka na dnu vašeg članka odličan je način da zadržite svoj posjetitelji uključeni u vaš sadržaj. U ovom primjeru, pokazat ću vam kako koristiti stvarne nazive naslova posta za svoje navigacijske veze umjesto općih naziva "prethodnih" i "sljedećih" veza. Također ću vam pokazati kako dodati obrub oko poveznica kako biste im dali veći učinak.

Počnimo.

Upotrijebite vizualni graditelj za dodavanje standardnog odjeljka s rasporedom pune širine (1 stupac) na dnu posta. Zatim dodajte navigacijski modul nakon crte.

Ažurirajte navigacijske postavke za objavljivanje na sljedeći način:

Kartica Sadržaj

Tekst prethodne veze:% title (ova varijabla ubacuje naslov članka)
Tekst sljedeće veze:% title (ova varijabla ubacuje naslov članka)

Kartica Dizajn

Fontovi: PT Sans
Veličina veze fontova: 20px
Poveznice Tekst boje: # 5e95c1
Koristite granicu: YES
Granična boja: # 5e95c1
Širina granice: 1px
Custom tapeta: 20px vrh, 20px desno, 20px dno, 20px lijevo

To je sve ! Na navigacijskim vezama sada imate naslove postova

Opcije sadržaja navigacijskog modula

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.

Tekst prethodne veze

Definirajte prilagođeni tekst za prethodnu vezu. Možete koristiti varijablu% title da biste uključili naslov članka. Ostavite prazno za zadano.

Tekst sljedeće veze

Definirajte prilagođeni tekst za sljedeću vezu. Možete koristiti varijablu% title da biste uključili naslov posta. Ostavite prazno za zadano.

U istoj kategoriji

Ovdje možete definirati trebaju li prethodni i sljedeći članci biti u istom terminu taksonomije kao i trenutni članak.

Naziv prilagođene taksonomije

Ovu opciju ostavite praznom ako ovaj modul koristite u projektu ili članku. U suprotnom, upišite naziv taksonomije da bi opcija "U istoj kategoriji" radila ispravno.

Sakrij prethodnu vezu

Ovdje možete odabrati sakriti ili prikazati prethodnu vezu.

Sakrij sljedeću vezu

Ovdje možete odabrati sakriti ili prikazati sljedeću vezu.

Administratorska oznaka

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.

Opcije dizajna nakon navigacije

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.

Fontovi veze

Font teksta veza 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.

Povezivanje veličine fonta

Ovdje možete prilagoditi veličinu teksta veze. 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 veza

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

Razmaknica linkova slova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu veza, 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 jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Visina linije veza

Visina crte utječe na razmak između svakog retka teksta veze. Ako želite povećati razmak između svake linije, pomoću klizača raspona prilagodite razmak ili unesite željenu veličinu razmaka u polje. unos s desne strane 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.

Koristite granicu

Omogućivanjem ove opcije postavit ćete obrub oko vašeg modula. Ovu granicu možete prilagoditi pomoću sljedećih uvjetnih parametara.

Boja granice

Ova opcija utječe na boju vašeg obruba. Odaberite prilagođenu boju iz alata za odabir boja da biste je primijenili na vaš obrub.

Širina granice

Granice su prema zadanim postavkama široke 1 piksel. Ovu vrijednost možete povećati povlačenjem klizača raspona ili unosom prilagođene vrijednosti u polje za unos s desne strane klizača. Podržane prilagođene jedinice mjere, što znači da možete promijeniti zadanu jedinicu iz "px" u nešto drugo poput em, vh, vw itd.

Granični stil

Granice podržavaju osam različitih stilova: puni, točkasti, točkasti, dvostruki, žlijeb, greben, sloj i početak. Na padajućem izborniku odaberite svoj željeni stil da biste ga primijenili na vašu granicu.

Prilagođena marža

Margina je prostor dodan s vanjske strane vašeg modula, između modula i sljedećeg elementa iznad, ispod ili slijeva i zdesna od njega. Možete dodati prilagođene vrijednosti margina na bilo koju od četiri strane modula. Da biste uklonili prilagođenu marginu, uklonite dodanu vrijednost iz polja za unos. Te se vrijednosti prema zadanim postavkama mjere u pikselima, ali u polja za unos možete unijeti prilagođene mjerne jedinice.

Custom padding

Ispunjavanje je prostor dodan unutar vašeg modula, između ruba modula i njegovih unutarnjih elemenata. Možete dodati prilagođene vrijednosti popunjavanja na bilo koju od četiri strane modula. Da biste uklonili prilagođenu marginu, uklonite dodanu vrijednost iz polja za unos. Te se vrijednosti prema zadanim postavkama mjere u pikselima, ali u polja za unos možete unijeti prilagođene mjerne jedinice.

Napredne mogućnosti za navigacijski modul

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.

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.

vidljivost

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]

Divi tutorial: Kako koristiti navigacijski modul u člancima

Primjer upotrebe: Dodavanje prilagođenih navigacijskih veza na dno posta na blogu