Нужен способ создать эффект прокрутки изображений в Elementor ? В этой статье мы поможем вам создать эффект прокрутки изображений с помощью Elementor на ваших веб-страницах.
Эффект прокрутки изображения позволит вам показывать полное изображение, когда пользователь наводит курсор на изображения. Когда вы посещаете веб-сайт, который продает шаблоны веб-сайтов, вы можете увидеть полный предварительный просмотр шаблонов с функциями эффекта прокрутки изображения.
Благодаря этим функциям вы можете легко показать своим пользователям полный обзор веб-сайта на небольшом пространстве. Обычно, если вы хотите отобразить полное изображение веб-сайта, оно займет много места на ваших веб-страницах. Кроме того, это влияет на дизайн вашего сайта.
Но с эффектом прокрутки изображений вы можете добавить больше изображений привлекательным способом, который легко привлечет внимание аудитории.
Создайте эффект прокрутки изображения в Elementor
Elementor не предоставляет виджет для добавления эффекта прокрутки изображения. Поэтому вам нужно добавить эффект с помощью пользовательского CSS. Пользовательская функция CSS доступна только с Elementor Про. Поэтому убедитесь, что вы обновились до Elementor Pro.
Теперь откройте страницу в редакторе Elementor и щелкните значок плюса, чтобы добавить раздел.
Теперь вам нужно выбрать столбец для вашего раздела. Здесь мы выбираем раздел с одним столбцом.
Теперь нажмите на значок редактирования раздела и на вкладке макета установите минимальную высоту 500.
Теперь из виджета блока добавьте блок внутреннего раздела в созданный раздел и удалите столбец по умолчанию. Щелкните правой кнопкой мыши значок редактирования столбца и выберите параметр удаления, чтобы удалить основной столбец.
Снова перейдите к опции редактирования внутренней части и на вкладке макета установите минимальную высоту 500, как мы показали ранее.
Теперь переключитесь на вкладку стиля внутренней части и установите фон как классический из параметра фона. Далее вам нужно добавить фоновое изображение. Из опции положения изображения установите положение изображения с помощью Топ Центр. Из опции повтора установите опцию не повторять и размер нравится чехол для варгана.
Теперь переключитесь на вкладку Передовой чтобы добавить пользовательский CSS. В пользовательское поле CSS добавьте следующий код:
selector{ -webkit-transition: легкость входа-выхода 3s !important; переход: легкий вход-выход 3s !важно; } selector:hover{ background-position: center bottom !important; }
Вы можете изменить значение перехода, чтобы изменить эффект прокрутки изображений. Если вы хотите добавить несколько изображений с одинаковым эффектом, вы можете продублировать столбец, а затем изменить фоновое изображение.
Заключение
Следуя этому процессу, вы сможете добавить эффект прокрутки изображения на свой веб-сайт с помощью конструктора страниц. Elementor. Вы можете ознакомиться с другими нашими статьями, чтобы узнать:
- Как использовать блоки Elementor в редакторе Gutenberg?
- Elementor против Divi против SeedProd — что лучше?
- Как использовать историю для отмены и повтора действий в Elementor
- Как сделать сайт Elementor супер быстрым
- Как создать интерактивный круг в Elementor
Мы надеемся, что эта статья будет вам полезна. Если вам понравилась эта статья, пожалуйста, поставьте лайк нашей странице в Facebook, чтобы оставаться на связи.
