Tutorial graphic

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

Similar Posts

5 Comments

  1. 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. 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

  2. I want to use flipbox but I am not properly sure to use it. If the flip works correctly then I will use it.

Leave a Reply

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