We are sure you have already seen many examples of before/after images. Don’t know about you, but the first thing we have in mind when we see the “before and after” phrase is fitness training program where people show their bodies before and after a workout program.
If you think about it, most websites use a simple approach to showcase the differences – they take both images and place them one next to another or even one above the other. If you want the same result, you wouldn’t be reading this article because you already know how to do that.
What if we told you there is a visually stunning way to solve this before/after problem and it just in reach of your hand? Well, there is and after a setup you’ll praise the developers because the final result is really, really cool.
Twenty Twenty is the name of this awesome plugin which you can download for free in WordPress plugin repository.
OK, now when you’re hooked on this little plugin, let’s see how to create this stunning effect. Although it is relatively easy to recreate the demo effect, you will still need to know your way around basic HTML. Let’s go:
- Create new post or open the exiting one
- Insert two images into the post. If you are working in a Visual Editor, you should see the image one above the other one. If you are working in a Text Editor you should see a code similar to this:
- Enter [twentytwenty] tag before the first image
- After the second one enter [/twentytwenty] tag
- Make sure your pictures are the same size to achieve the best results
- Preview or publish your post and enjoy your visually stunning before and after pictures
<a href=”image1.jpg”><img src=”http://www.loactionoftheimage.com” width=”700″ height=”200″ /></a>
<a href=”image2.jpg”><img src=”http://www.loactionoftheimage.com” width=”700″ height=”200″ /></a>
You should end up with something like this in your Text Editor:
<a href=”image1.jpg”><img src=”http://www.loactionoftheimage.com/image1.jpg” width=”700″ height=”200″ /></a>
<a href=”image2.jpg”><img src=”http://www.loactionoftheimage.com/image2.jpg” width=”700″ height=”200″ /></a>