Divi olakšava dodavanje slika bilo gdje blog. Sve slike podržavaju progresivno učitavanje i dolaze s 4 različita stila animacije koji čine navigaciju vašim web mjestom zabavnim i privlačnim. Moduli slika mogu se postaviti u bilo koji stupac koji izradite, a njihova će veličina biti prilagođena da odgovara.
Kako dodati slikovni modul iz Divi
Prije nego što dodate slikovni modul 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 aktivirate Visual Builder, možete kliknuti sivi gumb (+) 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.
Pronađite slikovni 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 i utipkati riječ "slika", a zatim kliknuti enter za automatsko pronalaženje i dodavanje modula slike! 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 slučaja: Dodavanje preklapajućih slika za ilustraciju usluga na stranici usluga
Postoji bezbroj načina za korištenje modula slike. U ovom primjeru pokazat ću vam kako dodati slike na stranicu usluga za web mjesto male tvrtke. Ovdje ću dodati slike. Svaki crveni krug predstavlja sliku.
Budući da je dodavanje slike na stranicu prilično jednostavan i neposredan postupak, dodat ću neki prilagođeni stil kako bih postavio svoje slike tako da se preklapaju, stvarajući efekt naslaga.
Počnimo.
Upotrijebite vizualni graditelj da biste dodali standardni odjeljak s rasporedom 1/4 1/4 1/2. Zatim dodajte tekstualni modul u desni stupac 1/2 vašeg retka. Unesite zaglavlje i opis usluge.
Zatim dodajte modul slike u krajnji lijevi stupac 1/4.
Ažurirajte postavke modula za slike na sljedeći način:
Opcije sadržaja
URL slike: [unesite URL ili preuzmite sliku dimenzija 500 × 625]
Mogućnosti dizajna
Prilagođena margina: lijevo -60px
Opcije Avancées
Animacija: s lijeva na desno
Spremite postavke
Dodajte drugi modul slike u drugi 1/4 stupac (ili srednji stupac) i ažurirajte postavke slike kako slijedi:
Opcije sadržaja
URL slike: [unesite URL ili preuzmite sliku dimenzija 500 × 625]
Mogućnosti dizajna
Prilagođena marža: gore 100px, -60px lijevo
Opcije Avancées
Animacija: s desna na lijevo
Spremite postavke
Ovo se brine za prvi odjeljak. Sada za sljedeći odjeljak usluge možemo duplicirati odjeljak koji smo upravo stvorili za prvi odjeljak usluge. Jednom kad je presjek dupliciran, promijenite strukturu stupaca na raspored stupaca 1/2 1/4 1/4 (suprotno od prethodnog).
Zatim povucite tekstualni modul sa zaglavljem i opisom usluge u stupac 1/2 krajnje lijevo. Pazite da pomaknete dva modula slike kako biste popunili svaki 1/4 stupac (sada s desne strane).
Budući da su slikovni moduli duplikati, moramo prenijeti nove slike za taj određeni odjeljak usluge. Također, moduli uvijek imaju prilagođene postavke margine kao prva dva kreirana modula slike. Promijenimo to.
Počevši s modulom slike u desnom stupcu 1 / 4, ažurirajte sljedeće postavke slike:
Opcije sadržaja
URL slike: [unesite URL ili preuzmite sliku dimenzija 500 × 625]
Mogućnosti dizajna
Prilagođena marža: -60px Lijevo (samo)
Kartica Napredno
Animacija: s desna na lijevo
Na kraju, ažurirajte postavke slike za 1/4 središnji modul slike stupca sa sljedećim:
Opcije sadržaja
URL slike: [unesite URL ili preuzmite sliku dimenzija 500 × 625]
Mogućnosti dizajna
Prilagođena marža: 100px gore, -60px desno
Kartica Napredno
Animacija: s lijeva na desno
Spremite postavke
Sada provjerite stranicu!
Opcije sadržaja slikovnog 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.
URL slike
Ovdje stavite važeći URL slike ili odaberite / prenesite sliku putem biblioteke medija WordPress. Slike će se uvijek pojaviti poravnate lijevo u svojim stupcima i pokrivati cijelu širinu vašeg stupca. Međutim, vaša slika nikada neće biti veća od izvorne veličine. Visina slike određuje se omjerom slike izvorne slike.
Otvori se u pregledniku
Ovdje možete odabrati hoće li se vaša slika otvoriti u pregledniku kada kliknete na nju. Ako je ova opcija omogućena, vaša će se slika "zumirati" do svoje maksimalne veličine kada kliknete u modalnom prozoru. Izvrsna je značajka za novčanike.
URL veze
U ovo polje stavite valjani web URL kako biste svoju sliku pretvorili u vezu. Ako ovo polje ostane prazno, vaša će slika ostati statični element.
Otvaranje URL-a
Ovdje možete odabrati hoće li se vaša veza otvoriti u novom prozoru.
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.
Opcije projektiranja modula slike
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.
Prekrivanje slike
Ako je ova opcija omogućena, boja i ikona sloja prikazuju se kada posjetitelj zadrži pokazivač iznad slike.
Prekrivanje ikone u boji
Ovdje možete postaviti prilagođenu boju ikone sloja
Obložite prekrivačnu boju
Ovdje možete definirati prilagođenu boju za sloj.
Ikona preleta
Ovdje možete definirati prilagođenu ikonu za sloj.
Uklonite prostor ispod slike
Ova opcija utječe samo na slike kad su posljednji modul u stupcu. Kad je ova opcija omogućena, uklanja se udaljenost između dna slike i sljedećeg odjeljka, što omogućava slici da uokviri vrh sljedećeg odjeljka stranice.
Poravnanje slike
Ovdje odabirete smjer u kojem će vaša slika plutati u stupcu. Sliku možete plutati lijevo, desno ili je držati centriranom.
Uvijek centrirajte sliku na mobitelu
Male slike često su ugodnije oku na mobilnim uređajima kad su usredotočene. Kako stupci ne uspijevaju, slike poravnate lijevo ili desno u manjim stupcima ostaju bez rezultata kada stupci ne uspiju i dosegnu 100% širine. Omogućavanje poravnanja ovog stupca sa prisilnim slikama prema sredini stupca na mobilnom uređaju, bez utjecaja na poravnanje slike na radnoj površini.
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ž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.
Maksimalna širina slike
Prema zadanim postavkama, maksimalna širina slike postavljena je na 100%. To znači da će se slika prikazivati u svojoj prirodnoj širini, osim ako širina slike ne prelazi širinu roditeljskog stupca, u tom će slučaju slika biti ograničena na 100% širine stupca. Ako želite dodatno ograničiti maksimalnu širinu slike, to možete učiniti tako da ovdje unesete željenu vrijednost najveće širine. Na primjer, vrijednost od 50% ograničila bi širinu slike na 50% širine roditeljskog stupca.
Snagu punu širinu
Prema zadanim postavkama, slike se prikazuju u izvornoj širini. No, možete odabrati prisiliti sliku da obuhvaća cijelu širinu nadređenog stupca omogućavanjem ove opcije.
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.
Napredne mogućnosti modula slike
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.
Animacija
Pomoću ovog padajućeg izbornika odredite lijenu animaciju učitavanja slike. Možete odabrati da se vaša slika prikazuje s desne, lijeve, donje ili gornje strane.
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.
Alternativni tekst slike
Alternativni tekst pruža sve potrebne informacije ako se slika ne učitava, ne 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.
[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
