A keni dashur ndonjëherë të paraqisni krijoni një kartë produkti me të Elementor ?
Kjo është ajo që ne do t'ju tregojmë në këtë tutorial. Për të pasur një ide mjaft të saktë se për çfarë do të flasim sot, ju ftojmë të shikoni videon e mëposhtme:
Ky tutorial ka të bëjë me prezantimin e produkteve që janë këpucë duke theksuar madhësitë, ngjyrat dhe butonin e blerjes së secilës. Kur rri pezull mbi secilën nga kartat, ky informacion do të shfaqet. Këtu është një përmbledhje e shkurtër e asaj që ne do të bëjmë.
Për të ndjekur këtë tutorial, ju ftojmë të gjeni fotografi të këpucëve dhe të keni një version Pro i Elementor. Nëse nuk e keni ende, klikoni këtë lidhje për ta marrë atë.
Por le të kthehemi tek ajo për të cilën jemi këtu.
Le të krijojmë një faqe dhe ta modifikojmë me të Elementor.
Në këtë, le të zgjedhim një strukturë me 3 kolona. Le ta zgjidhim mendjemadhësi sur lartësia min , lartësinë minimale në VH dhe vendosni kursorin në 100.
Në skedën Stil, zgjidhni ngjyrën e sfondit # 130640
Në kolonën e mesme futni a Miniaplikacioni i imazhit duke zgjedhur një imazh këpucësh nga biblioteka juaj.
Shkoni te skeda Style dhe në vetitë e imazhit vendosni gjerësinë në 80
Më pas tërhiqni a Miniaplikacioni i titullit dhe shkruani titullin Këpucë Nike - Ky është një shembull, mund të jetë një markë krejt tjetër -
Lexo gjithashtu: Si të optimizoni paraqitjen e faqes tuaj në internet me Elementor
Vendosni etiketën HTML në H3 dhe në qendër shtrirjen
Shkoni te skeda Style dhe ndryshoni ngjyrën e tekstit në ngjyrë të bardhë
Ndrysho edhe tipografinë
Më pas tërhiqni a Miniaplikacioni i seksionit të brendshëm poshtë Miniaplikacioni i titullit që keni futur më sipër.
Si parazgjedhje kjo miniaplikacion do t'ju ofrojë 2 kolona, fshini njërën prej tyre. Në këtë Miniaplikacioni i seksionit të brendshëm, Fut një Miniaplikacioni i titullit.
Jepini si titull Prerje : dhe vendosni etiketën HTML në Hapësirë.
Në skedën Stil, ndryshoni ngjyrën e titullit, madhësinë në 15 dhe yndyrën në 300
Në skedën Advanced, vendosni vetëm margjinën e djathtë në 5 dhe në pronë pozicionimi zgjedh Inline (Auto).
Shtoni në të njëjtin seksion të brendshëm një miniaplikacion Butoni me për Tekstin 8 dhe hapësirën e ikonave në 0.
Lexo gjithashtu: Si të lëvizni nëpër një imazh të gjatë të një portofoli me Elementor
Në skedën Style, ndryshoni ngjyrën e tekstit dhe ngjyrën e sfondit të butonit përkatësisht në Bardh e zi dhe në Margjinën e Brendshme vendosni përkatësisht 6-10-6-10 për kufijtë e brendshëm lart-djathtas-poshtë -Majtas.
Në skedën Advanced, vendosni vetëm margjinën e majtë në 5 dhe në veçorinë Positioning, zgjidhni Inline (Auto).
Dublikojeni këtë buton 3 herë dhe ndryshoni tekstin e 3 butonave të fundit në 9,10,11 - këtë mund ta bëni edhe duke përdorur shkronjat S, M, L, XL, XXL-
Klikoni Redakto seksionin dhe vendosni Horizontal Alignment në Qendër
Më pas dublikojeni këtë seksion të brendshëm -Seksioni i brendshëm- dhe modifikoni Size by Color hiqni 3 butona dhe mbi atë që do të mbetet fshini tekstin e butonit.
Në skedë Përmbajtje i Butonit, zgjidhni ikonën Rrethi nga biblioteka e ikonave, klikoni Fut për ta shtuar në buton.
Në skedën Style, jepni madhësinë 24 për tipografinë dhe lidhni margjinat e brendshme dhe futni 0. Në ngjyrën e sfondit vendosni transparencën në min dhe më pas mund të ndryshoni ngjyrën e tekstit në blu për shembull.
Pastaj dublikojeni këtë buton 3 herë dhe ndryshoni ngjyrat e dy të tjerëve në të verdhë dhe të kuqe. Pastaj klikoni në seksionin e brendshëm për ta modifikuar dhe në skedën Advanced vendosni kufijtë e sipërm dhe të poshtëm në -5 dhe 10.
Tani do të shtojmë një miniaplikacion Butoni poshtë miniaplikacionit të dytë të seksionit të brendshëm, futeni si tekst Bli tani dhe Rreshtimi në qendër. Në skedën Style, vendosni butonin në Bardhë dhe tekstin e butonit në Zi, më pas vendosni të gjitha rrezet e kufirit në 20.
Zgjidhni kolonën kryesore në të cilën kemi punuar dhe vendosni shtrirjen Vertikale sur Mjedis, në skedën Stil, zgjidhni llojin e Sfondit si I degraduar dhe si Lloji zgjidhni radial më pas në ngjyrën kryesore vendosni transparencën dhe vendndodhjen në 94. Për ngjyrën e dytë, vendosni vendndodhjen në 77 dhe rrezja e skajeve mbi 10.
Në skedën e avancuar, vendosni kufijtë në 0-35-0-35 dhe kufijtë e brendshëm në 50-20-50-20.
Më pas mund ta fshehni panelin për të parë se si duket puna juaj. Do të shihni që karta juaj është shumë e bukur, por ne do ta sjellim atë në jetë duke animuar seksione të caktuara. Dhe për këtë ne do të animojmë madhësinë, ngjyrën dhe butonin e blerjes.
Shih gjithashtu: Si të ndryshoni kokën në lëvizjen e faqes në Elementor
Le të bëjmë seksionin e parë seksionin e parë të brendshëm që shfaq madhësinë e produktit dhe në skedën Advanced, përcaktojmë Zbehet në lart si Efekti i Lëvizjes - Animacioni i hyrjes dhe vonesa e animacionit në 300.
Le të bëjmë të njëjtën gjë me seksionin e brendshëm që shfaq ngjyrat, por me një vonesë animacioni prej 800. Për butonin e blerjes, vonesa e tij do të jetë 1000
Tani do të caktojmë klasën fshihem i pari Seksioni i brendshëm dhe butoni i blerjes. Zgjidhni seksionin e parë të brendshëm, në skedën Advanced dhe në veçorinë Advanced, futni hide-first në fushën CSS Classes. Bëni të njëjtën gjë për seksionin tjetër të brendshëm dhe për butonin e blerjes.
Prandaj, ne do të shtojmë kodin CSS që do të animojë të gjithë kolonën. Kopjoni kodin e mëposhtëm:
përzgjedhës {
Lartësia: 400px;
shfaq: përkul;
}
/ * CSS për Shfaq / Fsheh * /
përzgjedhës .hide-first {
display: none;
}
zgjedhësi: rri pezull .hide-first {
ekran: bllok;
}
/ * Transformimi i imazhit * /
zgjedhësi img {
tranzicioni: lehtësi .5s;
}
zgjedhësi: hover img {
transformoj: përkthe (-20px, -40px) rotate (-25deg) shkalla (1.4);
}
/ * Pasqyrë celulare * /
@media (gjerësia maksimale: 767 px) {
zgjedhësi: hover img {
transformoj: përkthe (-20px, 0px) rotate (-10deg) shkalla (1);
}
përzgjedhës {
diferenca: 50px 10px;
}
}
Zgjidhni kolonën për ta modifikuar dhe shkoni te skedari Advanced dhe në fushën Custom CSS, ngjisni këtë kod.
NB: Duhet të dini se ky opsion është i disponueshëm vetëm nëse keni versionin Pro tëElementor.
Nëse kjo është bërë, harta juaj do të animojë me mausin, ndërsa si parazgjedhje do të fshehë madhësitë, ngjyrat dhe butonin e blerjes.
Lidhur me shpjegimin e kodit, pjesa e komentit jep një pasqyrë. Por duke modifikuar vlerat do të kuptoni se për çfarë shërben secili udhëzim.
Shih gjithashtu: Si të shtoni dy butona krah për krah në të njëjtën kolonë me Elementor
Nëse gjithçka funksionon normalisht, dublikojeni këtë kolonë dy herë dhe fshini kolonat e tjera boshe.
E tëra çfarë ju duhet të bëni është të zëvendësoni imazhet dhe titujt e blloqeve të tjera dhe në fund të shikoni paraprakisht punën tuaj.
Sapo keni krijuar një kartë të bukur produkti.
Merrni Elementor Pro Tani!
Përfundim
Kështu që ! Kjo është ajo për këtë tutorial që ju tregon se si të bëni një kartë produkti me Elementor. Nëse keni ndonjë shqetësim se si të arrini atje, na tregoni në komente.
Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për 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.
...
