Divi e bën të lehtë shtimin e imazheve kudo blogun tuaj. Të gjitha imazhet mbështesin ngarkimin progresiv dhe vijnë me 4 stile të ndryshme animacioni që e bëjnë lundrimin në faqen tuaj argëtuese dhe tërheqëse. Modulet e imazhit mund të vendosen në çdo kolonë që krijoni dhe madhësia e tyre do të rregullohet për t'u përshtatur.
Si të shtoni një modul imazhi nga Divi
Përpara se të shtoni një modul imazhi në faqen tuaj, së pari duhet të hidheni në Divi Builder. Pasi të Tema divi instaluar në faqen tuaj të internetit, do të vini re një buton Përdorni Divi Builder sipër redaktuesit të postimeve sa herë që krijoni një faqe të re. Klikoni në këtë buton për të aktivizuar Divi Builder dhe për të hyrë në të gjitha modulet Divi Builder. Pastaj klikoni në butonin Përdorni Visual Builder për të filluar gjeneratorin në modalitetin vizual. Ju gjithashtu mund të klikoni butonin Përdorni Visual Builder kur shfletoni uebfaqen tuaj në plan të parë nëse jeni të lidhur me pultin e WordPress tuaj.
Pasi të keni aktivizuar Visual Builder, mund të klikoni butonin gri (+) për të shtuar një modul të ri në faqen tuaj. Modulet e reja mund të shtohen vetëm brenda rreshtave. Nëse po filloni një faqe të re, mos harroni të shtoni më parë një rresht në faqen tuaj.
Gjeni modulin e imazhit në listën e moduleve dhe klikoni mbi të për ta shtuar në faqen tuaj. Lista e modeve është e kërkueshme, që do të thotë që ju gjithashtu mund të shkruani fjalën "imazh" dhe pastaj klikoni enter për të gjetur automatikisht dhe shtuar modalitetin e imazhit! Pasi të shtohet moduli, ju do të përshëndeteni nga lista e opsioneve të modulit. Këto opsione janë të ndara në tre grupe kryesore: Përmbajtje , Konceptim et i përparuar .
Shembull rasti i përdorimit: Shtimi i figurave të mbivendosura për të ilustruar shërbimet në një faqe shërbimesh
Ka mënyra të panumërta për të përdorur modulin e imazhit. Për këtë shembull, unë do t'ju tregoj se si të shtoni imazhe në një faqe shërbimesh për një faqe në internet të biznesit të vogël. Këtu do të shtoj imazhet. Secili rreth i kuq përfaqëson një imazh.
Meqenëse shtimi i një imazhi në një faqe është një proces mjaft i thjeshtë dhe i drejtpërdrejtë, unë do të shtoj disa stilime të personalizuara për të pozicionuar imazhet e mia në mënyrë që ato të mbivendosen, duke krijuar një efekt të grumbulluar.
Le të fillojë.
Përdorni ndërtuesin vizual për të shtuar një seksion standard me një paraqitje 1/4 1/4 1/2. Pastaj shtoni një modul teksti në kolonën e djathtë 1/2 të rreshtit tuaj. Vendosni një titull dhe përshkrim për shërbimin.
Pastaj shtoni një modul imazhi në kolonën 1/4 majtas.
Përditësoni cilësimet e modulit Image si më poshtë:
Opsionet e përmbajtjes
URL e imazhit: [shkruani URL ose shkarkoni imazhin me dimensione 500 × 625]
Opsionet e dizajnit
Marzhi i personalizuar: majtas -60px
Mundësi shtesë
Animacion: Nga e majta në të djathtë
Ruani cilësimet
Shtoni një modul tjetër imazhi në kolonën e dytë 1/4 (ose kolona e mesme) dhe azhurnoni cilësimet e imazhit si më poshtë:
Opsionet e përmbajtjes
URL e imazhit: [shkruani URL ose shkarkoni imazhin me dimensione 500 × 625]
Opsionet e dizajnit
Marzhi i personalizuar: Top 100px, -60px majtas
Mundësi shtesë
Animacion: Nga e djathta në të majtë
Ruani cilësimet
Kjo kujdeset për pjesën e parë. Tani për seksionin tjetër të shërbimit mund të kopjojmë pjesën që sapo krijuam për seksionin e parë të shërbimit. Pasi seksioni të kopjohet, ndryshoni strukturën e kolonës në një paraqitje të kolonës 1/2 1/4 1/4 (e kundërta e asaj të mëparshme).
Pastaj tërhiqni modulin e tekstit me kokën dhe përshkrimin e shërbimit në kolonën 1/2 në të majtën. Sigurohuni që të rrëshqisni të dy Modulet e Imazhit për të mbushur çdo kolonë 1/4 (tani në të djathtë).
Meqenëse modulet e imazheve janë dublikata, ne duhet të ngarkojmë imazhet e reja për atë seksion të veçantë të shërbimit. Gjithashtu, modulet gjithmonë kanë cilësime të marzheve të personalizuara si dy modulet e para të imazheve të krijuara. Le ta ndryshojmë atë.
Duke filluar me modulin Image në kolonën e duhur 1 / 4, azhurnoni cilësimet e mëposhtme të figurës:
Opsionet e përmbajtjes
URL e imazhit: [shkruani URL ose shkarkoni imazhin me dimensione 500 × 625]
Opsionet e dizajnit
Marzhi i personalizuar: -60px majtas (vetëm)
Tab i avancuar
Animacion: Nga e djathta në të majtë
Në fund, azhurnoni cilësimet e imazhit për modulin e figurës së kolonës qendrore 1/4 me sa vijon:
Opsionet e përmbajtjes
URL e imazhit: [shkruani URL ose shkarkoni imazhin me dimensione 500 × 625]
Opsionet e dizajnit
Marzhi i personalizuar: 100px Up, -60px E drejtë
Tab i avancuar
Animacion: Nga e majta në të djathtë
Ruani cilësimet
Tani shikoni faqen!
Mundësitë e përmbajtjes së modulit të imazhit
Në skedën Përmbajtja, do të gjeni të gjithë elementët e përmbajtjes së modulit, të tilla si teksti, imazhet dhe ikonat. E gjithë kjo kontrollon çfarë shfaqet në modulin tuaj gjithmonë do të gjenden në këtë skedë.
URL e imazhit
Vendosni një url të vlefshme për imazhin këtu, ose zgjidhni / ngarkoni një imazh përmes bibliotekës mediatike WordPress. Imazhet do të shfaqen gjithmonë të mbetura të justifikuara në kolonat e tyre dhe shtrihen në të gjithë gjerësinë e kolonës tuaj. Sidoqoftë, imazhi juaj nuk do të jetë kurrë më i madh se madhësia e tij origjinale. Lartësia e figurës përcaktohet nga raporti i figurës tuaj origjinale.
Hapni në shikuesin
Këtu mund të zgjidhni nëse imazhi juaj do të hapet në një shikues kur klikoni mbi të. Nëse ky opsion është i aktivizuar, imazhi juaj do të "zmadhojë" në madhësinë e tij maksimale kur klikoni në një dritare modale. Shtë një tipar i shkëlqyeshëm për kuletat.
Link URL
Vendosni një url të vlefshme në internet në këtë fushë për ta kthyer imazhin tuaj në një lidhje. Lënia bosh e kësaj fushe thjesht do ta lërë imazhin tuaj si një element statik.
Hapja e URL-së
Ju mund të zgjidhni këtu nëse lidhja juaj do të hapet në një dritare të re.
Etiketa e administratorit
Kjo do të ndryshojë etiketën e modulit në konstruktor për identifikim të lehtë. Kur përdorni pamjen WireFrame në Visual Builder, këto etiketa shfaqen në bllokun e modulit të ndërfaqes Ndërtuesi Divi.
Opsionet e dizajnit të moduleve të imazhit
Në skedën Design, do të gjeni të gjitha opsionet e stilit të modulit, të tilla si gërmat, ngjyrat, madhësia dhe hapësira. Kjo është skeda që do të përdorni për të ndryshuar pamjen e modulit tuaj. Çdo modul Divi ka një listë të gjatë të cilësimeve të dizajnit që mund t'i përdorni për të ndryshuar gjithçka.
Mbivendosja e imazhit
Nëse ky opsion është i aktivizuar, një ngjyrë dhe një ikonë e mbivendosur do të shfaqen kur një vizitor rri pezull mbi imazhin.
Mbivendosja e ikonës me ngjyra
Këtu mund të vendosni një ngjyrë të personalizuar për ikonën e mbivendosur
Mbuloni ngjyrën mbulesë
Këtu mund të përcaktoni një ngjyrë të personalizuar për shtresën e sipërme.
Ikona e tejmbushjes
Këtu mund të përcaktoni një ikonë me porosi për veshjen e sipërme.
Hiq hapësirën poshtë figurës
Ky opsion ndikon vetëm në imazhet kur ato janë moduli i fundit në një kolonë. Kur ky opsion është i aktivizuar, distanca midis pjesës së poshtme të fotos dhe seksionit tjetër hiqet, duke lejuar që imazhi të kornizojë pjesën e sipërme të seksionit tjetër të faqes.
Rreshtimi i imazhit
Këtu ju zgjidhni drejtimin në të cilin imazhi juaj noton në kolonë. Mund ta notoni imazhin majtas, djathtas ose ta mbani në qendër.
Gjithmonë përqendrojeni imazhin në celular
Shpesh, imazhet e vogla janë më të këndshme për syrin në pajisjet mobile kur ato janë të përqendruara. Ndërsa kolonat dështojnë, imazhet e rreshtuara majtas ose djathtas në kolona më të vogla bëhen jetime kur kolonat dështojnë dhe arrijnë gjerësinë 100%. Mundësimi i kësaj kolone me imazhe të detyruara të rreshtohet në qendër të kolonës në celular pa ndikuar në rreshtimin e imazhit në desktop.
Përdorni kufirin
Aktivizimi i këtij opsioni do të vendosë një kufi rreth modulit tuaj. Ky kufi mund të personalizohet duke përdorur parametrat e mëposhtëm të kushtëzuar.
Ngjyra e kufirit
Ky opsion ndikon në ngjyrën e kufirit tuaj. Zgjidhni një ngjyrë të personalizuar nga zgjedhësi i ngjyrave për ta aplikuar në kufirin tuaj.
Gjerësia e kufirit
Si parazgjedhje, kufijtë janë 1 pixel të gjerë. Ju mund ta rrisni këtë vlerë duke tërhequr rrëshqitësin e diapazonit ose duke futur një vlerë të personalizuar në fushën e hyrjes në të djathtë të rrëshqitësit. Mbështeten njësitë e masave të personalizuara, që do të thotë që ju mund të ndryshoni njësinë e paracaktuar nga "px" në diçka tjetër si em, vh, vw etj.
Stili kufitar
Kufijtë mbështesin tetë stile të ndryshme: të ngurta, me pika, me pika, dyshe, brazdë, kreshtë, mbivendosje dhe fillim. Zgjidhni stilin tuaj të dëshiruar nga menuja zbritëse për ta aplikuar në kufirin tuaj.
Gjerësia maksimale e imazhit
Si parazgjedhje, gjerësia maksimale e figurës është vendosur në 100%. Kjo do të thotë që fotografia do të shfaqet në gjerësinë e saj natyrore përveç nëse gjerësia e figurës tejkalon gjerësinë e kolonës mëmë, në këtë rast imazhi do të kufizohet në 100% të gjerësisë së kolonës. Nëse dëshironi të kufizoni më tej gjerësinë maksimale të figurës, mund ta bëni duke futur këtu vlerën e dëshiruar të gjerësisë maksimale. Për shembull, një vlerë prej 50% do të kufizonte gjerësinë e figurës në 50% të gjerësisë së kolonës mëmë.
Forconi gjerësinë e plotë
Si parazgjedhje, imazhet shfaqen në gjerësinë e tyre amtare. Sidoqoftë, mund të zgjidhni të detyroni imazhin të shtrihet në gjerësinë e plotë të kolonës mëmë duke mundësuar këtë mundësi.
Marzhi personal
Marzhi është hapësira e shtuar në pjesën e jashtme të modulit tuaj, midis modulit dhe elementit tjetër sipër, poshtë, ose majtas dhe djathtas tij. Ju mund të shtoni vlera marzhi të personalizuara në secilën prej katër anëve të modulit. Për të hequr marzhin e personalizuar, hiqni vlerën e shtuar nga fusha e hyrjes. Si parazgjedhje, këto vlera maten në piksel, por ju mund të futni njësi të personalizuara të matjes në fushat e hyrjes.
Opsione të përparuara të modulit të imazhit
Në skedën e avancuar, do të gjeni opsione që krijuesit e faqeve më me përvojë mund t'i konsiderojnë të dobishme, siç janë tiparet e personalizuara të CSS dhe HTML. Këtu mund të aplikoni CSS të personalizuar në cilindo nga shumë elementë të modulit. Ju gjithashtu mund të aplikoni klasa dhe ID të personalizuara të CSS në modul, të cilat mund të përdoren për të personalizuar modulin në skedarin style.css të temës tuaj.
ID CSS
Futni një ID opsionale CSS për t'u përdorur për këtë modul. Një ID mund të përdoret për të krijuar një stil të personalizuar CSS ose për t'u lidhur me seksione të veçanta të faqes tuaj.
Klasë CSS
Futni klasat opsionale CSS për t'u përdorur për këtë modul. Një klasë CSS mund të përdoret për të krijuar stilim të personalizuar të CSS. Mund të shtoni shumë klasa, të ndara nga një hapësirë. Këto klasa mund të përdoren në temën tuaj për fëmijë Divi ose në fletën e stilit të personalizuar CSS që shtoni në faqen tuaj ose në faqen tuaj të internetit duke përdorur opsionet e temës Divi ose cilësimet e faqes Divi Builder.
Custom CSS
CSS-ja e personalizuar mund të zbatohet gjithashtu në modul dhe cilindo nga brendësitë e modulit. Në seksionin Custom CSS, do të gjeni një fushë teksti ku mund të shtoni fletë të personalizuara të stilit CSS direkt në secilin element. Hyrjet e CSS në këto cilësime janë mbështjellë tashmë në etiketat e stilit. Pra, thjesht futni rregullat e CSS të ndara me pikëpresje.
gjallëri
Përdorni këtë menu në rënie për të specifikuar animacionin e ngarkimit dembel për imazhin tuaj. Mund të zgjidhni që imazhi juaj të shfaqet nga e djathta, e majta, e poshtme ose e sipërme.
dukshmëri
Ky opsion ju lejon të kontrolloni pajisjet në të cilat shfaqet moduli juaj. Ju mund të zgjidhni të çaktivizoni modulin tuaj në tableta, telefona inteligjentë ose desktopë individualisht. Kjo është e dobishme nëse dëshironi të përdorni modë të ndryshëm në pajisje të ndryshme, ose nëse doni të thjeshtoni modelin e telefonit celular duke hequr disa elemente nga faqja.
Teksti alternativ i imazhit
Teksti alt ofron të gjitha informacionet e nevojshme nëse imazhi nuk po ngarkohet, nuk shfaqet në mënyrë korrekte, ose në ndonjë situatë tjetër ku një përdorues nuk mund ta shohë imazhin. Gjithashtu lejon që imazhi të lexohet dhe të njihet nga motorët e kërkimit.
[vc_row center_row=”po”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”i sheshtë” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SHKARKO TEMËN DIVI [/vcex_button][/vc_colum][/vc_colum] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”family” font ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-NADLOGO”]DOW templates DIVI[/vcex_button][/vc_column][/vc_row]
Tutoriale të tjera Divi
- faqet e internetit të 5 për përdorim restorant Divi temë
- Si të shtoni tekst në një produkt Divi WooCommerce
- Si të ndryshoni ngjyrën e menysë në mes të faqeve Divi
- Si të personalizoni rrjetet e një blogu me Divi
- Si të përdorni redaktorin e roleve Divi në WordPress
- Si të krijoni një rrëshqitës Divi në ekran të plotë
- Si ta ndryshoni ngjyrën e menusë në mes të faqeve Divi
- Karakteristikat që ju ndoshta nuk i dini për Divi
- Si të përdorni Divi Builder në WordPress
- Si të përdorni modulin scrolling video Divi
- Si të përdorni modulin Dili Builder Flip
- Si të shtoni një modul dëshmimi në Divi Builder
- Si të përdoret moduli i tekstit Divi
- Si të krijoni një shirit në Divi
- Si të redaktoni një rol të përdoruesit të Divi
- Si të përdorni modulin Divi Social Media
- Si të përdorni modulin e dyqaneve në temën WordPress Divi
- Si të përdorni modulin e sidebarit Divi
- Si të përdorni Modulin e Tabelës së Çmimeve të Divi-t
- Si të përdoret moduli i titullit të botimeve Divi
- Si të shtoni një modul video të Divi
- Si të përdorni modulin e lundrimit të artikullit
- Si të përdorni modulin e kërkimit Divi
- Si të përdorni modulin e portofolit Divi
- Si të përdorni modulin e personit në Divi Builder
- Si të përdorni modulin e portofolit me filtrin Divi
- Si të përdorni modulin e plotë slider width
- Si të përdorni modulin e imazhit të ndërtuesit Divi
- Si të përdorni modulin e navigimit të plotë të Divi Builder
- Si të përdorni modulin e galerisë së imazheve
- Si të përdorni modulin e kartës me gjerësi të plotë Divi Builder
- Si të përdorni modulin e Portofolit të Divi Full Width
- Si të përdorni modulin e headerit me gjerësi të plotë Divi
- Si të përdorni Modulin e Divi Counter
- Si të përdorni rrëshqitësin e artikujve në Divi Builder
- Si të përdorni modulin Optika të Divi Email
