Как да добавите ефекти на курсора на изображението в WordPress 2024? [4 най-добри стъпки за следване]

Какво представляват ефектите при задържане на мишката в WordPress? Вашият уебсайт трябва да бъде изграден така, че да бъде уникален. Трудно е, когато всички останали мислят същото. Добрата новина е, че съвременната технология опростява дизайна на сайта.

Добавянето на ефекти при задържане на мишката към статични снимки е един пример. За ползите от прилагането на ефекти при задържане на мишката върху картина в WordPress. След това ще ви покажем как да ги включите в уебсайта си. Нека започнем!

Как да добавите ефекти на курсора на изображението в WordPress? 4 най-добри стъпки

След като научихте за ефектите на курсора и техните предимства, може да се запитате как да ги приложите. За щастие сме подготвили изчерпателно ръководство как да направите точно това:

Ефектите при задържане на мишката могат да бъдат добавени чрез персонализиран код. Ако обаче не сте опитен кодер, това може да отнеме много време и понякога опасно начинание.

Когато използвате плъгин обаче, нещата стават значително по-малко сложни.

- безплатен WordPress плъгин Beaver Builder опростява процеса на създаване на напълно функциониращи и естетически приятни WordPress сайтове.

От модулния CSS до интуитивния редактор на страници с плъзгане и пускане, всичко е проектирано с мисълта за разработчика.

Като допълнителен бонус това приложение улеснява всеки да прилага ефекти при задържане на мишката върху своите изображения. Не можете да сбъркате с Beaver Builder за всяка картина, която изисква допълнителен интерактивен елемент.

Също така се препоръчва да използвате нашата тема Beaver Builder. Използвайте WordPress шаблони за публикации, за да създавате бързо различни типове публикации, включително страници.

По този начин, вместо да се тревожите за разработването на оформления, можете да се концентрирате върху създаването на ангажиращи функции, като ефекти при задържане на мишката. От друга страна, можете да използвате Beaver Builder с каквато и тема на WordPress да изберете.

Стъпка 1: Добавяне на фото модул

Преди да започнете, активирайте приставката Beaver Builder. След това отидете на Страници в WordPress admin. Активирайте редактора, като създадете нова страница или изберете съществуваща.

След това щракнете върху знака плюс в горния десен ъгъл. Ще добавите фото модул. Плъзгане и пускане ви позволява бързо да позиционирате този модул.

Стъпка 2: Активирайте фотомодула

Този модул ви позволява да публикувате снимки на вашия сайт. Изберете снимка от вашата библиотека или въведете URL адрес. В медийната библиотека изрежете изображението.

Можете също да оформите снимка. Пейзажни, панорамни, портретни или кръгли изображения могат да използват ефекта на задържане. Вече можете да включите връзка към изображение. Ефектите при задържане на мишката могат да се използват за насочване на трафик към определени URL адреси.

Стъпка 3: Добавете персонализиран клас

След настройката на модула за картина изберете Разширени. Това е HTML елемент.

Превъртете надолу до Клас. Въведете персонализираната информация за класа на ефекта тук. Така че добавихме hover-unblur към класа. Ефектите при задържане на мишката ви позволяват да промените цвета и движението на изображението. Heave ефекти в Beaver Builder. Въз основа на въздействието се изисква специален клас.

Стъпка 4: Интегрирайте CSS ефекта

И накрая, добавете CSS с курсора на мишката към вашия сайт. Нашата база от знания разполага с CSS при насочване. Времето между ефектите на задържане е 0.3 секунди. Или когато изпратите CSS. Можете да ускорите или забавите прехода.

Изберете Глобални настройки от лявата заглавна лента. Сега добавете CSS кода към CSS тага.

На всяка страница на Beaver Builder отидете на Инструменти > Глобални настройки и го запазете. Освен това съдържанието, различно от Beaver Builder, е предмет на вашите CSS правила.

Една страница в LayoutCSS&Jscript. Запазете вашите CSS модификации. ВИЖТЕ ПЪРВИ ЕФЕКТ ЗА ХВЪРВАНЕ Задръжте мишката върху изображението, за да тествате.

Приложете ефекта към ред или колона от снимки.

Бързи връзки:

• Как да създадете цветова палитра за вашия WordPress сайт?
• Как да създадете страница за режим на поддръжка в WordPress?
• Как да създадете персонализирана страница за грешка 404 в WordPress?
• Как да управляваме ефективно комуникацията с клиентите?

Заключение: Как да добавите ефекти на курсора на изображението в WordPress?

Има много методи за персонализиране на уебсайт, но един от най-простите е да използвате ефект на задържане върху изображения. Ефектите при задържане на мишката са забавен начин да ангажирате посетителите на уебсайта си и да ги задържите там за по-дълго време.

Имате ли предпочитан ефект на задържане, който искате да използвате? Поставете го в областта за коментари по-долу!