Dëshironi të krijoni një plan urbanistik të përgjegjshëm të imazhit me Divi ?
Ndërtuesi Divi ka module fantastike të integruara që përdorin pamje në rrjet,
Por ndonjëherë ju mund të dëshironi të krijoni strukturën tuaj të personalizuar të rrjetit të imazhit me lidhje CTA. Kjo ju jep më shumë kontroll mbi dizajnin dhe përmbajtje që dëshironi të shfaqni për çdo artikull të rrjetit pa pasur nevojë të përdorni një shtesë.
Sot do t'ju tregojmë se si të krijoni një plan urbanistik të përgjegjshëm të rrjetit të imazhit me lidhje CTA duke përdorur opsionet e integruara të dizajnit të Divi.
Le të fillojmë!
studim
Këtu është një përmbledhje e shkurtër e rezultatit që do të marrim në fund të këtij tutoriali.
Krijo një faqe me Divi Theme Builder
Nga Paneli i WordPress, krijoni një faqe të re në internet duke shkuar te Faqet >> Shto
Shih gjithashtu: Si të krijoni një menu rrëshqitëse dhe shtytëse në DIVI?
Më pas, jepni një titull faqes tuaj dhe klikoni në " Përdorni Divi Builder ".
Pastaj klikoni në " filloni ndërtimin«
Krijimi i paraqitjes së seksionit special
Shto një seksion të ri "Specialiteti". faqosja e shiritit anësor të majtë një e treta dy të tretat.
Zgjidhni paraqitjen e kolonave siç tregohet në pamjen e mëposhtme të ekranit:
Fshini seksionin e paracaktuar në mënyrë që të mbetet vetëm seksioni i ri i specializuar.
Hapni cilësimet e seksionit dhe ndryshoni ngjyrën e sfondit si më poshtë:
- Sfondi: #84dbda
Nën skedinë Stili, përditësoni opsionet e mëposhtme:
- Barazoni lartësitë e kolonave: PO
- Përdorni gjerësinë e personalizuar të ulluqit: PO
- Gjerësia e kanalit: 1
- Gjerësia e brendshme: 100%
Lexo gjithashtu: Si mund të notoj postimet e blogut në DIVI?
- Gjerësia maksimale e brendshme: 1 px (desktop), 080 px (tableti dhe telefoni)
- Marzhi i brendshëm (lart dhe poshtë): 12vh
- Mbushja e kolonës 1 (lart dhe poshtë): 0 px
Me stilet e seksioneve në vend, shtoni një rresht me një kolonë në seksion.
Cilësimet e linjës
Përditësoni parametrat e linjës si më poshtë:
- Përdorni gjerësinë e ulluqit të personalizuar: PO
- Hapësira e kolonave: 1
- Harmonizoni lartësitë e kolonave: PO
- Marzhi i brendshëm (lart dhe poshtë): 0px
Krijo një rresht të dytë duke dublikuar të parën.
Pastaj ndryshoni rreshtin e kopjuar në një plan urbanistik me dy kolona.
Shtimi i imazheve si imazhe të sfondit të kolonës
Tani që të gjitha rreshtat dhe kolonat janë vendosur, ne jemi gati të shtojmë imazhet tona në paraqitjen tonë të rrjetit.
Për të siguruar që imazhet të jenë të përgjegjshme në paraqitjen e rrjetit, ne do të shtojmë secilën prej imazheve tona si imazhe sfondi në secilën nga katër kolonat në seksion.
Meqenëse çdo imazh i sfondit do të ketë një madhësi prej "mbulesë", imazhi do të mbushë gjithmonë të gjithë kolonën kur rregullon madhësinë e shfletuesit.
Imazhi i sfondit të kolonës së rreshtit të lartë
Për të filluar, hapni cilësimet e kolonës së rreshtit të sipërm.
Pastaj shtoni një imazh të sfondit në kolonë.
Imazhet e sfondit të kolonës së rreshtit të poshtëm
Më pas, hapni cilësimet për kolonën 1 në rreshtin e dytë (poshtë) dhe gjithashtu shtoni një imazh të sfondit në këtë kolonë.
Më pas, shtoni një imazh të sfondit në kolonën 2 të të njëjtit rresht.
Imazhi i sfondit të kolonës 1 të seksionit
Dhe së fundi, hapni cilësimet e seksionit "specialitet" dhe shtoni një imazh të sfondit në kolonën 1.
Shtimi i modulit "Thirrje për Veprim" i mbivendosur mbi imazhet në secilën kolonë
Tani që imazhet tona të sfondit janë shtuar në secilën kolonë të paraqitjes së rrjetit, ne do të shtojmë një modul "Thirrje për Veprim" në secilën kolonë.
Përdorimi i një mbivendosjeje të modulit "Thirrje për Veprim" në imazhin e sfondit të kolonës do t'ju lejojë të shtoni me lehtësi stile të personalizuara të mbivendosjes së sfondit dhe të lëvizni efektet në imazhin e sfondit të kolonës. 'image.
Për këtë shembull, ne do të përdorim vetëm elementin e butonit nga moduli Action Call, por ju lehtë mund ta shtoni në të përmbajtje të titullit ose trupit mbi butonin.
Ne do të shtojmë modulin e parë "Thirrje për veprim" në kolonën e rreshtit të sipërm.
Përmbajtje
Përditësoni cilësimet e modulit "Thirrje për veprim" si më poshtë:
- hiqni tekstin e titullit
- fshini tekstin e trupit
- URL-ja e lidhjes së butonit: #
VËREJTJE: Shtimi i një "#" për URL-në e lidhjes së butonit është vetëm një mbushës për momentin në mënyrë që butoni të shfaqet. Shtimi i ngjyrës gjysmë-transparente të sfondit në hover do t'ju japë një ngjyrë të bukur të mbivendosjes së personalizuar kur rri pezull mbi modul (dhe imazhin pas tij).
- Ngjyra e sfondit: transparente (desktop), rgba (255,235,77,0.5) (rrit pezull)
Stilet e butonave
Shkoni te skeda Stili dhe modifikoni cilësimet e butonit të modulit "Thirrje për veprim" si më poshtë:
- Përdorni stile të personalizuara për butonin: PO
- Madhësia e tekstit të butonit: 22 px
- Ngjyra e tekstit të butonit: #ffeb4d
- Butoni i sfondit: #000000 (desktop), #ec5f00 (rri rri pezull)
Shih gjithashtu: Si të krijoni një menu rrëshqitëse dhe shtytëse në DIVI
- Gjerësia e kufirit të butonit: 0 piksel
- Rrezja e kufirit të butonit: 100 px
- Fonti i butonit: Quicksand
- Butoni me dritë të zbehtë: Gjysmë i trashë
- Butoni i mbushjes: 0,5em lart, 0,5em poshtë, 2em majtas, 2em djathtas
Madhësia, mbushja dhe skajet
Më pas, duhet të sigurohemi që moduli ynë të ketë një lartësi të caktuar për të ekspozuar imazhin e sfondit të kolonës pas tij.
Për ta bërë këtë, ne do të shtojmë margjina të brendshme (lart dhe poshtë) në modul.
Ne gjithashtu do të shtojmë një kufi delikate në modul për t'i dhënë atij një ndarje të vogël nga imazhet e tjera në paraqitjen e rrjetit.
Aplikoni cilësimet e mëposhtme:
- Gjerësia: 100%
- Marzhi i brendshëm (lart dhe poshtë): 15vh
- Gjerësia e kufirit të poshtëm: 5 px
- Gjerësia e kufirit të majtë: 5 px
- Ngjyra e kufirit: rgba (255,255,255,0.5)
VËREJTJE: Përdorimi i njësisë së gjatësisë vh për mbushjen do ta bëjë vlerën e mbushjes në lidhje me lartësinë e portit të shikimit të shfletuesit. Kështu, elementët e rrjetit të imazhit tuaj do të rriten dhe tkurren në lartësi në përpjesëtim me dritaren e shfletuesit.
Përqendrimi vertikal i përmbajtjes së modulit "Thirrje për veprim".
Për të siguruar që përmbajtje i modulit "Action Call" mbetet i përqendruar vertikalisht, ne mund të shtojmë një pjesë të vogël të CSS të personalizuar duke përdorur veçorinë flex.
Nën skedën e avancuar, shtoni CSS-në e mëposhtme në elementin kryesor:
display:flex;
flex-direction:column;
justify-content:center;
U shtua mbivendosja e thirrjes për veprim në kolonat e tjera
Tani që moduli i parë "Thirrje për veprim" është përshtatur, kopjoni dhe ngjisni modulin në 3 kolonat e tjera të paraqitjes, duke përfshirë 2 kolonat në rreshtin e poshtëm dhe kolonën 1 në seksion.
Për të siguruar që moduli "Thirrje për Veprim" të mbulojë të gjithë lartësinë e kolonës 1 në seksionin e specializuar, vendosni lartësinë minimale në 100%.
- Lartësia minimale: 100%
Mbaroi ! Le të shohim rezultatin përfundimtar.
Rezultati përfundimtar
Këtu është rezultati përfundimtar i paraqitjes së rrjetit të imazhit të përgjegjshëm në një faqe interneti me efektet e pezullimit.
Dhe kështu reagon rrjeti kur rregullon madhësinë e shfletuesit.
Shkarkoni DIVI Tani!!!
Përfundim
Paraqitjet e rrjetit të imazhit të përgjegjshëm vazhdojnë të jenë një aspekt popullor i shumë faqeve të internetit. Tërheqja vizuale e ofruar nga imazhi i sfondit i kombinuar me mbivendosjen e thirrjes për veprim mund të shfaqë ato lidhje të rëndësishme navigimi.
Gjithashtu, natyra e përgjegjshme e paraqitjes së rrjetës së imazhit do të duket e mrekullueshme në të gjitha pajisjet, gjë që është gjithmonë një domosdoshmëri.
Shpresojmë që ky udhëzues të jetë i dobishëm për ju në projektet tuaja të ardhshme të krijimit Site Web. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.
Sidoqoftë, gjithashtu mund të këshilloheni burimet tona nëse keni nevojë për më shumë elementë për të përfunduar projektet e krijimit të faqes suaj të internetit.
Ju gjithashtu mund të ndiqni udhëzuesin tonë në Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.
Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.
...
