V4 Elements Flip Box Estimated reading: 6 minutes 3 views A card with two sides. Show a short message on the front, and reveal more on the back when someone points at it. Great for team members, features and services. No code needed. WIDGET Flip Box EFFECTS 11 ready-made presets PLAN Free BEFORE YOU START Requirement ELEMENTOR V4 Atomic ANIMATION ADDONS Free Tip: Install and activate Animation Addons first. That is all you need. Note: In the screenshots, the orange boxes and numbers show you exactly where to click. STEP 1 Turn On the Widget Good news: the Flip Box is already on. If you ever need to turn it on again, it only takes a moment. In your WordPress Dashboard, go to Animation Addon > Widgets. Open the Elementor V4 (Atomic) tab. Find Flip Box under Interaction Widgets and switch it on. Click Save Settings. The Flip Box card in your dashboard (click to zoom) STEP 2 Add It to Your Page Open a page in the Elementor Editor and drop the Flip Box in. Click the + button at the top left to open the Elements panel. Look under AAE General for Flip Box. Drag it onto your page. The Flip Box in the Elements panel (click to zoom) Tip: Can not see it? Type Flip Box in the search box at the top of the panel. Note: A new Flip Box is a 300 x 200 card with a front and a back. STEP 3 Pick a Flip Effect How the card turns is set by a preset. Pick the one you like in one click. Click your Flip Box to select it. In the General tab, open Presets. Click Apply a preset. Click an effect: for example Flip Left, Flip Top or Fade In. The eleven presets (click to zoom) Note: The preview pictures in the list are grey boxes for now. That is normal. Pick the effect by its name. Tip: A preset also fills in some starter words, like Flip Left on the front and You found it on the back. You will change them in the next step. Flip Left, Flip Right, Flip Top, Flip Bottom The card turns around like a coin, in that direction. … Single Side Same flips, but only one side of the card is shown while it turns. Flip Left, Flip Right, Flip Top and Flip Bottom each have one. Fade In The back fades in over the front. Zoom In, Zoom Out The back zooms in or out over the front. STEP 4 Write the Front and the Back A Flip Box has two faces. Each face has a Heading and a Paragraph. You edit them like any other text. Open the Structure panel. It is the little layers icon at the top right. Open the Flip Box. You will see Front Face and Back Face. Open Front Face. Click the Heading, then type a short title. Then click the Paragraph and type a short text. Do the same for Back Face. The Front Face (1), its Heading and Paragraph (2) and the Back Face (3) (click to zoom) Tip: You can also drag other things into a face, like a button or an image. STEP 5 Style It Each face has its own look, so you can use different colors on the front and the back. Click Front Face or Back Face in the Structure panel. Open the Style tab. Change the background, the spacing or the border. Click the Heading or the Paragraph to change the font and the text color. Click Update to save your page. Tip: To make the whole card bigger, select the Flip Box itself and change its Size in the Style tab. RESULT Final Result Six Flip Boxes on a live page. Move your mouse over each one. Every GIF shows the card turning and then turning back. Flip Left The card turns to the left and shows the back. Move your mouse over the card to see the flip left effect Flip Right The card turns to the right. Move your mouse over the card to see the flip right effect Flip Top The card turns upward. Move your mouse over the card to see the flip top effect Flip Bottom The card turns downward. Move your mouse over the card to see the flip bottom effect Fade In The back fades in over the front. Move your mouse over the card to see the fade in effect Zoom In The back zooms in over the front. Move your mouse over the card to see the zoom in effect SETTINGS Options Presets Eleven flip effects. The effect is part of the preset. Front Face and Back Face The two sides. Each holds a Heading and a Paragraph by default. ID Optional CSS ID for the card. GOOD TO KNOW More Details Hover to flip The card flips when someone points at it with the mouse. Pick the effect first Apply a preset before you write your own words. Then check your words after you switch to another effect. Your own content Each face can hold more than text. Drop in a button or an image if you like. HELP Troubleshooting I do not see the Flip Box in the Elements panel Go to Animation Addon > Widgets > Elementor V4 (Atomic) and turn on Flip Box. Click Save Settings, then reload the editor. Look under AAE General, or use the search box. The card does not flip in the editor The flip works on your live page. Open the page and move your mouse over the card. I do not know how to change the flip direction Open Presets, click Apply a preset and choose another effect, like Flip Top or Flip Right. The preview pictures in the preset list are grey That is normal for now. Choose the effect by its name. My text is too big or too small Click the Heading or the Paragraph in the Structure panel, open the Style tab and set the size. You Did It Your page now has a card that flips. If you face any problem, please contact our support team. We are happy to help.
