Have you ever been on a website and hovered over an image and it flips over to show information? These are called flip boxes. They are essentially animated containers that have two sides. When a user interacts with the container, it flips over to reveal the content on the other side. This can be a great way to showcase information in a more interactive and engaging manner. Flip boxes can be used for a variety of purposes, from displaying product features to showing off team members. Elementor Pro’s flip boxes are a great tool for adding interactive content to your website. This widget allows you to create eye-catching flip boxes that can display text, images, buttons, and even videos. In this blog, we will explore flip boxes and their common uses, as well as show you how you can create your own.
How to Create a Flip Box
As mentioned, flip boxes are a great way to showcase information in an engaging way. Any website owner or designer can utilize flip boxes to their advantage. For instance, flip boxes are great when it comes to presenting your company’s products or services. On one side of the box you can display the product itself, and on the backside you can have it list the product’s price, features, etc. Another great use of flip boxes is displayed on the management team page of HubSpot’s website, a software powerhouse. The front displays an image of the employee, with their name and position at the bottom. Once hovered on, the image fades and two buttons are displayed: one that pulls the reader to their biography and another that links to their social media page. Flip boxes have a range of abilities and are a great tool to encourage engagement and increase time spent on your site. Now, let’s jump into how to create your own flip box.
- Open the page in Elementor that you’d like to add a flip box to.
- In Elementor’s page builder, search “Flip Box” and drag and drop to your desired area.
- Now that the flip box is selected, you can start editing the front of your widget. You can adjust your title and description text here, change the background color, as well as include an icon or image.
- Once you are satisfied with how the front of your flip box looks, it’s time to move onto the back. Select “Back” and you will see just about the same layout as the previous step.
- Add the title and description text you’d like displayed on the back of your flip box.
- If interested, you can also add a button by simply adding text into the “Button Text” box. As always, you have the option to adjust where the link opens.
- Once you are done with editing the front and back of your flip box, you can now jump into the “Settings” section below “Back”.
- The “Settings” for this widget allows you to adjust the flip box’s height and border radius, as well as change the flip effect and direction. To really stand out you even have the option to turn on “3D Depth”.
- Once again, update or publish any changes to save your edits.
Styling Elementor’s Flip Box
One of the most enjoyable parts about using Elementor’s flip box is the content creation side, the steps you just ran through. However, even after you add in all the content, there’s still plenty left to do in order to get the flip box to your liking. Let’s jump into the Style tab for Elementor’s flip box and run through the styling options.
- Front
- Padding: Add padding to the front content area. Padding can also be used to shift your content around the flip box.
- Alignment: Choose the alignment of your content to be to the left, right or center of the flip box.
- Vertical Position: Align your content to the bottom, middle or top of the flip box.
- Border Type: Set a border for the entire flip box.
- Icon:
- Spacing: Control the spacing between the icon and title.
- Primary Color: Adjust the color of your icon.
- Icon Size: Adjust the size of your icon.
- Icon Rotate: This allows you to rotate the icon to your liking if needed.
- Title:
- Spacing: Control the spacing between your title and description text.
- Text Color: Change the color of your title text.
- Typography: Set the typography settings for your title. Here is where you have full range of customization options including text size, font, decoration, spacing, etc.
- Text Stroke: Add a stroke to your title text. This is good for adding a border around your title.
- Description:
- Text Color: Adjust the color of your description text.
- Typography: Set the typography settings for your description text. Here is where you have full range of customization options including text size, font, decoration, spacing, etc.
Once you are finished with editing the front of your flip box, you should see a “Back” tab below the description’s typography. This is where you will make all the edits to the back of your flip box. It holds just about the same customization options as the front of the flip box. However, if chosen, you will also have control of adjusting the styling of the button as well.
Conclusion
Elementor flip boxes are an incredibly useful tool for creating engaging and interactive content on your website. By using this widget, you can present complex information in an organized and appealing manner, creating an interactive experience for all visitors. Additionally, Elementor makes it simple to create flip boxes with their drag-and-drop interface and easy-to-navigate editor. If you’re interested in learning more about Elementor and it’s widgets, be sure to check out our other tutorials! We’re confident that with a little practice and trial-and-error, you’ll be able to create stunning and content in no time.
