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

/* 
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

/* 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

/* ---------- 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

<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;

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

/* 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

/* be sure to copy-paste to the Image Widget Custom CSS panel */
selector, 
selector .elementor-widget-container, 
selector .elementor-image, 
selector .elementor-image > a {
    height: 100%;
}
selector .elementor-image img {
  object-fit: cover;
  object-position: 50% 50%;

oooh-boi

<?php
/*
* Exclude & Include in group control
*/
$this->add_group_control(
	Group_Control_Background::get_type(),
	[
		'name' => 'item_background',
		'label' => __( 'Background', 'happy-addons-pro' ),
		'types' => [ 'classic', 'gradient' ],

oooh-boi

<script>
;( function() {

  // wait until gsap & ScrollTrigger available
  let chck_if_gsap_loaded = setInterval( function() {
    
    if( window.gsap && window.ScrollTrigger ) {
      
      // register scrolTrigger
      gsap.registerPlugin( ScrollTrigger );