PhotoBiz, LLC Logo
  • WELCOME
  • WEBSITE BUILDER
  • SEO
  • CLIENT GALLERIES
  • FORMS
  • SERVICES
    • WE BUILD IT FOR YOU
    • SEO GO
    • CUSTOM WEBSITE DESIGN
    • LOGO DESIGN
    • SOCIAL MEDIA MARKETING
    • COACHING
  • GROWTH HUB
  • CONTACT
MENU

How To Create A Before & After Image Comparison Slider

November 14, 2024 | By: PhotoBiz Knowledge Base

Share

This guide will walk you through the steps to create a simple before-and-after image slider on your PhotoBiz website using Juxtapose. By following these instructions, you’ll upload your before-and-after images to your PhotoBiz account, generate a slider on the Juxtapose website, and embed it directly into your PhotoBiz page. This setup allows you to showcase transformations with an interactive slider, enhancing engagement on your site.

Important Note

PhotoBiz is not affiliated with Knight Lab. For questions specific to the Juxtapose tool, they recommend using the support forms available here.


STEP ONE

Log into your PhotoBiz account and click on FILES in the left-side menu. 

STEP TWO

Click on DOCUMENTS on the top, center menu item. 

STEP THREE

Upload your before-and-after images to the Documents section. The Link URL that is generated for each image will be used in the before-and-after slider.

IMPORTANT NOTE: Be sure that your before-and-after images have the same exact dimensions.

STEP FOUR

Open https://juxtapose.knightlab.com in another browser tab. This website will use the images you've uploaded to your Files section to generate the before-and-after slider.

STEP FIVE

Highlight and copy the URL from your Files section for the image you want to appear as the left-side image, and paste it into the LEFT IMAGE URL field on the Juxtapose website. Then, do the same for the right-side image and paste its URL into the RIGHT IMAGE URL field.

STEP SIX

Scroll down on the Juxtapose website and click the PUBLISH button below the slider preview.

STEP SEVEN

Highlight and copy the embed code that is generated after publishing.

STEP EIGHT

In your PhotoBiz Website builder, add an HTML block to the page where you’d like to showcase your before-and-after image. Paste the embed code into the right-side menu for the HTML block, then click Save Changes to add the slider to your website.

Previous Post Next Post

Related Posts

How To Use HTML Blocks

February 16, 2024

How can I create a PNG with transparency in Adobe Photoshop (CC and higher)?

June 3, 2024

How To Customize Website Colors

June 27, 2024

How To Use Image Blocks

April 7, 2025

Need More Help?

CONTACT US

BUILDER

Website Builder Client Galleries Blog

TOOLS

Ecommerce Scheduler Quotes & Invoices

MARKETING

Email Marketing Forms Contacts SEO

MORE

Account Settings Domain & Email Files PhotoBiz Growth Hub Blog Go To PhotoBiz.com
Copyright © 2004 – 2025 PhotoBiz, LLC All rights reserved
Crafted by PhotoBiz
PhotoBiz, LLC Logo
CLOSE
  • WELCOME
  • WEBSITE BUILDER
  • SEO
  • CLIENT GALLERIES
  • FORMS
  • SERVICES
    • WE BUILD IT FOR YOU
    • SEO GO
    • CUSTOM WEBSITE DESIGN
    • LOGO DESIGN
    • SOCIAL MEDIA MARKETING
    • COACHING
  • GROWTH HUB
  • CONTACT