Tutorial graphic

Elementor Pro – Adjust Flip Box Flip Speed

Get the latest from
Sniffle Valve

Sniffle Valve

Consider buying Sniffle Valve a coffee  

Book a one-on-one online training session

Note: To copy any code presented in these tutorials, hover over the code and select the Toggle RAW Code icon raw code icon

A question came up on the Elementor Facebook Group recently asking how to slow down the speed at which the Elementor Pro Flip Box widget “flips”.

It’s quite easy to do once you know which CSS to target. The default value is .6s, which is .6 seconds. The higher the number, the slower the “flip” and vice versa.  In the CSS below, the 3.6s value is the one to adjust.

Note, that this will affect all Flip Boxes. If you want to use this on just one, or have different values for some others, then give each one a CSS ID in the Advanced tab of the Flip Box widget. In the second example, I added the slow-flip CSS ID.

.elementor-flip-box__layer {
  transition: all .6s ease-in-out;
}
#slow-flip .elementor-flip-box__layer {
  transition: all .6s ease-in-out;
}

Leave a Comment

Your email address will not be published. Required fields are marked *