Потрібен спосіб створити ефект прокручування зображення Elementor ? У цій статті ми допоможемо вам створити ефект прокручування зображення за допомогою Elementor на ваших веб-сторінках.
Ефект прокручування зображення дозволить вам розкрити повне зображення, коли користувач наводить курсор на зображення. Коли ви відвідуєте веб-сайт, який продає шаблони веб-сайтів, ви можете побачити повний попередній перегляд шаблонів із функціями ефекту прокручування зображень.
За допомогою цих функцій ви можете легко показати своїм користувачам повний вигляд веб-сайту в невеликому просторі. Зазвичай, якщо ви хочете відобразити повне зображення веб-сайту, воно займе багато місця на ваших веб-сторінках. Крім того, це впливає на дизайн вашого сайту.
Але з ефектом прокручування зображення ви можете додати більше зображень у привабливий спосіб, який легко приверне увагу аудиторії.
Створення ефекту прокручування зображення в Elementor
Elementor не надає віджет для додавання ефекту прокручування зображення. Тому вам потрібно додати ефект за допомогою спеціального CSS. Спеціальна функція CSS доступна лише з Elementor Pro. Тому переконайтеся, що ви оновили до Elementor Pro.
Тепер відкрийте сторінку в редакторі Elementor і натисніть значок плюса, щоб додати розділ.
Тепер вам потрібно вибрати колонку для вашого розділу. Тут ми вибираємо розділ із одним стовпцем.
Тепер натисніть значок редагування розділу та на вкладці макета встановіть мінімальну висоту 500.
Тепер із віджета блоку додайте блок внутрішнього розділу до створеного розділу та видаліть стовпець за замовчуванням. Клацніть правою кнопкою миші піктограму редагування стовпця та виберіть опцію видалення, щоб видалити основний стовпець.
Знову перейдіть до опції редагування внутрішньої секції та на вкладці макета встановіть мінімальну висоту 500, як ми показали раніше.
Тепер перейдіть на вкладку стилю внутрішнього розділу та встановіть фон як класичний у параметрі фону. Далі вам потрібно додати фонове зображення. У опції положення зображення встановіть положення зображення за Верхній центр. З опції повтору встановіть опцію ні-повторити і розмір як обкладинка.
Тепер перейдіть на вкладку просунутий щоб додати власний CSS. У спеціальному полі CSS додайте такий код:
селектор{ -webkit-transition: ease-in-out 3s !важливо; перехід: легкість вхід-вихід 3s !важливо; } selector:hover{ background-position: center bottom !important; }
Ви можете змінити значення переходу, щоб змінити ефект прокручування зображень. Якщо ви хочете додати кілька зображень з однаковим ефектом, ви можете скопіювати стовпець, а потім змінити фонове зображення.
Висновок
Дотримуючись процесу, ви зможете додати ефект прокручування зображення на свій веб-сайт за допомогою конструктора сторінок Elementor . Ви можете переглянути інші наші статті, щоб дізнатися:
- Як використовувати блоки Elementor у редакторі Gutenberg?
- Elementor vs Divi vs SeedProd – що краще?
- Як використовувати історію для скасування та повторення дій у Elementor
- Як зробити веб-сайт Elementor надшвидким
- Як створити інтерактивне коло в Elementor
Сподіваємося, ця стаття буде вам корисна. Якщо вам подобається ця стаття, будь ласка, вподобайте нашу сторінку у Facebook, щоб залишатися на зв’язку.
