01
Heading Title Here
Grandma’s chair re-upholstered in a fabulous fabric, prints that bring back memories of childhood, wall-paper that gives that old piece of art new appreciation. Family stories and precious heirlooms are always incorporated in a Stock design.
02
Heading Title Here
Grandma’s chair re-upholstered in a fabulous fabric, prints that bring back memories of childhood, wall-paper that gives that old piece of art new appreciation. Family stories and precious heirlooms are always incorporated in a Stock design.
03
Heading Title Here
Grandma’s chair re-upholstered in a fabulous fabric, prints that bring back memories of childhood, wall-paper that gives that old piece of art new appreciation. Family stories and precious heirlooms are always incorporated in a Stock design.
Elementor Awesome Section Background Image Changes on Column Hover
No extra plug-ins required! Elementor Free compatible
1- insert the Html widget then copy and past our code there
2- insert a section with number of columns
3- add the "new-child" class name to columns
4- insert a spacer widget and add the "child-bg" as its class then choose your image to set it as the background for the spacer
5- insert the Text Editor widget for the number and add the "text-body" as class to it, then set your style like colors, padding,.. etc
6- insert the Heading widget and add the "text-body" and "head" as classes to it, then set your style like colors, padding,.. etc
7- insert the Text Editor and add the "text-body" and "content" ass classes, then set your style like colors, padding,..etc
Asked frequently in the group, how to change the section background image upon hovering a column in Elementor.
Working examples:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Add Your Heading Text Here
This is the heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
This is the heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
How to create a background switcher by Elementor Free
The Steps what will we do :
1- Copy our code and past it in your page
2- create A new Section
3- Add class ‘parent’ to the Scetion
4- Set some Styles for the section like the height, width, and the Column position to stretch.
5- Add class ‘f-col’ to the column.
6- Add a spacer element inside the column.
7- Add a class ‘f-bg’ to the spacer.
7- Choose an image to the spacer as a background.
8-Add the content which you want and add the ‘f-content’ class to it.
2- Step 2 Creating the Section
3- Step 3 to step 4
4- Step 5
5- Step 6 to step 8
6- Step 9
To begin with, create your toggle, accordion, or tabs element in a two column section
It can also be an inner section.
Important: Add a background image in the other column.
Then, give your accordion, toggle or tabs element the appropriate class name
Here are the needed class names for each elements:
Accordion: ‘ accordionswitcher ‘
Toggle: ‘ toggleswitcher ‘
Tabs: ‘ tabswitcher ‘
Now, add an HTML element on the same page
It doesn’t really matter where on the page the HTML Element is added…
Add the right code to the html element, and edit the links to your own background images
Important: the first background image link will be automatically linked with the first accordion, toggle or tabs item, and so on. Add a link for every item.
Code for accordion element:
<script>
‘use strict’;
document.addEventListener(‘DOMContentLoaded’, function () {
//Edit the background images links HERE
var links = [
‘https://element.how/wp-content/uploads/2019/08/phonesticky.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestick.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.jpg’
];
/* Don’t modivy the code below */
var switchers = document.querySelectorAll(‘.accordionswitcher .elementor-tab-title’);
var Column = document.querySelector(‘.accordionswitcher’).closest(‘.elementor-column’);
var rColumn;
function getRColumn(){
if(Column.nextElementSibling){
rColumn = Column.nextElementSibling.firstElementChild;
}
else if(Column.previousElementSibling){
rColumn = Column.previousElementSibling.firstElementChild;
}
};
getRColumn();
// get parent element background styles
var backgroundPosition = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-position’);
var backgroundRepeat = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-repeat’);
var backgroundSize = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-size’);
// add block with background
links.map(function(link, index) {
rColumn.insertAdjacentElement(‘beforeend’, createElement(link));
})
var _loope = function _loope(i) {
switchers[i].addEventListener(‘click’, function () {
resetBackground()
var element = document.querySelectorAll(‘.accordionswitcher-background’)[i];
element.classList.add(‘active’);
});
}
function resetBackground() {
var blocks = document.querySelectorAll(‘.accordionswitcher-background’);
for (i = 0; i < blocks.length; i++){
blocks[i].classList.remove(‘active’);
}
}
function createElement(link, className) {
var obj = document.createElement(‘div’);
obj.className = “accordionswitcher-background ” + className || ”;
obj.style.backgroundSize = backgroundSize;
obj.style.backgroundPosition = backgroundPosition;
obj.style.backgroundRepeat = backgroundRepeat;
obj.style.backgroundImage = ‘url(‘ + link + ‘)’;
return obj;
}
for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});
</script>
<style>
.accordionswitcher-background, .toggleswitcher-background, .tabswitcher-background{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.4s linear;
}
.accordionswitcher-background.active, .toggleswitcher-background.active, .tabswitcher-background.active{
opacity: 1;
}
</style>
Code for toggle element:
<script>
‘use strict’;
document.addEventListener(‘DOMContentLoaded’, function () {
//Edit the background images links HERE
var links = [
‘https://element.how/wp-content/uploads/2019/08/phonesticky.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestick.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.jpg’
];
var switchers = document.querySelectorAll(‘.toggleswitcher .elementor-tab-title’);
var Column = document.querySelector(‘.toggleswitcher’).closest(‘.elementor-column’);
var rColumn;
function getRColumn(){
if(Column.nextElementSibling){
rColumn = Column.nextElementSibling.firstElementChild;
}
else if(Column.previousElementSibling){
rColumn = Column.previousElementSibling.firstElementChild;
}
};
getRColumn();
// get parent element background styles
var backgroundPosition = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-position’);
var backgroundRepeat = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-repeat’);
var backgroundSize = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-size’);
// add block with background
links.map(function(link, index) {
rColumn.insertAdjacentElement(‘beforeend’, createElement(link));
})
var _loope = function _loope(i) {
switchers[i].addEventListener(‘click’, function () {
resetBackground()
var element = document.querySelectorAll(‘.toggleswitcher-background’)[i];
element.classList.add(‘active’);
});
}
function resetBackground() {
var blocks = document.querySelectorAll(‘.toggleswitcher-background’);
for (i = 0; i < blocks.length; i++){
blocks[i].classList.remove(‘active’);
}
}
function createElement(link, className) {
var obj = document.createElement(‘div’);
obj.className = “toggleswitcher-background ” + className || ”;
obj.style.backgroundSize = backgroundSize;
obj.style.backgroundPosition = backgroundPosition;
obj.style.backgroundRepeat = backgroundRepeat;
obj.style.backgroundImage = ‘url(‘ + link + ‘)’;
return obj;
}
for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});
</script>
<style>
.accordionswitcher-background, .toggleswitcher-background, .tabswitcher-background{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.4s linear;
}
.accordionswitcher-background.active, .toggleswitcher-background.active, .tabswitcher-background.active{
opacity: 1;
}
</style>
Code for tabs element:
Important: for the tab element, you need two sets of the same links to the background images, for this to also work on mobile… so if you have 3 tabs, you need six links, in this way: link_1_url, link_2_url, link_3_url, link_1_url, link_2_url, link_3_url .
<script>
‘use strict’;
document.addEventListener(‘DOMContentLoaded’, function () {
//Edit the background images links HERE
var links = [
‘https://element.how/wp-content/uploads/2019/08/phonesticky.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestick.png’,
‘https://element.how/wp-content/uploads/2019/08/phonesticky.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestickys.png’,
‘https://element.how/wp-content/uploads/2019/08/phonestick.png’
];
var switchers = document.querySelectorAll(‘.tabswitcher .elementor-tab-title’);
var Column = document.querySelector(‘.tabswitcher’).closest(‘.elementor-column’);
var rColumn;
function getRColumn(){
if(Column.nextElementSibling){
rColumn = Column.nextElementSibling.firstElementChild;
}
else if(Column.previousElementSibling){
rColumn = Column.previousElementSibling.firstElementChild;
}
};
getRColumn();
// get parent element background styles
var backgroundPosition = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-position’);
var backgroundRepeat = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-repeat’);
var backgroundSize = window.getComputedStyle(rColumn, null).getPropertyValue(‘background-size’);
// add block with background
links.map(function(link, index) {
rColumn.insertAdjacentElement(‘beforeend’, createElement(link));
})
var _loope = function _loope(i) {
switchers[i].addEventListener(‘click’, function () {
resetBackground()
var element = document.querySelectorAll(‘.tabswitcher-background’)[i];
element.classList.add(‘active’);
});
}
function resetBackground() {
var blocks = document.querySelectorAll(‘.tabswitcher-background’);
for (i = 0; i < blocks.length; i++){
blocks[i].classList.remove(‘active’);
}
}
function createElement(link, className) {
var obj = document.createElement(‘div’);
obj.className = “tabswitcher-background ” + className || ”;
obj.style.backgroundSize = backgroundSize;
obj.style.backgroundPosition = backgroundPosition;
obj.style.backgroundRepeat = backgroundRepeat;
obj.style.backgroundImage = ‘url(‘ + link + ‘)’;
return obj;
}
for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});
</script>
<style>
.accordionswitcher-background, .toggleswitcher-background, .tabswitcher-background{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.4s linear;
}
.accordionswitcher-background.active, .toggleswitcher-background.active, .tabswitcher-background.active{
opacity: 1;
}
</style>