Introduction
I recently had the opportunity to test out the Before After – Elementor Addon, a plugin that allows you to compare two different versions of images in a before-and-after style. As a fan of Elementor, I was excited to see how this addon would work and what features it would bring to the table.
Plugin Features
Before I dive into my review, let’s take a look at the features that Before After – Elementor Addon offers. According to the description, the plugin boasts the following features:
- Easy installation: The plugin is easy to install and comes with step-by-step instructions to help you get set up.
- Easy integration: You can customize the styles of the before-and-after widget without any coding knowledge, and the plugin supports multiple instances on a single page.
- Clean code: The plugin’s code is semantic and developer-friendly, making it easy to customize and upgrade.
- Browser friendly: The plugin is fast and responsive, working on all modern browsers and devices.
Review
Overall, I was impressed with the Before After – Elementor Addon. Installation was a breeze, and the step-by-step instructions made it easy for me to get started. The before-and-after widget is easy to customize, and the lack of coding required is a big plus for those who aren’t comfortable with code.
One of the standout features of the plugin is its ease of use. I was able to create a before-and-after comparison in just a few clicks, and the result looked great. The plugin is also very responsive, and I had no issues with it working on different browsers or devices.
I was also pleased with the clean code that the plugin uses. This makes it easy to customize and upgrade, which is a big plus for developers and non-developers alike.
The only downside I found was the limited documentation available. While the instructions are clear, there’s not a lot of additional information available if you get stuck or have questions. This could be a problem for those who are new to using plugins or need more help to get started.
Conclusion
Overall, I would highly recommend the Before After – Elementor Addon to anyone who wants to add before-and-after comparisons to their Elementor pages. The plugin is easy to install, easy to use, and works well on all modern browsers and devices. The only potential drawback is the limited documentation, but I’m sure that this will be improved over time.
Score: 4.5 out of 5 stars
Recommendation: I recommend this plugin to anyone who uses Elementor and wants to add a before-and-after comparison to their pages. The plugin is easy to use and offers a lot of customization options, making it a great choice for bloggers, marketers, and anyone who wants to showcase changes over time.
User Reviews
Be the first to review “Before After – Elementor Addon”
Introduction to Before/After - Elementor Addon
The Before/After Addon is a powerful plugin designed specifically for Elementor page builders. It allows you to create a "before and after" effect on your webpage, showcasing a transformation or a difference between two states. This can be incredibly useful for various purposes, such as:
- Showing a before-and-after effect on a design or layout
- Highlighting changes made to a product or service
- Demonstrating the effectiveness of a transformation or makeover
- Creating a sense of anticipation or excitement for a new feature or update
In this tutorial, we will guide you through the step-by-step process of using the Before/After Addon with Elementor to create stunning before-and-after effects.
Step 1: Installing and Activating the Before/After Addon
To get started, you'll need to install and activate the Before/After Addon plugin. Follow these steps:
- Log in to your WordPress dashboard and navigate to the "Plugins" tab.
- Click on the "Add New" button and search for "Before/After Addon" in the plugin repository.
- Click on the "Install Now" button to install the plugin.
- Activate the plugin by clicking on the "Activate" button.
Step 2: Configuring the Before/After Addon
After activating the plugin, you'll need to configure it to work with Elementor. Follow these steps:
- Navigate to the "Elementor" tab in your WordPress dashboard and click on the "Settings" button.
- Scroll down to the "Addons" section and click on the "Before/After" button.
- Enable the "Before/After" addon by clicking on the toggle button.
- Configure the addon settings as desired (e.g., set the before and after image paths, animation speed, etc.).
Step 3: Creating a Before/After Section in Elementor
Now that the addon is configured, it's time to create a before-and-after section in Elementor. Follow these steps:
- Create a new page or edit an existing one using Elementor.
- Drag and drop a "Section" widget into your page.
- In the Section settings, click on the "Advanced" tab.
- In the "Advanced" tab, click on the "Before/After" button.
- Choose the before and after images or sections you want to display.
- Customize the animation settings, such as speed, duration, and easing.
Step 4: Customizing the Before/After Section
Once you've created the before-and-after section, you can customize it further to fit your needs. Follow these steps:
- Use the Elementor "Style" tab to customize the design of your before-and-after section.
- Adjust the layout, spacing, and alignment of the before and after elements.
- Add text, icons, or other widgets to enhance the section's content.
- Use the "Advanced" tab to add custom CSS or JavaScript code to further customize the section.
Step 5: Publishing Your Before/After Section
Finally, it's time to publish your before-and-after section and share it with the world! Follow these steps:
- Save your changes and click on the "Publish" button.
- View your before-and-after section on your website.
- Test the animation and make sure everything is working as expected.
Conclusion
That's it! With these simple steps, you've successfully installed and used the Before/After Addon with Elementor to create a stunning before-and-after effect. Remember to experiment with different settings and customizations to create unique and engaging experiences for your website visitors. Happy building!
Here is a complete settings example for the Before After - Elementor Addon:
Before/After Effect
before_after_effect: 'slide'Effect Duration
effect_duration: 1000Effect Easing
effect_easing: 'easeInOut'Before Image
before_image: {
src: 'https://example.com/before-image.jpg',
width: 800,
height: 600
}After Image
after_image: {
src: 'https://example.com/after-image.jpg',
width: 800,
height: 600
}Container Settings
container: {
padding: 20,
margin: 20,
background_color: '#f2f2f2'
}Responsive Settings
responsive: {
tablet: {
effect_duration: 500,
container_padding: 10
},
mobile: {
effect_duration: 300,
container_margin: 10
}
}Custom CSS
custom_css: '.before-after-addon { box-shadow: 0 0 10px rgba(0,0,0,0.2); }'Here are the features of the Before After - Elementor Addon:
- Easy Installation: Easy to install and setup with step-by-step instructions.
- Easy Integration: No coding required, just drag and drop to customize styles. Supports multiple instances per page.
- Clean Code: Semantic and developer-friendly code for easy custom upgrades.
- Browser Friendly: Fast and responsive to all modern browsers and devices.
These features can be found in the "Plugin Features" section of the content.
There are no reviews yet.