How to Add Before/After Comparisons

This guide shows you how to add before/after image comparisons to your WordPress website.

Before/after comparisons are useful for showing the results of your work - like home renovations, dental treatments, or garden makeovers. These interactive sliders let visitors drag to see the difference between two images.

Step 1: Install a Before/After Plugin

The easiest way to create these comparisons is with a WordPress plugin. You'll need to install one first.

1. Log into your WordPress admin dashboard
2. Click "Plugins" in the left menu, then "Add New"
3. Search for "Twenty20 Image Before-After" (this is a free, reliable plugin)
4. Click "Install Now" next to the plugin, then "Activate"

If you need help with plugin installation, check our guide on how to set up WordPress plugins.

Step 2: Upload Your Before and After Images

Before creating the comparison, you need both images uploaded to your website.

1. Go to "Media" > "Library" in your WordPress dashboard
2. Click "Add New" and upload your "before" image
3. Upload your "after" image
4. Make sure both images are the same size (width and height) for best results

For more details on uploading images, see our adding images and media guide.

Step 3: Create the Before/After Comparison

Now you can add the comparison to any page or post.

1. Edit the page where you want the comparison to appear
2. Click the "+" button to add a new block
3. Search for "Twenty20" and select the Twenty20 block
4. Click "Select Before Image" and choose your first image
5. Click "Select After Image" and choose your second image
6. The comparison will appear immediately with a draggable slider

Step 4: Customise the Comparison

You can adjust how the comparison looks:

• Orientation: Choose horizontal (left/right) or vertical (up/down) sliding
• Starting Position: Set where the slider starts (50% is middle)
• Handle Style: Change the appearance of the drag handle
• Labels: Add text labels like "Before" and "After"

These options appear in the block settings when you select the Twenty20 block.

Step 5: Test Your Comparison

1. Click "Preview" or "Update" to save your changes
2. View the page on your website
3. Try dragging the slider to make sure it works smoothly
4. Check how it looks on mobile devices

If you're still stuck with adding before/after comparisons, contact Web60 support for help with your specific setup.

FAQ

Q: Do before/after images need to be the same size?

A: Yes, both images should have identical dimensions for the best results. If they're different sizes, the comparison may look distorted or misaligned.

Q: Can I add multiple before/after comparisons on one page?

A: Yes, you can add as many Twenty20 blocks as you need on a single page. Each comparison works independently.

Q: Will before/after comparisons work on mobile phones?

A: Yes, the Twenty20 plugin works on mobile devices. Visitors can tap and drag the slider with their finger.

Q: Can I change the slider to move up and down instead of left and right?

A: Yes, in the block settings you can change the orientation from horizontal to vertical.

Q: What image formats work with before/after comparisons?

A: The plugin supports standard web image formats: JPG, PNG, and WebP files.

Q: Can I add text labels to show which side is before and after?

A: Yes, you can add custom labels in the block settings. Common labels are "Before", "After", "Old", "New".

Q: Why isn't my before/after comparison showing up?

A: Check that both images are selected in the block settings and that the plugin is activated. If problems continue, try deactivating other plugins to check for conflicts.