Affiliate Disclosure: Some links on this site are affiliate links, meaning I may earn a commission if you make a purchase through them—at no extra cost to you.

Get Piotnet

How To Add A Comparison Image Slider To WordPress

December 16, 2020

Elementor, Piotnet, WordPress

Want to showcase before-and-after transformations or product comparisons on your WordPress site? This guide walks you through adding a comparison image slider, enhancing user engagement and demonstrating value. You’ll have one live on your site in about five minutes.

TL;DR

Comparison image sliders ("before-after" sliders) visually display differences between two images.

Plugins are the easiest way to add these to WordPress.

This article focuses on the standalone Piotnet Addons plugin.

Installation involves uploading and activating the plugin, then using a shortcode.

Customize the slider to match your website's style.

Optimize images for fast loading.

Comparison image sliders, also known as “before-after” sliders, provide a visually engaging way to display two images side-by-side. Users can slide a divider to reveal more or less of each image, making them perfect for showing transformations.

Why Use a Comparison Image Slider

These sliders are ideal for showcasing improvements, changes, or differences. They are much more engaging than static images.

Common use cases include: photo editing (before/after), product variations, home renovations, and weight loss transformations. They offer a clear and interactive way to present visual comparisons.

Choosing a Plugin: Piotnet Addons

This guide focuses on the standalone Piotnet Addons plugin, which offers a robust before-after image comparison feature along with many other useful tools. While PAFE Piotnet is excellent for Elementor users, the standalone plugin provides broader compatibility.

Prerequisites

  • WordPress (self-hosted): This guide assumes you’re using a self-hosted WordPress installation (wordpress.org), not wordpress.com.
  • Piotnet Addons: You’ll need to purchase, download, and install the Piotnet Addons plugin.

Installing and Activating Piotnet Addons

First install the Piotnet Addons plugin. Since this is a premium plugin, you’ll need to upload the .zip file you received after purchase.

Go to “Plugins” > “Add New” in your WordPress dashboard, click “Upload Plugin,” select the .zip file, and click “Install Now.” Once installed, activate the plugin.

Adding the Slider to Your Page/Post

Piotnet Addons primarily uses shortcodes to add its features to your pages and posts. After installing and activating the plugin, create a new post or page or edit an existing one.

Add a “Shortcode” block to your page/post where you would like the slider to appear. Use the correct shortcode supplied by Piotnet Addons documentation.

The Basic Piotnet Before/After Shortcode

The general structure of the shortcode will be similar to this (consult the Piotnet Addons documentation for the *exact* shortcode and parameters):

[piotnet_before_after before_image="IMAGE_URL_1" after_image="IMAGE_URL_2"]
  • Replace `IMAGE_URL_1` with the URL of your “before” image.
  • Replace `IMAGE_URL_2` with the URL of your “after” image.
  • You can get image URLs from your WordPress Media Library.

Getting Image URLs

To get the URL of an image, go to your Media Library, click on the image, and copy the “File URL” from the right-hand side.

Customizing the Slider

The Piotnet Addons before/after shortcode supports several parameters for customization. These may include:

  • `orientation`: Set to “horizontal” (default) or “vertical”.
  • `before_label`: Text for the “before” label (defaults to “Before”).
  • `after_label`: Text for the “after” label (defaults to “After”).
  • `offset`: The initial position of the slider (e.g., “0.5” for the middle).
  • `move_slider_on_hover`: Set to “true” or “false” (whether the slider moves with the mouse).
  • `move_with_handle_only`: Set to ‘true’ or ‘false’.
  • `click_to_move`: Set to ‘true’ or ‘false’.

Example: Customizing the Shortcode

[piotnet_before_after before_image="YOUR_BEFORE_IMAGE_URL" after_image="YOUR_AFTER_IMAGE_URL" orientation="vertical" before_label="Original" after_label="Edited" offset="0.7" move_with_handle_only="true"]

Image Optimization

  • Before uploading, optimize your images for web use.
  • Use a tool like TinyPNG or ImageOptim to compress images.
  • This helps to maintain fast page loading speeds.

Alternative Plugins

If Piotnet Addons doesn’t meet your needs, other plugins offer similar features. Twenty20 Image Before-After is popular.

Before After Image Slider is another option to consider. These are generally simpler but may lack some of Piotnet’s advanced features.

Troubleshooting

If the slider isn’t displaying, double-check that you’ve entered the image URLs correctly. Make sure both images are the same dimensions.

If you’re using a caching plugin, clear your cache. Check the plugin’s documentation or support forum for troubleshooting.

Conclusion

Adding a comparison image slider to your WordPress site using the Piotnet Addons plugin is a straightforward process. By using the provided shortcode and its customization options, you can effectively create engaging visual comparisons.

Remember to optimize your images for the best user experience and consult the plugin documentation. By following these steps, you can add visual interest to your site.

Latest Posts