Искали ли сте някога да създадете ефект на стъклено отражение на вашите изображения в WordPress? В този нов урок ще ви покажем как да го направите с мощните Page Builder Elementor.
Вече трябва да знаете, че в този урок ще ви трябва Pro версията наElementor, защото ще използваме персонализиран код.
Ако не разбирате какво искаме да постигнем в този урок, гледайте следното видео:
След това обратно към защо сме тук.
Вижте също: Как да създадете градиентно заглавие с Elementor
Нека създадем нов раздел от три колони, след което модифицираме Височина от Мин. височина и Минимална височина нека щракнем върху VH, след което задайте плъзгача на 100
В раздела Стил, изберете черен цвят за Фонът
Прочетете още: Как да създадете красиво падащо меню с Elementor
Нека плъзгаме Уиджет за изображения в средната колона, след което потърсете във вашата библиотека изображението, което искате да огледате, и вмъкнете там.
В раздела напреднал, хайде да влезем Персонализирана CSS и поставете следния код:
/*effet de réflexion */
selector{
-webkit-box-reflect: below 1px linear-gradient(transparent, transparent, rgba(0,0,0,.5));
}В този момент ще видите отражението да се появява под изображението.
След това копирайте и поставете след предишния код кода по-долу, който ще накара изображението да се завърти при задържане на курсора на мишката.
/*Effet de Rotation */
selector{
-webkit-transform-origin: center;
transform-origin: center;
-webkit-transform: perspective(800px) rotateY(20deg);
transform: perspective(800px) rotateY(20deg);
-webkit-transition: 0.5s;
transition: 0.5s;
}
selector:hover{
-webkit-transform: perspective(800px) rotateY(0deg);
transform: perspective(800px) rotateY(0deg);
-webkit-transition: 0.5s;
transition: 0.5s;
}Резултатът ще бъде следният:
Ето как сега можете да създадете ефект на отражение на стъкло на вашите изображения в WordPress благодарение на Страница на Builder Elementor
Вземете Elementor Pro сега!
Заключение
Така ! Това е всичко за тази статия, която ви показва как да създадете ефект на стъклено отражение с Elementor. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...