Dëshironi të mësoni se si të shtoni një efekt pezullimi te artikujt në miniaplikacionin e postimeveElementor?
Nëse jeni përdorues i WordPress duke përdorur Elementor për të krijuar tuajin Site Web, duhet të njiheni me veçorinë e efektit të pezullimit. Ju mund ta gjeni këtë veçori kryesisht në çdo cilësim widget Elementor.
Efekti hover mund t'i bëjë elementët tuaj tërheqës, kështu që është një mënyrë efektive për të përmirësuar përvojën e përdoruesit në tuaj Faqja e internetit.
Epo, duke folur për efektin hover, ky artikull do t'ju tregojë se si ta shtoni këtë të fundit në elementët individualë të postimit në widget Elementor Postimet duke përdorur CSS-në e personalizuar të Elementor, veçanërisht, efektin e zmadhimit të pezullimit.
Ka dy arsye pse po e bëjmë këtë tutorial për ju:
- Si parazgjedhje, mund të shtoni një efekt pezullimi në një postim nga miniaplikacioni i postimeve të Elementor. Por, efekti hover do të jetë shumë themelor/standard.
- Si parazgjedhje, Elementor ju lejon të shtoni një efekt zinxhir në miniaplikacionin Posts (tab i përparuar -> transformo -> Echelle). Por efekti i pezullimit do të ndikojë në të gjithë elementët e miniaplikacionit (jo individual) të postimeve.
Hapat për të shtuar efektin hover në postimet individuale nga miniaplikacioni i postimeve të Elementor
Përpara fillimit të tutorialit, duam t'ju bëjmë të ditur se ky udhëzues përdor veçorinë CSS të personalizuar të Elementor. Ky funksion disponohet vetëm në Elementor Pro; sigurohuni që të keni përmirësuar versionin tuaj.
Hapi 1: Shtoni miniaplikacionin e postimeve
Shkoni te redaktori juaj Elementor dhe ne do të fillojmë gjithçka nga e para, kështu që krijoni një seksion me një kolonë të vetme.
Lexo gjithashtu: Si të integroni MailChimp me Elementor
Më pas, zgjidhni miniaplikacionin Posts nga paneli i miniaplikacioneve, më pas tërhiqeni dhe lëshojeni në zonën e redaktimit. Pasi të keni shtuar miniaplikacionin Posts, mund ta modifikoni dhe stiloni miniaplikacionin sipas preferencave tuaja.
Remarque: Ju lutemi sigurohuni që keni publikuar tashmë artikuj në faqen tuaj Faqja e internetit.
Hapi 2: Shtoni fragmentin CSS
Pasi të keni redaktuar dhe stiluar miniaplikacionin Posts, më pas do të shtojmë një efekt hover brenda një postimi individual duke shtuar fragmentin e thjeshtë CSS. Në cilësimet e miniaplikacionit të Postimeve, shkoni te Tab i përparuar -> Custom CSS. Ju lutemi, kopjoni fragmentin CSS më poshtë dhe më pas ngjisni në fushë Custom CSS.
selector .elementor-post:hover{
transition: all .50s ease-in-out;
transform: scale(1.1);
cursor: pointer;
z-index: 1;
}
Kodi i mësipërm do të zgjedhë elementin individual të postimit në miniaplikacionin Posts duke përdorur përzgjedhësin .élémentor-post dhe aplikoni transformimin CSS.
Nëse jeni të kënaqur me efektin hover që është përdorur, mund ta mbani atë në atë mënyrë dhe ta ruani projektin tuaj nëse dëshironi. Por, nëse dëshironi të personalizoni shpejtësinë e tranzicionit dhe të transformoni vlerën e shkallës, mund ta ndryshoni vlerën në fragmentin CSS.
Remarque: Transformimi/zmadhimi është një efekt i zakonshëm dhe popullor që përdoret në faqet e internetit. Nëse dëshironi të dini më shumë rreth metodave të tjera të transformimit të efekteve hover, mund ta vizitoni këtë faqe.
Zbuloni gjithashtu: të gjithë përzgjedhësit e miniaplikacioneve Elementor në artikullin vijues
Merr Elementor Pro tani!!!
Përfundim
Ky artikull ju tregon se sa e lehtë është të shtoni një efekt hover tek elementët individualë të postimeve në miniaplikacionin e postimeve të Elementor duke përdorur CSS të personalizuar.
Teknika që kemi përdorur për këtë efekt është (zoom-in) që përfshin 2D dhe disa elementë pseudo të transformuar. Personalizojeni dhe luani me të gjitha stilet e efekteve hover derisa të gjeni efektin më të mirë të pezullimit për faqen tuaj të internetit.
Ketu eshte! Ne sapo ju kemi prezantuar me mjetet më të mira për marketing me email për Elementor. Nëse keni ndonjë shqetësim se si t'i përdorni ato, 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.
...
