Twenty20 Image Before-After


Twenty20 is the WordPress plugin of TwentyTwenty script that developed by Zurb team.

This sparked a few new ideas on how to do something similar for our own needs. It had to swipe between two images to show «before» and «after». Most of all, it had to be responsive.


  • Responsive and functional on all devices.
  • Doesn’t require images to work.
  • Easy and clean user interface
  • Add before-after on widgets.
  • Support popular page builders.
  • Support WP Image alt as image alt and title.

Support Page Builders

  • WP Bakery Visual Composer.
  • Elementor Page Builder.
  • UX Builder by UXThemes.

Quick Example

[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]

Shortcode Parameters

  • img1 – image id.
  • img1 – image id.
  • offset – 0.1 to 1.0.
  • directionhorizontal|vertical.
  • alignnone|right|left.
  • width – Support both px and %.
  • before – Text.
  • after – Text.
  • hover – true or false.

Video Demo


  • Add Twenty20 before-after image.
  • Select any two images fro Media libray.
  • Twenty20 Shortcode setting page.
  • Shortcod.
  • Twenty20 in action.
  • Multiple slider in different direction.
  • Twenty20 Widgest.
  • Widget in action.
  • WP Bakery Visual Composer settings.
  • Elementor element.
  • UX Builder element.


  1. Unzip the download package
  2. Upload twenty20 to the /wp-content/plugins/ directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress

Manual Plugin Installation

  1. Download Twenty20 Plugin to your desktop.
  2. If downloaded as a zip archive, extract the Plugin folder to your desktop.
  3. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
  4. Go to Plugins screen and find Twenty20 Plugin in the list.
  5. Click Activate Plugin to activate it.


How it works?

Twenty20 works by stacking two images on top of each other. As the slider moves across the image.

Quick Example

[twenty20 img1=»» img2=»» direction=»vertical» offset=»0.5″ align=»right» width=»60%» before=»Before» after=»After» hover=»true»]

Shortcode Parameters
  • img1 - image id.
  • img1 - image id.
  • offset - 0.1 to 1.0.
  • direction - horizontal|vertical.
  • align - none|right|left.
  • width - Support both px and %.
  • before - string text.
  • after - string text.
  • hover - true|false.
How to add before-after slider?

Check the demo Video demo.

How to add widget

Check the demo Video demo.

Can I use more than one slider in single post or page

Yes, Twenty20 plugin allow user to add unlimited before-after slider.


15 de febrero de 2020
This plugin is exactly what it says. It's a quick and easy way to set up a comparison slider for two images I had uploaded to my media library. Worked first try, and I'm super happy.
22 de enero de 2020
Grabbed the plug-in and it worked as expected. But was extremely impressed by the support! We are using it in a pretty specific way and couldn't use shortcode. We filled out of support request and had everything buttoned up within 2 hours. Hi highly recommend the product and the person behind it. 😉
8 de agosto de 2019
My client wanted before-and-after photos for their roofing business's website. This plugin is super easy to use and looks very good.
21 de julio de 2019
I installed this to use with Elementor, and it does exactly what I need! Pros: - Has some useful customization options, including: - Before/after text: write your own labels - Direction: horizontal or vertical - Offset: where the divider starts; 0.1 (almost all the way to the left) to 1.0 (all the way to the right); default is 0.5 (centered) - Mouseover: when turned on, the divider follows the cursor on mouseover; when off, you must click/tap and drag to move the divider; also affects when the overlay (including before/after labels) displays - Fast and responsive - Supports images of different dimensions (crops the larger image to fit) - Supports some page builders (including Elementor, which I'm using) Cons: - No live preview: Although it's fully editable in Elementor, annoyingly, it only shows shortcode in the page builder so you can't see what your changes are affecting until you save and load the page - No documentation (that I could find) for what the settings do - Lacks some basic customization options (e.g., text label position, size, text color, background color, and padding) - When mouseover is turned off, the before/after text labels never display when using a touchscreen (since mouseover requires the use of a mouse)
Leer todas las 36 reseñas

Colaboradores y desarrolladores

«Twenty20 Image Before-After» es un software de código abierto. Las siguientes personas han colaborado con este plugin.


Traduce «Twenty20 Image Before-After» a tu idioma.

¿Interesado en el desarrollo?

Revisa el código , echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios


  • Fix: Jetpack’s lazy load images issue


  • Fix: Widget mouse over.


  • Added: Integrated with WP Image alt.


  • Fixed cation overlay issue.


  • Fixed Before and After shortcode insert issue


  • Fixed loading issue


  • NEW: Add Elementor Page builder support.
  • NEW: Add UX Builder by UXThemes support.
  • Minor CSS fixes


  • NEW: ‘Move slider on mouse over’.


  • NEW: Image Before and After caption.
  • Fixed arrow shadow css.
  • Widget updated.


  • Fixed alignment bug


  • Fixed width issue


  • First Release