Elementor

How to change the background color on a fixed header?

1. Open your Elementor header.
2. Set it to sticky.
3. In Effects offset enter a value, eg. 100.
4. Click Advanced > Custom CSS and add this code.

selector.elementor-sticky--effects {
    background-color: red;
}

How to remove image captions from lightbox

.elementor-slideshow__footer {
    display: none !important;
}

How to add counter in swiper

<script>
jQuery( document ).ready(function(){

var swiper_container = document.querySelector('.swiper-container');
if(swiper_container){
 
var swiper = swiper_container.swiper;
swiper.on('transitionEnd', function() {
change_counter()
});
swiper.on('slideChange', function() {
change_counter()
});

function change_counter(){
var index =  swiper.realIndex + 1;
var slides_length =  swiper.slides.length
jQuery(".swiper-mobile-counter .elementor-widget-container").html(index + " / " + slides_length);
}
}
 
});
</script>

How to span 2 columns on a flex grid

Click the element in the grid you want to span and add this is Custom CSS:

selector {
grid-column: auto / span 2;
}

How to offset on item on a flex grid by one column

Click the element in the grid you want to span and add this is Custom CSS:

selector {
grid-column: 2/3;
}

How to colorize form input placeholder

input::placeholder, textarea::placeholder {
color: #F5EDE3 !important;
opacity: 1 !important;
}

How to move a carousel by using custom buttons

<script>
jQuery(document).ready(function($) {
function getSwiperInstance2() {
var swiperTarget2 = $('#process-carousel .swiper');
return swiperTarget2.data('swiper');
}
$('#prev-process').on('click', function() {
getSwiperInstance2().slidePrev(500, true);
});
$('#next-process').on('click', function() {
getSwiperInstance2().slideNext(500, true);
});
});
</script>

How to make an image carousel scroll continuously

1. In additional options set autoplay speed 0.
2. Set also animation speed 5000.
3. In advanced CSS add this code:

selector .swiper-wrapper {
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}

How to make a grid with and accordion on the left and an image that changes on the right

Make a grid and use a slider on the right column.

The classes you need to add are:

toggle-txt-imgs
toggle-txt
toggle-imgs

And here is the script:

<script>
jQuery(document).ready(function(){

  var toggle_tab = '.toggle-txt .elementor-tab-title';

jQuery(document).on('click', toggle_tab, function(){ 
//debugger;
var container = jQuery(this).closest(".toggle-txt-imgs");
var accordion_item = jQuery(this).closest(".elementor-accordion-item"); 
var accordion_items = container.find(".elementor-accordion-item"); 
var tab_num = accordion_items.index(accordion_item);
var toggle_imgs = container.find(".toggle-imgs .swiper");
var toggle_imgs_swiperInstance = toggle_imgs.data( 'swiper' );
toggle_imgs_swiperInstance.slideTo( tab_num );
})
    
});


</script>

Fix: Sticky Header Overlaps Anchor in Elementor

1. Use only Elementor anchor widgets (and not IDs on elements)
2. Add the CSS code below.

body:not(.elementor-editor-active) .elementor-widget-menu-anchor {
position: relative;
z-index: -1;
}
body:not(.elementor-editor-active) .elementor-widget-menu-anchor .elementor-menu-anchor:before {
content: "";
display: block;
height: 100px; 
margin: -100px 0 0; 
visibility: hidden;
pointer-events: none;
}

How to remove focus from buttons in elementor

selector a.elementor-item:focus {
outline: none;
}

And for images (eg. logo):

selector a:focus { 
outline: none;
}