Vodič za diviziju: Kako koristiti modul Naslov naslova

Modul Divi's Job Title prikazuje naslov vašeg trenutnog posta i, ako je primjenjivo, sliku posta i metapodatke na elegantan način. To vam omogućuje stvaranje jedinstvenih postova tijekom izrade vaših postova pomoću Divi Builder.

Kako dodati modul naslova posta na svoju stranicu

Prije nego što svojoj stranici možete dodati naslovni modul, prvo morate uskočiti u Divi Builder. Jednom Divi tema instaliran na vašem web stranica, 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 svoje web stranica u prvom planu ako ste prijavljeni na nadzornu ploču WordPressa.

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 modul naslova članka na popisu modula i kliknite ga da biste ga dodali na svoju stranicu. Popis modula je pretraživ, što znači da također možete upisati riječ "naslov posta", a zatim kliknuti enter za automatsko pronalaženje i dodavanje modula naziva posla! 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: formatiranje modula naslova posta za blog post

U ovom primjeru pokazat ću vam kako je lako prilagoditi naslov publikacije za blog post.

Prvo što trebate učiniti je otići na stranicu "Uredi članak" na WordPress nadzornoj ploči. U području Divi Post Settings u gornjem desnom kutu postavite izgled na Full width i sakrijte naslov članka.

Koristeći Visual Builder, dodajte Redovni odjeljak s redom pune širine (1 stupac). Zatim dodajte modul Naslov naslova u redak.

Ažurirajte postavke naslova poruke na sljedeći način:

Opcije sadržaja

Pogledaj kategorije posta: NE Prikaži komentare Broj: NO Pogledaj istaknutu sliku: DA Featured Image Location: Title / Meta Background Background

Mogućnosti dizajna

Orijentacija teksta: središnja boja teksta: svijetla boja pozadinskog teksta: DA boja pozadine teksta: rgba (0,0,0,0.35) naslov font: roboto (podebljano) naslov Veličina slova: 50px naslov razmak slova: 2px naslov Visina retka: 1em Meta font, Raleway Light Meta Font Veličina: 24px Meta Font Boja: # e0ba67

Spremite postavke

To je sve. Sada se više nikada nećete morati zadovoljiti još jednim dosadnim nazivom posla!

Opcije sadržaja za naslov publikacije

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.

Prikaži naslov

Ovdje možete odabrati prikazivanje naslova članka ili ne.

Prikaži Meta

Ovdje možete odabrati želite li prikazati Post Meta ili ne.

Autor emisije

Ovdje možete odabrati želite li prikazati ime autora u Post Meta.

Prikaži datum

Ovdje možete odabrati želite li prikazati datum.

Format datuma

Ovdje možete postaviti format datuma u Post Meta. Zadana vrijednost je "M j, Y"

Prikaži kategorije članaka

Ovdje možete odabrati želite li ili ne prikazivati kategorije u Post Meta. Napomena: Ova opcija ne radi s prilagođenim vrstama postova.

Prikaži komentare

Ovdje možete odabrati želite li ili ne prikazivati broj komentara u Post Meta.

Prikaži istaknutu sliku

Ovdje možete odabrati želite li prikazati odabranu sliku ili ne.

Istaknuto postavljanje slike

Ovdje možete odabrati gdje ćete postaviti odabranu sliku.

Boja pozadine

Definirajte prilagođenu boju pozadine za svoj modul ili ostavite prazno da biste koristili zadanu boju.

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 izrade naslova naslova

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.

Koristite Parallax efekt

Ako je pozicioniranje odabrane slike postavljeno na "title / Meta Background Image", možete odabrati želite li koristiti efekt paralakse za odabranu sliku.

Parallax metoda

Ovdje možete odabrati koju ćete paralaksnu metodu koristiti za odabranu sliku - CSS ili True Parallax.

Tekst orijentacija

Ovdje možete odabrati orijentaciju za naslov / meta tekst.

Boja teksta

Ovdje možete odabrati boju teksta naslov / meta.

Upotrijebite boju pozadine teksta

Ovdje možete odabrati želite li koristiti boju pozadine za naslov / meta-tex.

Boja pozadine teksta

Ako je boja pozadine uključena, ovdje odaberite željenu boju pozadine.

Font naslova

Možete promijeniti font naslova 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 slova naslova

Ovdje možete prilagoditi veličinu teksta naslova. 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 jedinice mjere, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em".

Boja teksta naslova

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

Razmak naslovnih slova

Razmak između slova utječe na razmak između svakog slova. Ako želite povećati razmak između svakog slova u tekstu naslova, 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 naslovnice

Visina retka utječe na razmak između svakog retka teksta vašeg naslova. 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 mjerne jedinice, što znači da za promjenu vrste jedinice možete unijeti "px" ili "em", ovisno o vrijednosti vaše veličine.

Metas font

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.

Metas font veličine

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.

Boja teksta meta podataka

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.

Razmak metas meta podataka

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 metas linije

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".

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.

Prikaži napredne opcije naslova

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 izborne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za stvaranje prilagođenog CSS stila. Možete dodati više klasa, odvojenih razmakom. Ove se klase mogu koristiti u vašoj podređenoj Divi temi ili u prilagođenoj CSS tablici stilova koju dodate na svoju stranicu ili web mjesto. web stranica pomoću opcija Divi teme 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. Ovo je korisno ako želite koristiti različite module na različitim uređajima ili ako želite pojednostaviti dizajn mobilnih uređaja uklanjanjem određenih elemenata na stranici.

[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 modul zadatka posla