Close

April 18, 2017

How to Create a Before & After Image Slider

Before & After - Feature Image - ProductiveMotherhood.life

There are a multitude of ways available to display before and after images for your viewers. You can connect them side-by-side. You could display one just before the other separately. My personal favorite is using the Twenty20 plugin for WordPress. The plugin works from the start without requiring any configuration. I don’t just like it because it’s easy though. I absolutely LOVE the way it displays the images! I’m going to walk you through setting up my own before and after image so you can really see how awesome it is! Let’s get started!

 

 

Install Twenty20 Plugin

  1. When you’re logged in to your WordPress dashboard, hover over the “Plugins” menu then click on “Add New” in the sub-menu that pops up.
  2. On the “Add Plugins” page, type “twenty20” in the search bar.
  3. Click “Install Now” on the option “Twenty20 Image Before-After”.
  4. Once installed, click on “Activate”. After activating, the page will redirect to the main “Plugins” page.

 

 

Create a Before & After Image

Now that the plugin has been installed and activated, you’ll see a new button in your post/page editor in WordPress.

  1. Begin by opening either a new post/page or an existing one.
  2. In the editor you now have an “Add Twenty20” button. Click on the button and the “Select Two Images for Twenty20 Slider” box will appear.

    Note: You need to make sure the pictures you’re planning to use are the same dimensions. If you need to resize them you can do so easily and free by going to PicMonkey. This is the site I use to edit all my images. There’s a paid option that’s definitely worth it if you typically edit a ton of pictures for your blog.

  3. You now need to begin by selecting your “before” image followed by selecting your “after” image. The order in which you choose the images is the order they will be displayed.
  4. Click the “Insert” button and the “Twenty20 Shortcode” box will appear.
  5. You can leave the options as default or set your own preferences. These can always be adjusted later. The option for “Direction” is asking whether you’d like the slider to move vertically or horizontally.
  6. Click the “Insert Shortcode” button and the HTML for the new slider will appear in your post or page.

Now you can see my awesome before and after images!

That’s it! You’re done! You now have an awesome before and after image slider on your post or page!

If you have the type of blog which requires plugins like this Twenty20 plugin, you’ll probably be interested in reading my post How to Add Tooltips to Your Blog .

Do you have any questions or comments? Let me know, I’d be happy to help!

 

 

Twenty20 - Pinnable Image 1 - ProductiveMotherhood.life

Leave a Reply

Enjoying my blog? Please spread the word :)

error: Content is protected!!