Имате нужда от начин за създаване на ефект на превъртане на изображението Elementor ? В тази статия ще ви насочим да създадете ефект на превъртане на изображението с помощта на Elementor на вашите уеб страници.
Ефектът на превъртане на изображението ще ви позволи да разкриете цялото изображение, когато потребителят задържи курсора на мишката върху изображенията. Когато посетите уебсайт, който продава шаблони за уебсайтове, можете да видите пълния преглед на шаблоните с функции за ефект на превъртане на изображения.
С тези функции можете лесно да покажете на потребителите си пълния изглед на уебсайта в малко пространство. Обикновено, ако искате да покажете пълно изображение на уебсайт, това ще заема много място на вашите уеб страници. Освен това, това се отразява на дизайна на вашия уебсайт.
Но с ефекта на превъртане на картина можете да добавите още снимки по атрактивен начин, който лесно може да привлече вниманието на публиката.
Създайте ефект на превъртане на изображение в Elementor
Elementor не предоставя приспособление за добавяне на ефект на превъртане на изображението. Така че трябва да добавите ефекта с помощта на персонализиран CSS. Персонализираната CSS функция е достъпна само с Elementor Професионалист Така че се уверете, че сте надстроили до Elementor Pro.
Сега отворете страница с редактора на Elementor и щракнете върху иконата плюс, за да добавите раздел.
Сега трябва да изберете колоната за вашия раздел. Тук избираме секцията с една колона.
Сега щракнете върху иконата за редактиране на раздел и в раздела за оформление задайте минималната височина на 500.
Сега от изпълнимия модул за блокове добавете блока с вътрешна секция към създадения от вас раздел и премахнете колоната по подразбиране. Щракнете с десния бутон върху иконата за редактиране на колона и щракнете върху опцията за изтриване, за да изтриете основната колона.
Отидете отново до опцията за редактиране на вътрешната секция и в раздела за оформление задайте минималната височина на 500, както показахме по-рано.
Сега превключете към раздела стил на вътрешната секция и задайте фона като класически от опцията за фон. След това трябва да добавите вашето фоново изображение. От опцията за позиция на изображението задайте позицията на изображението чрез Топ център. От опцията за повторение задайте опцията не-повтаряне и размера като покрива.
Сега превключете към раздела напреднал за добавяне на персонализиран CSS. В персонализираното CSS поле добавете следния код:
селектор{ -webkit-transition: ease-in-out 3s !important; преход: леко навътре-навън 3s !важно; } selector:hover{ background-position: center bottom !important; }
Можете да промените стойността на прехода, за да промените ефекта на превъртане на изображенията. Ако искате да добавите няколко изображения със същия ефект, можете да дублирате колоната и след това да промените фоновото изображение.
Заключение
Следвайки процеса, вие ще можете да добавите ефект на превъртане на изображението към вашия уебсайт с помощта на създателя на страници Elementor. Можете да разгледате другите ни статии, за да научите:
- Как да използвате блокове Elementor в редактора на Gutenberg?
- Elementor срещу Divi срещу SeedProd – Кое е по-добро?
- Как да използвате История за отмяна и повторение на действия в Elementor
- Как да направите уебсайт на Elementor супер бърз
- Как да създадете интерактивен кръг в Elementor
Надяваме се тази статия да ви бъде полезна. Ако ви харесва тази статия, моля, харесайте нашата Facebook страница, за да останете свързани.
