Before / After Widget
May 16, 2024
Overview
The Before/After image widget allows you to present two images in a dynamic and interactive manner, using a customizable slider to seamlessly transition between the two. This can create a compelling visual comparison that engages users.
Why You Might Not Want to Use the Before/After Image Widget:
- Mismatch in Image Quality or Angles:
- If the "Before" and "After" pictures were not taken from the same angle, or if there's a significant difference in lighting, quality, or resolution between the two images, the slider effect might emphasize these inconsistencies rather than the intended changes.
- Text Labels in Images:
- If the images already have "Before" and "After" labels or other text overlays, using a slider can create visual clutter and make it difficult for users to focus on the actual differences.
If the images are well-matched and free of text, the designer is free to use the widget to create an engaging visual comparison.
Steps to Add Before / After Widget
- To add the widget:
- In the left panel, click Widgets.
- Click and drag the Before & After widget into your site.
- Content Editor
- Right-click the widget, and click Edit Content.
- Click + Image to add the before and after images.
- When organizing multiple sets of before and after images, use the following naming convention: name the images in the first set as before-01 and after-01. For the second set, use before-02 and after-02. Continue this pattern for all subsequent sets to maintain consistency.
- Note:
This naming convention is specifically for before and after images only and may not follow the general image file naming best practices.
- Before images are always on left; After images are displayed on right.
- Type labels for the images. To hide the labels, toggle the orange eye icon on.
- Type or generate AI alt text for the images
- For before and after images, you can use the same alt text but add "before" or "after" to distinguish between them. For example:
- residential roof replacement - before
- residential roof replacement - after
- Design Editor
- Right-click the widget, and click Edit Design.
- To customize the images and slider, click Images & Slider.
- Displayed image should never exceed actual width
- The displayed before and after image should be the same size regardless if one image is larger than the other.
- To customize the label style and text, click Labels
- Use the default Before and After labels unless instructed otherwise
In this section, you’ll learn how to control the size of elements using different types of units in Editor 2.0. We’ll break down how viewport width (vw) and height (vh) respond to the browser window, how the auto unit allows containers to resize based on their content, and how min/max values help you keep your elements within practical size limits. Together, these tools give you greater control over how your site adapts across devices—without relying on fixed pixel values.
Flexbox is the foundation for how columns behave in Editor 2.0. It controls how elements stack, align, and space themselves inside containers, giving you full control over layout across different screen sizes. By adjusting properties like stacking direction, content alignment, and wrap, you can create clean, organized designs that adapt smoothly to any device. These features help prevent layout issues, make better use of space, and simplify how you manage rows and individual elements. Learning how to use Flexbox effectively leads to faster builds and more consistent, responsive websites.
Understanding layout elements and the Layers Panel is key to building clean, responsive websites. Layout elements help you control structure—how widgets are grouped, how content stacks, and how different parts of the page respond across breakpoints. The Layers Panel gives you a clear view of that structure, making it easier to manage complex sections, find hidden elements, and keep your layout organized. Together, these tools let you build with more precision, troubleshoot faster, and maintain consistency across the entire site.
Breakpoints are specific screen widths where your website layout shifts to fit different devices, like phones, tablets, and desktops. They’re a key part of responsive design, allowing you to adjust styles so your site looks and works well on any screen. In the editor, you can see how styles behave at each breakpoint, apply universal styles, and override them when needed. You can also preview your site at different screen sizes to make sure everything looks right.