Искате ли да превъртате изображение при задържане на курсора на мишката с Elementor?
Ако е така, нека заедно в този урок открием как да постигнем това, използвайки Elementor Page Builder.
И ако не успеете да схванете за какво ще говорим в този урок, ви каним да гледате следното видео:
За да завършите този урок, ще ви трябва Pro версията на Elementor, защото ще използваме персонализиран CSS код, който се поддържа само от тази версия на Elementor.
Прочетете и нашето ръководство на: Как да добавите формуляр WPForms към страница с Elementor
Нека създадем нов раздел със структура от 3 колони, след което в панела нека дефинираме Височина от Мин. височина, след това Минимална височина нека щракнем върху VH и нека го оправим плъзгач до 100
Нека добавим а Притурка за вътрешна секция в средната колона. Джаджата Вътрешна секция по подразбиране е конфигурирана с 2 колони, нека изтрием една от тях, след което конфигурираме нейната Височина от Мин. височина и Минимална височина нека дефинираме плъзгача на 400
В раздела Стил, нека дефинираме фоново изображение като изберете изображение от вашата библиотека, след което нека зададем позицията му на Superior Centered и Размер на корицата.
отивам граници и Box Shadow смени го замъгляване на 40 и всичко гранични лъчи от 20
Нека добавим а Притурка за заглавие под Вътрешна секция, със заглавие UI / UX дизайн и Подравнете заглавието към Център. В раздела Стил, нека променим типографията с for Размер 20, The Трансформация на главни букви.
В раздела напреднал, нека дефинираме Горна граница от 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 пъти, след което изтрийте останалите колони
Нека променим фоновото изображение на вътрешните секции на другите 2 колони и да променим заглавията на заглавните джаджи по-долу.
По този начин току-що сте изпълнили тази задача лесно. Просто прегледайте работата на вашия таблет и смартфон, опитвайки се да промените полетата, за да съответстват на всяко устройство.
Вземете Elementor Pro сега!
Заключение
Така ! Това е всичко за тази статия, която ви показва как да превъртите изображение нагоре и надолу при задържане на мишката. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...