oooh-boi

/* EXAMPLE GRADIENTS */

/* To be used with Heading widget */
selector .elementor-heading-title {
     background-image: linear-gradient(to right top, #ec2551, #c52a6e, #943979, #633e71, #3d3a59);
     background-clip: text;
     -webkit-background-clip: text;
}

/* To be used with Text Editor widget */

oooh-boi

/* 
By oooh boi - Elementor Tips and Tricks
Sticky Hidden Footer in Elementor (PRO) - reveal page footer as you scroll
https://youtu.be/9uEq_hqX-9Q
---
The following CSS code should be added to Elementor Footer template, Custom CSS panel. 
It'll affect Header and main section of any page that actually uses that very Footer.
*/

.elementor-location-header {

oooh-boi

/* 
By oooh boi - Elementor Tips and Tricks
This will create "triangles" custom shape divider on the
right-hand side of the column (vertical), and then crete 
another one (horizontal) for mobile devices.
*/
@media (min-width: 768px) {
    selector:before {
        content: "";
        position: absolute;

oooh-boi

<script>
;( function() {

	document.addEventListener( 'DOMContentLoaded', my_stuff );
  
  function my_stuff() {
		
		let is_mobile = false;
  
    let hero = document.querySelector( '#hero' ); 

oooh-boi

/* This is full copy-paste for the Elementotr PRO's Custom Code. In case you use "Simple custom CSS and JS" plugin, 
you'll have to separate the CSS from JS, and exclude the STYLE and SCRIPT tags */

<style>
[data-hover-img] .img-floater {
	position: absolute; 
	opacity: 0;
	width: 400px;
	height: 300px;
	top: -310px; /* or... 150px to center it vertically */

oooh-boi

/* ---------- CSS 
 - should be "attached" to the master Section */

/* make 100% wide columns possible for Desktop devices in Elementor */
.custom-swiper .elementor-container .elementor-row {
    /*flex-wrap: wrap;*/
}
/* make all the colums-slides 100% wide and full screen tall */
.custom-swiper > .elementor-container > .elementor-row > .elementor-element.elementor-column {
    width: 100%;

oooh-boi

/* default example (how to move the Background Overlay element to the right hand side for 15%) */

selector .elementor-background-overlay {
    width: 115%;
}

@media (max-width: 767px) {
    selector .elementor-background-overlay {
        top: 30%;
        width: 100%;

oooh-boi

body:not(.elementor-editor-active) .ob-unfold .ob-content { overflow: hidden; height: 200px; }
body:not(.elementor-editor-active) .ob-unfold .ob-blanket { cursor: pointer; z-index: 100; }
/* If you plan to use variable initial heights... */
/*
body:not(.elementor-editor-active) .ob-unfold .ob-content.ob-height-300 { height: 300px; }
body:not(.elementor-editor-active) .ob-unfold .ob-content.ob-height-toggle { height: 0px; }
*/
/* don't forget to append these classes to your ob-content in Elementor !!! */

oooh-boi

/* MAGICAL CSS Rule */
selector .elementor-container .elementor-row {
     flex-wrap: wrap;
     /* uncomment for columns alignment */
     /* justify-content: center; */
}

/* Responsive Columns Alignment - Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	selector .elementor-container .elementor-row {

oooh-boi

<script>
"use strict";
OB_ready(OB_doWhenReady);

function OB_doWhenReady() {
    // localize everything
    var ooohBoi = window.ooohBoi || {};
    // local scope variables
    ooohBoi.prev_scroll_pos = window.scrollY || document.body.scrollTop;
    ooohBoi.cur_scroll_pos;