Искате ли да промените изображението с едно натискане на бутон с Page Builder Elementor ? В този нов урок ще ви покажем как да го направите.

Ако нямате представа за какво искаме да говорим днес, ви каним да гледате следното видео:

След това да се върнем към защо сме тук.

Прочетете още: Как да промените изображение при задържане на курсора на мишката върху текст с Elementor

За да завършите този урок, ще ви трябва Pro версията на Elementor, защото ще използваме персонализиран CSS код, който се поддържа само от тази версия наElementor.

Нека създадем секция с 2 колони, след това в страничния панел нека дефинираме Височина от Мин. височина, след това Минимална височина нека щракнем върху VH и задайте плъзгача на 100.

Нека плъзнете джаджата Image в лявата колона и да вмъкнем изображение от нашата библиотека.

В дясната колона нека вмъкнем a Заглавие Widget озаглавен Изберете най-доброто. В раздела Стил нека щракнем върху книгопечатане и модифицирайте Височина на линията на 1.

Вижте също: Как да промените изображениезадръжте курсора на мишката върху текст с Elementor

Нека добавим под джаджата за заглавие, a Притурка за текстов редактор.

Над приспособлението за заглавие, нека пуснем приспособление за разделител в неговия раздел Съдържание, да вземем 270 за ширина. Нека щракнем върху Текст за Добавяне на елемент, след което въведете тенденция като текст. В раздела Стил, модифицирайте грес и дупката от 2.

Открийте също: Как да покажете текст над изображение с Elementor

В секцията Текст щракнете върху книгопечатане, нека променим шрифта, the размер от 18, The грес от 600.

Под изпълнимия модул за редактор съдържание, нека подадем a Вътрешна секция, изтрийте една от колоните на вътрешната секция и пуснете последната a бутон-джаджа

Нека променим бутона, като отидем на страничния панел и в раздела Съдържание, кликнете върху библиотека с икони от икона и поставете иконата Пазарска чанта, нека също така изчистим съдържанието на бутона за включване Texte

Да отидем на раздела Стил на бутона и вътре Радиус на границата, кликнете върху % и изземете 50 за всички бордюри и в Вътрешни полета, да вземем 20.

Нека персонализираме цвета на бутона, като променим цвета на последния, като щракнем върху класически за Тип фон и Нека променим цвета според цвета на осветяването на изображението.

След това щракнете върху раздела напреднал на нашия бутон, след това на позициониране и Широчина нека изберем вградено (автоматично). В раздела Разширени наРаздел Разширено, да вземем 10 за дясно поле.

Нека дублираме този бутон 4 пъти и да променим цветовете на тези бутони.

След това нека дублираме нашата джаджа за изображение 4 пъти, след което модифицираме техните изображения.

В L 'Раздел Разширени, да вземем всички изображения в полето CSS класове на всяко наше изображение.

След това на полето CSS ID въведете red-image за изображението с червен акцент, green-image за изображението със зелено осветяване и brown-image за изображението с кафяво подчертаване и т.н.

Нека изберем нашите раздел и вРаздел Разширено, в областта Custom CSS копирайте и поставете следния кодов фрагмент:

.all-images{
    display: none;
}
#red-image{
    display: block;
}

(Ако нямате този раздел, значи нямате Pro версията, ако искате да продължите, трябва да надстроите версията си)

След това нека пуснем HTML джаджа в нашата страница, копирайте и поставете следния кодов фрагмент в секцията HTML код:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

Нека изберем първия бутон в полето Персонализирани атрибути де ла Раздел с атрибути, копирайте и поставете следния кодов фрагмент:

data-showme|IMAGE-ID-NAME

Нека променим частта IMAGE-ID-NAME чрез идентификаторите на вашите бутони, това са идентификаторите на червено изображение, зелено изображение и синьо изображение и т.н.

Така че за всеки бутон, нека променим кода IMAGE-ID-NAME с цвета на съответния бутон

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

В режим на смартфон можете например да подравните бутоните в центъра, да намалите полетата и много други.

Ето го, току-що се справихте с тази задача лесно.

Вземете Elementor Pro сега!

Заключение

Ето го ! Това е всичко за тази статия, която ви показва как да промените изображение, като задържите курсора на мишката върху текст. Ако имате някакви притеснения относно това как да стигнете до там, уведомете ни Връзка.

Можете обаче да се консултирате нашите ресурси, ако имате нужда от повече елементи, за да осъществите вашите проекти за създаване на интернет сайтове, като се консултирате с нашето ръководство за Създаване на блог на WordPress или тази, която е включена Divi: най-добрата тема на WordPress за всички времена.

Но междувременно, споделете тази статия във вашите различни социални мрежи.

...