Prije nego što svojoj stranici možete dodati modul sažetka, prvo morate pristupiti Divi Builderu. Jednom Divi tema instaliran na vašem web stranica, primijetit ćete gumb Koristite Divi Builder iznad uređivača postova kad god kreirate novu stranicu. Klikom na ovaj gumb aktivirate Divi Builder, koji vam daje pristup 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 uzvodno ako ste prijavljeni na nadzornu ploču WordPressa.

gumb divi graditelj modul blog divi

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

modul nastavlja divi builder.png

Pronađite modul Sažetak 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č "Sažetak", a zatim pritisnuti enter za automatsko pronalaženje i dodavanje opisnog tekstualnog modula! Nakon dodavanja modula, pozdravit će vas popis mogućnosti modula. Te su mogućnosti podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .

koristite slučaj za popisivanje usluga tvrtke na početnoj stranici

Budući da modul Sažetak kombinira i slike i tekst kako bi prikazao određene značajke, možete ga koristiti za dodavanje popisa usluga vaše tvrtke na početnu stranicu. Modul Blurb također vam omogućuje da svoju sliku / ikonu i naslov pretvorite u vezu na stranicu usluge. U ovom primjeru upotrijebit ću modul Blurb kako bih početnoj stranici dodao četiri istaknute usluge.

divi.png servisna stranica

Da biste na svoju stranicu dodali sva četiri Blurba, upotrijebite vizualni alat za izgradnju da biste dodali standardni odjeljak s retkom od četiri stupca. Zatim dodajte Blurb modul u prvi stupac vašeg retka.

Ažurirajte postavke Blur sa sljedećim:

Opcije sadržaja

Naslov: [unesite naziv usluge]
Sadržaj: [unesite kratak opis usluge]
URL: [dodajte URL na stranicu usluge]
Upotrijebite ikonu: DA
Ikona: [odaberite ikonu koja ilustrira vašu uslugu]

Mogućnosti dizajna

Boja ikone: # 42bb99 (napravite boju koja nadopunjuje dizajn web stranice)
Upotrijebite ikonu Veličina fonta: DA
Veličina fonta ikone: 68px (podešava veličinu ikone)
Orijentacija teksta: Centar -
Veličina fonta glave: 24 piksela
Veličina fonta: 18px
Visina linije tijela: 1.5em

usluge dizajna divi.png

Sada je završen vaš prvi uvodni tekst.

popis usluga divi builder.jpg

Sada duplicirajte modul Sažetak koji ste upravo stvorili tri puta i povucite svaki od dupliciranih sažetaka na ostala tri stupca. Budući da su vaše postavke dizajna integrirane u vaše duplicirane module, sve što trebate učiniti je izmijeniti sadržaj (zaglavlje, sadržaj, ikona, URL itd.) i modificirajte boje kako biste ih prilagodili svakoj od svojih usluga.

cjeloviti popis usluga divi.jpg

Opcije sadržaja sadržaja

Na kartici Sadržaj pronaći ćete sav sadržaj modula, poput teksta, slika i ikona. Sve to kontrolira što se pojavljuje u vašem modulu uvijek će biti na ovoj kartici.

sažetak modula parametara wordpress.png

Naslov

Dajte svom tekstu naslov koji će se iznad teksta pojaviti podebljanim tekstom. Opcija URL-a koja se nalazi ispod polja Naslov omogućit će vam da naslov napravite hipervezom.

Sadržaj

U ovo polje možete unijeti sadržaj vašeg teksta. Blurb Text također će pokriti cijelu širinu vašeg stupca do 550 px.

URL

U ovo polje stavite valjani web URL kako biste naslov Blurba pretvorili u vezu. Ako ovo polje ostane prazno, naslov će ostati samo statični element.

Otvaranje URL-a

Ovdje možete odabrati hoće li se vaša veza otvoriti u novom prozoru.

Koristite ikonu

Kada koristite Blurbs, možete odabrati upotrebu ikone ili slike s tekstom. Ako odaberete "Da" za opciju "Koristi ikonu", bit će vam ponuđene sljedeće opcije za prilagodbu vaše ikone. Ako ne odlučite koristiti ikonu, od vas će se zatražiti da prenesete sliku.

ikona

Ako ste za postavku "Use icon" odabrali "Yes", pojavit će se ova opcija. Ova vam opcija predstavlja popis dostupnih ikona koje možete koristiti uz svoj blurb. Samo kliknite ikonu koju želite koristiti i ona će se pojaviti u vašem tekstu.

koristite ikone divi builder.png

Slika

Ako niste odlučili koristiti ikonu, pojavit će se ova postavka. Ovdje stavite važeći URL slike ili odaberite / prenesite sliku putem biblioteke medija WordPress. Slike u modulu Sažetak uvijek se pojavljuju centrirane u svojim stupcima i obuhvaćaju cijelu širinu stupca do 550 px. Međutim, vaša slika nikada neće biti veća od izvorne veličine za prijenos. Visina prezentacijske slike određuje se omjerom slike izvorne slike. Stoga je poželjno postaviti sve prezentacijske slike na istu visinu ako ih postavljate jednu pored druge.

Boja pozadine

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

Pozadinska slika

Ako se postavi, ova će se slika koristiti kao pozadina ovog modula. Da biste uklonili pozadinsku sliku, samo uklonite URL iz polja Postavke. Pozadinske slike pojavit će se na vrhu pozadinskih boja, što znači da vaša boja pozadine neće biti vidljiva kada se primijeni pozadinska slika.

Administratorska oznaka

Ovo će promijeniti oznaku modula u generatoru radi lakše identifikacije. Kada se koristi prikaz WireFrame u Visual Builderu, ove će se oznake pojaviti u bloku modula sučelja Divi Builder.

Sažetak mogućnosti dizajniranja modula

Na kartici Dizajn pronaći ćete sve mogućnosti oblikovanja modula, poput fontova, boja, veličine i razmaka. Ova kartica omogućuje vam izmjenu izgleda vašeg modula. Svaki Divi modul ima dugački popis postavki dizajna pomoću kojih možete prilagoditi gotovo sve.

Opcija dizajn modula nastaviti divi.png

Boja ikone

Ako ste za postavku "Use icon" odabrali "Yes", pojavit će se ova opcija. Ova vam opcija omogućuje prilagodbu boje vaše ikone. Prema zadanim postavkama ikone su postavljene na boju naglaska vaše teme.

Ikona kruga

Ako ste za postavku "Use icon" odabrali "Yes", pojavit će se ova opcija. Ova vam opcija omogućuje postavljanje ikone u obojeni krug. Ako za ovu postavku odaberete "da", bit će vam ponuđene dodatne mogućnosti za prilagodbu boje i obruba vašeg kruga.

Boja kruga

Ako ste za postavku "Ikona kruga" odabrali "Da", pojavit će se ova opcija. Ovdje možete odabrati boju koju ćete koristiti za svoj krug. Ova boja neovisna je o boji vaše prethodno odabrane ikone. Vaša će se ikona u svojoj boji pojaviti unutar kruga s bojom koju ovdje odaberete.

Pokažite obrub kruga

Ako ste za postavku "Ikona kruga" odabrali "Da", pojavit će se ova opcija. Ova vam opcija omogućuje aktiviranje obruba za vaš krug. Ako je ova opcija odabrana, pojavit će se dodatna opcija za odabir boje obruba.

Boja obruba kruga

Ako ste za postavku "Prikaži granicu kruga" odabrali "Da", pojavit će se ova opcija. Ovdje možete podesiti boju obruba kruga.

Postavljanje slike / ikone

Ovdje možete odabrati mjesto svoje slike/ikone. Može se pojaviti iznad teksta ili lijevo od teksta. Postavljanjem slike/ikone lijevo od teksta, slika će biti manja nego ako se postavi na vrh.

Koristite veličinu fonta ikone

Ako je ova opcija omogućena, možete unijeti prilagođenu veličinu za ikonu prikazanu iznad ili dvije lijevo od vašeg blurba.

Boja teksta

Ako je vaš blurb na tamnoj pozadini, boju teksta treba postaviti na "Dark". Suprotno tome, ako je vaš blurb postavljen na svijetlu pozadinu, boja teksta treba biti postavljena na "Light".

Tekst orijentacija

Ovaj padajući izbornik omogućuje vam da odredite usmjerenje teksta tako da bude poravnato lijevo, centrirano ili desno.

Font zaglavlja

Font zaglavlja možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima sjajnih 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 podebljane, kurzivne, velike i podcrtane opcije.

Veličina fonta zaglavlja

Ovdje možete prilagoditi veličinu teksta zaglavlja. Možete povući klizač intervala da biste povećali ili smanjili veličinu teksta ili možete izravno unijeti ž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".

modul sažima odjeljak stila title.png

Boja teksta zaglavlja

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju zaglavlja, odaberite ovu 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 teksta zaglavlja, pomoću klizača intervala 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".

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

Font tijela

Font vašeg tijela možete promijeniti odabirom željenog fonta s padajućeg izbornika. Divi dolazi s desecima sjajnih 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 podebljane, kurzivne, velike i podcrtane opcije.

Veličina fonta tijela

Ovdje možete prilagoditi veličinu svog teksta. Možete povući klizač intervala da biste povećali ili smanjili veličinu teksta ili možete izravno unijeti ž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".

Boja teksta tijela

Prema zadanim postavkama, sve boje teksta u Diviju pojavljuju se u bijeloj ili tamno sivoj boji. Ako želite promijeniti boju teksta tijela, 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 vašeg tjelesnog teksta, upotrijebite klizač intervala 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".

Visina tijela linije

Visina retka utječe na razmak između svakog retka osnovnog teksta. Ako želite povećati razmak između svakog retka, pomoću klizača intervala 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".

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

Prema zadanim postavkama, obrubi su široki 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žite prilagođene mjerne jedinice, što znači da možete promijeniti zadanu jedinicu iz "px" u nešto drugo poput em, vh, vw itd.

konfiguracija sbourdires modula nastavak divi builder.png

Granični stil

Granice podržavaju osam različitih stilova, uključujući: pune, točkaste, točkaste, dvostruke, žlijeb, greben, umetak i početak. Na padajućem izborniku odaberite stil koji želite primijeniti na vašu granicu.

Maksimalna širina slike

Primjenom vrijednosti maksimalne širine ovdje ograničit ćete širinu prezentacijske slike. To utječe samo na nejasne slike koje nisu u načinu ikone.

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

Padding 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 opcije Modul sažetka

Na kartici Napredno 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. Također možete primijeniti prilagođene CSS klase i ID-ove na modul, koji se mogu koristiti za prilagodbu modula u datoteci style.css vaše dječje teme.

odjeljak sažetka modula napred.png

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. Ovi razredi se mogu koristiti u vašem Divi tema Dijete ili u prilagođenom CSS-u koji dodajete na svoju stranicu ili svoju 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 elemenata modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati CSS izravno u svaki element. CSS unosi u ovim postavkama već su ugrađeni sa stilskim oznakama. Dakle, morate unijeti CSS pravila odvojena zarezom.

Animacija slike / ikone

Ovo kontrolira smjer lijene animacije učitavanja.

ALT tekst sa slike

Ako niste odlučili koristiti ikonu, pojavit će se ova postavka. Ostali tekst pruža sve potrebne informacije ako se slika ne učitava, prikazuje ispravno ili u bilo kojoj drugoj situaciji u kojoj korisnik ne može vidjeti sliku. Omogućuje i čitanje i prepoznavanje slike na tražilicama.

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 mobilni dizajn uklanjanjem nekih elemenata sa stranice.

To je sve za ovaj vodič. Nadamo se da smo vam pokazali kako koristiti sažeti modul na Divi.