Создаем изменяемую картинку в Elementor

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

Такой прием можно часто встретить в конструкторах товара, когда есть разные опции и нужно продемонстрировать, как это будет выглядеть без перезагрузки страницы. Например, при выборе различного цвета, изображение автоматически меняет также свой цвет.

Итак, создадим вот такую картинку, которая автоматически меняет свой цвет в зависимости от выбора пользователя.

Как создать такой эффект, используя бесплатную версию Elementor

В версии Elementor Pro есть отдельные разделы у каждого виджета, где можно вставить свой СSS код, а также задавать атрибуты для обертки элементов. Однако, и в бесплатной версии этого редактора также можно работать с собственным кодом.

Вот пошаговая инструкция, как сделать вышеуказанную картинку.

1. Создаем секцию, состоящую из двух колонок. В левой колонке размещаем два (или более) изображений, одно под другим.
2. У каждого изображения во вкладке Расширенные в поле CSS классы задаем один и тот же класс. В данном примере это switch_content (задается без точки).
3. Каждому изображению во вкладке Позиционирование устанавливаем Абсолютное позиционирование.
4. В правой секции в примере создан заголовок, а под ним располагаем виджет HTML-код и вставляем в его содержимое следующий код. Это код самих переключателей.

<div class="switch_block">
    <div class="switch_items">
        <div class="switch_item item_red switch_item_active">Red</div>
        <div class="switch_item item_yellow">Yellow</div>
    </div>
</div>

Последующие строки кода можно также добавить в этот блок, однако, если такой функционал планируется использовать на нескольких страницах сайта, то лучше стили и скрипты задать глобально, например, используя плагин Code Snippets

5. Итак, устанавливаем плагин Code snippets.
6. Создаем сниппет CSS и вставляем в него такой код:

.switch_block {
    display: flex;
}
.switch_items {
    padding-left: 26px;
}
.switch_item {
    margin-top: 10px;
    cursor: pointer;
    padding: 10px 20px 10px 20px;
    border-radius: 4px;
    transition: .3s all;
}
.item_red {
    background: red;
}
.item_yellow {
    background: yellow;
    color: grey;
}
.switch_item_active {
    border: solid 2px #fff;
}
.swt-show {
    display: block;
}
.swt-hide {
    display: none;
}
.swt-fade {
    animation-name: fade;
    animation-duration: 1.5s;
}
@keyframes fade {
    from {
        opacity: 0.1;
    }
    to {
        opacity: 1;
    }
}

7. Далее создаем сниппет JavaScript и помещаем в него следующий код

window.addEventListener('DOMContentLoaded', () => {
    const buttons = document.querySelectorAll('.switch_item'),
          switchContent = document.querySelectorAll('.switch_content'),
          switchParent = document.querySelector('.switch_items');

    function hideTabContent() {
        switchContent.forEach(item => {
            item.classList.add('swt-hide');
            item.classList.remove('swt-show', 'swt-fade');
        });
		buttons.forEach(item => {
            item.classList.add('switch_item_active');
        });
    }

    function showTabContent(i = 0) {
        switchContent[i].classList.add('swt-show', 'swt-fade');
        switchContent[i].classList.remove('swt-hide');
		buttons[i].classList.remove('switch_item_active');
    }

    hideTabContent();
    showTabContent();

    switchParent.addEventListener('click', (event) => {
        const target = event.target;

        if (target && target.classList.contains('switch_item')) {
            buttons.forEach((item, i) => {
                if (target == item) {
                    hideTabContent();
                    showTabContent(i);
                }
            });
        }
    });

});

На этом, блок с картинкой, которая изменяет свой цвет, закончен. Всем побед и вдохновения!