Искате ли да създадете анимация при задържане на мишката с Elementor ?
В този урок ще използваме кутия пепси, върху която ще задържим курсора на мишката и която ще разкрие описание за нея.
Каним ви да разгледате следното видео, за да добиете представа какво искаме да ви покажем.
Вмъкнете раздел с една колона, след което изберете в страничната лента Минимална височина от Височина
Sur минимална височина кликнете върху VH след това плъзнете плъзгача до 100. Винаги в раздела оформление дефинира 650 Comme широчина.
Изберете колоната и в страничната лента на полето Вертикално подравняване изберете Обществена среда.
В раздела Стил, променете цвета на фона, като щракнете върху инструмента за избор на цвят и въведете #D37636 след това в секцията граница, да вземем 20 за всички бордюри.
В раздела напреднал, изключете обвързването с подложки и въведете 75 за вътрешни полета Връх et Bas et 25 за вътрешни полета Нетактичен et Droite.
След това в колоната плъзнете джаджа вътрешна секция. Нека премахнем една от колоните от вътрешната секция.
В колоната на оставащия вътрешен раздел пуснете Притурка за заглавие и сменете заглавието на Пепси Любов.
Прочетете и нашето ръководство на: Как да създадете карта с ефект от портфолио в Elementor
След това в раздела Стил, дайте на текста бял цвят и за типографията задайте Искан от 32, The височина на реда от 1.2, буквен интервал от 0.5.
Под Притурка за заглавие, пуснете a Притурка за текстов редактор и редактирайте текста. В раздела Стил, променете цвета на текста на бял и Искан типография на 16, The височина на реда от 1.5 иразстояние между буквите от 0.5.
В раздела напреднал промяна на маржа Bas от -10.
В секцията позициониране раздел напреднал, променете Широчина от Personnalisé и Ширина по избор задайте последното на 310.
Под параграфа ще добавим a бутон джаджа с за Текст Прочетете още.
В раздела Стил дайте цвета на бутона бял и го задайте за цвят на текста Черен.
Сега изберете колоната на вътрешна секция, в секцията напреднал раздел напреднал изключете връзката и щракнете върху процента, след което задайте маржа Нетактичен от 20 и в Вътрешен марж дефинирайте това на Нетактичен от 20.
Сега плъзнете картинка-джаджа над Вътрешна секция вмъкнете изображение. Избрахме за пример изображение на напитка, която лесно се намира в мрежата.
След като вмъкнете изображението, конфигурирайте Размер на изображението от Цяла и подравняване нека щракнем върху Център.
В раздела напреднал, отидете в раздела Позиция от Широчина изберете Онлайн (автоматично)На Позиция изберете абсолютен и Хоризонтална ориентация изберете прав след това Изместване въведете -9.9 и на Изместване от вертикалната ориентация въведете -105.
Отидете по-надолу Трансформирайте раздел дефинирам преоразмеряване от 0.5.
Сега изберете колоната на Вътрешна секция и в раздела напреднал въведете името на css класове Пепси текст.
След това изберете нашата основна секция, отидете на секцията Персонализирана CSS от неговия Tab Разширено, копирайте и поставете следния код:
/*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;
}
}
ЗАБЕЛЕЖКА: Ако нямате този раздел, трябва да отидете на Pro версия на Elementor.
Сега, ако искаме да премахнем цвета на фона от текста, ще изберем нашата основна колона и в раздела Стил ще деактивираме цвета на фона.
По това време вашата анимация ще работи нормално в браузъра.
Анимацията на таблета също изглежда перфектна
Но на смартфона не се показва нормално. Нека решим този проблем.
Да покажем браузъра
В браузъра изберете секцията (уверете се, че все още сте в режим на смартфон) и намалете Широчина от 320
След това изберете главната колона и в нейния раздел напреднал, задайте всички вътрешни полета на 25
В браузъра изберете изображението и в раздела Стилкликнете върху PX de Широчина и го настройте на 180.
В раздела напреднал du Уиджет за изображения, продължавайте Позицияи изберете абсолютенВ хоризонтално отместване въведете 75 и вертикално изместване въведете 236. Накратко, не забравяйте да центрирате изображението си в средата на кръга, като използвате различните отмествания.
Вече можете да визуализирате анимацията си на различни устройства.
Вземете Elementor Pro сега!!!
Заключение
Така ! Това е всичко за тази статия, която ви показва как да създадете анимация при задържане на мишката в Elementor. Ако имате някакви притеснения относно това как да стигнете до там, ще се радваме да чуем от вас в Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...