Dëshironi të mësoni se si të zmadhoni një kartë profili me shtojcën e ndërtuesit të faqeve Elementor ?
Në këtë tutorial të ri Elementor, ne do t'ju tregojmë se si të aplikoni një efekt Zmadhimi në një kartë profili, ndërsa zbuloni emrin e profilit si dhe ikonat e tij të rrjetit social.
Nëse nuk e keni idenë se për çfarë duam të flasim sot, ju ftojmë të shikoni videon e mëposhtme:
Atëherë le të kthehemi te pse jemi këtu.
Për të përfunduar këtë tutorial, do t'ju duhet versioni Pro i Elementor, sepse ne do të përdorim kodin e personalizuar CSS i cili mbështetet vetëm nga ky version iElementor.
Le të krijojmë një seksion të ri me një strukturë me 3 kolona, më pas në panel, le të përcaktojmë Lartësia sur Lartësia minimale, pastaj në Lartësia minimale le të klikojmë VH dhe vendoseni rrëshqitësin në 100.
Le të shtojmë një widget Seksioni i brendshëm në kolonën e mesme. Miniaplikacioni i Seksionit të Brendshëm është konfiguruar si parazgjedhje me 2 kolona, le të fshijmë njërën prej tyre. Le të konfigurojmë pjesën tjetër në panel duke e modifikuar atë Lartësia sur Lartësia minimale dhe Lartësia minimale le ta vendosim kursorin në 400.
Në skedë Stili, le të modifikojmë Mbivendosja e sfondit. Klikoni mbi klasik në llojin e sfondit dhe zgjidhni një imazh nga biblioteka dhe në cilësimet e imazhit, zgjidhni Përqendruar në qendër në pozicion Mbulesë mbi Madhësinë. Errësirë në 1 dhe
Në seksionin kufijtë klikoni në % dhe futeni 4 për të gjitha rrezet frenuese.
Në numrin e kutive, vendosni rrëshqitësin në 0 sur Horizontal, À 70 sur Vertikale, À 63 sur Miell, À -60 sur difuzori. Ju duhet të shihni një efekt të bukur hije nën imazhin tuaj.
Në seksioni i brendshëm rrëshqisni Miniaplikacioni i titullit. Si titull, futni Steve Jobs, në skedën Style, zgjidhni ngjyrën e bardhë #FFFFFF. Në tipografi, zgjidhni Madhësinë 20.
Më pas zgjidhni kolonën e miniaplikacionit të seksionit të brendshëm dhe në skedën Style zgjidhni llojin e kufirit duke klikuar në Solid, të gjitha gjerësitë në 1 dhe ngjyrat në #FFFFFF.
Në skedë i përparuar, ndryshoni kufijtë në 15 dhe kufijtë e brendshëm në 20.
Tani futni ikonat e mediave sociale duke zvarritur miniaplikacionin "Ikonat e mediave sociale" në seksionin e brendshëm.
Redaktoni lidhjet e mediave sociale në skedën Përmbajtje duke klikuar në Çdo rrjet social. Nëse dëshironi të shtoni rrjete të tjera sociale, klikoni butonin Shtonjë element
Në fushën e ikonave, klikoni në Icon Library dhe në shiritin e kërkimit shkruani shkronjat e para të rrjetit tuaj social, sapo ta gjeni, zgjidhni atë dhe klikoni në butonin Insert.
Pastaj shkoni te skeda Stili, në pjesën ikonë, ndryshoni ngjyrën në Personnalisé.
Gjithashtu lexoni udhëzuesin tonë në; Si të shtoni faqezim me Elementor
Për Ngjyra kryesore, vendosi transparencën në minimum.
Për Ngjyra dytësore, zgjidhni ngjyrën #FFFFFF. Te Madhësia, futni 20, Marzhi i brendshëm aktiv 0.4.
Tani klikoni në skedën i përparuar, dhe në seksionin pozicionimiklikoni mbi Personnalisé. Sigurisht gjerësia e personalizuar, hyni 0.
Zbuloni gjithashtu Si të përdorni Zgjedhësin e ngjyrave me Elementor
Për pozitë, zgjidhni absolut, në Shift 15Në Orientimi vertikal choisir Bas, Dhe Kompensimi sur 20.
Zgjidhni përsëri Seksioni i brendshëm dhe në skedën i përparuar, në pjesën Custom CSS (Nëse nuk e keni këtë seksion, atëherë përmirësojeni shpejt në versionin pro të Elementor për të vazhduar)
Kopjoni dhe ngjisni kodin e mëposhtëm në këtë seksion:
/*CSS de superposition d'arrière-plan avec Zoom-In*/
selector{
overflow: hidden !important;
}
selector .elementor-background-overlay{
-webkit-transition: all 0.5s !important;
transition: all 0.5s !important;
-webkit-transform-origin: left;
transform-origin: left;
}
selector:hover .elementor-background-overlay{
-webkit-transform: scale(2);
transform: scale(2);
}A priori nuk duhet të shihni shumë, por nëse qëndroni pezull mbi imazhin, duhet të shihni një zmadhim të aplikuar në imazh.
Tani kopjoni dhe ngjisni kodin e mëposhtëm pas kodit të mëparshëm për të shfaqur ose fshehur disa elementë të kolonës:
/*CSS pour Masquer/Afficher un élément de la colonne*/
selector .elementor-column{
opacity: 0;
-webkit-transition: all 0.75s !important;
transition: all 0.75s !important;
}
selector:hover .elementor-column{
opacity: 1;
}Tani, sapo kaloni pezull mbi imazhin, zmadhimi zbatohet për imazhin dhe shfaqen emrat dhe ikonat e rrjeteve sociale.
Le ta dublojmë këtë kolonë 2 herë dhe të fshijmë 2 kolonat e tjera.
Ndryshoni imazhin e sfondit të Seksioneve të Brendshme, si dhe emrin dhe lidhjet e rrjeteve sociale.
Ja ku shkoni, sapo e keni bërë këtë detyrë me lehtësi. Thjesht shikoni paraprakisht punën e tabletit dhe smartfonit tuaj, duke u përpjekur të ndryshoni kufijtë që të përputhen me secilën pajisje.
Merrni Elementor Pro Tani!
Përfundim
Kështu që ! Kjo është ajo për këtë artikull që ju tregon se si të aplikoni një efekt Zoom në një kartë profili. Nëse keni ndonjë shqetësim se si të arrini atje, na tregoni brenda 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.
...
