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

2 thoughts on “Elementor Pro – Adjust Flip Box Flip Speed”

  1. Avatar

    hey Sniffle Valve (would love to know how that name came to be!). I am using the flip box from Elementor Pro and don’t see a place to stick the buttonID to have it generate a form. Am I missing something? Any help is appreciated!

    Thanks for helping the WP community with your wisdom!

    Margaret D.

    1. Avatar

      Hi Margaret,
      The only thing I can think of is to have the form on a popup or another page and set the dynamic option for the button link to whichever you use. Popup and Page URL are available choices.
      Have a look on the About page of the Sniffle Valve site to read all about how, why and what Sniffle Valve 🙂
      You’re welcome and I enjoy helping out when ever I am able to.
      Cheers!
      Lyle

Leave a Comment

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

Scroll to Top