Blog Layout
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
What to Know Before You Submit / Upload a Photo Images can make or break a small business website. Whether you’re a contractor, hairstylist, dentist, or restaurant owner, the photos you upload should build trust, highlight your work, and make your business look professional. Most business owners aren’t photographers. They're using iPhones or Androids, often snapping pictures during the workday. That’s fine — as long as you follow a few simple best practices. This guide covers what you need to know before you add images to your site, including: The right image sizes and formats for web What types of images help convert leads How to take better photos of your team and your work Tips for lighting, composition, naming, and consistency When to not use images at all The tips here work for any type of business — we’ve just included examples from home service contractors since they make up a large number of Hibu sites. Let’s get everything in frame.
Pixel vs. Percentage Units: Why They Matter in Responsive Web Design When you're building websites that need to work across all screen sizes—from wide desktop monitors to narrow mobile phones—how you size elements matters. At Hibu, we design for everyone. That means every element must display correctly on every device. If your content is misaligned, crammed, or floating awkwardly, users won’t stick around—and they won’t convert. One of the most important layout choices you’ll make is whether to use pixel or percentage units for sizing.
How to Use the Contrast Checker Text needs to be easy to read—on every device, for every visitor. At Hibu, we aim to make every website as easy to read as possible. The HWP Contrast Checker helps with that by showing whether your text color has enough contrast against the background. You’ll find it inside the color picker whenever you're selecting a text color.
Training Overview: Initial Build Setup vs. Editor 2.0 & Collection Site We're moving from the current initial build setup to a new approach with Editor 2.0 and the Collection Site . This transition is more than just switching editors—it changes how we structure content, manage data, and ensure consistency across sites.