Dëshironi të mësoni se si të krijoni një kartë me efektin e një portofoli? Në këtë tutorial të ri do t'ju tregojmë se si ta bëni këtë Elementor.
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.
Lexo gjithashtu: Si të shfaqni tekstin mbi një imazh me Elementor
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ë zgjedhim kolonën e mesme dhe të hedhim në këtë kolonë Widget i seksionit të brendshëm. Miniaplikacioni i Seksionit të Brendshëm është konfiguruar me 2 kolona si parazgjedhje. Nën 2 kolonat, le të hedhim miniaplikacionin Titull me titullin Restaurante, zgjidhni H4 për etiketën HTML, dhe Qendra për shtrirjen.
Në skedë i përparuar i miniaplikacionit Titulli, Le të hyjmë 30 për Marzhi i lartë
Le të zgjedhim edhe një herë seksionin tonë të brendshëm. Në panel, le ta modifikojmë atë Lartësia sur Lartësia minimale dhe Lartësia minimale le ta vendosim kursorin në 380. Pastaj, le të fshijmë kolonën e djathtë ose të majtë të seksionit të brendshëm
Le ta heqim atë Miniaplikacioni i imazhit në seksionin e brendshëm dhe futni një imazh nga biblioteka jonë. le të zgjedhim I tërë për Madhësia e imazhit et Qendra për Radhitje.
NB: Nëse dëshironi të keni faqe të plota si tonat, ju ftojmë të kapni faqet me ndihmën e shtesës së Chrome GoFullPage, por mund të përdorni edhe një tjetër.
Zbuloni gjithashtu: Si të krijoni një galeri imazhesh me Elementor
Pastaj në skedën Stili, klikoni mbi PX de gjerësi, le ta vendosim rrëshqitësin në 260 dhe rrezet kufitare sur 10
Më pas, le të modifikojmë Box Shadow duke ndryshuar Blur në 40 dhe Diffuse në -10.
Në skedën Advanced, në seksion pozicionimi, zgjidhni absolut për pozitë, Orientimi horizontal sur majtas, dekalazh sur 0, € ™ sOrientimi vertikal sur Bas.
Le të dublikojmë dy herë miniaplikacionin tonë të imazhit. Në mënyrë të pashmangshme do të mbivendosen të gjithë. Le të shfaqim Navigatorin në mënyrë që të mund të aksesojmë miniaplikacionet e tjera të fshehura nga i pari.
Le të zëvendësojmë imazhin e Widget-it të dytë dhe në skedën e tij i përparuar, le t'i modifikojmë ato kufijtë e poshtëm et majtas duke hyrë 30 per secilin. Tani do të shihni një vonesë të lehtë,
Bëni të njëjtën gjë për Widget-in e tretë të Imazhit, por aplikoni kufijtë e 60 për kufijtë e poshtëm dhe të majtë. Tani duhet të keni një përmbledhje të të 3 miniaplikacioneve të imazhit.
Le të zgjedhim miniaplikacionin tonë të Seksionit të Brendshëm, shkojmë te Skeda e tij i përparuar dhe në pjesën Custom CSS, kopjoni dhe ngjisni fragmentin e mëposhtëm të kodit:
selector .elementor-widget-image{
transition: ease-in-out 0.6s;
}
selector:hover .elementor-widget-image{
transform: scale(.65);
}
selector:hover .front-img{
transform-origin: center left;
}
selector:hover .mid-img{
transform-origin: center top;
}
selector:hover .last-img{
transform-origin: bottom right;
}(Nëse nuk e keni këtë seksion, atëherë nuk keni versionin Pro, nëse dëshironi të vazhdoni, duhet të përmirësoni versionin tuaj)
Tani nëse qëndroni pezull mbi hartën tonë, do të keni një animacion zmadhimi
Le të zgjedhim miniaplikacionin tonë të parë të imazhit (më i ulëti) dhe në skedën e tij i përparuar, le të kapim front-img për Klasat CSS.
Për miniaplikacionin e dytë të imazhit, le të shkruajmë mesi i imazhit për klasat CSS.
Për miniaplikacionin e tretë të imazhit, le të shkruajmë fundit-img për klasat CSS.
Shih gjithashtu: Si të krijoni një galeri imazhesh me skeda me Elementor
Duke qëndruar pezull mbi kolonën tonë tani do të shohim një animacion të mrekullueshëm të përmbajtje të Seksionit tonë të Brendshëm.
Le të shfaqim faqen tonë në modalitetin e tabletit Do të shohim që imazhet nuk do të shfaqen siç duhet.
Zgjidhni miniaplikacionin e parë Image, në skedën e tij Style, le të modifikojmë gjerësinë duke klikuar në PC dhe më pas duke futur 150 si gjerësi. Le të bëjmë të njëjtën gjë me 2 miniaplikacionet e tjera të imazhit.
Le të zgjedhim Seksionin tonë të Brendshëm, në seksionin e tij Përmbajtje, le të modifikojmë Lartësia minimale sur 225.
Le ta shfaqim faqen tonë edhe në modalitetin Smartphone, a priori nuk paraqet ndonjë problem. Por, nëse paraqet ndonjë, le të zgjedhim Seksionin tonë të Brendshëm, në seksionin e tij Përmbajtje, le të modifikojmë lartësinë minimale.
Tani le të kopjojmë dy herë kolonën tonë të mesme, pastaj fshijmë dy kolonat e tjera boshe.
Le të modifikojmë Titujt e këtyre kolonave dhe më pas të ndryshojmë imazhet
Ju do të duhet të keni një seksion të mrekullueshëm, rezultatet e të cilit janë këtu:
Ja ku shkoni, sapo e keni bërë këtë detyrë me lehtësi.
Merrni Elementor Pro Tani!
Përfundim
Aty ajo është ! Kjo është ajo për këtë artikull që ju tregon se si të krijoni një kartë me efektin e një portofoli. 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.
...
