Хотите ли вы прокручивать изображение при наведении с помощью Elementor?
Если да, то давайте вместе узнаем в этом уроке, как этого добиться с помощью Elementor Page Builder.
И если вы не уловили, о чем мы будем говорить в этом уроке, предлагаем вам посмотреть следующее видео:
Для выполнения этого урока вам понадобится Про версия Elementor, поскольку мы будем использовать пользовательский CSS-код, который поддерживается только этой версией Elementor.
Также прочитайте наше руководство по: Как добавить форму WPForms на страницу с помощью Elementor
Давайте создадим новый раздел со структурой из 3 столбцов, затем на панели определим Высокомерие из Мин. ВысотаА потом Минимальная высота давай нажмем на VH и давай уладим это курсор на 100
Добавим Виджет внутреннего раздела в средней колонке. Виджет «Внутренний раздел» по умолчанию настроен на 2 столбца, давайте удалим один из них, а затем настроим его. Высокомерие из Мин. Высота и Минимальная высота давайте определимся курсор на 400
Во вкладке Стиль, давайте определимся фоновая картинка выбрав изображение из вашей библиотеки, затем установите его положение на Улучшенный по центру и Размер на обложке.
идти границы и Тень коробки Измени это размытие на 40 и все пограничные лучи из 20
Добавим Виджет заголовка су Внутренний раздел, с заголовком UI / UX Design и выровняйте заголовок Центр. Во вкладке Стиль, давайте изменим типографику на for 20 Размер, Преобразование в верхний регистр.
Во вкладке Передовой, давайте определим Верхнее поле более 20
Затем еще раз выберите Внутренний раздел и в панели перейдите на вкладку ПередовойА потом Пользовательские CSS, давайте вставим следующий код:
/*Effet de défilement d'Image*/
selector{
-webkit-transition: ease-in-out 4s !important;
transition: ease-in-out 4s !important;
}
selector:hover{
background-position: center bottom !important;
}И теперь, как только вы наводите курсор на изображение, оно прокручивается.
Текст заголовка белый, можно сделать черным.
Теперь давайте продублируем столбец 2 раза, затем удалим остальные столбцы.
Давайте изменим фоновое изображение на внутренние разделы двух других столбцов и изменим заголовки виджетов заголовков ниже.
Итак, вы легко справились с этой задачей. Просто просмотрите свою работу на планшете и смартфоне, пытаясь изменить поля, чтобы они соответствовали каждому устройству.
Получите Elementor Pro прямо сейчас!
Заключение
Вот и всё! На этом статья о том, как прокручивать изображение сверху вниз при наведении курсора, заканчивается. Если у вас возникнут трудности, сообщите нам об этом в комментариях. Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...