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
Website Page Counting Process It is important for all production teams to follow the same process when determining what pages on a client’s website are considered countable. This helps ensure that workloads and turn times are properly accounted for. Please note that “page count” as defined here is not the same thing as the page count that a client is allowed. There are several site pages that do not count against the client’s allotted page count, but we need to account for them in production as they take time and skill to create. To get an accurate Production page count, start with the following: Preliminary Review • Gather the site map, questionnaire, or any documentation indicating the intended structure of the website • Identify visible and hidden pages based on the provided documents Easy Way to See All Pages Select the Media Manager in the content library Click on All Alt Text Go to Page SEO Click on All Pages Scroll down to manually count the pages Note: You may have the occasional template page slip in, but this method reliably includes all the necessary pages without omitting any Categorizing Pages Service Pages: Count all service pages (e.g., individual services, home, about, contact, etc.) Include any services listed as part of the questionnaire FAQ and Blog Pages: Always count the FAQ and Blog pages, regardless of their visibility or creation status: o If they are visible or created, they count under standard pages o If they are not yet visible or created, they count under Hidden Pages Hidden Pages: Other than FAQ/Blog, include only pages intended for future use or required but not visible/created yet Exclude asset-only pages used for functionality (e.g., "First-Last," assistant banners, unused forms) DO NOT COUNT Third-Party Link Pages in the Navigation: Identify pages that link offsite (e.g., financing pages directing users to external platforms) Exclude these pages from the count as they do not require building
Site Link Audit Tool HWP has a powerful new link-checking tool. This will automate and simplify the process of checking internal and external links on Hibu websites. The link checker is accessed by navigating to SEO and Settings > SEO > SEO Overview
Guidelines for Using White and Black with Recent Colors When designing a site, it’s essential to make strategic use of theme colors for consistent, quick, and efficient design updates. To maximize the flexibility of your site's color palette, we recommend leveraging the locked Recent Colors pure white (#FFFFFF) and pure black (#000000) for foundational design elements, such as text, backgrounds, icons, and other structural components.
Discover how to boost engagement with two key website tools: callouts and coupons. Built with the Swiss Army Widget, these elements help you highlight key information and drive conversions through strategic promotions. Learn the essential differences and best practices for maximizing their impact on your site.