Magezon Image Before & After Plugin

Image Before & After Plugin gives your website stunning effects and grab more attention faster. Compare two images of featured products just in one viewport, show the differences between them, perfectly & beautifully.  

Image Before & After is a plugin of Magezon Page Builder extension. Please pre-install Magezon Page Builder. After that, install Image Before & After plugin and it will be integrated with existing Magezon Page Builder & All other Builder Extensions on your website. 

Feature Highlights

• Style Image Before After Freely 
• 2 Image Effects Supported 
• Support Any Image Type
• Label Style & Color
• Label Placement
• 6 Handle Styles
• Custom Handle Color
• Handle Position
• Handle Orientation
• Handle Movement Control
• CSS Animations Supported

Style Image Before After Freely

Unleash imagination to specify your hero images. Wow users at first sight with interesting designs and Image Before After effects. 

This way, they would love to stay longer at your site and even purchase more. No doubt!

2 Image Effects Supported

The first thing that impresses viewers is the image transition. Simply select between Slide or Fade. While Slide gives you a better comparison between 2 images,

Fade effect puts the After Image over the first one, with speed customization supported.

Any Image Type & Size

Image Before After plugin supports many image file extensions: jpg, png, jpeg, etc. Pick up your favorite images and decide the size the way you want. No limitation. 

Label Style & Color

Configure the Label Design for Before & After Images freely. Select colors for Label Text & Background that match your theme most.  

Label Placement

Place the Labels inside, outside, to the left or right, it totally depends on your choice.  

6 Handle Styles

Style the Handle to fit the images with 6 Handle Design Styles supported.

Custom Handle Color

Image Before After Plugin gives you the power to decorate the handle with colors. The palette is ready, select the color code for your handle and its background. Not all, easily set up the color opacity to enrich your designs.   

Handle Position 

Define the place where the handle first appears after page load. Just enter the exact percent of the image display. By default, it is set to be 50 (%) and appears in the middle of the images. 

Handle Orientation

Instead of sliding horizontally, you can configure the Handle settings to slide up and down or vice versa. 

Handle Movement Control

Let the viewers view your before & after images in different experiences. Set up your Handle Movement style by choosing from 3 default values: Drag & Click, Drag Only and Hover.

CSS Animations Supported

Tons of CSS Animations are there waiting for you to discover. Make your Image Before After dance the way you want.

Demo 

 To experience the extension first-hand, please follow the links below:

• Frontend 
• Backend

FAQs 

1. Installation Instructions?

To install this plugin, please refer to this document for detailed instructions. It will take you just a few minutes to install our plugin. 

2. Where can I find this plugin after installation?

After the plugin is installed, you’ll find a new element called Image Before & After in the element list. 

3. Is there any limit for image size to update?

No. Custom your images in any size and ratio then upload it into the Image Before After plugin. However, to save the site bandwidth, be sure you’ve compressed it to the tiniest version (But still keep the same quality). 

4. Does the plugin support other transition effects except for Slide?

The plugin supports 2 image transition effects including Slide and Fade. While Slide gives you a better comparison between 2 images, Fade effect puts the After Image over the first one, with speed customization supported. 

5. I am using Magezon Page Builder & Blue Form Builder, can I use the plugin for both of them?

Sure. Once you install the plugin, the Image Before & After plugin will appear as an element in both editors of 2 extensions as they use the same Core Builder. 

6.  How can I get support?

If you have any questions or need any support, feel free to contact us via the following ways. We will get back to you within 24 hours after you submit your support request.

• Submit contact form.
• Email us at support@magezon.com.
• Submit a ticket.
• Contact us through Skype: support@magezon.com.
• Contact us via live chat on our website: magezon.com.