Wiloke Flipbox for Elementor is a plugin designed to add a stylish flipbox widget to your WordPress site using the Elementor page builder. Flipboxes are a visually engaging way to display content by flipping between two sides (or states) when hovered over. This plugin provides an easy and customizable solution to add flipbox-style elements to your website, which can be used to showcase services, features, testimonials, product details, and more.
Key Features of Wiloke Flipbox for Elementor:
- Seamless Elementor Integration:
- The plugin is designed to integrate directly with Elementor, allowing you to add and customize flipboxes on your website without the need for any coding. Simply drag and drop the widget into your design.
- Customizable Flipbox Content:
- You can define the content of both sides of the flipbox. For example:
- Front Side: Display a heading, image, or icon, summarizing a service or feature.
- Back Side: Provide more details, a call-to-action (CTA), or other information.
- The content on both sides of the flipbox is fully customizable, so you can design it according to your needs.
- You can define the content of both sides of the flipbox. For example:
- Flip Effect:
- The core feature of a flipbox is the flip effect when hovered over. This is a dynamic interaction that grabs the user's attention. The flip effect can be smooth and visually appealing, providing a delightful user experience.
- Multiple Styling Options:
- Wiloke Flipbox for Elementor offers various design options to control the appearance of the flipbox, including:
- Customizable background colors and hover effects.
- Typography control for the text on both the front and back sides.
- Adjustable border-radius, box shadows, and padding to match your site’s design.
- You can even control the flip direction, such as flipping horizontally or vertically.
- Wiloke Flipbox for Elementor offers various design options to control the appearance of the flipbox, including:
- Icons and Images Support:
- You can add icons or images to both the front and back of the flipbox. This is particularly useful for representing services, features, or product categories visually.
- Hover Animation:
- The plugin offers hover animation effects, which can make the flipbox interactively flip, scale, or perform other visual animations when users hover over the element.
- Responsive Design:
- Flipboxes created with this plugin are responsive, meaning they automatically adjust to work well on all screen sizes, from desktops to mobile devices. This ensures a seamless experience for users on all devices.
- CTA (Call-to-Action) Options:
- You can add call-to-action buttons on either side of the flipbox. This is especially useful for directing users to other pages, product details, or contact forms, increasing conversions.
- Multiple Flipbox Layouts:
- You can create multiple flipbox styles and layouts, with options for text only, image + text, or icon + text combinations. Each flipbox can be customized individually to meet the needs of your site.
- Customizable Icons:
- If you use icons on the flipbox, you can choose from Font Awesome icons or upload custom icons that match your site’s design.
Benefits of Using Wiloke Flipbox for Elementor:
- Engaging User Experience: The interactive flip effect is visually appealing and engages users, making them more likely to interact with the content.
- Enhances Content Presentation: Flipboxes provide a creative way to showcase content without overwhelming the user with too much information at once. The user can hover to reveal additional details, keeping the layout clean and organized.
- Easy to Use: The plugin's integration with Elementor makes it incredibly easy to add and customize flipboxes without writing any code. Even users without technical knowledge can create stunning designs.
- Perfect for Showcasing Services or Features: Flipboxes are ideal for showcasing various services, features, or product details. You can show an image or an icon on the front side and provide a detailed description or call to action on the back.
- Increased Interactivity: The hover effects increase the interactivity of the page, which can lead to better user engagement, especially on landing pages, service pages, or product pages.
- Fully Customizable: From colors and fonts to hover animations and layouts, the plugin offers extensive customization options to ensure the flipbox blends well with your site's design.
How to Use Wiloke Flipbox for Elementor:
1. Install and Activate the Plugin:
- Go to the WordPress admin panel and navigate to Plugins > Add New.
- Search for Wiloke Flipbox for Elementor, install and activate the plugin.
2. Adding the Flipbox to a Page:
- After activation, open the page you want to edit with Elementor.
- In the Elementor editor, search for the Wiloke Flipbox widget in the widgets panel.
- Drag and drop the Flipbox widget into the section or column where you want it to appear.
3. Configure the Content:
- In the widget settings, you can input the content for the front side and back side of the flipbox.
- Front Side: Add the title, description, icon, or image.
- Back Side: Add the details, CTA button, or any other content you want to display after the flip.
4. Customize the Design:
- Use the Elementor settings to customize the appearance of the flipbox:
- Set the background color, typography, and border radius.
- Choose the flip direction (horizontal or vertical).
- Adjust the hover animation and other style settings to match your theme.
5. Adjust the Layout:
- You can configure whether the flipbox should show a single box or a grid of flipboxes, depending on how you want to display the content.
6. Preview and Publish:
- Once you are satisfied with the look of the flipbox, preview the page to ensure it works as expected, then click Publish to make the changes live.
Example Use Cases for Wiloke Flipbox for Elementor:
- Service Pages:
- On a service page, use flipboxes to showcase different services. The front side can display a service icon or image, while the back side can provide a detailed description and a CTA button for users to learn more.
- Product Features:
- For e-commerce websites, flipboxes can highlight key product features. Each flipbox can represent a feature, with an image on the front and a detailed explanation on the back.
- Team Members:
- Use flipboxes to display your team members. The front side can show their name, photo, and role, while the back side can provide a brief bio and contact details.
- Pricing Plans:
- Create interactive pricing tables with flipboxes. The front side can show basic plan details (like price or package name), while the back side can provide more detailed information or the option to buy.
- Customer Testimonials:
- Display customer testimonials in flipboxes. The front side can show the customer's name and image, while the back side can feature their full testimonial or review.