Вы хотите создать анимацию наведения с помощью Elementor ?
В этом уроке мы будем использовать банку пепси, над которой мы будем наводить курсор и которая покажет описание о ней.
Мы приглашаем вас посмотреть следующее видео, чтобы получить представление о том, что мы хотим вам показать.
Вставьте раздел с одним столбцом, затем на боковой панели выберите Минимальная высота из Высокомерие
Юг минимальная высота щелчок VH затем перетащите ползунок на 100. Всегда во вкладке раскладка определять 650 Comme ширина.
Выберите столбец и на боковой панели на поле Вертикальное выравнивание выбрать Окружение.
Во вкладке Стиль, измените цвет фона, щелкнув палитру цветов и введите # D37636 потом в разделе граница, давай возьмем 20 для всех радиусов бордюра.
Во вкладке Передовой, отключите привязку отступов и введите 75 для внутренних полей Haut et Bas et 25 для внутренних полей Неловкий et DROITE.
Затем в столбце перетащите виджет внутренняя часть. Удалим один из столбцов из раздела Internal.
В столбце оставшейся внутренней секции опустите Виджет заголовка и изменить заголовок на Пепси Лав.
Также прочитайте наше руководство по: Как создать карту эффекта из портфолио в Elementor
Затем во вкладке Стиль, придайте тексту белый цвет и для типографики установите размер из 32, высота строки из 1.2, Межбуквенное расстояние из 0.5.
Ниже Виджет заголовка, брось Виджет текстового редактора и отредактируйте текст. Во вкладке Стиль, измените цвет текста на белый и размер типографика на 16, высота строки из 1.5 иМежбуквенное расстояние из 0.5.
Во вкладке Передовой изменить маржу Bas из -10.
В разделе позиционирование вкладка Передовой, изменить Ширина из Personnalisé и Пользовательская ширина установить последний на 310.
Ниже абзаца мы добавим виджет кнопки с для текста Читать Далее.
Во вкладке Стиль дать кнопке цвет белый и цвет текста установил его на Черный.
Теперь выберите столбец внутренняя частьв разделе Передовой вкладка Передовой выключите ссылку и нажмите на процент, затем установите маржу Неловкий из 20 и в Внутренняя маржа определить, что из Неловкий из 20.
Теперь перетащите картинка-виджет выше Внутренний раздел вставить изображение. Мы выбрали для примера изображение напитка, которое легко найти в сети.
После того, как вы вставили изображение, настройте Размер изображения из Все и Alignement давай нажмем на Центр.
Во вкладке Передовой, перейдите в раздел Позиция из Ширина выбрать Онлайн (Авто)На Позиция выбрать абсолютный и Горизонтальная ориентация выбрать Право то сдвиг входить -9.9 и на сдвиг вертикальной ориентации введите -105.
Идите дальше по Преобразование раздела определять изменить размер из 0.5.
Теперь выберите столбец Внутренний раздел и во вкладке Передовой введите название css-классы текст пепси.
Затем выбираем наш основной раздел, переходим в раздел Пользовательские CSS его вкладки Передовой, скопируйте и вставьте следующий код:
/*Hover Animation CSS*/
selector{
--transition: 0.5s;
--circle-color: #313F69;
--content-background: #D27838;
--mobile-height: 670px;
--mob-top: 320px;
}
selector .elementor-widget-wrap,selector .elementor-widget-container,selector .elementor-widget-image,.pepsi-text,selector > .elementor-widget-wrap:before,selector{
transition: all var(--transition) !important;
}
selector > .elementor-widget-wrap:before{
content: "";
background: var(--circle-color);
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 20px;
clip-path: circle(120px at center);
}
selector:hover > .elementor-widget-wrap:before{
clip-path: circle(400px at center);
background: var(--content-background);
}
selector:hover .elementor-widget-image{
right: -200px !important;
}
selector:hover .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector .pepsi-text{
opacity: 0;
visibility: hiddin;
}
selector:hover .pepsi-text{
opacity: 1;
visibility: visible;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-left: 0px !important;
}
/*Responsive*/
@media (max-width: 767px) {
selector{
height: var(--mobile-height);
}
selector .elementor-widget-image .elementor-widget-container{
transform: scale(1);
}
selector:hover .elementor-widget-image{
right: 68px !important;
top: var(--mob-top) !important;
}
selector:hover .pepsi-text .elementor-widget-wrap{
margin-top: -265px !important;
}
}
ПРИМЕЧАНИЕ: Если у вас нет этого раздела, то вам нужно перейти в Про версия Элементор.
Теперь, если мы хотим удалить цвет фона из текста, мы выберем наш основной столбец и на вкладке «Стиль» отключим цвет фона.
В это время ваша анимация будет нормально работать в браузере.
Анимация на планшете тоже кажется идеальной
Но на смартфоне нормально не отображается. Давайте решим эту проблему.
Отобразим браузер
В браузере выберите Раздел (убедитесь, что вы все еще находитесь в режиме смартфона) и опустите Ширина из 320
Затем выберите основной столбец и в его вкладке передовой, установите для всех внутренних полей значение 25
В браузере выберите изображение и во вкладке Стиль, Cliquez сюр PX de Ширина и установите его на 180.
Во вкладке Передовой du Виджет изображенияиди дальше Позиция, и выберите абсолютный, В горизонтальное смещение входить 75 и в вертикальное смещение входить 236. Короче говоря, обязательно центрируйте изображение в середине круга, используя различные смещения.
Теперь вы можете просмотреть свою анимацию на разных устройствах.
Получить Elementor Pro сейчас !!!
Заключение
Так ! Вот и все для этой статьи, которая показывает вам, как создать анимацию при наведении. в Elementor. Если у вас есть какие-либо вопросы о том, как туда добраться, мы будем рады услышать от вас в Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...
