Искате ли да промените изображение при задържане на курсора на мишката върху текст с Page Builder Elementor ? В този нов урок ще ви покажем как да го направите.
Ако нямате представа за какво искаме да говорим днес, ви каним да гледате следното видео:
След това да се върнем към защо сме тук.
Открийте и нашето ръководство за: Как да създадете карта с ефект на портфолио с Elementor
За да завършите този урок, ще ви трябва Pro версията на Elementor, защото ще използваме персонализиран CSS код, който се поддържа само от тази версия наElementor.
Нека създадем секция с 2 колони, след това в страничния панел нека дефинираме Височина от Мин. височина, след това Минимална височина нека щракнем върху VH и задайте плъзгача на 100.
В раздела Стил нека го изберем Тип фон кликване върху класически, след което променете цвят от# F9F9F9
В раздела напреднал, променете всички Вътрешни полета от 25
Сега нека променим ширината на колоната на 40% за лявата колона и 60% за дясната колона.
В лявата колона нека пуснем a Притурка за текстов редактор, след това поставете текст в него и променете Размер на заглавието текст върху Заглавие 3.
В раздела напреднал, въведете като Вътрешни маржове 10-25-10-30 съответно за горно, дясно, долно и ляво вътрешни полета
В секцията фон раздел напреднал, кликнете върху ПРЕГЛЕД, след което изберете тип фон от класически, нека го въведете цвят #DFF5FF et Продължителност на прехода от 0.5.
Ако задържите курсора на мишката върху текста, ще имаме възможност да открием великолепен цвят на фона при задържане на мишката.
Сега да преминем към раздела граници, и щракнете върху ПРЕГЛЕД, след което изберете Продължете за тип граница et нека деактивираме връзката между границата да влезеш 4 за лява граница. Нека изберем цвета #002FA7 и добавете продължителност на прехода към 0.5
Ако задържите курсора на мишката върху нашето текстово поле още веднъж, ще видим по-забележима анимация с рамка отляво.
В секцията граница, нека се върнем към раздела NORMAL, нека изберем типа на границата Продължете, нека изключим свързването между границите, хванете 4 за лявата граница и да я направи много прозрачна.
Ако задържите курсора на мишката върху текста още веднъж, ще видим много плавен преход.
Прочетете още: Как да покажете текст над изображение с Elementor
Нека дублираме този текст два пъти и променим текстовете на всеки съдържание като този.
В дясната колона плъзнете a Уиджет за изображения, и вмъкнете изображение от нашата библиотека.
Ще създадем пространство около това изображение, като отидем на Раздел Разширени на колоната и въведете 10 – 10 – 10 – 50 за всички вътрешни полета отгоре, вдясно, отдолу и отляво.
Нека изберете изображението и в раздела напреднал от последното, да отидем в раздела Ефекти на движението след това в Входна анимация, изберете Избледняват
Да отидем в раздела напреднал от раздела Разширени и добавете някои имена на класове в полето CSS класове. Така че да вземем всички изображения img-1
Нека дублираме нашето изображение 2 пъти.
Нека да изберем второто изображение и да променим img-1 на img-2, след което да променим изображението на ново изображение.
Вижте също: Как да създадете галерия с изображения с Elementor
За третото изображение нека просто променим img-1 на img-3, след което променим изображението на ново изображение.
Нека изберем нашия раздел и отидем в неговия раздел напреднал. В раздела Персонализирана CSS, копирайте и поставете следния кодов фрагмент:
selector .all-img{
display: none;
}
selector .img-1{
display: block;
}(Ако нямате този раздел, значи нямате Pro версията, ако искате да продължите, трябва да надстроите версията си).
Нека изберем първия си текстов редактор и отидем в раздела Разширени и в Раздел с атрибути. В областта Атрибути, копирайте и поставете следния кодов фрагмент:
data-showme|img-1Направете това за други текстови редактори, докато променяте img-1 на img-2 или img-3
Сега нека добавим HTML джаджа към нашата страница. Копирайте и поставете следния скрипт:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
$('[data-showme]').hover( function(){
event.preventDefault();
var showme = $(this).attr('data-showme')
$('.all-img').hide()
$('.' + showme).show()
})
})
</script>
Сега запазете или актуализирайте страницата си и след това я визуализирайте.
Ето го, току-що се справихте с тази задача лесно.
Вземете Elementor Pro сега!
Заключение
Ето го ! Това е всичко за тази статия, която ви показва как да промените изображение, като задържите курсора на мишката върху текст. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни Връзка.
Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.
Но междувременно, споделете тази статия във вашите различни социални мрежи.
...