Besoin d’un moyen de créer un effet de défilement d’image dans Elementor ? Dans cet article, nous vous guiderons pour créer un effet de défilement d’images à l’aide d’Elementor sur vos pages web.
Attēla ritināšanas efekts ļaus jums atklāt pilnu attēlu, kad lietotājs virza kursoru virs attēliem. Apmeklējot vietni, kurā tiek pārdotas vietņu veidnes, varat redzēt pilnu veidņu priekšskatījumu ar attēlu ritināšanas efektu funkcijām.
Izmantojot šīs funkcijas, varat ērti parādīt lietotājiem pilnu vietnes skatu nelielā vietā. Parasti, ja vēlaties parādīt pilnu vietnes attēlu, tas aizņems daudz vietas jūsu tīmekļa lapās. Turklāt tas ietekmē jūsu vietnes dizainu.
Taču, izmantojot attēla ritināšanas efektu, varat pievienot vairāk attēlu pievilcīgā veidā, kas var viegli piesaistīt auditorijas uzmanību.
Izveidojiet attēla ritināšanas efektu programmā Elementor
Elementor nenodrošina logrīku attēla ritināšanas efekta pievienošanai. Tātad jums ir jāpievieno efekts, izmantojot pielāgotu CSS. Pielāgota CSS funkcionalitāte ir pieejama tikai ar Elementor Pro. Tāpēc pārliecinieties, vai esat jauninājis uz Elementor Pro.
Maintenant, ouvrez une page avec l’éditeur Elementor et cliquez sur l’icône plus pour ajouter une section.
Tagad jums ir jāatlasa savas sadaļas kolonna. Šeit mēs izvēlamies vienas kolonnas sadaļu.
Tagad noklikšķiniet uz sadaļas rediģēšanas ikonas un izkārtojuma cilnē iestatiet minimālo augstumu uz 500.
Tagad no bloku logrīka pievienojiet iekšējās sadaļas bloku izveidotajai sadaļai un noņemiet noklusējuma kolonnu. Ar peles labo pogu noklikšķiniet uz kolonnas rediģēšanas ikonas un noklikšķiniet uz dzēšanas opcijas, lai izdzēstu galveno kolonnu.
Atkal dodieties uz iekšējās sadaļas rediģēšanas opciju un cilnē Izkārtojums iestatiet minimālo augstumu uz 500, kā mēs parādījām iepriekš.
Tagad pārejiet uz iekšējās sadaļas stila cilni un fona opcijā iestatiet fonu kā klasisku. Tālāk jums jāpievieno fona attēls. No attēla pozīcijas opcijas iestatiet attēla pozīciju pēc Augšējais centrs. Atkārtošanas opcijā iestatiet opciju nē-atkārtoties un izmērs kā segt.
Tagad pārslēdzieties uz cilni uzlabots lai pievienotu pielāgotu CSS. Laukā Pielāgots CSS pievienojiet šādu kodu:
selektors{ -webkit-transition: easy-in-out 3s !svarīgi; pāreja: easy-in-out 3s !svarīgi; } selektors: kursors{ fons-pozīcija: centrā apakšā !svarīgi; }
Varat mainīt pārejas vērtību, lai mainītu attēlu ritināšanas efektu. Ja vēlaties pievienot vairākus attēlus ar tādu pašu efektu, varat dublēt kolonnu un pēc tam mainīt fona attēlu.
Secinājumi
Sekojot šim procesam, varēsiet savai vietnei pievienot attēla ritināšanas efektu, izmantojot lapu veidotāju Elementor. Varat iepazīties ar citiem mūsu rakstiem, lai uzzinātu:
- Kā lietot Elementor blokus Gūtenberga redaktorā?
- Elementor vs Divi vs SeedProd – kurš ir labāks?
- Kā izmantot vēsturi, lai atsauktu un atkārtotu darbības programmā Elementor
- Kā izveidot Elementor vietni īpaši ātri
- Kā izveidot interaktīvu loku Elementor
Mēs ceram, ka šis raksts jums būs noderīgs. Ja jums patīk šis raksts, lūdzu, atzīmējiet mūsu Facebook lapu, lai saglabātu saziņu.
