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.
Efekt posúvania obrázka vám umožní zobraziť celý obrázok, keď používateľ umiestni kurzor myši na obrázky. Keď navštívite webovú stránku, ktorá predáva šablóny webových stránok, môžete vidieť úplnú ukážku šablón s funkciami efektu posúvania obrázkov.
Vďaka týmto funkciám môžete svojim používateľom na malom priestore jednoducho zobraziť celé zobrazenie webovej stránky. Za normálnych okolností, ak chcete zobraziť celý obrázok webovej stránky, zaberie na vašich webových stránkach veľa miesta. Navyše to ovplyvňuje dizajn vašej webovej stránky.
Ale s efektom posúvania obrázkov môžete pridať ďalšie obrázky atraktívnym spôsobom, ktorý môže ľahko upútať pozornosť publika.
Vytvorte efekt posúvania obrázkov v Elementore
Elementor neposkytuje widget na pridanie efektu posúvania obrázka. Takže musíte pridať efekt pomocou vlastného CSS. Vlastná funkcia CSS je k dispozícii iba s Elementor Pro. Uistite sa teda, že ste inovovali na Elementor Pre.
Maintenant, ouvrez une page avec l’éditeur Elementor et cliquez sur l’icône plus pour ajouter une section.
Teraz musíte vybrať stĺpec pre vašu sekciu. Tu vyberieme sekciu s jedným stĺpcom.
Teraz kliknite na ikonu úpravy sekcie a na karte rozloženia nastavte minimálnu výšku na 500.
Teraz z miniaplikácie bloku pridajte blok vnútornej sekcie do vytvorenej sekcie a odstráňte predvolený stĺpec. Kliknite pravým tlačidlom myši na ikonu úpravy stĺpca a kliknutím na možnosť odstrániť hlavný stĺpec odstráňte.
Opäť prejdite na možnosť úpravy vnútornej časti a na karte rozloženia nastavte minimálnu výšku na 500, ako sme si ukázali vyššie.
Teraz prepnite na záložku štýlu vnútornej časti a nastavte pozadie ako klasické z možnosti pozadia. Ďalej musíte pridať obrázok na pozadí. Z možnosti polohy obrazu nastavte polohu obrazu o Stred hore. Z možnosti opakovania nastavte možnosť neopakovať a veľkosť podobne krytie.
Teraz prejdite na kartu pokročilý na pridanie vlastného CSS. Do vlastného poľa CSS pridajte nasledujúci kód:
selektor{ -webkit-transition: easy-in-out 3s !dôležité; prechod: ľahký nábeh 3s !dôležité; } selector:hover{ background-position: center bottom !important; }
Môžete zmeniť hodnotu prechodu, aby ste zmenili efekt posúvania obrázkov. Ak chcete pridať viacero obrázkov s rovnakým efektom, môžete stĺpec duplikovať a potom zmeniť obrázok na pozadí.
záver
Nasledovaním tohto procesu budete môcť na svoj web pridať efekt posúvania obrázka pomocou nástroja na tvorbu stránok Elementor. Môžete si prečítať naše ďalšie články, kde sa dozviete:
- Ako používať bloky Elementor v editore Gutenberg?
- Elementor vs Divi vs SeedProd – Čo je lepšie?
- Ako používať históriu na vrátenie a opätovné vykonanie akcií v Elementore
- Ako urobiť webovú stránku Elementor super rýchlo
- Ako vytvoriť interaktívny kruh v Elementore
Dúfame, že tento článok bude pre vás užitočný. Ak sa vám tento článok páči, lajkujte našu stránku na Facebooku, aby ste zostali v kontakte.
