Twenty20 Image Before-After WordPress Plugin

[section label=”Info” padding=”80px”]

[gap]

[row v_align=”middle”]

[col span=”5″ span__sm=”12″]

[ux_text font_size=”1.8″]

Twenty20 Image Before-After WordPress Plugin

[/ux_text]
[gap height=”20px”]

[button text=”Demo” color=”success” size=”small” padding=”0px 40px 0px 40px” radius=”5″]

[button text=”Documentation” color=”success” size=”small” padding=”0px 40px 0px 40px” radius=”5″]

[gap height=”20px”]

[ux_text font_size=”1.1″]

Professional before & after image comparison slider for WordPress. Create engaging visual comparisons with an intuitive drag & drop interface.

[/ux_text]
[gap]

[button text=”Download Plugin” padding=”5px 40px 5px 40px” radius=”5″ link=”https://wordpress.org/plugins/twenty20/” target=”_blank”]

[/col]
[col span=”7″ span__sm=”12″ align=”center”]

[ux_image id=”43″ image_size=”original” width=”45″]

[/col]

[/row]

[/section]
[section label=”Stats” bg_color=”rgb(246, 248, 251)” padding=”0px”]

[gap]

[row]

[col span__sm=”6″]

[ux_html]

Rating:
★★★★☆ 4.0
Active Installations: 30,000+
Last Updated: Mar 02, 2025
WordPress Version: 5.9 or higher
Tested up to: 6.7.4

[/ux_html]

[/col]

[/row]

[/section]
[section label=”Perfector for” bg_color=”rgb(255,255,255)” padding=”60px” visibility=”hidden”]

[gap]

[row]

[col span__sm=”12″]

[scroll_to title=”Demo” bullet=”false”]

[ux_text font_size=”1.6″]

Perfect for:

[/ux_text]

[/col]

[/row]
[row]

[col span=”4″ span__sm=”12″ padding=”20px 20px 10px 20px” align=”center” bg_color=”#f6f8fb” bg_radius=”8″ border=”1px 1px 1px 1px” border_radius=”8″ border_color=”rgb(238, 238, 238)”]

Before imageAfter image

[gap height=”15px”]

[ux_text font_size=”1.1″]

Photography portfolios

[/ux_text]

[/col]
[col span=”4″ span__sm=”12″ padding=”20px 20px 10px 20px” align=”center” bg_color=”#f6f8fb” bg_radius=”8″ border=”1px 1px 1px 1px” border_radius=”8″ border_color=”rgb(238, 238, 238)”]

Before imageAfter image

[gap height=”15px”]

[ux_text font_size=”1.1″]

Real estate before/after

[/ux_text]

[/col]
[col span=”4″ span__sm=”12″ padding=”20px 20px 10px 20px” align=”center” bg_color=”#f6f8fb” bg_radius=”8″ border=”1px 1px 1px 1px” border_radius=”8″ border_color=”rgb(238, 238, 238)”]

Before imageAfter image

[gap height=”15px”]

[ux_text font_size=”1.1″]

Renovation projects

[/ux_text]

[/col]
[col span=”4″ span__sm=”12″ padding=”20px 20px 10px 20px” align=”center” bg_color=”#f6f8fb” bg_radius=”8″ border=”1px 1px 1px 1px” border_radius=”8″ border_color=”rgb(238, 238, 238)”]

Before imageAfter image

[gap height=”15px”]

[ux_text font_size=”1.1″]

Design makeovers

[/ux_text]

[/col]
[col span=”4″ span__sm=”12″ padding=”20px 20px 10px 20px” align=”center” bg_color=”#f6f8fb” bg_radius=”8″ border=”1px 1px 1px 1px” border_radius=”8″ border_color=”rgb(238, 238, 238)”]

Before imageAfter image

[gap height=”15px”]

[ux_text font_size=”1.1″]

Product comparisons

[/ux_text]

[/col]
[col span=”4″ span__sm=”12″ padding=”20px 20px 10px 20px” align=”center” bg_color=”#f6f8fb” bg_radius=”8″ border=”1px 1px 1px 1px” border_radius=”8″ border_color=”rgb(238, 238, 238)”]

Before imageAfter image

[gap height=”15px”]

[ux_text font_size=”1.1″]

Medical procedures

[/ux_text]

[/col]

[/row]

[/section]
[section label=”Video” bg_color=”rgb(255,255,255)” padding=”60px”]

[gap]

[row]

[col span__sm=”12″]

[ux_text font_size=”1.4″]

Step by Step Tutorial

[/ux_text]
[ux_text font_size=”1.6″]

Learn How It Works?

[/ux_text]

Easily Create Before & After Image Comparisons in WordPress!

[/col]
[col span__sm=”12″]

[ux_video url=”https://youtu.be/1cQ9rhL-t70?si=X6IWNVWlr8urlSfu”]

[/col]

[/row]

[/section]
[section label=”Page builder” bg_color=”rgb(255, 255, 255)” padding=”60px”]

[gap]

[row]

[col span__sm=”12″]

[ux_text font_size=”1.6″]

Page Builder Support

[/ux_text]

[/col]
[col span=”3″ span__sm=”12″ bg_color=”#f6f8fb” border=”1px 1px 1px 1px” border_radius=”8″ border_color=”rgb(170, 170, 170)”]

[ux_image id=”70″ image_size=”original”]

[/col]
[col span=”3″ span__sm=”12″ bg_color=”#f6f8fb” border=”1px 1px 1px 1px” border_radius=”8″ border_color=”rgb(170, 170, 170)”]

[ux_image id=”71″ image_size=”original”]

[/col]
[col span=”3″ span__sm=”12″ bg_color=”#f6f8fb” border=”1px 1px 1px 1px” border_radius=”8″ border_color=”rgb(170, 170, 170)”]

[ux_image id=”72″ image_size=”original”]

[/col]
[col span=”3″ span__sm=”12″ bg_color=”#f6f8fb” border=”1px 1px 1px 1px” border_radius=”8″ border_color=”rgb(170, 170, 170)”]

[ux_image id=”69″ image_size=”original”]

[/col]

[/row]

[/section]
[section bg_color=”#f6f8fb” padding=”60px”]

[row h_align=”center”]

[col span__sm=”12″]

[ux_text font_size=”1.6″]

Frequently Asked Questions

[/ux_text]

[/col]
[col span=”8″ span__sm=”12″ bg_color=”rgb(255, 255, 255)”]

[accordion auto_open=”true” class=”faq-list” faq_schema=”true”]

[accordion-item title=”How it works?”]

[ux_text font_size=”1.1″]

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

[/ux_text]

[/accordion-item]
[accordion-item title=”Quick Example”]

Twenty20 need two images.

[/accordion-item]
[accordion-item title=”Shortcode Parameters”]

[ux_text font_size=”1.1″]

  • img1 – image ID.
  • img2 – image ID.
  • offset – range from 0.1 to 1.0.
  • direction – horizontal|vertical.
  • align – none|right|left.
  • width – supports both px and %.
  • before – text for the “before” label.
  • after – text for the “after” label.
  • hover – true or false.

[/ux_text]

[/accordion-item]
[accordion-item title=”Can I use more than one slider in a single post or page?”]

[ux_text font_size=”1.1″]

Yes, the Twenty20 plugin allows users to add unlimited before-after sliders.

[/ux_text]

[/accordion-item]

[/accordion]

[/col]

[/row]

[/section]

SmartChat AI