Dijeljenje kolekcije slika na Diviju uvijek je sjajan način vizualnog angažiranja korisnika svojim sadržajem. Modul Divi's Gallery omogućuje vam stvaranje i organiziranje galerija bilo gdje na vašem web mjestu. Modul galerije na Divi Builderu dostupan je u obliku mreže i klizača i podržava velike galerije s paginacijom.

Kako dodati modul galerije na svoju stranicu

Prije nego što svojoj stranici možete dodati modul galerije, 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. Imamo sjajne vodiče o korištenju elemenata linije i dijelovi od Divi.

Pronađite modul galerije 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č "galerija", a zatim kliknuti enter za automatsko pronalaženje i dodavanje modula galerije! 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 galerije slika pune širine za prikaz fotografije.

Dodavanje galerije vašoj stranici s fotografijama odličan je način da unaprijediti svoj rad i povećati svoj kredibilitet kod klijenata. U ovom primjeru pokazat ću vam kako možete koristiti modul galerije za dodavanje galerije slika s rešetkastim rasporedom koji se proteže cijelom širinom stranice. Slike nemaju razmak između sebe što daje praktičnu i estetsku prezentaciju.

I ne zaboravimo da svaka slika otvara skočni prozor koji kruži kroz veće verzije slika u galeriji.

Koristeći Visual Builder, dodajte novi odjeljak ispod odjeljka zaglavlja s retkom pune širine ili pune širine (1 stupac). Zatim dodajte modul Galerija u redak.

Ažurirajte postavke modula Galerija na sljedeći način:

Opcije sadržaja

Slike galerije: kliknite ažuriranu galeriju i odaberite slike koje želite uključiti u galeriju. Broj slika: 12 Prikaz i naslov: NE Paginacija zaslona: NE

Mogućnosti dizajna

Izgled: Orijentacija minijature mreže: Pejzažna ikona zuma Boja: #ffffff Boja lebdenja lebdenja: rgba (0,0,0,0.48) Birač ikone lebdenja: zadana

Spremite postavke

Sada je preostalo samo riješiti se sveg prostora oko slika. Vratite se i odaberite postavke redaka. Na kartici Dizajn ažurirajte sljedeće:

Učinite ovaj red punom širinom: DA
Koristite prilagođenu širinu oluka: DA
Širina oluka: 1

Važno je zapamtiti da je numerička vrijednost "1" za širinu žlijeba stvarno nula (uopće nema širine).

Spremite postavke

To je sve!

Opcije sadržaja u modulu Galerija

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.

Slike galerije

Kliknite gumb Ažuriraj danu galeriji pokrenuti WordPress multimedijsku biblioteku u kojoj možete odabrati slike koje želite prikazivati ​​u svojoj galeriji.

Broj slika

Postavite broj slika za prikaz po stranici. Kad se u vašu galeriju uključi više slika od onoga što je dopušteno na svakoj stranici, paginacija će se pojaviti ispod slika.

Prikaži naslov i naslov:

Ako je dodan naslov slike ili naslov, oni će se pojaviti ispod slike u galeriji. Ako želite onemogućiti ove tekstualne elemente, to možete učiniti pomoću ove opcije.

Pogledajte prikazivanje stranica

Kad se u vašu galeriju uključi više slika od onoga što je dopušteno na svakoj stranici, paginacija će se pojaviti ispod slika. Ako želite ukloniti straničenje, možete isključiti ovu postavku.

Admin Label

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 izrade modula galerije

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.

raspored

Prema zadanim postavkama, galerije se prikazuju kao mreža slika. Također možete odabrati prikazivanje galerije kao klizača slike.

Orijentacija minijatura

Možete odabrati da slike iz vaše galerije budu u portretnom ili pejzažnom formatu. Ako promijenite način, možda ćete morati regenerirajte svoje minijature .

Ikona boje zuma

Kad zadržite pokazivač miša iznad stavke u mapu Galerija, pojavit će se ikona preklapanja. Pomoću alata za odabir boja u ovoj postavci možete prilagoditi boju koja se koristi s ove ikone.

Lebdite bojom sloja

Kad zadržite pokazivač iznad stavke u mapu Gallery, na vrhu slike i ispod teksta i ikone naslova portfelja pojavit će se prekrivna boja. Prema zadanim postavkama koristi se poluprozirna bijela boja. Ako želite koristiti drugu boju, boju možete prilagoditi pomoću alata za odabir boja u ovoj postavci

Ikona za odabir preleta (pokazivač iznad)

Ovdje možete odabrati prilagođenu ikonu koja će se prikazivati ​​kada posjetitelj zadrži pokazivač iznad stavki galerije u modulu.

Boja teksta

Ovdje možete odabrati hoće li vaš tekst biti svijetli ili tamni. Ako radite na tamnoj pozadini, vaš bi tekst trebao biti svijetli. Ako je vaša pozadina svijetla, tekst bi trebao biti taman.

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

Font legende

Font teksta opisa 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 opisa

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

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

Razmak slova legende

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

Visina retka utječe na razmak između svakog retka teksta opisa 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 koje se nalazi 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.

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.

Napredne opcije modula galerije

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]

Ostali Divi tutoriali

• 5 web stranice za restoran korištenja Divi temu
• Kako dodati tekst na proizvod Divi WooCommerce
• Kako promijeniti boju izbornika između Divi stranica
• Kako personalizirati rešetke bloga s Divi-jem
• Kako koristiti uređivač uloga Divija na WordPressu
• Kako stvoriti klizač Divi na cijelom zaslonu
• Kako promijeniti boju izbornika između Divi stranica
• Značajke koje vjerojatno ne znate o Divi-ju
• Kako koristiti Divi Builder na WordPressu
• Kako koristiti modul za pomicanje videozapisa Divi
• Kako koristiti modul Divi Builder Flip
• Kako dodati testimonijalni modul na Divi Builderu
• Kako koristiti tekstualni modul Divi
• Kako stvoriti klizač na Divi
• Kako urediti Divi korisničku ulogu
• Kako koristiti modul Divi Social Media
• Kako se koristi modul trgovine na temi WordPress Divi
• Kako koristiti modul Divi bočne trake
• Kako koristiti modul Divi Table Table
• Kako koristiti naslovni modul Divi publikacija
• Kako dodati video modul Divi
• Kako koristiti navigacijski modul članka
• Kako koristiti modul Divi pretraživanja
• Kako koristiti modul Divi wallet
• Kako koristiti modul osobe na Divi Builderu
• Kako koristiti modul lisnice pomoću Divi filtar
• Kako koristiti modul klizača pune širine
• Kako koristiti modul Divi Builder Image
• Kako koristiti navigacijski modul pune širine Divi Buildera
• Kako se koristi modul galerije slika
• Kako koristiti modul Divi Builder za cijelu širinu kartice
• Kako koristiti modul Divi punog širine portfelja
• Kako se koristi Divi zaglavni modul pune širine
• Kako koristiti modul Divi Counter
• Kako koristiti klizač članaka na Divi Builderu
• Kako koristiti modul Divi Email Optin