Ticket Support Hours: Monday-Friday 9am-5pm Eastern
Please note ticket response may take up to 24-hours.


Documentation: Before & After Image Comparison Element Add on

Table of Contents

  1. Software Requirements
  2. Recommended PHP Configuration Limits
  1. Installation
  2. Registration
  3. User Guide

i. Software Requirements

  • WordPress 4.6 or higher
  • PHP 5.3 or higher (5.6 recommended)
  • MySQL 5.6 or higher

ii. Recommended PHP Configurations Limits

  • max_execution_time 180
  • memory_limit 128M
  • post_max_size 32M
  • upload_max_filesize 32M

1. Installation

  1. Download the plugin from your CodeCanyon "Downloads" page
  2. Open WordPress, go to plugins, then "Add New"
  3. Click "Upload Plugin"
  4. Upload the plugin .ZIP downloaded from CodeCanyon, then click "Install Now"
  5. Activate the plugin.
  6. Go to Fusion Builder > Settings
  7. Make sure the "Before/After" element is checked. Click Save Settings.

The element will now be available to add to your pages!

2. Registration

To enable updates including new features and bug fixes, you’ll need to register the plugin. 

After the plugin is activated in the WordPress plugin list, a notification bar will appear near the top of the screen with registration instructions. Once that process is complete, plugin updates will be activated. 

If for whatever reason the notification bar does not show up, you can also register by clicking "Registration" underneath the plugin name. This registration link will only show up if the plugin is activated. 

You can check for updates by going to the WordPress plugin list, and clicking "Check for updates" below the plugin description. 

3. User Guide

This element is designed to be used with the Fusion Builder page builder interface. 

To add the Before/After element to your page: 

  1. Click the "+ Element" button, then "Before/After".
  2. Use the fields provided to upload your before/after images, and customize other settings as needed. Note there is an "Animation" tab where you can set an intro animation to draw attention to the element when it comes in to view.
  3. Click "Save" to apply the changes
  4. Update the page and view it to see the results!

Responsive behavior

Sizing note: the Before/After element is responsive, and will scale to fit the width of its container.