Duhet të shtoni efektin e rri pezull në Elementor përmes CSS të personalizuar?

Elementor ka një funksion të integruar për të shtuar një efekt rri pezull në një element (Ne e mbuluam këtë në një prej artikujve tanë. Ndërsa tipari është mjaft i dobishëm, ajo ka një dobësi. Mund t'i shtoni vetëm një efekt rri pezull. Një seksion, një kolonë, një widget Image, një widget Button, dhe një widget Posts.

Lexo gjithashtu: Si të instaloni Elementor në WordPress

Karakteristika e efektit të integruar të rri pezull e Elementor nuk ju lejon të shtoni efekt rri pezull në miniaplikacione të tjera të tilla si widget Editor Editor, Miniaplikatë Titulli, etj. Një pengesë tjetër është se mund të shtoni vetëm një efekt shumë themelor të rri pezull.

A ka ndonjë mundësi tjetër për të shtuar efektin e rri pezull në Elementor?

Po eshte. Ju mund të shtoni efektin e rri pezull në Elementor përmes CSS të personalizuar. Por në mënyrë që të shtoni CSS të personalizuar, duhet të përdorni Elementor Pro pasi CSS e personalizuar është e disponueshme vetëm në Elementor Pro.

Shtimi i një efekti rri pezull në Elementor përmes CSS të personalizuar

Para se të fillojmë, le të hedhim një vështrim në shembullin e efekteve të rri pezull të krijuara përmes CSS të personalizuara.

Ndryshe nga efekti i integruar i rri pezull i Elementor, mund ta përdorësh këtë metodë për të shtuar një efekt rri pezull në çdo element në Elementor. Pavarësisht nëse është një seksion, kolonë apo widget (të gjitha widget).

Në këtë shembull, ne do t'ju tregojmë se si të shtoni një efekt pikë në një kolonë.

Së pari, klikoni në dorezën e kolonës për të kaluar në panelin e cilësimeve të kolonës. Sapo të shkoni atje, shkoni te skeda i përparuar dhe hapni bllokun Me porosi CSS dhe ngjisni kodin e mëposhtëm CSS.

zgjedhësi: rri pezull {tranzicioni: të gjitha .2-të lehtësimi i daljes; shndërroj: shkallën (1.1); kursori: pika; indeksi z: 1; }

Atje.

Në kodin e mësipërm po përdorim vetinë CSS shndërroj () për të shtuar efektin e rri pezull. Lloji i transformimit që po përdorim në këtë shembull është shkalla, me një kohëzgjatje prej 1,1 sekondash.

Ekzistojnë 4 lloje të tjera të transformimit që mund të përdorni me:transform

  • matricë
  • Perkthe
  • Qarkulloj
  • i shtrembër

Nëse dëshironi të përdorni një stil tjetër të transformimit, thjesht mund të zëvendësoni vlerën e transformojë në kodin CSS më sipër.

Ju mund të lexoni faqe cette për të mësuar më shumë rreth transformimit të CSS.

Ju mund të ndiqni të njëjtën rrugë për të shtuar një efekt rri pezull në elementët e tjerë.

Për të shtuar një efekt pikë në një seksion, mund të klikoni në dorezën e seksionit dhe të shkoni te skeda i përparuar dhe hapni bllokun CSS e personalizuar.

shtoni efektin e rri pezull në Elementor përmes CSS të personalizuar

Për të shtuar një efekt rri pezull në një widget, mund të klikosh në dorezën e widget-it dhe të shkosh përsëri te skeda. I avancuar, pastaj hap bllokun CSS e personalizuar.

Shtojca të tjera shtesë premium WordPress 

Gjithashtu zbuloni të tjera WordPress plugins premium që optimizojnë performancën e blogut ose faqes suaj të WordPress.

1. Live Sales Popup

Shitjet e drejtpërdrejta kërcyese është një tjetër plugin WordPress njoftim me disa të mira që mund t'i ktheni në avantazh. Para së gjithash, ai ka mundësinë shfaq një dritare që shfaqet kur dikush plotëson një porosi. Shtojca popup e shitjeve të drejtpërdrejta wordpress

Së dyti, dritarja pop-up e shitjeve në kohë reale mund të shfaqë një njoftim kur një person thjesht shton një artikull në karrocë. Dhe së treti, mund të përdorni mjetin për të rritur reklamën për një produkt duke treguar se sa vizitorë e shikuan artikullin.

Me tendencat më të fundit të uebit, mund të prisni që Popup i Shitjeve të Drejtpërdrejta të shfaqet bukur në të gjitha pajisjet dhe shfletuesit. Sa i përket paraqitjes pop-up, mund ta personalizoni deri në detajet më të vogla.

Për të lexuar: Si për të rregulluar një alarm sigurisë në blogun tuaj WordPress

Karakteristikat e tjera të Live Sales Popup janë më shumë se tridhjetë animacione, tinguj, numërim mbrapsht dhe pozicionimin e personalizuar. Ai gjithashtu punon për njoftime false dhe ju lejon ta vendosni vetëm për faqe specifike ku dëshironi që njoftimi të kryejë detyrën e tij.

Shkarko | DEMO | web hosting

2. Foodify

Ushqimi është mënyra më e shpejtë dhe e lehtë që klientët të porosisin ushqim nga një dyqan. Entirelyshtë tërësisht responsiv dhe përfshin tipare shtesë si imazhi, opsioni i kërkimit, informacioni mbi produktin. Menuja e ushqimit të restorantit Foodlify për woocommerce

Ajo gjithashtu shton butona në shportë për t'u përmirësuar përvoja e përdoruesit. Kjo shtesë e WooCommerce është një zgjidhje e shpejtë, gjithëpërfshirëse e porositjes që mund të shtohet në çdo faqe në internet të WooCommerce.

Këtu për ju Shtojcat 5 WordPress për të optimizuar përshkrimet dhe etiketat e kategorive

Ka avantazhin e të qenit shumë fleksibël dhe kompatibil me shumë shtojca ekzistuese në drejtorinë WordPress.

Shkarko | DEMO | web hosting

3. Mega Zoom & Pan Image Viewer

Shtojca Mega Zoom & Pan Image Viewer është një shikues dhe shfletues i shkëlqyer i imazheve me një plan urbanistik plotësisht të përgjegjshëm për shfaqjen e imazheve të mëdha në blog WordPress.

Shtojcë mega zoom pan wordpress për zoom

Shtë një mjet i fuqishëm i dizajnuar për të paraqitur produkte (imazhe të produkteve me rezolucion të lartë. Psh: Veshje, makina, diagrame teknike, etj.), Harta të Shfaqjes dhe të gjitha Imazhet e tjera, falë zmadhimit, funksionit të tij panoramike, kontrollet e saj të navigimit, shiriti i tij i lëvizjes, dhe shënues / pika aksesi shumë të personalizueshme.

Voici les 5 aplikacione për smartphone për të mbrojtur imazhet dhe videot tuaja

Kjo shtojcë funksionon shumë mirë në iOS (iPad, iPhone), Android dhe Windows celular, etj. Ai gjithashtu punon në të gjithë shfletuesit modernë dhe shfletuesit e vjetër si IE7 ose IE8.

Shkarko | DEMO | web hosting

Burime të tjera të rekomanduara

Ne gjithashtu ju ftojmë të konsultoheni me burimet më poshtë për të vazhduar më tej në kontrollin dhe kontrollin e faqes dhe blogut tuaj.

Përfundim

Ketu eshte ! Kjo është ajo për këtë udhëzues. Shpresojmë që ky artikull të ju ndihmojë të shtoni efektin e rri pezull në Elementor përmes CSS të personalizuar. Ju gjithashtu mund të lexoni artikullin tonë në Si të rregulloni bllokimin e renditjes JavaScript dhe CSS në WordPress.

Megjithatë, gjithashtu do të jeni në gjendje të konsultoheni me ne RESSOURCES, 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.

Nëse keni një mik apo një koment, ju lutemi lini atë në seksion koment. Kryesisht ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...