Вы хотите изменить изображение одним нажатием кнопки с Page Builder Elementor ? В этом новом уроке мы покажем вам, как это сделать.

Если вы понятия не имеете, о чем мы хотим поговорить сегодня, предлагаем вам посмотреть следующее видео:

Тогда давайте вернемся к тому, почему мы здесь.

Читайте также: Как изменить изображение при наведении на текст с помощью Elementor

Для выполнения этого урока вам понадобится Про версия Elementor, потому что мы будем использовать пользовательский код CSS, который поддерживается только этой версиейElementor.

Создадим раздел с 2 столбцами, затем на боковой панели определим Высокомерие из Мин. ВысотаА потом Минимальная высота давай нажмем на VH и установите ползунок на 100.

Давайте перетащим виджет Изображение в левый столбец и вставим изображение из нашей библиотеки.

В правую колонку вставим Виджет заголовка под названием «Выбери лучшее». Во вкладке Стиль давай нажмем на книгопечатание и изменить Высота строки на 1.

См. Также: Как изменить изображениеge при наведении курсора на текст с Elementor

Давайте добавим под виджетом Заголовок Виджет текстового редактора.

Над виджетом «Заголовок» разместим виджет-разделитель на его вкладке. Содержание, давай возьмем 270 для ширины. Щелкнем по тексту для добавления элемента, затем введем тенденция как текст. Во вкладке Стиль, измените Grease и разрыв из 2.

Узнайте также: Как отобразить текст над изображением с помощью Elementor

В разделе «Текст» нажмите книгопечатание, давайте изменим шрифт, Размер из 18, смазка из 600.

Под виджетом редактора содержание, давайте подадим Внутренний раздел, удалите одну из колонок Внутренней секции и вставьте в последнюю кнопка-виджет

Давайте изменим кнопку, перейдя на боковую панель и на вкладку Содержание, нажмите на библиотека иконок из значок и вставьте значок Корзина, давайте также очистим содержимое кнопки на Текст

Переходим во вкладку Стиль кнопки и в Радиус границы, нажмите на % и захватить 50 для всех радиусов бордюра и в Внутренние поля, давай возьмем 20.

Давайте настроим цвет кнопки, изменив цвет последней, нажав на классический для Тип фона и Давайте изменим цвет в соответствии с цветом выделения на изображении.

Затем нажмите на вкладку Передовой нашей кнопки, затем на позиционирование и Ширина Выбрать Встроенный (Авто). В расширенном разделеВкладка "Дополнительно", давай возьмем 10 для правое поле.

Давайте продублируем эту кнопку 4 раза и изменим цвета этих кнопок.

Далее давайте продублируем наш виджет изображения 4 раза, а затем изменим их изображения.

В L 'Продвинутая вкладка, давай возьмем все изображения в поле CSS классы каждого нашего изображения.

Потом в поле CSS-идентификатор введите красное изображение для изображения с красным выделением, зеленое изображение для изображения с зеленым выделением и коричневое изображение для изображения с коричневым выделением и так далее.

Давайте выберем наш Раздел и вВкладка "Дополнительно", в поле На заказ 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 всех времен.

Но тем временем поделитесь этой статьей в разных социальных сетях.

...