Elementor: Happy Addons Carousel Offset & Padding (Not Post Widget)

Customize Happy Addons ‘Carousel’ widget. You can add different links or lightbox for each slides. I use the same video lightbox for all slides in this example.

Worth to note that there is a bug with this widget: it shows all the slides vertically upon loading. To cover it, use motion effect for entrance (such as fade-in) or a preloader. The best use for this widget is outside the initial viewport. In that way, no effect nor preloader needed. Just like on this page.

					/* Remove selector to apply it to the whole page */
/* Overflow */
selector div.slick-list
{ overflow: visible }

/* Move the text content to the bottom */
selector .ha-slick-content {position: unset}

/* Image Border Radius */
selector .slick-slide img {border-radius: 5px;}

/* Disable Inactive Arrow */
selector .slick-disabled {opacity: .0}

This is how ‘carousel post’ widget by Happy Addons looks like without any custom CSS, only style adjustments.

Note: Remember to set the Z-index into ‘1’, otherwise it will float over the header on the frontend, even if you set the header z-index ‘999’, like this one below:

Custom CSS added on this one and it has lower Z-index than the header (not blank).

In some cases, you might want to use an alternatives for your “carousels” idea. Here’s one:

  • Video ·

YotuWP: Custom CSS

DESCRIPTION Go to Dashboard > Appearance > Customize and add this custom CSS. CODE DARK…