Pixel Perfect

Balancing Copy Blocks with Icons

Fri, 24 Oct 2025 19:19:33 GMT

This Post has moved to The Hibu One Spec Site

Won’t Do (Absolutes)

Allowed With Conditions

Will Do (Supported & Recommended)

Headers

Overloaded with excessive text, geos, addresses, phone numbers, social icons
Long geos (e.g., “Serving the Denver Metro and Surrounding Areas”)
Legacy/custom header layouts from older builds

Swap top-right request button with Pay Now, short statement, offer, announcement, CTA, or slogan if concise
Replace phone number with another button or short element if client requests

Clean, concise headers with core navigation and CTAs

Hero Area

Background boxes behind hero text
Box overlays that obscure images
Glow effects on buttons
Low-quality, text-heavy, or cluttered images (e.g., truck/storefront/team photos with text)
Unclear CTA wording

Three-image rows after hero (post–first proof only)
“Why Choose Us” placement changes if client requests

Two- or three-across copy blocks
“Why Choose Us” with check marks
Repurposed sections (e.g., video instead of photo)
Additional content rows on home/category pages (coupons, galleries, trust icons, etc.) if intent is defined

Content Layouts

Four-across copy blocks
Text over images in copy blocks
Icons in “Why Choose Us” (e.g., calcul ators

Overloaded with excessive text, geos, addresses, phone numbers, social icons
Long geos (e.g., “Serving the Denver Metro and Surrounding Areas”)
Legacy/custom header layouts from older builds

Special Features

Excessive animation (i.e. every element) that impacts UX
Video in hero areas (including auto-play)
Video or image sliders used as a background for any row/section
360° product viewers above the fold
Multiple embedded social media feeds (especially Instagram/Facebook) grids above the fold

Limited animation if the client prefers and performance is unaffected
Video or slider content may be used below the fold to protect Core Web Vitals/SEO
Video/slider may appear as a standalone row or as an element within a new or existing section
360° product viewers below the fold
Multiple embedded social media feeds (Instagram/Facebook grids) below the fold

Trust badge sections above the fold
Video or sliders in “Why Choose Us” or other sections below the fold
before / after galleries
team section
countdown clock
photo galleries

Performance & UX

Any element that slows page load or disrupts user flow
Intrusive pop-ups
Multiple call-to-action prompts
Full-width parallax scrolling effects
Auto-play videos
GIFs
Image sliders with multiple large images above the fold
Hero video backgrounds
Autoplaying audio or background music

Additional call-out rows added post–first proof if they don’t disrupt standard flow

Before/after sliders with headline and CTA
Trust badge sections above fold
Video in “Why Choose Us” or other sections

301 Redirects / URL Redirects

Fri, 26 Sep 2025 19:06:02 GMT

A 301 redirect: guiding web traffic to a new destination with a permanent, virtual "follow me" sign.

What is a 301 URL Redirect

A 301 URL redirect (on simply 301 redirect) is a permanent redirect that notifies search engines that a page URL has been permanently moved to a new URL. This type of redirect is essential for maintaining a website's SEO and user experience.

There are three common reasons why CW would use a 301 redirect:

When CW changes the URL of a page: This refers to the action of modifying the Page URL of a specific page on a website. This can be done for various reasons, such as improving the URL structure, enhancing user experience, or aligning with SEO best practices. When changing a URL, it's important to set up proper redirects to ensure that visitors and search engines are directed to the new URL.
BYOD OLD Page URL: domain.com/ roof5730
Hibu NEW Page URL: domain.com/ roofing-services
301 URL Redirect: domain.com/ roof5730 -> /roofing-services
When CW expands one page with multiple topics into multiple pages for each topic: This refers to the process of breaking down a single page that covers multiple topics into separate pages, with each page focusing on a specific topic. This can be done to provide more detailed information, improve organization, and potentially target specific keywords or topics for better SEO performance.
BYOD OLD Page URL: domain.com/ services (included info about roofing, siding, and widow services)
CW creates 3 new pages: domain.com/ roofing-services , .../ siding-services , .../ window-replacement-services .
301 URL Redirect: domain.com/services -> /home
When CW consolidates multiple pages into one of like content: This refers to combining multiple individual pages into a single page. Consolidation can be done to streamline content, eliminate duplicate or redundant information, and create a more comprehensive and user-friendly page.
BYOD OLD site consists of 10 distinct pages dedicated to each lawyer within the firm.
CW consolidates the 10 unique pages into one page
301 URL Redirect: 10 pages -> /consolidated-page

When CW deletes pages that were visible on the BYOD OLD site (such as services, blog posts, geo pages, product pages, etc.), it's vital to set up a 301 redirect from the deleted URL(s) to the home page.

How to Add 301 URL Redirects

Set Up Manual URL Redirect

In the side panel, click Settings , then click URL Redirect .
Click Add a New Redirect
Type the old page name (what follows the .com/ page-name , .net/ page-name,) to be redirected in the Source URL field
Select the redirect Destination page
Click on Add
Repeat the process as needed.

To edit or delete your custom URL redirects, click Edit or Delete in the redirect menu.

Import Multiple Redirects From CSV

New 301 Redirect Workflow: From Extraction to Import

Step 1: Extract Full Site URLs

Go to the URL Extractor tool (e.g. SimpleScraper or XML Sitemap Generator ).
Enter your domain (e.g. https://www.aladdinlock.net/) and click Get Data .
Once extraction completes, click Copy to Clipboard or download the CSV.
You should now have a list of full URLs from your site.

Step 2: Clean URLs in Excel

Open the Excel cleaning sheet

Paste the full URLs into the green-highlighted section (Column A).
The sheet will automatically strip the domain and output clean URL extensions in the red-highlighted section (Column C).
Example: https://www.aladdinlock.net/contact → /contact
Copy the cleaned extensions when ready.

Before:

After:

Step 3: Prepare the HWP Redirect CSV

In HWP (your website platform), go to SEO Settings → URL Redirects .
Click Import Multiple Redirects and then Download CSV Template .
Open the downloaded CSV file — it should have columns like:
Old URL
Destination URL
Redirect Type (usually 301)

Example: Click “Download CSV template section of HWP

Step 4: Populate Redirects

Paste the cleaned extensions from Excel into the Old URL column.
In the Destination URL column, paste the matching page extension from your live site.
These should reflect actual HWP page URLs (e.g. /services/locksmith)
Set the Redirect Type to 301 for all rows.

Step 5: Save and Upload

Save the updated CSV file.
Return to HWP → Import Multiple Redirects → click Upload CSV .
Once uploaded, HWP will process the redirects and apply them site-wide.

Use Wildcard Redirects

Wildcards allow you to define one URL rule for multiple page urls that contain subfolders. Wildcards are represented with a single asterisk symbol (*).

https://www.domain.com/subfolder/page-url

Everyday examples of sites with subfolders may resemble:

https://www.thehvaccompany.com/service-areas/marion

https://www.thehvaccompany.com/service-areas/coralville

https://www.thehvaccompany.com/service-areas/iowa-city

https://www.thehvaccompany.com/service-areas/grinnell

https://www.youtwolaw.com/bios/paul-hewson

https://www.youtwolaw.com/bios/david-evans

https://www.youtwolaw.com/bios/adam-clayton

https://www.youtwolaw.com/bios/larry-mullen-jr

https://www.retrotile.com/tile/grey

https://www.retrotile.com/tile/blue-azur

https://www.retrotile.com/tile/lime-green

https://www.retrotile.com/tile/sunflow

By setting up a single redirect wildcard rule using *, you can simplify the process of redirecting multiple URLs. The wildcard acts as a catch-all for any URL that follows the specified subfolder, allowing you to redirect all those pages to a common destination with just one configuration. In essence, any page that falls under the subfolder will be automatically redirected to the designated destination.

To import multiple redirects from CSV:

In the side panel, click Settings, then click URL Redirect.

Click Add a New Redirect.

Enter subfolder, followed by backslash ( / ), followed by asterisk ( * )

service-areas/*

bios/*

tile/*

etc.

Select the redirect Destination page as defined above

Click Click on Add

Repeat the process as needed

To edit or delete your custom URL redirects, click Edit or Delete in the redirect menu.

Note: If necessary, you have the option to combine wildcard redirects with standard redirects. This means you can use both types of redirects simultaneously, allowing for greater flexibility in managing your redirections.

Won’t Do (Absolutes)

Allowed With Conditions

Will Do (Supported & Recommended)

Headers

Overloaded with excessive text, geos, addresses, phone numbers, social icons
Long geos (e.g., “Serving the Denver Metro and Surrounding Areas”)
Legacy/custom header layouts from older builds

Swap top-right request button with Pay Now, short statement, offer, announcement, CTA, or slogan if concise
Replace phone number with another button or short element if client requests

Clean, concise headers with core navigation and CTAs

Hero Area

Background boxes behind hero text
Box overlays that obscure images
Glow effects on buttons
Low-quality, text-heavy, or cluttered images (e.g., truck/storefront/team photos with text)
Unclear CTA wording

Three-image rows after hero (post–first proof only)
“Why Choose Us” placement changes if client requests

Two- or three-across copy blocks
“Why Choose Us” with check marks
Repurposed sections (e.g., video instead of photo)
Additional content rows on home/category pages (coupons, galleries, trust icons, etc.) if intent is defined

Content Layouts

Four-across copy blocks
Text over images in copy blocks
Icons in “Why Choose Us” (e.g., calcul ators

Overloaded with excessive text, geos, addresses, phone numbers, social icons
Long geos (e.g., “Serving the Denver Metro and Surrounding Areas”)
Legacy/custom header layouts from older builds

Special Features

Excessive animation (i.e. every element) that impacts UX
Video in hero areas (including auto-play)
Video or image sliders used as a background for any row/section
360° product viewers above the fold
Multiple embedded social media feeds (especially Instagram/Facebook) grids above the fold

Limited animation if the client prefers and performance is unaffected
Video or slider content may be used below the fold to protect Core Web Vitals/SEO
Video/slider may appear as a standalone row or as an element within a new or existing section
360° product viewers below the fold
Multiple embedded social media feeds (Instagram/Facebook grids) below the fold

Trust badge sections above the fold
Video or sliders in “Why Choose Us” or other sections below the fold
before / after galleries
team section
countdown clock
photo galleries

Performance & UX

Any element that slows page load or disrupts user flow
Intrusive pop-ups
Multiple call-to-action prompts
Full-width parallax scrolling effects
Auto-play videos
GIFs
Image sliders with multiple large images above the fold
Hero video backgrounds
Autoplaying audio or background music

Additional call-out rows added post–first proof if they don’t disrupt standard flow

Before/after sliders with headline and CTA
Trust badge sections above fold
Video in “Why Choose Us” or other sections

Best Practices for Link Styling

Tue, 15 Jul 2025 17:52:12 GMT

This Post has moved to The Hibu One Spec Site

Blog-Based Inventory System — Production Specification

Tue, 01 Jul 2025 18:38:33 GMT

Overview

The following outlines the production workflow and structural requirements for using the blog feature as a dynamic inventory system on Hibu websites.

This solution is designed to replace a client’s existing DIY inventory section—typically built using manually created pages or custom layouts—by introducing a structured, templated approach using the blog feature.

Why this matters: Clients can no longer create new pages themselves, which previously limited their ability to add inventory items. This blog-based approach restores that flexibility in a controlled, SEO-friendly, and scalable format.

Key Advantages:

Solves for the removal of DIY page creation by offering a sanctioned, user-manageable alternative
Provides a repeatable, templated process for publishing inventory items
Leverages tags, title tags, and meta descriptions for better SEO and search filtering
Ensures visual consistency and user experience parity with the client’s former DIY setup
Scales easily and allows client self-management post-launch

Each inventory item is represented as a blog post—fully styled, tagged, and optimized—allowing the client to continue growing their inventory catalog without needing to rely on customer service to add every new product update.

1. Blog as Inventory: Core Concept

Each blog post = one inventory item (e.g., a golf cart, used vehicle, appliance, etc.).
The blog post functions as a product listing page and includes:
Product title
Specifications
Description
Gallery of images
SEO metadata (title tag, meta description)
Structured data via blog schema

This repurposing allows for dynamic listing display, easy future editing, and search engine visibility.

2. Design Stage: Creating the Parent Inventory Post

Purpose

Create a fully designed inventory blog post that acts as the parent template for all current and future inventory items.

This initial post must:

Match the client’s current inventory presentation style .
Be structured for repeat use by production and by the client post-handoff.

Requirements

Style the post to reflect client branding and existing formats.
Include placeholders for:
Product title (e.g., 2023 Ezgo RXV Golf Cart)
Product type, make/model, SKU
Gallery of images
Specifications and description
Short summary / meta description
Ensure use of correct heading structure (H1, H2, etc.).
Apply blog schema where applicable.

Note: This approach is a direct response to the removal of client-side DIY page creation. By templating the inventory system inside the blog, we enable clients to continue managing and adding inventory items without needing page-level access.

The designer-created parent post becomes the foundation for all future inventory entries and should never be overwritten. It must be duplicated each time a new inventory item is added.

3. Content Replication & Launch Setup

Production Steps

Once the master inventory post is complete:

Duplicate the template post to create the initial inventory catalog.
Determine the number of posts needed (typically 3, 6, 9, or full inventory).
Replace all placeholder content with actual product data.
Title
Specs
Pricing
Images
Tags
Title tag and meta description (see Sections 4 & 5)
Publish each blog post.
Publish the website after all posts are live (required for public visibility).

4. Tagging Structure for Filtering & Search

Use blog tags to power search filtering and category grouping.

Inventory Post Tags

Add tags based on:

Manufacturer (e.g., Ford, Honda)

Year or Model (e.g., 2023 Accord)
Price range (e.g., Under 10k or Under, 10,000, Under 15k)
Inventory type (e.g., used, electric, SUV, 4-wheel drive)

These tags support filtering/searching from the blog interface.

Special Case: Existing Blog Content

If the client already has a blog:

Tag all existing editorial posts with blog,
Tag all inventory posts with inventory.
Set up filtered blog widgets (see Section 6) to control visibility by tag.

5. SEO Metadata Configuration

Title Tag

Default : Matches the blog post title.
Client Instructions : Augment title tag manually via the gear icon.
Recommended format : [Post Title] For Sale | [Dealership Name] | [Location] (space permitting)

Meta Description / Summary

Also controlled via the gear icon.
Used for:
Blog roll snippet display
Meta description in SERPs
Recommended templated format :
For sale: [Year] [Make] [Model]. Excellent condition. Available now at [Dealer Name], [Location]. Click to view specs.

6. Blog Page Setup (Two Scenarios)

Scenario A: No Existing Blog

Create new page (e.g., Inventory, For Sale) and add to global nav.
Hint: Reference the client’s existing DIY inventory section for terminology and structure. Align page naming with what users are already familiar with.
Page setup:
Thin hero with matching page title
Add Most Recent Posts widget filtered to display up to 50 posts
Grid layout (3-column preferred)
Turn on “Read More” button with a meaningful CTA (View Specs, Learn More, See Details)
Hint: Review the client’s current CTAs (if they have buttons like “View Details” or “More Info” on their existing site) and use the same language for consistency.

Scenario B: Existing Blog in Use

Tag all inventory posts with inventory .
Tag all editorial blog posts with blog .
Create new page (e.g., Inventory ) and add to nav.
Use Most Recent Posts widget filtered to inventory tag .
Modify existing “Blog” page:
Use widget filtered to show only blog -tagged posts.

7. Client Enablement & Training Checklist

Why This Step Is Critical

Since clients can no longer create new pages themselves, this blog-based system is the only supported method for independently adding new inventory items post-launch. A guided walkthrough ensures clients understand and feel confident in managing their inventory going forward.

Training Agenda

Blog Post Creation

Instruct the client to never click “Create New Blog Post.”
Instead, they must:
Duplicate an existing inventory post.
Replace all relevant content with new product data.
Maintain the layout and formatting structure established in the template.

|Editing Metadata

Show how to click the gear icon (Options) to edit:
Post tags (for search filtering)
Title tag (for SEO visibility)
Meta description / summary (used both on the blog roll and in search engine snippets)

Publishing Workflow

Emphasize the two-step publishing process:

Publish the blog post.
Publish the website.

If the client publishes only the post and skips the website publish, the inventory item will not appear live.

Image Upload and SEO Tips

Use descriptive, hyphenated filenames (e.g., 2022-blue-ezgo-golf-cart-for-sales-NOB .jpg )
Avoid generic image names (e.g., image-2302.jpg)
Compress large images to maintain page speed
Add short, relevant ALT text for each image

This training ensures clients are equipped to manage their inventory catalog independently, using a system that preserves consistency, supports search visibility, and eliminates reliance on production for ongoing updates.

Editor 2.0 / Replacing Full Template Header with Alt Version

Tue, 17 Jun 2025 19:28:48 GMT

Follow these steps to replace the default template header with an alternate version

Please note: this process relies heavily on the Layers Panel and the floating toolbar breadcrumbs. Always be sure that you're focused on the specified element before proceeding with each step.

1. Save a backup (this is recommended anytime the header is being edited)

2. Right-click the top of the hero section, select Add Designed Section

3. In the HEADERS section folder, choose the desired header section. Section names are:

- 2.0 - HEADER - NO CTA

- 2.0 - HEADER - NO REV NO CTA

- 2.0 - HEADER - NO REVIEWS

- 2.0 - HEADER - FULL

- 2.0 - HEADER - MULTI

4. Open the LAYERS panel; the Header section you just added will be highlighted.

5. Select the Inner Column ( IC ) directly below Column . Depending on which Header section was selected,

the layer name will be one of the following:

- IC - NO CTA

- IC - NO REVIEWS CTA

- IC - NO REVIEWS

- IC - FULL

- IC - MULTI

6. In the floating toolbar, ensure that the name of the IC appears in the blue breadcrumb bar.

7. Click on the ••• icon on the right of the toolbar -- select Copy .

8. Return to the LAYERS panel -- scroll to the top to find the Header folder.

9. Collapse the Section - Mobile and Section - Tablet folders

(not necessary, but this will make working with Desktop Header a bit easier)

10. In the Section - Desktop - Template folder, select the Inner Column directly below Column - Template .

In most cases, this will be named IC - FULL .

11. In the floating toolbar, ensure that the name of the IC appears in the blue breadcrumb bar. Click delete (trash can icon).

12. The floating toolbar breadcrumb will now be focused on Column - Template .

13. Click on the ••• icon on the right of the toolbar -- select Paste .

14. Scroll down into the body and select the Header section you originally added.

15. Ensure that Section - HDR appears in the blue breadcrumb bar and delete section.

----------

For no reviews scenarios:

Tablet = delete Header Reviews widget (just the widget, NOT the column)
Mobile = delete REVIEWS IC inner column

----------

BEFORE (Template default)

AFTER

Category Page Image and Layout Standards

Thu, 12 Jun 2025 18:17:49 GMT

Category Page Image and Layout Standards

This Pixel Perfect outlines the updated standards for using hero images and layout across the Homepage, Category Landing Page (CAT), and their related core pages.

All CAT pages will now use icons instead of images in their copy blocks. In most cases, a hero image will be used across the CAT page and its core pages. Exceptions may apply when services are visually distinct or when clients provide their own imagery.

Change in Strategy

We are shifting to a simplified image approach for CATs and their core pages. In most cases, a single hero image will now be used for both the Category Landing Page and all of its associated core pages. This streamlines production and reinforces visual consistency.

When a selected PBN displays images in homepage copy blocks, it is now the designer’s responsibility to ensure that any corresponding CAT copy blocks are updated to use icons instead of images . This change is required regardless of how the homepage is styled.

Implementing Icon Copy Blocks

Designers are required to replace image-based copy blocks on Category Landing Pages with icon-based versions. To do this, they will insert a new design section by choosing from one of four pre-built Category Landing Page Icon Sections , located in the Cat Icons section folder. Designers may choose any of the four options— Cat Icons - A, Cat Icons - B, Cat Icons - C, or Cat Icons - D —at their discretion. However, once a layout is selected, that same section must be used consistently across all Category Landing Pages on the site.

Each icon block must preserve the intended alignment between the icon, the text, and the Learn More button as originally designed. Designers must replace the default icons with ones that are directly relevant to the content, service, or product featured. Icons may be either solid or outline style, but the chosen style must be applied consistently site wide.

When implementing the new section, designers must copy and paste the content from the original image-based copy blocks into the new layout. This includes the headline , summary , and the link connected to the Learn More button . Content should be pasted top to bottom, left to right , to preserve both order and intent.

Adjusting for Uneven or Odd Numbers of Copy Blocks

Depending on the number of subpages associated with the Category Landing Page, the designer may need to adjust the layout to accommodate an odd number of copy blocks . Several layout variations are provided for each Cat Icons section (e.g., layouts for 2, 3, 4, 5, 7, or 9 blocks). Designers are expected to:

Choose the version of the section that best fits the total number of copy blocks.
Maintain spacing, alignment, and visual hierarchy as designed.
Use the most appropriate configuration to preserve readability and consistency across screen sizes.

Examples of how to handle different copy block counts are demonstrated in the Cat Icons preview references . This ensures flexibility in layout without compromising design quality.

Hero Image Selection Expectations

While the default approach is to use one hero image across the CAT and its core pages, designers have flexibility in the following situations:

When the core pages are visually distinct (e.g., Outdoor Kitchens, Fire Pits, Pergolas), designers may select unique hero images per subpage to better reflect the content and improve user clarity.
When client-provided imagery is available , and the images are high quality and appropriate for hero use, they should be used in place of stock. Designers should match these to the most relevant core pages.
In mixed-service websites , it may be appropriate to use a shared image for some categories and varied images for others, depending on the subject matter and available assets. Designers should use their judgment.

Regardless of the hero image selection, Category Landing Pages must always use icons in place of images within their copy blocks. This standard applies in all scenarios.

Smart Placement of 'Visit Now' Buttons & Addresses

Knowing when and where to place a ‘Visit Now’ button or display your address on a website can be tricky, especially for businesses that depend on customers visiting their location (like dental offices, restaurants, or law firms) or service providers who primarily go to the customer but may still need to include their address. These decisions might seem small, but they have a big impact on usability, customer experience, and even conversions.

Why does it matter? Clear, accessible location information helps potential customers take the next step. If someone is ready to visit your business or wants to know where you’re located, they shouldn’t have to search for that information. A well-placed address or call-to-action like "Visit Now" ensures they can quickly find what they need—whether they're visiting your restaurant for lunch or planning a consultation at your office.

In this guide, we’ll break down exactly when and where to add ‘Visit Now’ buttons and addresses, including key areas like the header, hero section, Contact Us page, footer, callouts, and even within your content. Whether your goal is to drive in-person visits or provide transparency for location-based services, these placements will make your site more intuitive and customer-friendly.

Make It Easy for Customers to Find and Visit Your Business

For businesses where customers come to you—like dental offices, restaurants, gyms, or law firms—your website must make it crystal clear where you’re located and how to get there. Put yourself in the shoes of your visitor: if they’re planning to visit your business, what would they expect to find on your site? They’re likely looking for an address, directions, or a button that makes it easy to map their route.

Here’s the obvious truth: If someone is considering visiting your business, they need to know where you are and how convenient it is to reach you. If this information isn’t front and center, they might give up and move on to someone else. Whether they’re searching for a nearby restaurant to grab a quick bite or a dentist for their child’s appointment, they expect your location details to be easy to find.

In this guide, we’ll cover exactly where and when to place essential location information, like a ‘Visit Now’ button or your address, in key areas of your site. By ensuring these details are readily available, you’ll make it simple for potential customers to choose your business and visit in person. Let’s take the guesswork out of making your website visitor-friendly!

Editor 2.0 / Hibu One: Intro & Why Choose Us Photos

Mon, 19 May 2025 00:20:57 GMT

Intro & Why Choose Us Photos

This Pixel Perfect outlines the updated requirements for building the Homepage and Category Landing Page (CAT), specifically the Introduction Paragraph section and the Why Choose Us section .

We are removing the paragraph text from the Why Choose Us section and replacing it with an image.

Introduction Paragraph Section (when icons are used in Why Choose Us)

When this applies:

If the Why Choose Us section is built with icons instead of a list,

Image selection (in order of preference):

A client-supplied photo such as:
Company vehicle with branding
Exterior of the business
Interior workspace or office
Team or group photo
A stock image :
For the homepage , use a stock image that represents the business as a whole
For category landing pages , use a stock image that matches the category focus (e.g., roofing, plumbing, etc.)
Client Logo (only when it meets all criteria):
Must be high resolution
Must be square
Must be excellent quality
Must be large enough to fill the full hero space without distortion

Why Choose Us (when list icons widget is used)

When this applies:

If the Why Choose Us section is built with list icons widget instead of a icons

Image selection (in order of preference):

A client-supplied photo such as:
Company vehicle with branding
Exterior of the business
Interior workspace or office
Team or group photo
A stock image:
For the homepage, use a stock image that represents the business as a whole
For category landing pages, use a stock image that matches the category focus (e.g., roofing, plumbing, etc.)
Client Logo (only when it meets all criteria):
Must be high resolution
Must be square
Must be excellent quality
Must be large enough to fill the full hero space without distortion

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Editor 2.0 / Hibu One: Fixing Hero Connected Content Issues

Sun, 18 May 2025 23:51:12 GMT

Fixing Hero Connected Content Issues

What Powers Connected Content?

Two key systems drive most of the content that appears on Hibu One sites:

Content Library - A centralized store for business-wide details.
Examples: logo, hero / copy block images, business name, motivating factors. call out and coupon text
Collections - A set of repeatable content used to build dynamic or structured pages.
Examples: superhero form drop down options, h1s, geo text, buttons / links

These systems allow you to update content in one place and have it automatically apply across the entire site — but only if the widgets are properly connected.

How Many Connected Items Are in a Hero?

The hero section is a great example of how much content is controlled by these data sources.

Each part of the hero pulls from a different field in either a Collection or the Content Library:

Hero H1 → Pulled from the Hero Collection
Geo Reference → Pulled from the Hero Collection
Motivating Factors Text → Pulled the Content Library → Business Text → Motivating Factors field
Phone Number → Pulled from the Content Library → Business Info via Yext Connect
Buttons (e.g., Call or Text / Visit Us) → Pulled from the Button Collection
Form Title → Pulled from the Form Collection
Form Dropdown options→ Pulled from the Form Collection
Hero Background Image → Pulled from the Content Library → Business Imnages

That means a single hero layout might rely on:

3 different Collections
2 sections of the Content Library
As many as 8 total connected items

Why This Matters

If any of those elements aren’t properly connected, you’ll see:

Placeholder text
Incorrect or missing images
Inconsistent content across pages or breakpoints

This training breaks down each connected element by type, outlines who’s responsible (CW or designer), and gives you step-by-step quick fixes for the most common problems.

Use it during builds, QA, or support escalations/amends.
Start with the widget. If something looks wrong — check the connection.

Hero H1 and Geo Connection

Collections → Hero Collection → Hero H1 and Geo columns

What to Know

The Hero H1 and geo reference are connected through the Hero Collection.
These values depend on a matching Item / Page slug to display on the correct page.

Copywriter Responsibility

Enter the H1 and Geo into the Hero Collection.
Ensure the Item / Page column matches the actual page slug (e.g., /roofing-services ).
Do not manually type the H1 or Geo text on the page.

What Can Go Wrong

Placeholder text or incorrect geo appears.
Edits to the collection don’t reflect on the site.
This usually means:
The slug is wrong or mistyped.
The widget was never connected.
The H1 or Geo was entered manually.

Quick Fix

Confirm the correct page slug is used in the Hero Collection.
Right-click the text widget → Connect to Data → Select the correct field.

Motivating Factors

Content Library → Business Text → Motivating Factors field

What to Know

These are short, benefit-focused lines under the Hero H1.
They are managed in the Content Library as Business Text.

Copywriter Responsibility

Add them under the correct label (e.g., motivating-factors ).
Use line breaks to create a stacked format.
Keep the list brief — no more than 2–3 lines.

What Can Go Wrong

Placeholder or outdated content shows.
Nothing updates even after editing the Content Library.
This usually means:
The widget was never connected.
Content was typed manually into the site.

Quick Fix

Open Content Library → Business Text.
Right-click the text block → Connect to Data → Select the correct label.

Call-to-Action (CTA) Buttons

Collections → Button Collection → Desktop/Tab Button, Mobile Button, Learn More, Visit Us, Tablet Contact Us Button

What to Know

Hero buttons (e.g., “Call or Text,” “Visit Us”) are powered by the Button Collection.
This controls both text and links.

Designer Responsibility

Connect all breakpoints (desktop, tablet, mobile) to the Button Collection.
Never type button text or links manually.

Copywriter Responsibility

Write/edit button text and links only in the Button Collection.

What Can Go Wrong

Button shows default text like “Click Here.”
Link is incorrect or missing.
Button only updates on one breakpoint.
This usually means:
The widget was never connected or only connected once.
Someone typed content directly into the button.

Quick Fix

Select the button on each breakpoint.
Right-click → Connect to Data → Select the correct field from the Button Collection.

Form Dropdown Options

Form Dropdown → Form Collection

What to Know

The form title and dropdown menu (e.g., service options) are controlled by the Form Collection.

Copywriter Responsibility

Enter dropdown options to the Services & Products field
Do not manually enter dropdown options in the form editor.

What Can Go Wrong

Dropdown value(s) appears under the menu in a black box.
This usually means:
Someone typed content directly into the dropdown field

Quick Fix

Copy the hero section from a page where the form works
Paste it over the hero section with the broken form
Reconnect the hero background image
Make sure the form button is centered

Form Dropdown Options

Form Dropdown → Form Collection

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Editor 2.0: Adding an Author’s Byline to Blog Posts

Sun, 18 May 2025 19:12:34 GMT

Adding an Author’s Byline to Blog Posts

This training explains how to add a clickable author byline to a blog post. The byline should appear at the top of each post and link to that author’s “About the Author” page, which must be nested under the Blog section.

You’ll learn how to:

Navigate to the blog post using the Pages and Layers panels
Insert the byline in the correct content container
Link the author’s name to their profile page
Confirm the link and page structure
Publish the updates

This process supports consistency across blog content, improves internal linking, and gives site visitors a way to learn more about each contributor.

Assumptions Before You Start:

At least one blog post has been written and published.
The main Blog page is live and nested under the global-level “About” section (or equivalent).
The author has passed along their bio

Step 1 – Open the Side Panel (Left)

Click Blog
Click Edit Layout

Step 2 – Click to the Left of the Post Title

Step 3 – Open Layers Panel

Locate S-Blog Post Hero Section

Step 4 – Hide and Unhide Blog Elements

Click “Post Author & Date,” then click the eye icon to hide it.
Click “First Last,” then click the eye icon to unhide it.
Click “Post Date,” then click the eye icon to unhide it.
Repeat on Tablet and Mobile devices

Step 5 – Close Edit Layout Screen

Click Done button, then Exit anyway

Step 6 – Update Byline First Name Text

In the left panel, click “Content,” then select “Business Text.”
Locate the First Last field. Replace the placeholder text with the author’s full name.
Add professional credentials, such as DDS, Esq., or PhD, after the name
Stephen E. Paul, MDStephen E. Paul, MD
Do not include titles like Dr. or Attorney before the name — these are typically not used in bylines
There is no “Save” button on this screen.
Simply click anywhere inside the editor frame to lock in the name.
This will also automatically close the Business Text overlay.

Step 7 – Unhide First Last Page

In the left panel, click “Pages."
Scroll through the page list to locate the “About” page (or its equivalent).
Under “About,” find the " First Last " page and Click the three-dot menu to the right of that page name.
Select “Stage Draft for Publish.”

Step 8 – Update First Last Page Name

Click the three-dot menu to the right of First Last and click Rename
Enter author's name as entered by line
Example: Stephen E. Paul, MD
Click Rename to save and close window

Step 9 – Update First Last Page Slug, Title and Meta Description

Update the Page URL by replacing the placeholder text ( first-last ) with the author’s full name, matching the byline and page name.
Example: stephen-e-paul-md
Then update the Page Meta Title and Page Meta Description as follows:
Title Tag: Prefix First Last, Title | NOB
Example: Stephen E. Paul, MD | About the Author
Meta Description: NOB [verb] offers / provides / serves / specializes in [core business keyword or phrase] [City, ST or serving area]. Motivating factor. Motivating factor (space permitting). Motivating factor (space permitting).
Example: Dr. Stephen E. Paul, a board-certified specialist serving Atlanta, GA. Decades of experience. Highly rated by patients. Focused on outcomes.
Close SEO edit screen

Step 10 – Update Author Page

Update the Thin Hero placeholder text labeled “First Last” with the name of the author, as defined in earlier steps.
Copy, paste, and edit the client-provided bio , if necessary.
Upload the client-provided headshot .
Update the “First Last” photo caption with the author’s name, as defined in earlier steps.
Update the LinkedIn social icon with the author’s LinkedIn profile link .

Step 11 – Add Recent Blogs to Home and Content Landing Pages

Open home page and scroll down to Recent Review.
Click to the left of the speech bubble icon
Open Layers panel
Locate Reviews CL - Recent
Click “Section - Reviews Posts,” then click the eye icon to unhide it.
Repeat on Tablet and Mobile devices

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Editor 2.0 / Hibu One: Mega Menu

Sat, 17 May 2025 01:59:47 GMT

This Post has moved to The Hibu One Spec Site

Editor 2.0 / Hibu One: Transparent Header

Thu, 15 May 2025 00:55:25 GMT

How to Add a Transparent Header (Page by Page)

Applies only to the Home page and Category Landing Pages.
Assumes the Hero section and background image are already in place.

IMPORTANT

Given that both transparent and non-transparent headers share the same ADVANCED HEADER, there are some design rules that must be followed for this new transparent header process:

For all sites featuring transparent headers, the non-transparent / internal page header design must be designed with a dark (ish) background color and white/light text.
Navigation bar must have a dark (ish) background and white/light text (same as header text above)
NOTE : you can add an opacity to the background color, but be aware that it will affect the nav color on non-transparent pages as well.
Header Reviews widget summary link does NOT update on scroll, so it should be set to the same color as the header text
HWP 2.0 sites contain the transparent header only on the home page
Hibu One sites will contain the transparent header on the home page and ALL category landing pages

Step 1 – Design the Non-Transparent (Default) Header

Set the default header appearance using the Theme panel.

Go to the Home page
Open the Theme panel
Set:
6 – Header BG to a dark background color
7 – Header Tex t to a light text color (usually white)
10 – Navigation BG if needed, for the menu background
NOTE : Header background color control is located under 'Background and Style', and is connected to Theme --> 6 - Header BG. Color should be updated in the Theme.

Do not apply background colors directly to header sections or columns.
For the Header Reviews widget, set the color of the Summary Link to Theme --> 7 - Header Text

If you want to wrap the logo in a colored background:
Desktop
Click the logo
Use the breadcrumb bar to select IC - LOGO BG
In the Design panel, apply background color and adjust spacing if needed
Tablet
Click the logo
Use the breadcrumb bar to select C - LOGO
Apply background color in the Design panel
Mobile
Click the logo
Use the breadcrumb bar to select IC - LOGO
Apply background color in the Design panel

Step 2 – Set Hero Padding

Adjust the top padding of the Hero section to clear the header.

Click the Hero section
In the Design panel, set top padding to:
Desktop: 320px
Tablet: 150px
Mobile: 200px
Adjust further if needed to create clean spacing under the transparent header.

Step 3 – Enable the Transparent Header

Hover over the header area and select ADVANCED HEADER (orange)
In the Design panel, scroll to the bottom and toggle on " Overlap 1st section on page "
Check that " Header overlap background " is set to none/transparent
Update settings under SCROLL BEHAVIOR

Make sure " Set as sticky header" is toggled on
Toggle on " Change header on scroll"
Ensure the color for " Background on scroll" to the same color that you've defined for the standard / non-transparent header design (Theme --> 6 - Header BG)
Under " More header colors on scroll " ensure the color for "Text" is assigned to Theme --> 7 - Header Text

Step 4 – Adjust Hero Padding as Needed

Review the site in each device view (desktop, tablet, mobile).
If the header overlaps the content too much or too little, fine-tune the Hero top padding.
Note the final padding values used for all three breakpoints so you can easily apply them for Category Landing pages

Repeat on Category Landing Pages

Repeat Steps 2 through 4 on each Category Landing Page.
There is no need to redo the Theme settings — those apply globally
Scroll behavior settings carry over, but the Hero spacing must be set per page.

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Editor 2.0 / Hibu One: NEW Engagement Menu

Wed, 14 May 2025 01:05:27 GMT

New Mobile-Only Engagement Menu

The engagement menu has been updated and simplified for mobile use only. It now appears only on mobile devices , fixed in the bottom right-hand corner of the screen. When tapped, it opens the Engagement Menu Pop-up .

This pop-up can include up to three action buttons based on the business setup:

Call Us
Text Us
Get Directions
Request CTA

Button visibility depends on the business type and available Yext data.

Engagement Menu Overview

The pop-up may include up to four buttons:

Call Us
Opens the user's phone dialer.
Connect to Yext data.
Text Us
Opens the SMS app.
Connected to Yext data.
Only shown if the business supports Call or Text option or texting.
Get Directions
Launches the map application with the business address.
Only shown for businesses with physical walk-in locations.
Request CTA
Like all Request CTA buttons, the displayed text and link are controlled by the button collection.

Designers do not customize the pop-up manually. All styling is inherited from the global theme.

All buttons in the pop-up use the primary button style .
The icon color is pulled from the engagement menu color setting in the global theme.

To update design:

Update primary button styles and global theme colors .
Set the engagement menu color in the global theme settings.
All updates will translate automatically to the engagement menu interface.

QA Responsibilities

Confirm correct pop-up connection (Engagement Menu Pop-up vs. Mobile Contact Us Pop).
Validate visibility and function of each button based on business type.

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Additional Locations

Fri, 09 May 2025 15:50:27 GMT

This Post has moved to The Hibu One Spec Site

Editor 2.0 / Hibu One Glossary

Thu, 08 May 2025 17:37:13 GMT

Advanced Grid - Lets you organize a section into rows and columns for better layout control. It helps create clean, balanced designs by giving you precise control over where things appear on the page.

Breadcrumbs - show where you are on a website. They appear as a line of links, like:

Example: Home > Services > Roofing
Each part is clickable, so you can go back to a previous section easily. This helps visitors stay oriented and makes it faster to move around the site.
Breadcrumbs also help search engines understand how the site is organized, which can support better search visibility.
Where breadcrumbs appear:
Desktop: Below the hero image
Tablet & Mobile: In the footer
Where breadcrumbs do not appear:
Homepage
Service Area Pages (SAPs)
Geo Pages

Breakpoints – Breakpoints are preset screen widths where the site layout changes to match the device (desktop, tablet, mobile). They make sure your site stays readable and easy to use on all screen sizes.

Category Landing Pages (CATs) - A Category Landing Page gives an overview of one main service a business offers—like Roofing, Siding, or Windows. It helps organize the site so visitors can easily find related services in one place.

Example: If the homepage highlights multiple services, the Roofing CAT focuses just on roofing. It links to child pages like Roof Repair or Roof Installation.
CATs make it easier for customers to explore everything offered in a category—and help search engines understand how the site is structured.

Collection – In Duda, a Collection is a set of repeatable data—like services, locations, or team members—that can be used to fill in parts of a website. Collections work like the Content Library because they let you update content in one place and apply it across the site. The key difference is that Collections are used to build multiple dynamic pages (like SAPs), while the Content Library is used for business-wide details that don’t repeat.

Columns – Columns sit inside sections and divide the space vertically. They let you place content side by side—like an image next to a block of text. Columns help you create balanced, responsive layouts that look good across all screen sizes.

Core Page – A Core Page focuses on one service or product your business offers—like Roof Repair, Dog Bite Lawyer, or Brake Service. It replaces the old “Products/Services” label and is designed to explain what the service is, who it’s for, and why it matters.

Classic Editor – The Classic Editor is the older version of Duda’s builder. It uses a simpler, row-based layout system and has fewer customization options. It’s easier to use for basic sites but more limited in terms of design and flexibility.

Duda – Duda is a professional website building platform launched in 2009. It was originally created to help businesses build mobile-friendly websites and has since expanded into a full-featured platform used by agencies and large-scale partners. The name "Duda" comes from the founders' time at UC Santa Barbara, where they were inspired by "The Dude" from The Big Lebowski. It reflects the company’s early laid-back culture. Hibu has been using the Duda platform to build and manage small business websites since 2016.

Editor 2.0 – Editor 2.0 is Duda’s upgraded website builder. It gives you more layout control, faster editing tools, and a cleaner interface. It includes features like Flex Mode, the Layers Panel, Advanced Grid, reusable sections, and connected content tools like Collections and the Content Library.

It matters because it helps teams build better websites faster, keeps designs consistent, and makes it easier to manage content across pages and devices.

E-E-A-T – E-E-A-T stands for Experience, Expertise, Authoritativeness, and Trustworthiness. It's a framework Google uses to assess the quality and credibility of content. By evaluating these factors, Google aims to ensure that users receive accurate, reliable, and helpful information in search results. This is especially important for topics that can significantly impact a person's life, health, financial stability, or safety.

Flex Mode – Flex Mode is a layout system in Editor 2.0 that lets page elements adjust automatically across screen sizes. It makes it easier to build responsive designs without manual resizing, so your site looks good on desktop, tablet, and mobile.

Global Design – Global Design is where you set styles like fonts, colors, and button styles for the whole site. It keeps everything consistent and makes it easy to update your site’s look in one place.

Geo Pages (GEOs) – Geo Pages are for businesses with a physical location that want to attract people in nearby towns. They help those businesses show up in search results outside their main location and bring more customers through the door.

Example : A dental office in New Rockbridge with a page targeting Family Dentist in Concord.

Inner Columns – Inner Columns are columns placed inside other columns. They give you more layout control when you need to layer or stack elements in more complex ways. Inner Columns are helpful for advanced designs that need extra flexibility, especially on mobile.

Layers Panel – In Duda’s Editor 2.0, the Layers Panel shows a list of all the elements on a page in a clear, top-to-bottom structure. It helps you see how everything is arranged and lets you quickly find and select parts of the page—even if they’re hidden or overlapping. This matters because it makes editing faster and easier, especially on pages with complex layouts.

Mega Menu - A large, expandable menu that displays multiple options in a single, organized layout. Unlike traditional dropdown menus, which list items in a single column, mega menus present categories and subcategories side by side, making it easier for users to navigate complex websites.

Section – A Section (formerly called a row) is a full-width block used to build a page in Editor 2.0. You can start with a blank section and add your own layout and content, or you can use a Designed Section, which is a pre-built section with styling, layout, and sample content already in place. Both types let you add elements like text, images, and buttons, but Designed Sections save time and ensure consistency by giving you a polished starting point. Sections are the foundation of every page, and using Designed Sections helps speed up builds and maintain a professional look without starting from scratch.

Service Area Pages (SAPs) – SAPs are for businesses that travel to their customers instead of having customers visit them. These businesses serve areas within a set driving distance. SAPs help them show up in local search results for towns they serve—even if they don’t have a physical location there.

Example: An HVAC company offering AC Repair in Berwyn.

Slug (Page URL) – A slug is the part of a web address that comes after the main domain and points to a specific page. If the page is part of a section, the slug may include both the section and the page—this is called a nested slug. Slugs help organize the site, make URLs easy to read, and improve how search engines understand the site structure.

Slug Example: foo.com/roof-repair
Nest Slug Example: foo.com/services/roof-repair → Nested slug (shows "Roof Repair" is under "Services")

Stacking – Stacking refers to how content shifts into a vertical layout when viewed on smaller screens like tablets or mobile devices. For example, two columns that appear side by side on desktop will “stack” one above the other on mobile.

Stacking ensures your website stays readable and usable across all screen sizes. It helps content adjust naturally without needing to redesign each layout for every device.

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

SAPs vs. GEOs

Mon, 05 May 2025 20:24:55 GMT

The Difference Between Service Area Pages (SAPs) and Geo Pages (GEOs)

When building websites for local businesses, it’s important to use the right type of location-based page. There are two options: Service Area Pages (SAPs) and Geo Pages (GEOs) . They serve different types of businesses and cannot be used together.

Here’s the key difference:

Service Area Pages are for businesses that travel to their customers . These pages help the business show up in local search results for the towns they serve—even if they don’t have an office there.
Geo Pages are for businesses with a physical location . They help bring in people from nearby towns who may travel to that location.

Both help improve local visibility and SEO, but they work in different ways. This post will walk you through how each works, how they’re built, and what teams need to know.

Service Area Pages (SAPs)

What Are Service Area Pages?

Service Area Pages are for businesses that travel to their customers, like HVAC companies or landscapers. Each page is designed to show up in search results for a specific service in a specific town—for example, “AC repair in Berwyn.”

SAPs help these businesses reach more towns across their full service radius.

Key Details

Must have both Local Ranking and Hibu One
Can target up to 150 cities per keyword
Radius can be up to 40 miles (default is 25)
Clients can select or deselect specific towns
Cannot be sold if the client has or is purchasing Geo Pages
Pages are dynamically generated using Duda Collections
Written with AI-generated copy that is reviewed, edited, and connected by a content writer
Breadcrumbs not displayed
URL format: / contact /keyword -service-area /city-st
Copywriter adds bolded information

How They Work

Each SAP set is powered by a Parent Service Area Page (PSAP), which works like a master template. Writers create a version of the core page content specifically for the PSAP.

Then, for each target city:

The site automatically replaces generic references like “Philadelphia area” with the exact city name (e.g., “Berwyn, PA”)
Updates are made to the PSAP only, and those changes push out to all city-specific pages

SEO & EEAT Benefits

Localized metadata and content improve visibility in town-specific searches
Dynamic text insertion ensures accurate geographic targeting
Centralized management ensures content stays professional and on-brand

How They Avoid Duplicate Content

Each page has a unique URL and geographic reference
Dynamic insertion makes each page read naturally for that city
Pages are not copied; they are generated from a single, well-maintained parent page

Navigation and Indexing

SAPs are not in the top nav
Dynamically listed on the Contact Us page
Under the Contact Us global navigation, a sub-nav labeled "Serving Area" anchors to the section where the full list of SAPs appears below the contact information
The Serving Area section and anchor are included as a hidden section on the Contact Us page
Also linked via a footer link labeled “Surrounding Areas”
Service Area Pages do not display breadcrumbs

Writing Guidance for SAPs

SAPs are for businesses that travel to the customer. The copy should make it clear that the business serves the town—but is not located there.
Use language that reflects the business travels to the customer.
Encouraged phrasing:
“Proudly serving the Berwyn community and the surrounding areas for over 25 years.”
“Offering trusted [service] throughout Berwyn, Gladwyne, and nearby towns.”
“We come to you — serving homes and businesses across the greater Berwyn area.”
Avoid:
Any wording that implies a physical office in that city
Phrases like “Located in [City]” — unless it's the business’s actual location

Editing and Support

Clients can add or remove individual towns at any time by contacting support
Content changes are made to the parent page, not individual city pages

Metadata

Title tags are currently generated automatically
If there is an error, the formula needs to be changed; the tags cannot be changed individually
If the formula needs to be changed, endure that what is generated is in the following format:
Keyword | City, ST | NOB
e.g.: Basement Remodel | Boonville, IN | ACE Construction & Roofing
Meta descriptions are generated automatically and updated by QAE
if the generator fails, the descriptions can be added manually:
Primary CTA [NOB] for your specific keyword phrase, specific keyword phrase, specific keyword phrase. (as used on homepage meta description)
e.g. Contact ACE Construction & Remodeling for your basement remodels, attic renovations, and whole-home remodeling services.

Gallery Section

If a gallery is included, it uses the same images and description as the core service page. This keeps things consistent and builds trust through real examples of the business’s work.

Geo Pages (GEOs)

What Are Geo Pages?

Geo Pages are location-specific pages for businesses that operate from a fixed location. They are designed to attract customers from surrounding towns who are willing to travel to the business. For example: “family dentist in Bexley.”

GEOs focus on getting people to come to the business , not the other way around.

Key Details

Up to 4 0 Geo Pages per business
Must have Hibu One
Cannot be sold if the client has or is purchasing SAPs
Written with AI-generated copy that is reviewed and edited by a content writer
Pages include location-specific SEO in title tags, meta descriptions, H1s, and body content
URL format: /contact/keyword-city-st
Breadcrumbs not displayed
Linked from the Contact Us page or Location Category Landing Page (if the client has Additional Locations)

How They Avoid Duplicate Content

Each page is custom-edited to reflect the specific town it targets. Copywriters make sure each Geo Page:

Uses the correct geographic name
Includes language like “While we are located in [HQ town], we also serve customers in [Geo town]”
Does not mislead users into thinking the business is physically located in the target town

SEO & EEAT Benefits

Improves visibility in local search results for surrounding towns
Builds trust by clearly stating service reach
Supports Google’s E-E-A-T guidelines by showing experience, authority, and transparency

Navigation and Indexing

Not shown in the top navigation
Linked through the Contact Us page or a Location landing page
Also accessible via a footer link labeled “Areas Served”
Structured for easy indexing by search engines

Metadata

Title tags are currently generated automatically
If the formula needs to be changed, endure that what is generated is in the following format:
Title Tag: Product / Service Keyword | City, ST | NOB
e.g. HVAC Repairs| Drexel Hill, PA | Joe's Plumbing
e.g. Roadside Assistance | Kent County, DE | Joe's Towing
Meta descriptions are generated automatically and updated by QAE
if the generator fails, the descriptions can be added manually:
Primary CTA [NOB] for your specific keyword phrase, specific keyword phrase, specific keyword phrase. (as used on homepage meta description)
e.g. Contact ACE Construction & Remodeling for your basement remodels, attic renovations, and whole-home remodeling services.

Writing / Editing Guidance for GEO Pages

Geo Pages are for businesses with a physical location looking to reach customers in nearby towns. The content must clarify where the business is actually located while highlighting the surrounding areas it serves.
Use language that makes it clear the business is physically located elsewhere but serves nearby areas.
Encouraged phrasing:
“While our office is located in New Rockbridge, we proudly serve clients in Concord.”
“With 3 locations in Cranston, Warwick, and East Greenwich, we’ve been serving the Kent County area for over 25 years.”
“Our main office in Portsmouth supports customers in Londonderry and beyond.”
Avoid:
Any language that could mislead users into thinking there’s an office in the GEO city
Using a town name without qualification (e.g., “Located in Concord” when that’s not true)

Gallery Section

If included, the gallery pulls from the business’s main service page. It uses even rows and 4px spacing for a clean layout. This ensures visual consistency and reinforces credibility by showing real work examples.

Quick Comparison Table

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

How to Update ROS Request CTAs

Tue, 29 Apr 2025 20:16:54 GMT

How to Update Run-of-Site Request CTA Buttons and Headlines in Editor 2.0

This post covers two important processes for updating Request CTAs:

Part 1 is for Copywriters and Designers — setting up the Request CTA at the start of a site build.
Part 2 is for Customer Service and Amends Teams — updating an existing Request CTA after the site is live.

You’ll notice there are several steps. That’s because we're using collections and connected data to control buttons, headlines, and links across the entire site.

Why this matters:

It's much faster than updating every button, link, and page one-by-one.
It keeps the website consistent for users and search engines.
It makes future updates easier and faster for anyone working on the site.
It reduces the chance of broken links or mismatched CTAs.
It sets us up for scalable site management as we grow.

Both parts must be done carefully and in the exact order shown to make sure everything stays connected and working properly.

Part 1: Setting Up the Request CTA at the Start of the Build

(for Copywriters and Designers)

In Part 1 , you’re laying the groundwork. You are using collections and connected data to make sure the CTA buttons, links, and headlines are consistent across the entire site.

Even though there are a few steps, it’s still much faster than manually updating dozens of buttons and pages later. Following these steps now makes future changes quicker and protects site quality.

NOTE: Example CTA for the following is Request Free Estimate

Step 1: Rename the Request Form Page (update page name / nav label)

Go to the page named Request Form Page .
Rename it to Request Estimate (do not include "Free").

Step 2: Update the Page Slug

Change the page slug from request-form-page to request-estimate .

Step 3: Update the Button Collection (update button labels and link)

Find the Button Collection .
Click the pencil icon next to the eyeball to edit.
Update these 3 button fields:
Desktop/Tablet Button
Mobile Button
Form Button
Overwrite Request CTA with Request Estimate (no "Free" in the button text).
Close the edit window.
Then:
Find the old /request-form-page link.
Click the copy icon .
Update the link to /request-estimate .
Update the Form Title field:
Set it to Request Estimate

Step 4: Update the Form Collection (updates superhero form title)

Find the Form Collection .
Click the pencil icon next to the eyeball to edit.
Update the Form Title field
Set it to Request Free Estimate (this is where "Free" is added).

Step 5: Update the Hero Collection (updates request form page thin hero H1)

Find the Hero Collection .
Locate the top row, first position .
Update the link:
Change from /request-form-page to /request-estimate .
Click the pencil icon .
Update the related H1 field
Set it to Request Free Estimate (this is where "Free" is added).

Part 2: Updating the Request CTA After the Site is Live

(for Customer Service and Amends Teams)

In Part 2 , you're updating a live site that already uses connected data . Because the site is set up correctly, you only need to make changes once in each collection — no need to click through every page. This keeps updates quick , accurate , and future-proof .

Example Update:
Changing from Request Free Estimate → Get a Free Quote

Step 1: Rename the Request Form Page (update page name / nav label)

Find the existing Request Estimate or Request Free Estimate page.
Rename it to Get a Quote (no "Free" in the page name).

Step 2: Update the Page Slug and add 301 Redirect

Change the slug from request-estimate to get-a-quote .
If the site is live, you’ll see a prompt to add a URL redirect. Click Add URL Redirect to confirm.
If the site is not live, you can skip the redirect — it's not needed.

Step 3: Update the Title Tag and Meta Description

While still in the page settings:

Title Tag: Replace Request estimate with Get a quote .
Meta Description: Replace Request estimate with Get a quote .

Step 4: Update the Button Collection (update button labels and link)

Find the Button Collection .
Click the pencil icon next to the eyeball to edit.
Update these 3 button fields:
Desktop/Tablet Button
Mobile Button
Form Button
Overwrite Request Estimate with Get a Quote (no "Free" in the button text).
Close the edit window.
Then:
Find the old /request-estimate link.
Click the copy icon .
Update the link to /get-a-quote .

Step 5: Update the Form Collection (updates superhero form title)

Find the Form Collection .
Click the pencil icon next to the eyeball to edit.
Update the Form Title field
Overwrite Request a Free Estimate with Get a Free Quote (this is where "Free" is added).

Step 6: Update the Hero Collection (updates request form page thin hero H1)

Find the Hero Collection .
Locate the top row, first position .
Update the link:
Change from /request-estimate . to / get-a-quote
Click the pencil icon .
Update the related H1 field
Set it to Get a Free Quote (this is where "Free" is added).

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Editor 2.0 - Size and Units

Wed, 09 Apr 2025 17:14:36 GMT

Editor 2.0 - Size and Units

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.

What is a View Point?

Key Takeaways

Why This Matters During Site Builds
Viewport-based units like vw (viewport width) and vh (viewport height) are often used for responsive design
To use them correctly, you need to understand what a viewport actually is
What Is the Viewport?
The viewport = the visible area of your browser where your site is displayed
It excludes browser UI like tabs, bookmarks, and the address bar
It’s the space your website actually renders in
How to Check Your Viewport Size
Visit a tool like whatsmyviewport.com to see your current dimensions
Use Developer Tools in your browser:
Right-click → Inspect (in Chrome)
Resize your browser window to see live dimensions update
Look at the top-right corner of Dev Tools for exact numbers
Zoom Impacts Viewport
If you're zoomed in (e.g. 125%), your viewport shrinks
Always check if you're zoomed in when testing layout and spacing
Be aware of zoom settings when previewing responsive behavior
Editor vs. Live Site
In the Editor, your viewport includes:
The top bar
The side panel
On the live site, these elements are not present
This can cause layout differences between the Editor and the site preview
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Width and Height (VW and VH)

Key Takeaways

What They Are
Viewport Width (vw) and Viewport Height (vh) are relative units
They size elements based on the browser's visible area , not the element’s parent
1vw = 1% of the viewport’s width
1vh = 1% of the viewport’s height
How They Compare to Percentages
A percentage unit references the nearest parent element
Example: 50% width = 50% of the column it’s in
A viewport unit references the entire browser window
Example: 50vw = 50% of the viewport width , regardless of the parent container
Live Example Recap
Left Image = 50% width → scales relative to the column
Right Image = 50vw → scales relative to the viewport
The right image is larger because the viewport is wider than the column
Full Bleed Impacts Scaling
If full bleed is off , the viewport is limited (e.g. to 1200px max)
If full bleed is on , the content spans the full width of the screen , increasing the scale of elements using vw
Viewport Height (vh) Behavior
vh references the height of the visible browser window
Example: 50vh = 50% of the viewport’s height
As you shrink or expand the browser vertically, the element resizes
Height Limitations with Percentages
Most widgets and layout elements don’t allow percentage-based height
This is intentional to avoid layout issues
If height controls are needed:
Use pixels or
Use viewport units (vh) for responsive behavior
Or use auto , which will be covered later
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

A is For Auto

Key Takeaways

What Auto Means
Auto is listed at the bottom of the unit dropdown (denoted by a capital A )
It tells the element to resize automatically based on its content
The element will only occupy as much space as it needs to fit what’s inside it
How It Works
Example: An inner column set to auto height will shrink or expand to match the height of its widgets
Auto does not reference a parent element or the viewport
Instead, it looks inward , at the content inside
How It Differs from Other Units
Unlike percentage or viewport units , auto does not calculate size based on external containers
It calculates based on content only
Ideal for containers where you don’t want to manually set a fixed size
When to Use Auto
Use when you want layout elements (like columns) to wrap tightly around content
Helps avoid unnecessary space around elements
Especially useful when working with dynamic or variable content
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Min and Max

Key Takeaways

Where to Find It
Go to the Size property
Click More Size Options to expand additional settings
These include:
Min width / Max width
Min height / Max height
Not All Elements Support All Options
The options you see will depend on the type of element selected
Example:
Image widget : Supports both min/max width and height
Inner column : Only supports min/max width (not height)
Container elements (like grids, columns) won’t have full sizing control
What Min and Max Do
Min values prevent elements from shrinking too small
Max values prevent elements from growing too large
These limits help maintain consistent appearance across screen sizes
When to Use Min/Max
Ideal for images that scale with browser resizing
Example:
Set min width to keep small images readable
Set max width to prevent low-res images from stretching and getting pixelated
Live Example Recap
Beanstalk image:
Width set to percentage to allow it to resize
Min width = 180px → never shrinks below this
Max width = 250px → never grows beyond this
Height is set to auto , so it adjusts based on width
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Editor 2.0 - Flexbox: Columns and Inner Columns

Wed, 09 Apr 2025 13:28:47 GMT

Editor 2.0 - Flexbox: Columns and Inner Columns

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.

Stacking Direction

Key Takeaways

Why This Matters for Your Site
Columns in Editor 2.0 use Flexbox to control how content is arranged
Flexbox determines how widgets inside a container (like a column) stack—either horizontally or vertically
Knowing how Flexbox works helps you control layout more precisely at every breakpoint
What Flexbox Is
Flexbox = short for Flexible Box Layout Module
It’s a one-dimensional layout system , meaning:
You can stack items in a row (horizontal)
Or stack items in a column (vertical)
But not both at the same time within a single container
How to Control Flexbox in the Editor
Select a column
Go to the Layout property in the Design Panel (right-hand side)
Look for Stacking Direction
Set to horizontal : elements appear side-by-side (row)
Set to vertical : elements appear top-to-bottom (column)
Add or duplicate widgets to see them stack according to the chosen direction
What Flex Items Are
Any element inside a Flexbox container (like a column) is called a flex item
The stacking direction applies to all items inside that container
You can’t mix row and column directions in the same container using basic Flexbox
Common Use Case
Want two items side-by-side, and two more beneath them?
You'll need to nest layout elements (like adding columns inside a grid or other container)
A single column can’t handle that mix, since Flexbox only stacks in one direction at a time
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Aligning Elements within a Column

Key Takeaways

Key Properties to Know
Horizontal content alignment and vertical content alignment are Flex container properties
These control how all items inside a column are positioned
Behavior depends on the column’s stacking direction :
If stacking is horizontal , horizontal alignment has more options
If stacking is vertical , vertical alignment gets more control
Alignment Options Include
Left / Center / Right (for horizontal stacking)
Top / Middle / Bottom (for vertical stacking)
Space Between – evenly splits space between items
Space Around – adds equal space around each item
Understanding Space Distribution
Flexbox doesn’t just push elements—it also manages leftover space
For example:
Space between = equal space only between items
Space around = equal space on all sides of each item
This can make spacing between items appear double
Individual Alignment
You can override container alignment by selecting an individual element
In the Design Panel , use the Alignment property to adjust placement for that element only
Example:
Shape 1 at the top
Shape 3 at the bottom
Important: if you change alignment again at the container level, it will reset any specific alignment on individual items
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Wrap

Key Takeaways

Why This Matters During Site Builds
Wrapping controls how elements behave when there's not enough space in a row
Helps maintain proper spacing and alignment across different screen sizes
Prevents elements from being squished or overflowing in tight layouts
Where to Find It
Go to the Layout section in the Design Panel
Two options:
No Wrap (default): forces all elements into one row
Wrap : allows elements to move to a new row if needed
What Happens with No Wrap
Elements stay on a single row no matter how many are added
If total width exceeds 100%, all items shrink to fit
Example:
10 elements at 10% width = 100% → fits perfectly
Add an 11th element → total = 110% → elements shrink to squeeze in
What Happens with Wrap
Elements keep their assigned size
Once space runs out, new items drop to the next row
This avoids layout issues on smaller screens or with many widgets
Align Rows (Only with Wrap On)
When Wrap is enabled, the Align Rows property appears
Align rows vertically across the column:
Options include Top , Middle , Bottom , etc.
Helps keep row spacing consistent even when multiple rows are created
Why Use Wrap
Keeps layout cleaner
Avoids crammed designs
Gives elements room to breathe while respecting your set widths
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Editor 2.0 - Layouts Elements & Layers Panel

Wed, 09 Apr 2025 12:03:25 GMT

Editor 2.0 - Layout Elements & Layers Panel

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.

Layout Elements (Containers)

Key Takeaways

What Are Widgets?
Widgets are pre-designed elements you can add to your site
Examples include:
Button
Icon
Text block
Contact form
Map
Where to Find Layout Elements
Open the Widgets Panel
Scroll halfway down to find the "Layout Element" category
Layout elements include tools like columns and grids
What Makes Layout Elements Different
Layout elements act as containers or wrappers
They can hold:
Basic widgets
Other layout elements
This makes them useful for:
Structuring your site
Grouping content
Creating responsive designs
Why Layout Elements Matter
Help build more complex, flexible designs
Let you organize widgets and keep structure clear
Control how elements behave and align at different breakpoints
Key Concept
Think of widgets as the content
Think of layout elements as the containers that hold and organize that content
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Layers Panel

Key Takeaways

What It Is
Click the stack icon on the upper left to open the Layers Panel
It gives a visual overview of your site's structure
Useful for understanding how widgets and layout elements are organized
What It Shows
Not a one-to-one match with actual HTML
It's a high-level view of how elements are grouped and nested in the editor
Great for navigating complex designs with many sections and widgets
Features and Functions
Click any item in the panel to highlight it in the editor
Rename any element by double-clicking its name
Helps clarify relationships, like:
A section is the parent of a column
A column can be the parent of multiple widgets inside it
Why It Matters
Understanding parent-child relationships helps with layout and design decisions
Knowing how elements nest improves control over styling and structure
This is key when using columns or grids to build responsive pages
Other Ways to Navigate
Hover over the element name above the floating bar to open a breadcrumb trail
You can also use the breadcrumb at the top of the Design Panel to jump between layout levels
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Editor 2.0 - Breakpoints

Tue, 08 Apr 2025 23:37:35 GMT

Editor 2.0 - Breakpoints

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.

Let’s get into it.

What is a Breakpoint?

Key Takeaways

What Is a Breakpoint?
A breakpoint = a screen size range
Websites adjust layout based on screen size, not device type
Editor 2.0 Breakpoints
Three default breakpoints:
Desktop (main breakpoint)
Tablet
Mobile
Hover over tablet or mobile icons to see pixel ranges
These ranges determine when the layout changes
Why Breakpoints Matter
There are thousands of device types
Your site must adapt to many screen widths
Example: A laptop with a 1000px screen will show the tablet layout
How Editing Works
Start with the desktop view (marked by a crown icon)
Changes to desktop cascade to tablet and mobile
You can customize each view individually if needed

Rearranging Columns

Key Takeaways

What Is a Layout?
Layout = how elements (text, images, columns) are arranged on a page
Layout changes affect containers (like columns) that hold widgets
Editing Layouts by Breakpoint
You can rearrange layout independently for Desktop, Tablet, and Mobile
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint
How to Rearrange Columns
Click a column to bring up a floating toolbar
Use the toolbar to move columns left or right
Editing Rules
Changes made in the main (desktop) breakpoint cascade to others only if those breakpoints haven’t been edited yet
Once you edit a layout at a specific breakpoint, it no longer inherits layout changes from the main breakpoint
Tablet and Mobile layouts do not affect each other
Future layout edits from Desktop won’t impact breakpoints that were already customized
Real Example
Move a column in Desktop → change appears in Tablet and Mobile
Move the same column in Tablet → change stays in Tablet only
Move the column again in Desktop → Tablet version stays unchanged

Reordering Elements within a Column

Key Takeaways

What You Can Do
You can reorder elements within a column (like image widgets) at the individual breakpoint level
This lets you adjust how content appears on Tablet or Mobile without changing Desktop
How It Works
Select an element (like an image)
Use the floating bar to move the element up or down
These changes are only applied to the current breakpoint
Editing Rules
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
If you reorder elements within a column at the tablet breakpoint, that change will not be reflected in desktop or mobile
The main breakpoint (desktop) will still show the original arrangement
Real Example
Move an image down in the Tablet view → only Tablet reflects the change
Switch back to Desktop → layout stays the same
Each breakpoint can have its own internal content order

Layout Properties for Sections

Key Takeaways

Design Panel Layout Options
Select a container (like a section or column) to see Layout options in the design panel
The design panel appears on the upper right side of the editor
On the main breakpoint , you can:
Set a fixed width (e.g., contain content to 1200px)
Enable full bleed to stretch content across the full width of the screen
Layout Behavior on Tablet and Mobile
On smaller breakpoints, you can control how columns display within a section
Three layout options:
Left to right (default)
Grid layout
Each column as a row
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint
Changes made to layout settings at Tablet or Mobile do not affect Desktop or each other

Layout Properties for Columns

Key Takeaways

What Columns Are
Columns are containers that hold other elements (like images and text)
Similar to sections, you can adjust how columns behave at different breakpoints
How to Edit Column Layout
Click on any column to access layout options in the design panel
From here, you can set things like stacking direction (e.g., vertical vs. horizontal)
Breakpoint-Specific Edits
Layout changes made to a column only apply to the current breakpoint
For example, a layout change made on mobile will not affect tablet or desktop
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
But once you adjust the column layout on a specific breakpoint, it overrides future changes made from the main breakpoint

Additional Edits at the Individual Breakpoint Level

Key Takeaways

What You Can Adjust
Beyond layout, you can also customize:
Margins and padding (spacing around elements)
Element sizes
These changes apply only to the current breakpoint
You can fine-tune spacing and size for Tablet or Mobile without affecting Desktop
Design Panel Tips
In the tablet or mobile breakpoints, the design panel shows a small device icon next to each editable property
This icon tells you where the change will be applied
Some properties apply only to the current breakpoint
Others may apply to multiple breakpoints
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints

Deleting and Hiding Elements

Key Takeaways

When to Hide Content
You might want to show less content on smaller screens (like mobile)
This helps create mobile-friendly layouts without overwhelming the user
Important Difference
Deleting an element from any breakpoint removes it from all breakpoints
Do not delete if you only want to remove the element from one view
Instead, use the "Hide on this device" option
How to Hide Elements
Right-click the element and select "Hide on this device"
The Layers Panel will open to show where the element is located
A hidden eye icon appears next to the element to confirm it’s been hidden from that specific view
Good Practice
Use the show/hide on device feature to tailor your design per breakpoint without removing content entirely
Editing Rules
Edits made from the main breakpoint get inherited by the tablet and mobile breakpoints
Rearranging the order of columns at the individual breakpoint level does not affect other breakpoints
Layout changes applied at the individual breakpoint level become more specific, meaning new layout changes applied at the main breakpoint will be disregarded by the modified breakpoint

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Getting Started With Editor 2.0

Mon, 07 Apr 2025 19:47:31 GMT

Getting Started with Editor 2.0

Editor 2.0 gives you powerful tools to build and manage your website with more control, flexibility, and ease.

Before you dive into editing, it helps to understand how the interface is structured and what each part of the editor does.

Below, you'll find quick overviews and key takeaways from each major area of the editor. Use this guide to get familiar with the workspace and speed up your workflow.

Editor 2.0: Tour of the Four Main Components

Key Takeaways

Top Toolbar
Displays logo, brand colors, and tools
Includes screen size icons (breakpoints) for Desktop, Tablet, and Mobile views
Tooltips explain each breakpoint's function
Edits in Desktop view apply across all sizes, but can be customized per breakpoint
Breakpoints are based on screen size, not specific devices
Side Panel (Left)
Controls site-wide settings
Use to update theme colors, manage page structure, and assign a domain
Includes the Layers Panel :
Shows a list of all elements on the page
Lets you hide/unhide or rename items
Design Panel (Right)
Controls styles and visual settings
Adjust fonts, button styles, and logo behavior on scroll
Canvas (Center)
Main workspace for building your page
Add images, text, and layout elements here

Editor 2.0: Top Bar

Key Takeaways

Page Indicator (Left Side)
Shows which page you're editing
Click to switch between pages using a dropdown menu
Breakpoint Icons
Let you preview and edit your site on:
Desktop (1025px and above)
Edits in Desktop view apply globally, unless customized per screen size
Tablet (768px to 1024px)
Mobile (767px and below)
Info & Tools Section
Info icon gives access to:
Site name, status, and editor version
Preview links and site stats
Client details
Language settings for the editor
Save Indicator
Gray check = unsaved changes
Three dots = saving in progress
White check = all changes saved
Undo / Redo
Use arrows to revert or repeat recent actions
Preview Mode
Toggle to preview your site with unpublished changes
View how your site looks across devices in real time
Publish Button
Pushes updates live to your chosen destination
Shows “Republish” if the site has been published before

Editor 2.0: Side Panel

Key Takeaways

Side Panel Overview
Your main control center for site structure, design, and functionality
Click any icon to expand the corresponding panel
Key Panels in the Side Panel
Layers
Shows a visual hierarchy of all page elements (widgets, columns, sections)
Allows toggling visibility by breakpoint
Site Theme
Set global styles for buttons, text, images, backgrounds, and navigation
Ensures consistent design across the entire site
Pages
View, reorder, and add pages
Helps organize site structure for better user flow
Widgets
Drag-and-drop elements like text boxes, images, and galleries
Use this panel to build page sections and add features
Content Library
Manage site assets (images, videos, docs)
Use connected data to sync external content across widgets
Blog
Add and manage blog posts
SEO & Settings
Manage SEO, site icons, domains, SSL, redirects, backups, and more

Editor 2.0: Design Panel

Key Takeaways

Accessing the Design Panel
Click any element, then select Edit Design
Or click the Design Panel icon (top right)
Opens on the right side, with live preview of changes
Context-Specific Options
The panel adapts based on the selected element (section, column, widget, etc.)
Sections
Primary layout blocks
Customize:
Full bleed
Column spacing
Section height
Columns
Used for horizontal content layout
Customize:
Content alignment
Element spacing
Column width
Inner Columns
Allow nested layouts
Offer advanced controls like:
Size
Width and height
Layout flexibility
Advanced Grid Settings
Control number of rows/columns, gaps, and alignment
Best for two-dimensional layouts
Columns/inner columns are better for one-dimensional control
Widget-Level Styling
Customize each widget individually
Example: buttons can be styled with:
Colors
Hover effects
Typography
Key Design Properties
Alignment : Set element position (left, center, right, stretch)
Stacking & Wrapping :
Choose vertical/horizontal stacking
Enable wrap (when stacking horizontally)
Full Bleed : Available only for sections; lets content span screen width
Spacing :
Vertical: usually in pixels
Horizontal: usually in percentages
Margin : space outside the element
Padding : space inside the element
Size :
Sections : adjust height (pixels only)
Columns : adjust width (percentages)
Inner Columns : adjust both height and width
Size settings vary by element type

Editor 2.0: Canvas

Key Takeaways

What the Canvas Is
Main area where you build and design your site
Click to select, drag to move, and edit content directly on the page
Selecting Elements
Hover to see a blue outline showing what you’re about to select
Click to select an element and access its settings
Breadcrumb Navigation
Appears at the top-left of the element container and design panel
Shows the hierarchy (e.g., section > column > widget)
Helps you understand where the element lives within the layout
Layers Panel
Visual map of your site’s HTML structure
Use it to select, move, or reorganize elements easily
Helps with navigating complex layouts
Moving Elements
Use arrow icons in the floating panel or drag elements directly on the canvas
Blue indicator shows position relative to siblings
Section fill indicator shows where you're placing it within a parent
Box Model
Canvas treats each element as a "box"
Layout is defined by content, padding, border, and margin
Helps support responsive design across devices
Nesting Elements
Build complex layouts by nesting containers
Move one container to move all nested items with it
Useful for keeping grouped content together (e.g., text, buttons, images inside columns)
Styling Elements
Use the Design Panel to style containers and elements:
Adjust size, spacing, borders, backgrounds, and position
Columns use Flexbox for one-dimensional layout (row or column)
Advanced Grids use Grid Layout for two-dimensional control (rows and columns)

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Image Best Practices for Hibu Websites

Tue, 25 Mar 2025 19:04:15 GMT

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.

Use High-Quality, Web-Friendly Images (Proper Size & Format)

Make sure your images are large enough and clear on all devices. For hero images, aim for a width of 1600–1920 pixels to keep them sharp on desktop screens.

Our website platform will handle the rest by automatically creating optimized versions for tablets and phones. Just upload high-quality originals — up to 15MB per image is fine.

Use the right file formats:

JPEG / JPG for most photos
PNG for graphics, logos, or anything with transparency
WebP is also supported automatically behind the scenes

Do not upload HEIC files (the default format for iPhone photos). These are not fully supported and may not display correctly on your site.

Tip for iPhone users:
To avoid HEIC files, go to:

Settings > Camera > Formats
Choose Most Compatible — this will save future photos as JPEG instead of HEIC.Or, you can export or email the photo to yourself , which often converts it to JPEG automatically.

This setup gives your site crisp, professional-looking images without needing to resize or compress anything yourself.

Avoid blurry, dark, or pixelated photos. Clear, well-lit images make your business look more credible and trustworthy.

Use Descriptive File Names

Name your image files in plain language instead of leaving them as random camera filenames.

For example:

leaky-faucet-repair-before.jpg
Not IMG_1234.jpg

Follow these tips for better file names:

Avoid spaces — use hyphens instead (e.g., team-photo.png, not team photo.png)
Use keywords that describe what’s in the photo

Descriptive file names help:

Keep your images organized
Boost SEO by telling search engines what the image shows
Make it easier for our Hibu website build teams to group related photos on the right page or gallery

These small steps make your images easier to work with — for both search engines and the team building your site.

Showcase Before-and-After Work

One of the best ways to demonstrate your quality is through before-and-after photos of projects. Home improvement and repair services benefit greatly from this. Show the:

“Before” — the problem or original condition
“After” — your completed work

For example, a lawn care company might show a patchy, weed-filled lawn next to the same yard looking lush and green after treatment. This kind of visual proof shows the results you deliver and highlights your expertise.

Tips for effective before-and-after images:

Take photos from the same angle and distance for easy comparison
Keep lighting consistent between both shots (don’t take one at night and the other in daylight)
Use a clear, matching file name to keep them grouped together (e.g., white-house-before.jpg and white-house-after.jpg )

Done well, before-and-after photos offer a strong visual impact that can help convince visitors to choose your business.

Include Team Photos and Action Shots

Put a human face on your business. Include photos of your team — whether it’s a group shot of the crew or candid images of your employees on the job. This helps create a personal connection and builds trust.

For example:

A plumbing company could show plumbers standing by the company van
A landscaper might show the crew planting a tree for a client

Action shots of your staff at work are strong content:

A roofer nailing shingles
An HVAC technician installing a unit
A cleaner scrubbing a countertop

These images show that real, knowledgeable people are behind the service.

Tips for team and action shots:

Keep the tone professional but friendly
Have team members wear company-branded shirts or uniforms , if available
Make sure everyone looks approachable (smiling or focused, not scowling or camera-shy)
Avoid overly posed or fake-looking shots — candid but clear images often feel the most authentic
Take photos in landscape mode (left to right), not portrait (up and down), so they display better on the site

Hibu does not recommend using a team photo as the main hero image , since we typically display text over that area. A photo like plumbers standing by a company van is considered “busy” and can make the text difficult to read.

Instead:

Use your team photo next to the introduction text on the home page
Feature it again on your About Us page

By featuring your actual team in the right places, you make your business feel more trustworthy and relatable — without hurting readability or design.

Maintain a Consistent Style and Orientation

Strive for a cohesive look across all your website images. Consistency helps your site feel polished and professional.

Here’s what to keep consistent:

Orientation and aspect ratio (e.g., all images in landscape mode (left to right)
This is especially important for hero images. If a photo is taken in portrait mode (up and down) , we most likely won’t be able to use it as a hero. Hero sections are wide, so portrait images will either get cropped awkwardly or stretched, making them unusable or distorted. Always take hero candidates in landscape mode (left to right) to fit the design.
Visual style (similar lighting, color tone, brightness, and contrast)
Cropping format (e.g., all headshots as vertical rectangles or squares)
Examples:
For a team page, crop all headshots to the same shape and size for a clean grid
In a gallery, avoid mixing small vertical photos with large horizontal panoramas

This doesn’t mean every photo must look identical — just that they should feel like they belong together. A consistent visual style supports your branding and makes your site easier to view and navigate.

Pay Attention to Lighting

Lighting can make or break your images. Shoot in good light so your subjects appear bright, clear, and color-accurate.

For best results, use natural light whenever possible:

Indoor shots: Take photos near windows or open doors to let in daylight. Turn off harsh overhead fluorescents that can distort colors.
Outdoor shots: Morning or late afternoon light is softer and more flattering than midday sun.

Avoid common lighting issues:

Extreme backlighting – when the subject is in shadow because of bright light behind them
Harsh midday sun – can cause strong shadows or overexposed highlights
Built-in phone flash – often creates glare, dark shadows, and unnatural tones

If the scene is too dark:

Open curtains
Turn on extra lights (preferably “white” bulbs, not yellow)
Use a portable work light if needed for job site photos

The goal is an evenly lit subject — you want clear detail, not areas lost in shadow or washed out by brightness.

Good lighting helps your images look clean, sharp, and professional — just like the quality of work you provide.

Use Images Purposefully – Don’t Add Filler

Every image on your site should serve a purpose. Avoid adding photos just to fill space or decorate. If an image doesn’t support your content or message, it’s better to leave it out.

For example:

You don’t need to show 10 variations of the same fence or garden project — one or two strong images will do
If you don’t have a good photo of a specific service, it’s better to use a high-quality stock image than a blurry or poorly composed original

Before adding a photo, ask yourself:

Does this image help explain something?
Does it show something important?
Does it build trust with visitors?

If the answer is no, consider removing it.

By using images intentionally, your website will stay focused, clear, and more effective for your visitors.

Submit a High-Quality Logo

A great logo helps set the tone for your entire website. It conveys trust, professionalism, and gives our designers a strong foundation to build a clean, effective design. A poor-quality logo — one that’s blurry, pixelated, overly tall, or cluttered with extra text like a phone number or tagline — often results in a site that looks unprofessional or unbalanced.

Here’s what to submit for the best results:

The highest-quality version of your logo, ideally in PNG format (with a transparent background)
If available, include vector files like EPS or AI — these are the same file types used by companies that printed your truck decal, outdoor signage, or business cards
If a design company created your logo, they may have also provided a brand guidelines document (usually a PDF with rules for logo spacing, fonts, and colors) — please send that along too
Share all versions you have:
Light and dark versions
Horizontal and stacked configurations
Any with transparent backgrounds

The more options we have, the more flexibility our design team has to make your website look its best — across desktop, mobile, and everything in between.

Follow Basic Smartphone Photography Tips

You don’t need professional camera gear — modern iPhones and Android phones can take excellent photos if you use them right. Here are a few simple tips to help you get the best results:

Clean the lens before you shoot.
A quick wipe of your phone’s camera lens with a soft cloth can remove smudges that blur your photos. Since phones often sit in pockets, toolboxes, or glove compartments, the lens can easily collect dust and fingerprints. A clean lens can be the difference between a hazy shot and a sharp one.
Hold steady, or use support.
Camera shake is one of the most common causes of blurry images. Try to keep your hands still — brace your elbows on a table or against your body. Even better, set your phone on a solid surface or use a small tripod. You can also use the phone’s timer mode to avoid shaking the phone when you tap the shutter.
Avoid zooming in digitally.
If you need a closer shot, walk closer to the subject rather than using the phone’s zoom. Digital zoom crops the image and reduces clarity. If your phone has an optical telephoto lens, that’s fine — but many phones use digital zoom, which lowers image quality.
Ensure your subject is in focus.
Tap the screen where your subject appears — for example, on a person’s face or the item you’re highlighting. This helps the camera adjust focus and exposure. Most phones also allow you to lock focus and exposure by pressing and holding on the subject. This is helpful if you're composing the shot or trying to balance lighting.
Take multiple shots.
Don’t settle for just one photo. Take several from different angles — high, low, or from the side — and pick the best one later.
With digital photos, there’s no cost to taking extras, and one of the later attempts may have better lighting or composition.

Even small steps like keeping your hands steady or cleaning the lens can make a big difference in quality. Always review your photos on a larger screen when possible — what looks fine on a phone might reveal flaws on a desktop.

With a little practice, you’ll start to spot what works best. The goal is simple: show your business in the best light and help your images reflect the quality of your work.

These Photos Aren’t for You — They’re for Your Customers

Remember, every photo you upload should help the person visiting your website. Ask yourself:

Does this image help explain something?
Does it show something important?
Does it build trust with visitors?

If the answer is no, leave it out.

These images aren’t for your personal collection. They’re not for showing off your motorcycle, your dog, or your latest vacation — that’s what Facebook is for.

Your website photos should build trust in you , your business , and your services . They should help people feel confident choosing you over someone else. Use them to support your message, not distract from it.

When in doubt, keep it simple, relevant, and customer-focused.

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Pixel vs. Percentage Units in Web Design

Mon, 24 Mar 2025 19:26:05 GMT

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.

Pixel Units: Fixed and Inflexible

Pixels are absolute. A container set to 341 pixels will always be 341 pixels—on a large monitor or a small phone. Fixed widths don’t scale, which often leads to broken layouts or horizontal scrolling on smaller screens. You get exact control, but at the cost of flexibility.

Percentage Units: Flexible and Responsive

Percentages are relative. A container set to 95% width scales based on its parent container or browser window. This makes your layout fluid. It adapts automatically to screen size—without the need for extra media queries. Users get a better experience because the content flows naturally, looks balanced, and feels intuitive on any device.

What’s Changed with Editor 2.0

With the rollout of Editor 2.0 , we now have greater flexibility to control spacing and layout per device—no coding required . Users don’t touch CSS. Instead, everything is managed visually through the Design Panel in the Duda editor, allowing teams to:

Adjust padding and margin values for desktop, tablet, and mobile
Customize alignment and spacing for each screen size
Control how elements stack or shift between devices
Show or hide elements depending on the device

One important change to keep in mind : One important change to keep in mind: what used to be called rows are now referred to as sections. By default, new sections are not full-bleed. So when you're adding a new section, you’ll almost always want to switch it to full-bleed to match the rest of the site and keep everything consistent. If you forget, your section might look boxed in, misaligned, or narrower than it should.

All designed sections will already be set up correctly as full-bleed. This only applies when you add a new one manually.

Why This Matters

Spacing and sizing aren’t just visual preferences—they directly impact user experience and performance. Misaligned content, cramped sections, or layouts that don’t adapt to the device can make your site feel broken, especially on mobile. Visitors lose trust fast—and that means fewer conversions.

With Editor 2.0, we’ve equipped teams with intuitive tools to ensure every element looks and feels right on every screen. And thanks to percentage-based sizing, our layouts remain flexible and fluid—able to respond to whatever screen size they’re viewed on.

Here’s a simple rule of thumb:

Use pixels when you want fixed, consistent sizing:

Spacing (padding, margins)
Font sizes
Button sizes and tap targets
Inside containers or cards

Use percentages when you want things to scale with screen size:

Container widths
Column layouts
Gaps between columns
Full-width sections

Think of it like this:

Pixels = control
Percentages = flexibility

Use both to balance structure and responsiveness.

Bottom Line

Responsive design isn't just a feature—it’s a requirement. With the capabilities of Editor 2.0, our teams now have the power to make smart, device-specific layout decisions with ease. And by leaning into percentage-based sizing when flexibility is needed, we ensure every website feels just right, no matter where it’s viewed.

At Hibu, we build with responsiveness in mind—because great design meets people where they are.

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

How to Use the Contrast Checker

Fri, 21 Mar 2025 20:53:58 GMT

This Post has moved to The Hibu One Spec Site

Collection Site Build Time Study

Thu, 06 Mar 2025 17:27:46 GMT

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.

Key Differences: Initial Build vs. Editor 2.0 & Collection Site

What Writers See Today (Initial Build Setup)
Outside of the homepage and core page content, copywriters and QA are responsible for writing and populating:
H1s
Title Tags & Meta Descriptions
Callout & Coupon Copy
Motivating Factors
Superhero Dropdown Options
Request CTA Labels (e.g., "Request Estimate")
Core Page Content (displayed as one block of text)
Contact Us page section
Homepage Reviews section
Organizing page architecture
Since content is not centrally managed, any updates require manual edits across multiple pages.
What Writers Will See in Editor 2.0 & Collection Site
Writers will have more structured content upfront, including:
H1s (Primary headlines for SEO and UX)
Title Tags & Meta Descriptions (SEO essentials)
Callout & Coupon Copy
Motivating Factors
Superhero Dropdown Options (Form selections)
Request CTA Labels (e.g., "Request Estimate")
Core Page Content (now displayed as individual headlines and blocks of text)
Contact Us page section (structured separately)
Homepage Reviews section (structured separately)
Organizing page architecture
Design Constraints:
Thin heroes, request forms, and contact us forms, along with the right gutter design, must remain unchanged. Design updates can include background color and font changes, but adjustments such as realignment, form layout changes, background images, or increasing the height of thin heroes are not allowed.
Content is structured using HWP's Content Library and Collections , ensuring consistency
and reducing manual updates.
Updates made in the Content Library or Collections automatically apply across all relevant pages.
Writers will work with structured data fields instead of manually placing content on each page.
What This Means for Writers, Designers, and QA
Writers ensure content is engaging and aligned with Hibu standards, placing it in structured fields that connect across the site.
Designers will work with consistent, pre-set content for key elements like CTAs, hero sections, and callouts, reducing back-and-forth edits.
QA will spend less time checking for inconsistencies across pages since connected data ensures uniformity.
Amends will be faster and easier—updating content once in the Content Library or Collections ensures changes reflect everywhere automatically.

What This Means for Hibu
Faster site production —With more content structured at the initial build, sites are closer to launch-ready from the start.
Less manual work —Teams spend less time on repetitive edits, freeing up resources for higher-value tasks.
Scalability —A more efficient content structure supports our ability to build and maintain sites at scale.
What This Means for Our Clients
Stronger brand consistency —Key business details, CTAs, and offers remain accurate across all pages.
Better SEO and performance —Structured content means every site launches with optimized H1s, title tags, and meta descriptions.
Easier updates —Future content changes can be made quickly without risk of errors or missing updates on some pages.
A more polished website with first proof —With a more comprehensive initial build, clients receive a fully structured and complete site faster.

Updating Header Lead-Ins

Directly above the G eo Text and Phone Number in the header, you’ll find the Geo and CTA lead-in text placeholders . These placeholders are connected to the Header Lead-Ins collection and can only be updated through the collection .
(Content → Collections → Header Lead-Ins)

Pro Tip: To edit the Geo Lead-In or CTA Lead-In , roll your mouse over the eyeball icon to the left of "All Pages" to reveal the pencil icon . Click the pencil to edit both lead-in text fields.

Geo Lead-In & Geo Text

The Geo Lead-In is a short phrase that introduces the geographic location, ensuring it reads naturally while remaining concise and optimized for SEO.
The Geo Text placeholder is now a manual text field and is no longer connected to business geo (Yext) data. Writers will enter the geo text manually based on client requirements.
Example Structure:
Serving (geo lead-in) King of Prussia, PA and Surrounding Areas (geo text)
Proudly Serving (geo lead-in) Columbus, OH and Nearby Communities (geo text)
Providing Services in (geo lead-in) Austin, TX and Central Texas (geo text)
This update gives writers more control over geo text, making it easier to match client-specific needs without having to override automated content.

CTA Lead-In

The CTA Lead-In is a short phrase that introduces the phone number , similar to how we already handle callouts and coupons .
If no specific instruction is provided (e.g., “Call or Text”), the writer will add a default CTA phrase to introduce the phone number.
This ensures that the phone number is action-driven, encouraging users to take the next step.
Example Structure:
Call Today (CTA lead-in) (555) 123-4567
Schedule Your Free Consultation (CTA lead-in) (555) 987-6543
24/7 Emergency Services (CTA lead-in) (555) 222-3333

Hero Setup at Initial Site Build

The Initial Site Build will now always include the Standard Hero by default. Since the standard hero is the most commonly used layout, it is included automatically.
If the client selected a PBN featuring a "row shapes" hero , the copywriter will replace the standard hero with the row shapes version .
Both hero versions— one with a form and one without —will be present at the initial site build. The copywriter will delete the hero not selected by the client before finalizing the site.

Updating the H1 Headline and Geo Location H2

The H1 Headline and Geo Location H2 are now structured as follows:

The H1 Headline is included at the Initial Site Build and is connected via the Hero Collection .
The Geo Location H2 is positioned directly under the H1 and follows specific geo formatting rules.
Copywriter Responsibilities for the H1 Headline
The copywriter is responsible for editing the headline as they normally do with site copy, ensuring:
Accuracy
Clarity
Consistency
Concise phrasing
Readability
Removal of redundancies

Geo Location H2: Placement & Formatting Rules

If applicable, the Geo Location H2 should reflect the Geo Text placeholder from the Header , without the Geo Lead-In. However, the copywriter has the flexibility to adjust or remove it based on length and necessity.

General Rules for Geo Placement
The geo location should always appear on the second line under the main H1 headline.
The geo text should be concise and must not wrap to another line on desktop.
Use title case (capitalize major words).
Do not include punctuation unless it is part of a proper name (e.g., St. Louis, MO).
When the Copywriter Should Remove the Geo Location H2
If the geo text is too long or complicated, the copywriter may remove the placeholder under the H1.
If including a geo reference is unnecessary, the copywriter will remove the placeholder.
This ensures that the H1 remains clean and readable without forcing awkward or excessive geographic information.
When to Use "Area" or "Surrounding Areas"
Use “[City], [State] Area” when:
The business is based in a specific city but serves nearby locations.
Example: Roofing Experts → Cherry Hill, NJ Area (suggests they are central to Cherry Hill but serve beyond it).
Use “Surrounding Areas” when:
The business covers multiple towns without a clear central hub.
Example: Plumbing Services → South Jersey & Surrounding Areas (if they serve various towns beyond South Jersey).
When to Use Just the City and State
Use “[City], [State]” when:
The business has a physical office location in that city.
Example: Personal Injury Attorney → Voorhees, NJ (suggests an office in Voorhees).
Do not add “Area” or “Surrounding Areas” if referring to a physical office location.
What to Do If There Are Two Locations
If they have two main service locations:
Separate them with "&" or a slash ("/") if space is limited.
Example: Heating & Cooling Experts → Cherry Hill, NJ & Philadelphia, PA.
If one location is primary:
List it first, followed by "& Surrounding Areas."
Example: Pest Control Services → Cherry Hill, NJ & Surrounding Areas.
If both locations are major but cover a large region:
Use a broader geo descriptor.
Example: Roofing Specialists → South Jersey & Philadelphia Area.

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Hero Buttons: Connected, Labeled, and Customizable

The Hero Request CTA Button and all Request CTA buttons are now connected to a collection that is populated at the Initial Site Build . These buttons are pre-set with common call-to-action labels and are automatically linked to the Request Form page for consistency across the site.

How Copywriters Can Adjust Hero Buttons
Delete or rearrange buttons based on the client’s CTA preferences.
Modify button text via the collection only when necessary to:
Fix a typo
Redefine the CTA (e.g., "Request Estimate" becomes "Get a Quote")

Phone Number Button Updates
Phone number text will no longer appear in the hero, callout, or coupon sections on desktop.
If the client has a Call/Text option, the copywriter will:
Disconnect the phone button
Rename it to "Call or Text"
Hyperlink it to the Call/Text popup

Connected Hero Form

The Hero Form is now fully connected at the initial site build. This means the following elements are pre-set and structured:

Form Title
Dropdown Options
Form Button
Form Background

The only time Writers, QA, or Amends need to update the form via a collection is when they need to:

Rearrange dropdown options
Fix a typo
Add or delete dropdown options

Designers will control the form background color through a defined and connected color theme , ensuring consistency across all sites.

Hero Background and Copy Block Background Image

The Header collection manages Hero Background Images and Copy Block Background Images across different page types on the website.

Header Collection Legend
This collection includes several columns representing the different elements of the hero and copy block setup :
Item/Page – Indicates which page the hero and copy block appear on.
BG Image – The hero background image for that page.
H1 – The hero headline appearing in the hero section.
Geo Location – The geo location displayed under the H1 .
CB BG 01 – CB BG 10 – The copy block background images displayed on category landing pages.

How Hero and Copy Block Images Work
The homepage and category landing pages contain both a hero Image and copy blocks .
The Hero background image and copy block background image are the same image for consistency.
Homepage copy blocks link to top-level category landing pages and core pages not included in a category landing page .
Category landing pages copy blocks link to the core pages associated with them .
Core Pages only have a hero image and do not contain a copy block.

How to Populate Hero and Copy Block Images in the Collection
Assign the Hero Background Image
Locate the BG Image column.
Upload or select the appropriate background image for the hero section .
This same image will also be used in the corresponding copy block for that page.
Assign Copy Block Background Images
Locate the CB BG columns (CB BG 01 - CB BG 06).
Ensure that the CB BG image matches the Hero Background Image for that page.
Assign a copy block image only if the page includes a copy block (homepage or category landing pages).
Core pages do not require a copy block image.
Confirm the H1 and Geo Location
Verify that the H1 column contains the correct hero headline .
Ensure the Geo Location follows the formatting rules outlined in the geo section.

Editing Callouts

The Callout Headline, Body Copy, and CTA Lead-In —featured in the right gutter of core pages —are now connected to the Content Library instead of Collections.

Where to Find & Edit Callout Content
Path: Content → Business Text
Each piece of callout content is connected to its own field in the Content Library:
CO - Headline (Callout Headline)
CO - Body Copy (Callout Body)
CTA Lead-In (CTA Introduction)

Like Motivating Factors , callout content can be edited directly on the page without needing to go into the Content Library.

How to Edit a Callout
Click Callout in the right gutter.
Select Content .
Choose Edit at the top of the panel next to "This widget is connected to your Content Library."
Edit the content as you normally do, ensuring:
Accuracy
Clarity
Consistency
Concise phrasing
Readability
Removal of redundancies
If necessary, add hard breaks to avoid awkward spacing or widows.
Click Save when finished.
Phone Numbers in Callouts
Phone numbers will now always display as a button on all devices.
Text-based phone numbers will no longer appear on desktop or tablet.
For this study, we will only include phone numbers in callouts.
Callout Background Color & Icon Updates
The callout background color is now connected to a color theme placeholder. This ensures consistency across the site and aligns with the overall branding.
The callout icon is actually an image, which—like the video splash image—is connected to Content Library → Business Images.
How Designers Update the Callout Icon
Swap out the connected business image in the Content Library.
The image must be square to ensure proper alignment.
If using a client logo, place it in a square container with a transparent background.
Since we are not using an actual SVG icon, the designer must apply the correct color to the image before uploading it.

How to Search, Download, Rename, and Upload Stock Images to HWP

Mon, 03 Mar 2025 18:13:40 GMT

Overview

For these steps, assume you are building a residential general contractor website . You need to add stock images for the hero sections of the following pages:

Homepage (general home-related image)
Roofing page
Siding page
Gutter page

Additionally, the hero images from all core pages (roofing, siding, gutters) will also be displayed as the homepage copy block image . These steps will guide you through finding, downloading, renaming, and uploading stock images to the website.

Step 1: Search and Download Stock Images

Visit Hibu ResourceSpace .
Use the search bar to find images for the first page topic (e.g., roofing ).
Select 5 to 10 images by checking the small box in the lower-left corner of each image.
Click the "Actions" dropdown at the top of the page and select "Download."
On the "Download collection as an archive" page, click the blue download button in the center.
A pop-up will appear—click OK.
Repeat steps 2-6 for each category ( siding, gutters, windows, doors, outdoor patios ).
Once all selections are complete, go to the Messages section (click the person icon in the upper-right corner).
Click the "Messages" tab and find the downloads listed.
Click "Link" for each download to retrieve the ZIP files.
Tip: After downloading, delete the messages containing download links to keep your workspace clean.

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Step 2: Rename and Organize Images (QAF 624 Guidelines)

1. Locate the ZIP Folder

Open File Explorer (Win + E).
Navigate to Downloads (or the folder where the ZIP files were saved).

2. Rename the ZIP Folder (Optional for Organization)

Right-click the ZIP file.
Click Rename.
Name it according to the image category (e.g., Roofing Images.zip, Siding Images.zip ).
Press Enter.

3. Extract the ZIP Folder

Right-click the ZIP file.
Click Extract All.
Choose a destination folder (default is the same location).
Click Extract.

4. Rename the Extracted Folder

If you didn’t rename the ZIP folder earlier, do it now.
Right-click the extracted folder.
Click Rename.
Enter the category name (e.g., Roofing Images, Siding Images ).
Press Enter.

5. Follow the Official Naming Guidelines

Open QAF 624 Naming Guidelines .
Review the required naming format.

6. Bulk Rename Images

Open the unzipped folder.
Select all images ( Ctrl + A ).
Press F2 (or right-click and select Rename ).
Type the new name following the QAF 624 format.
Example: this-is-okay (1).jpg
Press Enter.
Windows will add a space before the number (e.g., this-is-okay (1).jpg ), but HWP will automatically correct this upon upload.

Step 3: Upload Images to HWP

Open Media Manager

Log in to HWP.
Navigate to Content → Media Manager.

2. Create a New Folder

Click +Add Folder.
Enter the name of the folder matching your zip folder names (e.g., Gutters, Homes, Roofs, Siding ).
Click OK or Save.

3. Upload Images

Open the newly created folder.
Drag and drop the images from your computer’s corresponding folder (e.g., Gutter images → Gutter folder in HWP ).

4. Repeat for All Categories

Repeat Steps 2 and 3 until all images are uploaded.

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Capturing Accurate Page Counts

Ashley.Simpson@hibu.com (Ashley Simpson) — Thu, 27 Feb 2025 17:27:58 GMT

Capturing Accurate Page Counts

Ensuring all production teams follow a consistent method for determining countable pages on a client’s website is crucial. This standardization helps accurately manage workloads and turnaround times. It's important to distinguish this "page count" from the client's allotted page count, as some pages, while not counted against the client's limit, still require time and expertise to create.

Steps to Accurately Determine Production Page Count:

1. Preliminary Review

Collect the sitemap, questionnaire, or any documents outlining the website's intended structure.
Identify both visible and hidden pages based on these documents.

2. Efficient Methods to Identify All Pages

Click the purple circle AI button located in the bottom left corner
Select Page SEO Tags
Select All Pages
Manually count the pages listed.
Note: Some template pages might appear, but this method reliably includes all necessary pages without significant omissions.|

3. Categorizing Pages

Service Pages:
Count all service-related pages (e.g., individual services, Home, About, Contact).
Include any services mentioned in the questionnaire.
FAQ and Blog Pages:
Always count FAQ and Blog pages, regardless of their current visibility or creation status:
If visible or created, categorize them as standard pages.
If not yet visible or created, categorize them under Hidden Pages.
Hidden Pages:
Include pages intended for future use or those required but not yet visible or created.
Exclude asset-only pages used solely for functionality (e.g., "First-Last," assistant banners, unused forms).
Third-Party Link Pages in Navigation:
Identify pages that link to external sites (e.g., financing pages directing users to external platforms).
Exclude these from the count, as they don't require building.

By adhering to this standardized process, production teams can ensure consistency and efficiency
in website development projects.

Site Link Audit Tool

chris.stout@hibu.com (Chris Stout) — Fri, 21 Feb 2025 12:54:50 GMT

Site Link Audit Tool

Keeping your website free of broken links helps improve your SEO and creates a better experience for your visitors. The Site Link Audit Tool in Duda makes it easy to find and fix broken internal and external links — fast.

See how to fix broken links step-by-step in this quick demo video:

Step-by-Step: Finding and Fixing Broken Links

1. Open the Site Link Audit Tool

Go to: SEO and Settings > New! SEO Overview > Show Me > SEO Overview

2. Check Link Health in the SEO Overview

You’ll see a list of internal and external link issues
Click View Details next to "Internal Links" or "External Links"

3. Review Broken Internal Links

You’ll see a list of all broken links
The table shows which pages link to a missing page and what anchor text is used

In the video example, all broken links pointed to a deleted About page. The checker flagged these on four different pages.

4. Fix the Links

Click Fix Issue to see two options:

Fix in Editor – Jumps you to the exact location of the broken link in the page editor
Redirect Link – Set a 301 redirect to a working page and fix all instances at once

In the demo, we used Redirect Link and pointed the missing “About” link to the new “Our Story” page

5. Refresh and Recheck

Once you fix the issue, go back to the SEO Overview and refresh. The internal link issue should now be gone.
Repeat the same process for external links.
In the video, the broken external link was fixed by updating the URL to the site’s Contact page using Fix in Editor .

Why This Tool Matters

Saves time – No need to manually search for broken links
Boosts SEO – Clean links improve crawlability and trust
Improves UX – Avoids frustrating dead ends for visitors
Reduces bounce rate – Working links keep people on your site

Pro Tip

Check this tool often, especially if:

You recently deleted or renamed pages
You imported content from another source
You're managing a blog or news section

Final Thoughts

Fixing broken links isn’t just about cleanup — it directly impacts how your site ranks and how users experience it. Use the Site Link Audit Tool regularly to keep your website running smoothly.

Smart Placement of 'Visit Now' Buttons & Addresses

Make It Easy for Customers to Find and Visit Your Business

Guidelines for Using White and Black with Recent Colors

Thu, 23 Jan 2025 00:13:06 GMT

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.

Why Use Recent Colors White and Black?

Limited Theme Color Placeholders: Assigning white and black to the default Recent Colors ensures you can save your theme color placeholders for other unique colors in your palette. This approach helps you use your theme colors more effectively.
Locked and Persistent: The Recent Colors white and black cannot be deleted or changed. This ensures that these colors remain stable, even if theme colors are reset. By contrast, Saved Colors (non-theme colors) can be overwritten or lost when reset, which is why we advise caution when using them for white or black.

Best Practices for White and Black

Connect Elements to Recent Colors:
If you are using pure white or pure black, always use the locked Recent Colors white and black for maximum stability. You can either connect these colors directly to site elements or define them as theme colors if needed.
Avoid Using Saved Colors for White and Black:
Do not assign white or black using Saved Colors, as saved colors can be reset or lost during updates.
Flexibility for Designers:
Using Recent Colors for white and black does not limit your creativity. You can still assign unique shades or variants of white or black through theme colors if your design requires it. Remember, your theme color palette is yours to define.

Final Note:

Linking site elements to theme colors streamlines updates and ensures design consistency. A single change in the Theme Colors panel updates all linked elements, saving time and maintaining cohesion. Reserve theme color slots for non-default colors to enhance flexibility. While elements default to white and black, you are not restricted to these; as the designer, you have the final say on your site's color palette. To maintain an easily updatable and visually consistent site, always assign updates—such as button colors—using Theme Colors.

Callouts and Coupons

Tue, 29 Oct 2024 13:04:36 GMT

Introduction: Purpose and Importance of Callouts and Coupons

Callouts and coupons are essential website elements that share fundamental qualities while serving distinct purposes. Both are created using the Swiss Army Widget (SAW) and can significantly impact user engagement and conversion.

Shared Characteristics

Understanding the common elements between coupons and callouts helps build a foundation for effective use of both tools. These shared qualities ensure consistent implementation while maintaining brand standards and user experience:

Created using Swiss Army Widget
Strategic website placement
Customizable content and appearance
Performance tracking capability
Display keyword-rich content
Draw attention to key messages
Stand out from regular content
Emphasize unique value propositions

Key Differences

While callouts and coupons share implementation methods, they serve distinct purposes and require different approaches. Understanding these differences ensures each element is used appropriately to achieve specific marketing goals:

Callouts

Information highlighting
Feature promotion
Service explanation
Trust building
General messaging

Coupons

Promotional offers
Monetary incentives
Time-limited deals
Requires fine print

Run-of-Site Callouts

To simplify the content creation process as well as provide unified messaging to site users, Hibu sites will have one common callout used on each service page. This is known as a run-of-site callout .

Purpose of a Single Callout

The primary purpose of a run-of-site callout is to engage the site users to act. Ideally, this will be by directing them to a page on the site that emphasizes interaction with our client. A well-crafted run-of-site callout will meet several needs:

Entice users to connect with a business
Potentially act as an internal site link, which will help with SEO
Save time for writers and designers since they can create once and copy site-wide

Hierarchy for Run-of-Site Callouts

When considering where to link a run-of-site callout or how to craft it to best promote the business, consider the following hierarchy:

Financing Page
If the client offers financing, we should direct to that page first
Remember to create and link to a financing page
the link to the third-party site should be contained on the financing page, rather than standing alone on the service pages
Coupon Page
If the client has a dedicated coupon or special offers page, this is also a good place to drive user interaction
New Patient/New Client Forms
This would primarily apply to medical, legal, and other professional sites
Catering Page
This would apply to restaurants that also offer catering
Traditional Call to Action
If none of the above pages apply, then a traditional CTA can be used
"Call Today for a Free Estimate"
"Visit Our Dining Room Today"
"Call Now to Make Your Reservation"

Swiss Army Widget Components

While these are guidelines and not strict rules, they provide a solid foundation for creating effective coupons and callouts using the Swiss Army Widget. The widget includes the following fields:

Common Fields

Headline: For the main headline message.
Body Copy: For the main body text message.
CTA Lead-In Copy: For introductory text leading to the call-to-action (CTA).
Phone # / Button Label field: For the phone number text on the CTA button.

Coupon-Specific Fields

Fine Print field: Toggled off by default. Turn this on when using a coupon, and edit it to reflect the client's specific coupon fine print.

Global Formatting

Global Font Color: Optional toggle that allows designers to set one color for all text fields
Affects all text fields except phone number
Phone number can match global color or be set separately for emphasis
Saves time by eliminating need to update each field individually

Anatomy of Coupons and Callouts

Both coupons and callouts consist of key elements that guide users from initial interest to action. The structure creates a clear hierarchy while maintaining brevity and impact.

1. Visual Element (Icon or Image)

Icon

Icons are simple visual elements that quickly communicate the callout's theme or purpose. Only use when the callout has a solid color or gradient background.

Best Practices for Icons

Choose icons that directly represent the specific offer or relate to the page content
Opt for simple, easily recognizable icons
Avoid complex icons, as details may be lost at the default 80px size
Users should be able to immediately understand the icon's meaning in relation to the callout message
Maintain consistency in icon style throughout the site
Use either filled-in icons or outline icons consistently
Do not mix and match different icon styles across callouts or pages
Avoid generic icons such as piggy banks, dollar signs, clipboards, calendars, and other commonly used call-out icons

Icon Formatting

Width: Default is 80px (rarely needs adjustment)
Color: Adjustable (ensure strong contrast with callout background)
Alignment: Keep centered
Bottom padding: Adjust as needed to ensure adequate space between icon and headline

Image Element

Alternatively, images can be used to provide visual context and appeal. Only use when the callout has a solid color or gradient background.

Best Practices for Images

Choose high-quality, relevant images that reinforce the callout's message
Ensure images are not too busy or distracting from the text content
Use consistent image styles across callouts for a cohesive look
Consider using lifestyle images that show the product or service in use
Note, once the designer commits to adding an image or the company logo to one callout or coupon, it should be consistently applied to all of them across the website.

Image Formatting

Size: Adjust to fit the callout space without overwhelming other elements
Aspect ratio: Maintain consistency across callouts when possible
Alignment: Typically centered, but can be adjusted based on design needs

Background Image

When using a background image, consider the following:

Recommended Image Types

Abstract patterns
Blurred backgrounds
Simple landscapes
Subtle textures
Gradients
Out-of-focus imagery

Images to Avoid

Photos with text or signage
Images of people or faces
Busy or cluttered scenes
High-contrast patterns
Complex landscapes
Images with heavy details in text areas

Remember: Always use an overlay between the background image and text to ensure readability.

2. Headline

The headline is the cornerstone of your coupon or callout, serving as the primary hook to capture user attention. The Swiss Army Widget provides flexibility in how headlines are displayed through multiple fields:

Main Fields

Headline: Primary field for your main message

Best Practices

Write with natural breaks in mind
Consider how the headline will read aloud when deciding on breaks
Example of Effective Headline Breaking:
Headline field: "OPEN 24 Hours a Day"
Headline Overflow 1: "365 Days a Year"

Key Characteristics

Concise: Every word serves a purpose
Clear: Simple language, immediately understandable
Compelling: Addresses user needs or pain points
Action-Oriented: Uses strong verbs (e.g., "Discover", "Transform")
Urgent: Creates a sense of immediacy (e.g., "Now", "Limited Time")

3. Body Copy

The body copy provides essential details that support the headline, expanding on the benefits or features of your product or service.

Body Copy Fields

Main Body Copy: Primary field for your supporting message

Key Characteristics

Concise: Typically 1-2 short sentences or phrases
Informative: Offers more detailed information about the service or product
Benefit-focused: Expands on the advantages for the user
Scannable: Easy to read quickly

Best Practices

Use simple, clear language
Focus on one or two key points
Avoid jargon unless necessary for your audience
Use bullet points or short phrases for easy scanning

4. CTA Lead-In Copy

The CTA lead-in is a short phrase that encourages the user to take action, bridging the gap between the body copy and the actual CTA.

Key Characteristics

Action-oriented: Encourages the user to take the next step
Value-focused: Often includes an offer or benefit
Urgent: Creates a sense of immediacy
Brief: Usually one short phrase

Best Practices

Use action verbs
Highlight a specific offer or benefit
Create a sense of urgency when appropriate
Ensure it flows naturally to the CTA

Callout Examples

"Schedule Your Free Consultation Today"
"Learn More About Our Services"
"Visit Our Showroom"
"Get Started Now"

Coupon Examples

"Claim Your $50 Savings Today"
"Book Now To Lock In This Rate"
"Redeem This Special Offer"
"Call Now Before This Deal Ends"
"Limited Time: Schedule Today"
"Don't Miss Out - Call Now"

5. CTA

The CTA is the final element prompting user action. Types vary based on purpose and intended user response.

Request/Schedule

"Schedule Service"
"Book Appointment"
"Request Quote"

Visit/Location

"Visit Today"
"Get Directions"

Internal Links

"View Menu"
"See Financing"

Third-Party Actions

"Pay Now"
"Order Online"
"Make Reservation"

Downloads

"Download Brochure"
"Get Guide"

Example CTA Pairs (Lead-in + CTA)

For Coupons:

Lead-in: "Claim Your $50 Savings Today"
CTA: "(888) 555-1212"
Lead-in: "Book Now To Lock In This Rate"
CTA: "Schedule Service"
Lead-in: "Redeem This Special Offer"
CTA: "Visit Location"
Lead-in : "Don't Miss Out - Call Now"
CTA: "(888) 555-1212"

For Callouts:

Lead-in: "Schedule Your Free Consultation Today"
CTA: "Request Appointment"
Lead-in: "Visit Our Showroom"
CTA: "Get Directions"

Remember: Each element should work together to create a cohesive message that guides users toward taking action.

Remember: Copywriter SHOULD NOT link the CTA in the Callout to a gallery. If images are not received in time for the designer to create the gallery, or if the images sent are too poor in quality, then the gallery will not be built and the link will be invalid.

6. Coupon-Specific Fine Print Guidelines

Why Include Fine Print?

As website experts, we always include fine print for coupons, even if not requested. This protects the client's business interests and sets clear expectations for customers. Fine print is a standard industry practice that adds legitimacy and prevents misunderstandings about offer terms.

While we include it by default, we can always modify or remove the fine print at client request. If the client has their own fine print, we'll use their version.

Default Fine Print

"Not valid with any other offers or promotions. Restrictions apply. Must mention this coupon at the time of scheduling.*"

Note: Remove "Must mention this coupon at the time of scheduling" for non-service based offers (retail, products, etc.).

Content Strategy: Creating Effective Callouts and Coupons

To create effective website elements, it's essential to step into the shoes of the person visiting the page. Consider what that visitor would want to see to feel persuaded. What specific information or offer would motivate them to take action? Your content should directly address what matters most to them, helping turn that interest into engagement or a conversion.

When crafting your content, consider these strategies to ensure they are effective and relevant:

Align with Page Content

The element should be directly related to the main topic of the page.
Callout Examples: On a roof repair page, emphasize emergency repair services, showcase recent roofing projects, or highlight a unique selling point like "No Job Too Big or Too Small," "No Subcontractors," or "Owner on Every Job Site."
Coupon Examples: On a roof repair page, offer "$500 Off Complete Roof Replacement" or "Free Gutter Cleaning with Any Roof Repair."

Address User Intent

Consider why users are visiting the page and what they are looking for.
Callout Examples: On an AC unit replacement page, feature financing options, highlight rebates, or promote free, on-the-spot estimates.
Coupon Examples: On an AC unit replacement page, offer "Free UV Air Purifier with New AC Installation" or "$200 Off New AC System."

Emphasize Key Motivating Factors

Provide clear reasons why customers should choose this business.
Callout Examples: For an emergency plumber, emphasize "30-Minute Response Time" or "No Extra Fees for Evening and Weekend Service."
Coupon Examples: For a plumber, offer "Free Service Call with Any Repair ($89 Value)" or "$50 Off Any Emergency Service."

Address Common Pain Points

Use content to solve common customer concerns.
Callout Example: " No Hidden Fees – Transparent Pricing Guaranteed" for a home service company.
Coupon Example: "First-Time Customer Special: Free Diagnostic Fee ($79 Value)"

Encourage Immediate Action

Create a sense of urgency or highlight the benefits of acting now.
Callout Example: "Same-Day Appointments Available – Call Now!"
Coupon Example: "24-Hour Flash Sale: 20% Off All Services"

Promote Time-Sensitive Offers

Feature limited-time promotions or seasonal services.
Callout Examples: For a landscaper, promote "Spring Clean-up Special - Book Now!" or "Fall Lawn Aeration & Overseeding: Schedule by March 31 for Best Results."
Coupon Examples: "Early Bird Special: 25% Off Spring Clean-up" or "Winter Prep Package: $100 Off When You Book by September 30"

Typography and Formatting

Content Guidelines
Headlines

Use Title Case and Bold Font Style
Omit ending punctuation except for ? or !
Words like FREE, SAVE, NOW may be in ALL CAPS at writer's discretion
If choosing to capitalize these terms, maintain consistency across all similar promotions
Examples:
Get Your FREE Quote Today
SAVE on Your Next Purchase
All other similar coupons should follow same style:
Get a FREE Estimate Today
Claim Your FREE Trial

Body Copy

Use sentence case (capitalize first word and proper nouns only)
Include all proper punctuation, including periods
Example: "Save money on your next purchase with our exclusive deals."

CTA (Call-to-Action) Lead-in

Use Title Case or Sentence case (pick one and be consistent) in bold font
Do not include ending punctuation, except for ? or !
Example: Start Saving Today

CTA Button

Choose either Title Case or ALL CAPS (maintain site-wide consistency)
Omit punctuation except for exclamation points
Examples:
Title Case: "Get Started Now"
ALL CAPS: "GET STARTED NOW"

Fine Print

Use sentence case
Include all proper punctuation, including periods
Must match formatting style used in CTA Lead-in and button/phone number
Example: "Offer valid through December 31, 2024. Some restrictions apply."

Design Guidelines
Typography

Create clear hierarchy through font size and style variations
Ensure visual distinction between elements
Maintain readability across all devices
Break text at natural speech patterns

Spacing and Layout Best Practices

Use spacing tools to optimize readability:
Line height: Adjust space between text lines
Top margin: Control vertical spacing between elements
Horizontal padding: Fine-tune text wrapping and side margins
No fixed spacing rules (like mandatory 30px gaps)
Default spacing usually works well
Adjust when using overflow fields
Trust your judgment while ensuring readability across devices

Color Implementation

Stick to global theme colors that align with brand identity
Prioritize contrast for readability
Ensure CTA buttons stand out
Make copy easy to read

Coupon Border Style

Dashed outline available for coupons only, never for callouts
If using dashed outline on one coupon, use it consistently across all site coupons
Designer's discretion to use dashed outline based on overall site design

Essential Design Principles

Optimize for all screen sizes and devices
Maintain consistent visual hierarchy
Keep designs clean and professional
Make CTAs prominent
Use consistent styling site-wide
Break text naturally

Remember

Focus on user interaction and engagement
Callouts should effectively inform and guide users
Every design choice should support the call-to-action
Maintain professional appearance while being attention-grabbing

Remember: Every feature on the site should be optimized for customer interaction. Callouts are powerful tools for informing, guiding, and persuading users to take action.

Callout Headline Examples

HVAC/Plumbing/Electrical

24/7 Emergency Response Team
All Work Up to Code Guaranteed
Background-Checked Technicians
Certified HVAC Excellence
Climate Control Specialists
Emergency Response Within 30 Minutes
Family-Owned Since 1985
Flat-Rate Pricing – No Surprises
Fully Stocked Service Vans
Licensed & Insured Technicians
Master Electricians on Staff
No Extra Charge for Nights & Weekends
Owner on Every Job Site
Same-Day Service Available
Serving All Major Brands

Roofing/Construction/Home Exterior

5-Star Rated on HomeAdvisor
Certified Green Contractor
Certified Master Elite Contractor
Drone Roof Inspections Available
Emergency Roof Repairs
Energy Star Certified Products
Expert Window Installation Teams
Factory-Trained Installers
Free Storm Damage Assessment
Lifetime Workmanship Warranty
Local Teams Ready Now
One-Day Installation Available
Project Manager on Every Job
Storm Damage Specialists
Insurance Claims Accepted

Landscaping/Lawn Care/Pest Control

Certified Arborists on Staff
Chemical-Free Options Available
Drought-Resistant Solutions
Drainage Solutions Experts
Eco-Friendly Products
Hardscape Design Experts
Licensed Pesticide Applicators
Native Plant Specialists
Organic Options Available
Outdoor Lighting Specialists
Pet-Safe Treatment Options
Professional Design Team
Weekly Service Available
Wildlife Control Experts
Year-Round Maintenance Plans

Medical/Dental/Therapy/Wellness

Accepting New Patients
Advanced Pain Management
Evening Hours Available
Family-Friendly Practice
Gentle Dental Care Specialists
In-House Payment Plans
Medicare Accepted Here
Modern Digital X-Rays
Most Insurance Plans Accepted
Same-Day Emergency Visits
Sedation Options Available
Spanish-Speaking Staff
State-of-the-Art Technology
Telehealth Sessions Available
Weekend Appointments Available

Auto Repair/Maintenance/Tire Shops

ASE-Certified Mechanics
Certified Emissions Repair
Complete Diagnostic Center
Dealership Alternative
Digital Vehicle Inspection
Diesel Engine Specialists
European Car Specialists
Extended Warranties Available
Factory-Trained Technicians
Fast Service While You Wait
Hybrid Vehicle Experts
Loaner Cars Available
Original Equipment Parts
Performance Tuning Experts
Shuttle Service Available

Professional Services (Tax/Legal/Financial)

Business Law Specialists
Business Valuation Experts
Certified Public Accountants
Divorce & Family Law
Enrolled IRS Tax Agents
Estate Planning Experts
Forensic Accounting Services
Investment Management Team
Personal Injury Experts
Retirement Planning Services
Risk Management Solutions
Small Business Specialists
Tax Resolution Specialists
Virtual Meetings Available
Wealth Management Team

Food Service/Restaurants/Cafes

Authentic Family Recipes
Certified Kitchen Staff
Corporate Accounts Welcome
Catering for All Events
Custom Orders Welcome
Family Recipes Since 1990
Farm to Table Fresh
Fresh Ingredients Daily
Full-Service Catering Team
Gluten-Free Options Available
Local Ingredients Used
Made Fresh to Order
Online Ordering Available
Party Room Available
Vegan Menu Available

Retail (Tile/Granite/Home Improvement)

Commercial Teams Available
Custom Fabrication on Site
Custom Orders Welcome
Designer on Staff
Direct Factory Pricing
Expert Measure Service
Financing Options Available
Free Design Consultations
In-House Design Center
Large Showroom on Site
Next-Day Installation
Professional Installation Teams
Professional Renderings
Trade Program Available
Virtual Design Services

Coupon Headline Examples

HVAC/Plumbing/Electrical

$50 Off Any Service Call
$25 Off Any Drain Clearing
$75 Off Electrical Panel Upgrade
$79 Electrical Safety Inspection
$89 AC Tune-Up Special
$99 Whole-House Plumbing Inspection
$150 Off Whole-House Surge Protection
$200 Off Generator Installation
Free Smart Thermostat With AC Replacement
Free UV Air Purifier With New HVAC System
Save $50 on Water Filtration Systems
Save $150 on Tankless Water Heater Installation
Save $200 on New AC Installation

Roofing/Construction/Home Exterior

$200 Off Storm Damage Repair
$250 Off Any Project Over $2,500
$300 Off Bay Window Installation
$500 Off Complete Roof Replacement
$750 Off Complete Siding Replacement
Free Gutter Guards With Full Gutter System
Free Roof Inspection & $100 Off Repairs
Free Storm Door With Entry Door Purchase
Military Discount: 10% Off All Services
Save 15% on All Window Replacements
Save $200 on Skylight Installation
Senior Special: $350 Off New Roof

Landscaping/Lawn Care/Pest Control

$50 Off Spring Clean-Up Package
$75 Off Tree Removal Service
$99 Mosquito Treatment Special
$125 Off Termite Treatment
$200 Off Water Feature Installation
50% Off First Pest Control Treatment
Buy 4 Treatments, Get 5th Free
First Mow Free With Season Contract
First-Time Customer: $25 Off Any Service
Free Fire Pit With Patio Installation
Free Soil Test With Lawn Treatment Plan
Save $100 on Hardscape Installation
Save $150 on Outdoor Kitchen Design

Medical/Dental/Therapy/Wellness

$50 Off Any Hearing Aid
$50 Off First Therapy Session
$75 Off First Chiropractic Visit
$100 Off Dental Implants
$200 Off Invisalign Treatment
Free Consultation for New Patients
Free Eye Exam With Glasses Purchase
Free Initial Mental Health Consultation
Free Orthodontic Consultation
Free Teeth Whitening With New Patient Exam
New Patient Special: $59 Massage
Senior Discount: 10% Off All Services
$99 New Patient Special: Exam, X-Rays & Cleaning
Save 15% on Cosmetic Procedures

Auto Repair/Maintenance/Tire Shops

$20 Off Any Maintenance Service
$29.95 Oil Change Special
$50 Off Any Service Over $300
$50 Off Any Suspension Work
$89.95 Brake Special
$100 Off Timing Belt Replacement
Buy 3 Tires, Get 1 Free
Free Alignment With 4 Tire Purchase
Free Battery Test & Installation
Free Check Engine Light Diagnosis
Free Tire Rotation With Oil Change
10% Off Any Repair for First-Time Customers

Professional Services (Tax/Legal/Financial)

$50 Off Tax Preparation for New Clients
$75 Off Estate Planning Package
$100 Off Business Formation Services
$200 Off Living Trust Package
Free Business Consultation ($150 Value)
Free Financial Planning Session
Free Investment Portfolio Analysis
Free Retirement Planning Review
First-Time Client Special: 15% Off Services
Save 20% on Tax Planning Services

Food Service/Restaurants/Cafes

$3 Off Any Large Specialty Coffee Drink
$5 Off Orders Over $30
$10 Off First Catering Order
Buy One Large Pizza, Get One 50% Off
Buy 10 Lunches, Get 1 Free
Free Appetizer With Purchase of Two Entrees
Free Dessert With Family Meal Purchase
Half-Price Wings on Wednesdays
Kids Eat Free With Adult Entree
10% Off Your First Online Order

Retail (Tile/Granite/Flooring/Home Improvement)

$200 Off Any Purchase Over $2,000
$300 Off Custom Cabinets
$500 Off Kitchen Remodel
Free Design Consultation ($150 Value)
Free Edge Treatment With Countertop Purchase
Free Installation on Orders Over $1,500
Free Sink With Granite Purchase
Military & First Responder Discount: 10% Off
Save 15% on All In-Stock Tile
Save 20% on All Hardwood Flooring

Specialized Services

$50 Off Pool Opening Service
$75 Off Carpet Cleaning
25% Off Moving Services
First Month Free: Home Security Monitoring
Free Dryer Vent Cleaning With Air Duct Service
Free Month of Storage Rental
Free Security System Installation
Save $100 on Window Tinting

Client Provided Privacy Policies

Mon, 28 Oct 2024 20:34:43 GMT

Client Privacy Policy Update Process

This guide outlines the process for updating client websites with their own privacy policies, particularly when they're working with third-party digital marketing services for data collection through forms, SMS opt-in, chat, or phone numbers.

Client Request Process

1. Initial Client Request

When a client requests to modify the Hibu privacy policy:

Inform them that we cannot modify Hibu's existing privacy policy for legal reasons
Explain that we can replace it with their own privacy policy
Request them to provide their policy in Word or PDF format

2. Helping Clients Create a Privacy Policy

If clients don't have their own privacy policy:

Direct them to free Privacy Policy Generators
Recommend resources like https://www.freeprivacypolicy.com/free-privacy-policy-generator/
Emphasize these tools are user-friendly and create compliant policies

Implementation Process

3. Initial Build Copywriter/Amend Copy Team Actions

Upon receiving the client's privacy policy:

Create new webpage using the thin hero design template
Technical specifications:

Hide page from navigation
Enable No Index setting
Set title tag as "Privacy Policy | [NOB]"
Use meta description: "Protect your personal information with [NOB]'s privacy policy. Learn how we collect, use, and safeguard your data to ensure your privacy."

3. Copywriter/Amend Copy follows link below for policy to be added to footer.

4. Footer Update Process

After page creation:

Follow this link to contact Escalations team requesting the Hibu standard Privacy Policy footer text be replaced with a link to the newly created Privacy Policy page via Copyright Widget
Via the Copyright Widget the Escalations designer will:
Replace "Company Name" with "Privacy Policy"
Hyperlink to new privacy policy page
Center alignment
9pt font size

Important Notes

Never modify Hibu's existing privacy policy
Always ensure client provides their policy in Word or PDF format
Privacy policy page must remain hidden from navigation
Do not proceed with third-party tool implementation until new privacy policy is in place
CC the originator of the request (e.g. DSC, Sales, Client) on the "Changes Complete" email

QA

Before completing the process, verify:

Privacy policy page is created correctly
Verify Meta is complete
No Index is enabled
Footer updates are implemented properly
Hyperlink to privacy policy works
Font size and centering are correct on all devices

Left Logo Header

Tue, 22 Oct 2024 19:24:45 GMT

Overview

A new, pre-designed "Left Logo" header section (Section→Headers→V6 - Left Logo) is available for use when a client requests that their logo be placed on the left side of the header, instead of in the center. This enhancement simplifies the design process, as you now have a ready-made section to use rather than needing to create the design from scratch.V6

Rules and Guildlines for Using the Left Logo Header

These guidelines must be followed exactly to maintain consistency and meet client expectations.

Client Request Specific
This header must only be used if the client specifically requests their logo to be on the left side.
If this is not requested, continue using the standard header layouts.
Desktop Only
The Left Logo header is designed only for desktop views.
Tablet and mobile headers remain unchanged. Continue building the tablet and mobile views as per normal guidelines, with logos centered.
Logo Size Restrictions
Only small or landscape logos may be used with the Left Logo header.
If the client’s logo is overly large or contains a baked-in tagline, this header should not be used.
If the client’s logo is oddly shaped (e.g., tall and narrow or very wide), use caution when adding it. The space allotted for the logo may not allow it to present well in the design.
If the client doesn’t provide a new, appropriately sized or shaped logo, explain that their request cannot be accommodated
Reviews/CTA Section Row
Continue building the reviews/CTA section as you normally would, following standard guidelines. This header only impacts the logo placement.
Navigation Row
The navigation remains centered and should be built as per the usual guidelines, regardless of the logo placement.
Transparent Headers
The Left Logo header cannot be added to transparent headers on homepages or their associated internal pages.
No Geographic Elements (Geo)
The Left Logo header must not include geographic elements. Keep the design simple and clean.
Designer Responsibilities
Ensure that the designer increases the header size and centers the navigation to align visually with the left-aligned logo.
Designers are free to adjust the background of the row to match the logo’s colors or background for better integration.
Update the phone number text color accordingly to ensure contrast and visibility.
Logo Cropping for Optimization
If the client provides a logo with excess space (whether colored or transparent) around the actual logo, the designer is free to crop out unnecessary space to maximize the logo’s visibility.
This is allowed only if the integrity of the logo is not compromised in the process.

Why These Rules Matter

Consistency is key to maintaining a professional, clean, and user-friendly design. Following these rules ensures that we meet the client’s requests without sacrificing the overall look and functionality of the website.

If you have any questions or run into issues when applying the Left Logo header, feel free to reach out to Paul Altobell i for clarification.

RevLocal Microsite Migration

Tue, 15 Oct 2024 16:19:53 GMT

Overview & Setup

Introduction

Hibu is converting one-page RevLocal microsites into one-page Hibu websites. While Hibu has pre-built the basic structure of these sites, designers need to complete several key elements to finalize the conversion. Throughout this guide, we refer to these Hibu one-page websites as "Hibu Microsites" for simplicity, though this is not an official product name. This guide outlines how to access and complete these partially built websites.

Important Terminology

RevLocal Microsite: The original, live one-page client website on RevLocal's platform
Hibu Microsite: The new, partially built one-page website on Hibu's Website Platform (HWP)

Prerequisites

Access to client's live RevLocal Mmicrosite
Access to Prebuilt Hibu Microsites
Login URL: https://my.websites.hibu.com/login
Username: rebuilder@hibu.com
Password: Hibu#nd1

Prebuilt Hibu Mirosite Content

Each pre-built Hibu Microsite includes these automated elements from the client's Yext account:

Business Information
Business Text
Hero image H1
Motivating Factors
Title and meta description (where available)
Note: If no meta description exists, none will be created

Designer Tasks

Complete these steps to finalize each Hibu Microsite:

Create backup

pre_firstlast (pre_jamesclark)

Import all microsite images
Populate the image gallery
Assign hero image and logo in Business Images
Apply microsite color scheme to site Theme
Add external links to global navigation
Remove duplicate contact info
Site Check
Create backup
post_build_firstlast (post_build_james-clark)

Note : Reviews widget updates will be handled by the development team after designer tasks are complete.

Examples

RevLocal Mirco Site (orignial)
Hibu Microsite (after)

Step 1: Site Backup

pre_firstlast (pre_jamesclark)

Step 2: Import Microsite Images

Access Media Manager

Click Content in the side panel
Select Media Manager

2. Import Process

Choose desired tab (Images, Icons, Videos, Audio, Files)
Click Import Images
Select "From a Site" from dropdown menu

3. Load Images

Enter complete microsite URL (e.g., https://foo.com)
Click Show Images
Wait up to 30 seconds for images to load
Click Import Images

Note: After you click Import Images , it's normal if not all images load initially. You may proceed to next step.

Step 3: Populate Gallery

Navigate to Content > Collections
Open Gallery collection, select first placeholder image
Click "Delete all Images"
Click "+Image"
Select all imported images except logo and social icons (ex Google)
Close Image Collection popup

Step 4: Populate Hero Image and Logo

Go to Content > Business Images
Identify current hero image from actual microsite
Replace top image with microsite hero image
Replace second image with client logo
Update alt text:
Hero image: Change to NOB (Name of Business)
Logo: Change to NOB logo
Close Content Library

Step 5: Setup Color Theme

Overview: Microsites typically use two primary colors

1. Main color: Usually in the header

2. Secondary color: Often in the hero row below the header

Key Color Settings:

Body copy: Always black
Hero text: Always white
Navigation, hero bar, and button text: Default to white
Note: Designers may adjust text to a darker color if the background makes white text difficult to read.

Important Note on Fonts

Do not update the font type, even if it differs from the microsite.
Maintain the default Hibu One-Page website

Workflow

Navigate to Theme > Colors.
For each color update:
Click the arrow next to the color to update.
Select the color swatch to edit.
Use the eye dropper tool (next to the hex code).
Sample the corresponding color from the microsite.
Update the following colors:
"HDR - button hover": Sample from microsite header
"Nav - button on": Sample from hero row (or buttons if hero matches header)
"Hero Bar": Sample from header again
Optional: If the microsite uses a yellow variant, update "Reviews Stars" with this color.
Text Color Adjustments:
If white text is hard to read against the selected background colors, adjust the text color to a darker shade or black font for better contrast.
This may apply to navigation, hero bar, or button text.

Hero Headline and Motivating Factors

Access the microsite:

Open the original microsite in a separate browser tab or window.
Copy the Hero content:
Copy the main headline (H1) from the microsite
Note, in some instances, the headline may be the business name
Copy the "motivating factor" text located directly beneath the headline.
Navigate to the Content Library and select Business Text
Update the Hero Headline:
Locate the "H1 Headline" field.
Paste the copied microsite headline into this field.
Update the Motivating Factors:
Locate the "Motivating Factors" field.
Paste the copied "motivating factor" text into this field.
Ensure all text is on a single line.
Maintain the bold style as featured in the default placeholder text.

Hibu Reviews Merchant ID

Update Header Reviews Widget:
Open the desktop header reviews widget
Locate the merchant ID field
Paste the client's Hibu Reviews merchant ID
Repeat this process for the tablet and mobile header reviews widgets
Update Page Reviews Widget:
Navigate to the Content Library
Locate the "Hibu Reviews Merchant ID" field
Paste the client's Hibu Reviews merchant ID into this field
Note: This will automatically update the reviews widget on the page

Step 6: Add External Links to Navigation

Overview

Microsites may include buttons in the hero section or links above the footer that point to external sites (e.g., Pay Now, Order Online, View Menu, Learn More).
These external links need to be replicated on the Hibu One Page site, both in their original locations and in the site navigation.

Update Hero Button (if applicable)
If the microsite's hero has buttons linking to external sites, replace the default "Contact Us" button on the Hibu site with these external link buttons.
Maintain the same text and functionality as on the microsite.
Add External Links to Site Navigation:
Open Pages
Locate the Additional Link / URL placeholder
Click the three dots at the very right of the placeholder
Rename the page as it's labeled on the site (e.g., Pay Now, Order Online, View Menu, Learn More)
Click "Show or Hide from Navigation" and then "Show All"
Click "Edit External URL" and enter the complete URL
Ensure "Open in new window" remains checked
Repeat these steps for each external link on the microsite

Important Notes:

Update the Hero button only when the microsite links to an external site
Always add external links to the site navigation, regardless of their placement on the original microsite
If the microsite retains a "Contact Us" button in the hero while having other external links elsewhere, keep the Hibu site's hero "Contact Us" button as is

Step 7: Remove Duplicate Contact Information

Business Hours

If the business operates 24 hours a day:
Delete the business hours text in both the About Us and Contact Us sections
Keep the Open/Close placeholder (Open 24 Hours)
If the business does not operate 24 hours a day:
Delete the Open/Close placeholder from both the About Us and Contact Us sections
Keep the detailed business hours

Phone Numbers

If only one phone number is listed:
Keep the main phone number
Remove the phone list placeholder
If multiple phone numbers are listed:
Keep the phone list with all numbers
Remove the main phone number listed directly above the phone list

Email Addresses

If only one email is listed:
Keep the main email address
Delete the email list placeholder
If multiple emails are listed:
Keep the email list with all addresses
Delete the main email listed directly above the email list

Step 8: Site Check

This QA process should be performed as the final step in our conversion workflow, after all other modifications and additions have been made. It serves as a comprehensive check to ensure the Hibu One Page site accurately represents the original microsite, functions correctly, and provides a good user experience across all devices.

Device Compatibility Check

Review the site on desktop, tablet, and mobile devices
Ensure layout and content display correctly on all three device types

External Link Verification

Click all external links on each device
Confirm that each link directs the user to the correct external site
Verify that links open in a new window/tab as intended

Text Readability

Check readability of:
Navigation labels
Button text
Hero bar text
Footer text
If text is difficult to read, update to a darker color or black as necessary

Overall Content Review

Scan all content for any remaining placeholder text or images
Verify that all content from the microsite has been accurately transferred

Step 9: Site Backup

post_build_firstlast (post_build_james-clark)

New Form Sections

Tue, 24 Sep 2024 19:06:04 GMT

We've added new forms to make your work easier, including enhanced contact forms and job application fields. Here's what you need to know:

New Form Types

Enhanced request, contact, or custom form with additional fields like first name, last name, address, city, state (dropdown), and zip.
Careers / Job Application Form with multiple education and previous employment fields.

Important Notes

The careers form is a starting point. You may need to add more fields based on what the customer wants.
Never include fields that ask for sensitive information like:
Driver's license number
Social Security number
Medical information
Financial information
Label buttons to complete the sentence "I want to..." For example:
"I want to (Get a Free Estimate)"
"I want to (Apply Now)"
This helps users understand exactly what action they're taking.

How to Update a Form on a Page

Add a new row at the bottom of the page, just above the footer.
Go to "Sections → Forms" and choose the new form you want to use.
Copy the new form.
Find the old form on the page and paste the new form in its place.
Delete the old form.

Remember to update submission information (email, subject line, etc.) and make sure the reCAPTCHA is setup correctly.

This form can be used as a request, contact, or a custom form. Edit where necessary. Don't forget to delete this directive.

Fill out this short form and a(n) <<NOB>> representative will contact you <<time frame>> to <<CTA>>.

Why Choose Us Check Marks

Tue, 13 Aug 2024 15:28:58 GMT

When customizing the "Why Choose Us" section for certain templates / PBNs, it's important to replace the default frog icon with a check mark.

Why Use Check Marks?

Check marks are clear and easily recognizable, even at smaller sizes. In contrast, non-check mark icons can be difficult to identify due to their reduced size, which may lead to confusion for users.

How to Select the Right Check Mark

Open the List Icons Widget: Navigate to the Content tab.
Choose Icon: Select the "Choose Icon" option.
Search: Enter "check mark" (without quotes) in the search bar.

You'll find a wide variety of check marks available. Here's how to select the best one:

Opt for Simplicity: Choose check marks that are straightforward and easily identifiable. This includes simple check marks or those contained within a circle, shield, starburst, square, or similar shapes.
Avoid Complex Icons: Steer clear of check marks that are overly complicated or integrated into other elements, such as a clipboard, home, car, or tool (like a wrench). These can be harder to recognize.

Keep It Varied

When updating a site that features the "Why Choose Us" section, it's essential to vary the check marks used. Avoid using the same check mark repeatedly—mix it up to keep the design fresh and engaging.

By following these guidelines, you'll ensure that the "Why Choose Us" section is both visually appealing and user-friendly, helping to clearly communicate the key motivating factors to our client's audience.

Why Choose Us row

Acceptable

etc.

Unacceptable

etc.

Video Splash Widget Update

Mon, 05 Aug 2024 18:28:03 GMT

We're excited to announce a major improvement to our video splash widget. We've replaced the static PNG play icon with a versatile SVG icon. This simple change opens up a world of customization possibilities for your video splash.

Why This Matters

Flexible Design: Easily adapt the play icon's color, size, and even its overall style to seamlessly integrate with your website's look and feel.
Crisp on Any Screen: SVGs are resolution-independent, meaning your play icon will look sharp and clear on everything from high-resolution displays to mobile devices.
Brand Consistency: Make sure your video previews reinforce your brand identity by using a play icon that complements your other visual elements.

Updating Your Widget: A Quick Guide

If you're updating an existing video splash widget, you might encounter a broken link for the old play icon.
Click Choose Icon and search for a new "play" icon.
Choose an icon that is clear, recognizable, and conveys the action of "play." Remember , the primary goal of a play icon is to signal that your visitors can click to start a video. Choose an icon that's instantly recognizable. Avoid overly complex designs that might confuse your audience.

Why Choose Us row

July Website Update Wrap Up

Thu, 01 Aug 2024 13:13:43 GMT

This post is part of our Website Update Wrap-Up series, showcasing a collection of recent
small product and feature improvements.

Homepage and Interior Page Video Splash Row Is Moving to the Footer

The Video Splash row will now be exclusively located in the footer and will no longer appear on the homepage or on product and/or services pages. This change means you will only need to update the Video Splash row design, widget, headline, and copy once, instead of updating it across multiple instances on the site. The process for the copywriter and designer to update the Video Splash row will remain the same. Only the Hibu photo motion video (or a customer-provided video, if substituted) will be featured in the footer. All other videos will continue to be placed throughout the site as usual.

Bullet Points and Copy Will Switch Places in Homepage "Why Choose Us"

To enhance the mobile user experience, we updated the homepage "Why Choose Us" row (associated with PBNs Automotive A, Home Services D, G, H, M, O, Law D, F, Med/Dental F, H, and Other A) to feature bullet points on the left and copy on the right. This way, users will see the bullet points first on a mobile device. Bullet points are perceived as images, and since images naturally attract attention, we have a better chance of keeping users on the site. Additionally, the CTA button now sits nicely under the text on mobile, creating a more natural flow than before.

Desktop / Tablet View

Mobile View

Unified Merchant ID for All Review Widgets on New Sites

The Merchant ID associated with all review widgets—including the desktop and mobile header reviews widget, the homepage recent reviews widget, the internal page right gutter recent reviews widget, and the review page widget—is now connected to the content library. QA will only need to update the content library field named Hibu Reviews Merchant ID to update all site review widgets. This connection applies only to new sites moving forward.

Tablet Header Will No Longer Feature Desktop Header

The tablet header will no longer feature the desktop header or a transparent background. Instead, similar to the mobile version, it will have a "hamburger menu." This menu will be accompanied by the reviews widget, logo and slogan, and a connect data phone button. The design, like the mobile header, is fixed and should not require additional modifications. If the client does not have reviews, it is recommended to replace the reviews widget with the geo featured on the desktop. Additionally, the hamburger menu flyout should mirror the mobile version.

Designer QA Checklist Before Website Handoff

Fri, 26 Jul 2024 17:51:04 GMT

As a website designer - which includes copy writers offshore designers, DPS , ensuring that a website is polished and professional before handing it off to QA or a client is crucial. Here's a comprehensive checklist to help make sure all essential elements are in place and functioning correctly:

1. Text Span Should Not Exceed 900 Pixels

A text span of 900 pixels or fewer keeps the message readable and gives a clean, organized look. Text that is too wide will give a bad overall impression because it is hard to read. The text span rule should be enforced on all pages except for the Reviews and other 3rd party widget pages. Learn more.

2. Transparent Header and internal page Header Alignment

It's essential to ensure that the transparent header and internal page header elements are properly aligned. This prevents any "jumping" of elements when navigating between the homepage and internal pages, providing a seamless and professional experience for users. Learn more .

Why Choose Us row

3. Site Colors Connected to a Theme

All site colors should be linked to a site theme for easy updates. This not only ensures consistency across the website but also allows for efficient updates in the future. A well-connected color theme simplifies the process of maintaining a cohesive visual identity.

4. Reviews Star Color and Assistant Banner

When applicable, update the reviews star color to match the color theme. This should also align with the assistant banner SMS code and phone number color for visual consistency. Learn more .

5. Logo Clarity

The logo should never be blurry. A blurry logo is often a sign that the logo is displayed larger than its actual size. Always ensure the logo is clear and crisp to maintain a professional look. Learn more .

6. Logo Size Appropriately

If possible, and if the logo file size permits, the logo should be enlarged to fill the available space in the header. This makes the logo more prominent and enhances brand visibility. Additionally, if the logo size and orientation permit, move the logo up into the header reviews or CTA row to help reduce the height of the header. See example .

7. Consistency with Logo Colors

Ensure the site theme colors match the logo. The site colors should always align with the logo, even if the client provides similar hex colors during consultation . Using the exact logo colors ensures brand consistency and makes it easier to update the site theme if the client requests changes.

8. Contrast and Readability

Ensure that all text elements are easy to read. This includes headlines, callouts, coupon copy, button text, video splash copy, recent reviews copy, header elements (such as call or text, geo, phone, and reviews summary), footer copy, and site copy. If necessary, bold elements and/or change colors to improve readability.

9. Icon Consistency

Ensure all icons are consistent throughout the site. Avoid mixing line icons with filled icons to maintain a uniform look.

10. Custom Form Elements

If a custom form is added, verify that the reCaptcha is included. Ensure all fields are correctly defined: the phone field is connected to the phone field type, the zip code to the number field type, the email to the email field type, etc. See examples.

11. Avoid Text-Based Brand Logos

Avoid adding text-based brand logos if not provided by the client. Instead, search for the correct logo on Google. Only replace a text-based logo with an actual logo if you are 100% certain of its accuracy. See example .

12. Copy Block and Call-Out Content is Consistent with Button Text and Action

Buttons guide users through a website and drive engagement. In copy blocks and call-outs, buttons should serve as clear invitations to take action. Ensure button text aligns with the call-out message and user expectations. For instance, if the copy block says "Order online and enter promo code MMMMMM for free delivery," the button text should be "Order Now" to ensure users are not confused and are more likely to take the desired action. Learn more .

By following this checklist, designers can ensure that their websites are polished, professional, and ready for handoff. A meticulous QA process reflects well on the designer's attention to detail and commitment to delivering a high-quality product.

Transform Your Design with Bold Gradient Designs

Mon, 08 Jul 2024 15:40:04 GMT

Vibrant Gradients

In 2024, vibrant gradients will be a major trend in website design. Gradients are color transitions where one color slowly changes into another. Think of a sunset where the sky shifts from orange to pink. They can make websites look more interesting and lively.

Why are gradients so popular? Bright, bold colors are in style right now, and gradients use these colors in creative ways. They can make any website feel deeper and more dynamic.

What's great about gradients is that they can fit any brand. You can mix and match colors to create endless combinations. Whether your brand is fun and energetic or elegant and sophisticated, there's a gradient that will work for you.

So, if you want your website to look modern and stand out, try using vibrant gradients in your next design project. They can give your site a fresh and stylish look that grabs attention.

Considerations

Color Harmony and Branding: Ensure the gradient colors align with the overall branding and color scheme of the website. Gradients should enhance the design without overwhelming the content or clashing with other elements. Using brand colors in gradients can create a cohesive and professional look.
Readability and Contrast: Maintain adequate contrast between the gradient background and the text or content overlaid on it. Gradients can sometimes make text difficult to read if the colors are too similar or too vibrant. Use tools to check contrast ratios and ensure accessibility.
Subtle Transitions: Opt for subtle and smooth transitions between gradient colors to avoid jarring and distracting effects. Gentle gradients, such as blue to white or blue to light blue, look more modern and pleasing to the eye. Using dramatically different colors like orange and purple can be overwhelming and may distract from your content. Keeping gradients simple with no more than two colors ensures a clean, elegant, and effective design.
Directional Flow: Consider the direction of the gradient (linear, radial, diagonal, etc.) and how it complements the design's layout and flow. For example, a diagonal gradient might add a dynamic feel, while a vertical gradient can add depth. The direction should guide the viewer’s eye naturally through the content.
Performance Optimization: Ensure that the use of gradients does not negatively impact the website’s performance. Gradients can be resource-intensive if not implemented correctly.
DO NOT ADD GRADIENTS to buttons, engagement menu, global / sub-navigation

By following these guidelines, designers can effectively use the Divider Widget to enhance their website designs, even in templates that do not originally feature lines.

Examples

Assistant Banner row

Video Splash row

Utility Page Reviews / Call Cut

Footer row

Why Choose Us row

Home Page Recent Reviews row

Gallery Overlay

Why Choose Us row

Blog Bio Page Build Instructions

Fri, 28 Jun 2024 19:53:20 GMT

Blog Bio Page Build Instructions

If Bio page already exists, use that and supplement or update content if necessary (ie - if length is short)
If no Bio page exists, follow the steps below:
Click on the Pages icon on the left hand side of the platform
Click on arrow next to "About" to expand the menu items below
Click on the gear icon next to "First Last" (this is the Bio page template) and select "Rename"
Rename: Enter the owner's first and last name, along with any relevant titles or prefixes, using the title case format of site (ie - if other pages are all caps in nav, make owner's name all caps)
Example - Dr. Regina Phalange, MD

Click on the gear icon next to the Bio page and select "Stage Draft for Publish"
Click on the gear icon next to the Bio page and select "Edit Page SEO"
Page URL: /first-last
Update to owner's first and last name, using the title case format of site (ie - if other pages are all caps in nav, make owner's name all caps)
Ex - /regina-phalange
Page meta title: Prefix First Last, Title | NOB
Update to owners name, using any appropriate prefixes and titles, then update NOB to the name of the business using the title case format of site (ie - if other pages are all caps in nav, make owner's name all caps)
Ex - Dr. Regina Phalange, MD | Haverford Medical Clinic
Page meta description : NOB [verb] offers / provides / serves / specializes in, etc. [Core business keyword (or phrase)] [City, ST or serving area]. Motivating factor. Motivating factor (space permitting). Motivating factor (space permitting).
Update NOB to the name of the business and include details regarding the products and services offered by the business
Ex - Dr. Rufus T. Firefly, DDS has been specializing in family dentistry in the Boston area since 1994. Voted Top Doc by Boston Magazine 10 years in a row.
Click the 'x' to navigate to the Bio Page
Click on the Bio Page Template to open the page
Header : First Last
Click on "First Last" and replace it with the owner's first and last name and any relevant prefixes or titles
Header: NOB
Click on "NOB" and replace NOB with the name of the business, using appropriate capitalization
H3: First Last
Click on "First Last" and replace it with the owner's first and last name and any relevant prefixes or titles
Additional Sections: Update the remaining H3s and paragraph content to information applicable to that particular business
Right Gutter

If no LinkedIn, do not populate right gutter (ie, no photo, linkedIn icon), just delete the data from the template
Photo : Update photo
Right click on the image and select "Edit Content"
Content : Scroll down until you see "Replace" and click on it
Select the appropriate image or logo, or click "Upload" to upload one
Use the picture provided by the owner, the LinkedIn profile picture, or the Logo
Update alt text to person's name or let AI generate (click purple stars)
If you let AI generate, adjust if necessary
Design : Whatever the width of the picture uploaded is, adjust width to that here
Scroll down until you see "Width"
Manually enter the appropriate width into the box
Ex - if the size of the picture is 200x200, manually adjust width to 200px
First Last: Update to the owner's first and last name, with any appropriate prefixes or titles
Ex: Joe Howe, Managing Partner
LinkedIn icon :
Click on the icon and scroll down until you see the LinkedIn URL
Update to client's LinkedIn profile page

Update Blog Template to Include Author:

Click on the Blog icon on the left hand side of the platform
Click on "Edit Layout" from the menu on the left

On the left hand side, click on the eye to make the Author layout visible

You should now see text display on the blog layout that says:
By First Last
POST PUBLISH DATE

Click on By First Last and select "Make Visible"
Update First Last to the owner's name, using any applicable prefixes or titles and using the title case format of site (ie - if other pages are all caps in nav, make owner's name all caps)
Ex - Dr. Regina Phalange, MD
Select the updated name and then click the link icon in the formatting menu
In the pop up box, select the "Existing site page" radio button, and then select the Bio page from the list of pages
Hover over the POST AUTHOR | POST PUBLISH DATE text in the template and click on the 'x' to delete it
Click "Done" in the upper right

Adding 3rd-Party Code

Wed, 19 Jun 2024 16:02:55 GMT

Adding Third-Party Code to Your Website

Adding third-party code to your website can enhance its functionality with features such as tracking, chat, and other customizations. This guide will walk you through the steps to safely and effectively add this code to your site without requiring any coding knowledge.

Steps to Add Third-Party Code

Before making any changes, it is a good idea to use the Site Backup Feature to create a backup of your current site. This ensures you can easily revert to the original version if something goes wrong.
Adding code to the Header HTML Header HTML (<head>) or Body End HTML (</body>)
In the left panel of your website editor, click on Settings .
Select Head HTML from the options.
There are two main sections where you can add the code:
Body End HTML : This section is for adding custom HTML or JavaScript just before the closing </body> tag of each page on your site.
NOTE: Unless specifically instructed otherwise , all third-party code should be added to the Body End HTML section. This practice is recommended because:
Improves Page Load Speed: The main content of the page loads first, enhancing the user experience.
Reduces Rendering Delays: Ensures the page's content is visible sooner.
Better Browser Performance: Avoids issues like flickering or layout shifts during the page load.
Fewer Script Conflicts: Minimizes conflicts with other scripts or styles.
NOTE: Don't be concerned if the code doesn't appear to work immediately after you add it. Often, the code will function only after you republish.
Head HTML : This section is for adding content to the head section of your site.
It's uncommon to add code to this section. Always add it to Body End first. If the code still doesn't work after republishing, then add it to Head HTML.
Once you've added the code, click Save .
Adding Comment Tags
When adding third-party code, it is helpful to include comment tags to indicate where the code starts and ends. This improves readability and makes future maintenance easier.
An HTML comment tag consists of three components:
Opening tag:
3rd-party code
Closing tag:
Here’s how to do it:
In Head HTML or Body End HTML add empty rows between  and the code that immediately follows it.
Enter  (ex )
On next line enter the code
On next line enter  (ex )
NOTE: It it's necessary to add comment tags when adding code via the HTML Widget.

See this quick demo as an example:

Guidance for Adding Third-Party Code to `<head>` , `</body>` ,
or Directly as an HTML Widget

When deciding where to add third-party code in your HTML document, it helps to understand the purpose of the code and its impact on your webpage. Here are some tips to guide you:

Adding Code to the Head HTML or <head> Section
When to Use:
Essential Styles and Scripts: If the code is for styles (CSS) or scripts (JavaScript) that need to be available as soon as the page starts loading, add it to the <head> .
Critical Setup: Use this section for any script that sets up important configurations or global variables required by the rest of your page.
Why: Code in the <head> ensures that styles and critical scripts are loaded before the content, preventing layout shifts and ensuring scripts are ready when the content loads.
Adding Code to the Body end HTML or </body> Section
When to Use:
Non-Essential Scripts: If the script enhances functionality but is not critical for the initial page load, place it at the end of the <body> .
Performance Optimization: Scripts here will load after the main content, improving page load times and user experience
Why: Placing scripts at the end ensures that your main content loads first, making the page usable sooner for visitors.
NOTE: Unless specifically instructed otherwise, all third-party code should be added to the Body End HTML section.
Using an HTML Widget Directly in the Page
When to Use:
Interactive Elements: When you need to place interactive elements or widgets at specific locations within your page content.
Precise Layout Control: When the widget needs to be part of the content flow and interact directly with other page elements.
Why: Directly embedding widgets allows them to be positioned exactly where they are needed, ensuring a seamless user experience.
Examples
Embedded YouTube Video
Google Maps Embed
Facebook Page Plugin
Twitter Embedded Tweet
Instagram Post Embed
SoundCloud Audio Embed
Spotify Playlist Embed
Vimeo Video Embed
Chat widget
BBB Logo

Remember

Hibu will not activate, set-up account, generate, or "grab" 3rd party integration code / snippets on behalf of client.
Hibu will not debug issues with client-supplied 3rd party HTML snippets
All 3rd party codes will not be maintained or supported by Hibu
Clients should contact the 3rd party with any issues

Divider Widget: Dots, Dashes, Curves and More

Fri, 07 Jun 2024 12:24:35 GMT

Divider Widget

The Divider widget’s layout library has been reramped and it now includes 6 new and sleek design styles for you to choose from. Here they are:

Hibu designers are free to use the newly revamped Divider Widget -- even when the selected template design doesn't feature lines. Adding a divider can enhance a website's layout and readability when used appropriately. Here are some key points to consider:

When to Use a Divider

Separating Sections: Use dividers to clearly distinguish between different sections of content, such as separating the header from the body or different topics within the body.
Grouping Related Content: Dividers can help group related information together, making it easier for users to navigate and understand the content.
Enhancing Visual Hierarchy: Dividers can be used to create a visual hierarchy, guiding the user's eye to the most important information first.
Improving Readability: Adding a divider can break up dense text, making it more readable and less overwhelming for the user.

Dos and Don'ts

Dos:

Keep It Subtle: Use thin lines and soft colors that complement the overall design without drawing too much attention.
Consistent Style: Ensure the style of the divider matches the overall design theme of the website.
Use Sparingly: Only use dividers where necessary to avoid cluttering the design.
Responsive Design: Make sure dividers are responsive and look good on all screen sizes, including mobile devices.

Don'ts:

Overuse: Avoid using too many dividers, as this can make the design look fragmented and disjointed.
Bold and Overbearing Lines: Steer clear of thick or overly bold lines that dominate the design.
Inconsistent Styles: Mixing different styles of dividers can make the design look unprofessional and chaotic.
Ignoring Accessibility: Ensure that dividers are accessible and do not hinder the readability or usability of the content for all users, including those with visual impairments.

By following these guidelines, designers can effectively use the Divider Widget to enhance their website designs, even in templates that do not originally feature lines.

Button Callout / Copy Text

Tue, 28 May 2024 17:54:26 GMT

Why "Learn More" May Not Be Your Best Option

Buttons play a crucial role in guiding users through a website, serving as key touch points for interaction and engagement. In the context of callout or copy block buttons, their purpose extends beyond mere navigation—they act as invitations to explore, discover, and take action. The button text must therefore be carefully crafted to align with the surrounding content and the user's expectations.

“While "Learn More" is a common choice and often the most logical option when the copy block or call-out is specific to a product or service , it can sometimes fall short in providing the specific guidance and motivation needed to drive deeper engagement – especially for out or norm pages.” Here’s why "Learn More" may not always be the best option and what to consider instead:

Menu Information: "View Menu"
Contact Page: "Contact Us"
Event Registration: "Register Now"
Request a Free Estimate: "Request Now"
Product Features: "Explore Features"
Case Studies: "Read Case Study"
Testimonials: "Read Testimonials"
Career Opportunities: "View Job Openings"
Blog Posts: "Read Article(s)"
Special Offers: "View Offers/Specials/Discounts, etc"
Membership Information: "Join Now"
Course Enrollment: "Enroll Today"
Demo Request : "Request Demo"
Newsletter Signup: "Subscribe Now"
Downloadable Content: "Download Guide"
Project Gallery: "View Projects"
Virtual Tour: "Take a Tour"
FAQs: "Read FAQs"

These alternatives are merely suggestions that can provide clearer, more specific calls to action, aligning better with the user's intentions and the context of the surrounding content. Implementing these suggestions can enhance both usability and engagement.

Before / After Widget

Thu, 16 May 2024 19:24:51 GMT

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

Icon Widget Library

Wed, 08 May 2024 18:48:42 GMT

Icon Widget Library

The Icon Widget Library has been upgraded and now includes over 5 million icons! This means designers can find icons for virtually anything they think of, thus eliminating the need to search for and convert vector files into SVG format.

If designers can't find the desired icon, they can upload their own icon SVG files and easily access and reuse these icons throughout the site-building process. Uploaded icons are categorized as either Site Icons or Free Icons, distinguishing between assets uploaded by users and those already available in the library.

Icons typically come in two main styles: outlined or filled. Consistency is crucial, so designers should refrain from mixing outlined icons with filled-in ones. It's best to use only one style of icons throughout the entire site. If designers choose filled-in icons, they should make sure that template sections and widget default icons are adjusted accordingly to maintain consistency.

Furthermore, designers are encouraged to replace template and widget placeholder icons with those that align with the vertical, callout, or offer. For example, using a coupon icon solely because it's a coupon may not be necessary—choose icons that best reflect the content or function they represent.

Filled-In SVG Icon Example

Outline SVG Icon Example

Tabs Widget

Mon, 06 May 2024 14:36:57 GMT

Tabs Widget

The Tabs widget serves as a valuable tool for organizing and presenting content efficiently on websites. With Tabs, visitors can seamlessly navigate between different sections of related content by clicking on designated tabs, streamlining the browsing experience without the need for extensive scrolling.

Tabs offer an elegant solution for showcasing various types of content such as Services, Plans, or Team members, presenting information in neatly organized sections while conserving space and maintaining a clean layout.

While the product preference leans towards displaying content through copy blocks or unique rows for improved accessibility and SEO, there may be specific scenarios where the Tabs widget proves beneficial.

In instances where clients insist on integrating a Tabs widget into their Hibu Site, a set of instructions, rules, guidelines, and considerations have been outlined to ensure its effective utilization.

Content Editor

To access the content editor:

Right-click the widget, and click Edit Content .
To add a new tab, click Add Tab .
To edit the image (and alt text), Tab label, Label heading type, Title, Description, and button, click the tab .
Header tags are available to make your text more easily identifiable by search engines. It is recommended you select H4 for the Label Heading Type.
To display images on the tabs, click the Show image toggle.
When incorporating an image, designers may find it necessary to adjust the image's height, width, or crop to ensure proper alignment at the top.
It's important to note that the height and width adjustments apply universally to each tab. Exercise discretion when making adjustments, as what works for one image may not necessarily work for another.
Include an alt text field for each image.

Design Editor

To access the design editor:

Right-click the widget, and click Edit Design .
Click the layout to select a different layout for the tabs.
Click All Tabs to customize the style of unselected tabs, reverse the tab direction, and control the tab layout on mobile.
Click Selected Tab & Hover to customize the text style and background. This does not affect the All Tabs design.
Click to change the Description Style, Button Style , and Image Style .

Notes:

You can have as many tabs you want, but keep in mind that the space for each label is reduced with each new tab.
Keep tab labels short. Two words maximum. Edit and abbreviate when necessary.
Tab label and Tab Title do not have be the same.
For desktop and tablet displays, there are four layout options available. All layouts except for the vertical/left gutter option are approved for use. If a designer opts for a different layout, remember to maintain consistency throughout the site if multiple tab widgets are used.
There are two layout options: tabs and accordion. The tabs layout can be navigated by swiping.

Mobile View

There are two layout options for mobile display: tabs and accordion. With the tabs layout, users can control it by swiping. It's recommended that designers ALWAYS opt to display as an accordion on mobile, allowing tabs to be shown vertically rather than horizontally.

To change the Tabs widget for mobile:

In the top navigation bar, click the device view to switch the view to mobile.
Right-click the widget, and click Edit Design .
Click All Tabs , and then click the Display as Accordion toggle.

Sections → Icons / Logos

Thu, 02 May 2024 23:43:29 GMT

Sections → Icons / Logos

Many clients wish to display a row or grid of brand logos or accreditation / affiliation badges on their website. This guide will provide instructions and tips on how to integrate the hWP "icons-logos" section to achieve this.

Begin by inserting the section into the preferred area on the page, usually positioned above the footer, following the usual procedure. You can find these sections conveniently located in the Sections→Brand Logos/Awards/Badges folder.

Designers have the flexibility to replace the PBN logo row with any of the six pre-designed sections available. Furthermore, they have the liberty to customize background colors as per their preference.

Rules and Guidelines

Following these rules and guidelines will make sure your images show up right and look the same on every page of your website.
Content Settings:

Leave the title, description, and button fields blank and hidden.
Apply appropriate Alt Text to each image.

Image Settings (apply to each image):

Position should be set to middle/center.

Notes:

Signing the Digital Content Release Agreement is not required for clients to incorporate their provided logos or retrieve logos from their current website.
Should the client submit a low-quality brand logo, consider consulting our Resource Library for alternative options featuring higher quality.
Logos may appear cropped/clipped within the widget but will display correctly on the webpage.
Toggle the "Enable links on gallery images" option if you need to link images.
Only activate the Zoom hover effect when there's a link attached.
Avoid tightly cropped images to prevent clipping during the zoom hover effect.
Maintain consistent sizing and cropping for images, leaving 15-20px of whitespace on all sides.
When dealing with logos of varying sizes and dimensions (portrait, landscape, square), it's advisable to standardize their presentation for consistency. To achieve this, create a square white canvas and position each logo in the center. This method ensures that all logos are displayed uniformly across your website. Repeat this process for each logo to maintain a cohesive and professional appearance.
If a client asks to add a logo but doesn't provide one, first, check our resource library. If it's not there, you can create and use a text-based logo. Just put it on a square white canvas and center it.

Optimizing Logo Design

Tue, 30 Apr 2024 13:11:48 GMT

Optimizing Logo Design

When dealing with a transparent header where you have the freedom to incorporate a text-based logo, executing it with a white version for the main header and a colored version for internal pages is a fantastic strategy. This approach ensures consistency and enhances the visual appeal of your website.

Similarly, if you happen to receive multiple versions of a logo, including one in all white, you can definitely apply the same principle. Utilize the white version for the transparent header to maintain a clean and elegant look, while employing the colored version for internal pages to inject vibrancy and personality into your design.

By adopting this approach, you not only maintain a cohesive branding identity but also ensure flexibility and versatility in your website's visual presentation. It's a win-win solution that enhances both aesthetics and functionality, catering to the needs of both your design and branding requirements.

Headlines - Breaking for Sense

Mon, 29 Apr 2024 17:33:26 GMT

Elements to Bold for Enhanced Web Design

Headlines that are two or three lines deep can create a tricky problem -- line breaks, or the place where one line ends and another begins. Avoid bad breaks caused by dangling verbs, adjectives or propositions. Review all heads and subheads and to make manual line "breaks for sense." Breaking for sense means breaking a line where one might logically pause when reading it aloud.

When breaking for sense, strive to:

Keep important phrases together
Avoid hyphenations
Break a line after punctuation
Pair adjectives with their nouns
Keep proper names together
Group color and typestyles together

Examples

Looking for a New Car? We

Can Help.

YES

Looking for a New Car?
We Can Help.

Making Life Better One
Home At a Time

YES

Making Life Better
One Home At a Time

Too Much White Space

Mon, 29 Apr 2024 16:55:55 GMT

When Too Much White Space is Too Much

White space, often referred to as negative space, plays a crucial role in website design for several reasons. It's not just empty, unused space; it's a powerful element that helps to create a more refined and professional look. Here's why white space is beneficial:

Clarity and Readability: White space makes content more legible by reducing visual clutter. This helps users to focus on the text, making it easier to read and understand. Think of it as giving your content room to breathe, which in turn makes the visitor's experience more pleasant.
Attention and Focus: By strategically using white space around important elements such as call-to-action buttons or key messages, you can guide the viewer's attention to those areas. This selective use of space can significantly improve the effectiveness of your website's communication.
Overall Aesthetic: A clean and uncluttered layout conveys a sense of professionalism and elegance. Websites that effectively utilize white space often appear more thoughtful and deliberate in their design, which reflects positively on the brand's image.

However, like all good things, too much white space can have its drawbacks. Overuse of white space might:

Create a Disconnect: Excessive space between elements can disrupt the flow of information, making it harder for users to navigate the site or understand how elements relate to each other.
Appear Unfinished: An overly sparse design might give the impression that the website is incomplete or lacking in content, which can undermine the trust and confidence of visitors.
Reduce Engagement: If users have to scroll excessively or can't easily find what they're looking for due to the vastness of the layout, they may become frustrated and leave the site.

The key is finding a balance. Effective web design uses white space to enhance usability and aesthetics without compromising the site's functionality or the user's experience. A seasoned designer knows how to strike this balance, creating spaces that are both beautiful and functional.

Text Span Width on Desktop

Mon, 29 Apr 2024 14:24:41 GMT

Text Span Width on Desktop

For optimal readability on desktop screens, it's generally recommended that the maximum width text should span is about 60 to 75 characters per line, including spaces and punctuation. This guideline is rooted in typographic research, which suggests that lines of this length are most comfortable for the human eye to follow without straining. When translated into web design terms, this typically equates to a width of around 900 pixels, depending on the font size and typeface used.

To effortlessly alter the width of your text on the screen, you can adjust the text container directly . Just click on the text box and drag the handle at the bottom right corner to modify the width. As you make adjustments, keep an eye on the height and width indicators. Aim for a width of approximately 900 pixels, though a variation of plus or minus 10 pixels is perfectly fine. This method offers a simple way to ensure your text spans an optimal width for readability.

Background Overlay

Mon, 29 Apr 2024 12:44:21 GMT

Background Overlay

Background overlays are employed to improve text readability on top of background images, ensuring that the message is clear and legible. However, an overlay might be too dark if it adversely affects the user interface or the overall design. Consider the following when evaluating the darkness of an overlay:

Text Legibility: If the text is difficult to read against the overlay, suggesting that contrast is insufficient, then the overlay may be too dark.
Design Balance: An effective overlay complements the content; it should not be so dominant that it becomes the main focus unless intentionally designed that way.
Visibility of Background: The overlay should be light enough that the background image is discernible. If the image details are lost, the overlay is too dark, defeating the purpose of using an image instead of a solid color background.

An overlay should strike the right balance, providing sufficient contrast for legibility while still allowing the background image to support the design narrative. If the overlay obscures the image to the point where its presence becomes irrelevant, adjusting the darkness or considering a different design approach might be necessary.

The Importance of Pixel-Perfect Header Alignment

Mon, 15 Apr 2024 15:50:53 GMT

The Importance of Pixel-Perfect Header Alignment

Ensuring a consistent user experience on a website means header elements like the geo-location, phone number, reviews widget, and logo must align perfectly across all pages. This prevents any disruptive 'jumping' of elements as users navigate from the homepage to internal pages.

Precise alignment of these elements not only upholds a professional appearance but also reinforces user trust by providing a smooth, predictable browsing experience. Consistent positioning of the logo, for example, reaffirms the user's confidence in the brand with every click.

In short, pixel-perfect header elements are crucial for seamless navigation, maintaining user engagement, and showcasing a commitment to quality in web design. This attention to detail reflects positively on the brand's reliability and professionalism.

Inconsistent Header Alignment Example

Consistent Header Alignment Example

Logo Quality

Mon, 15 Apr 2024 14:38:30 GMT

Logo Quality

Enhancing a client's logo quality is crucial for a professional image and effective brand presentation on their website. A high-quality logo creates a positive first impression, essential for website credibility, and ensures brand consistency across platforms.

Assess the quality of the logo — does it appear pixelated or blurred? If so:

Confirm if the logo's dimensions on the page exceed its intended height and width.
Verify if a higher-resolution logo is available for use:
Search for a High-Quality Logo:
Conduct a Google Image search using the name of the business (NOB) or "NOB logo" to locate a better-quality version of the logo. Use the "Tools" under the Google search bar, then "Size," and select "Large" to filter for high-resolution images.
Evaluate Available Logos:
Compare any logos you find with the one provided by the client, ensuring they match in style, color, fonts, and overall design. Only choose a logo that is identical to the one provided.
Handling Additional Elements:
If the high-quality logo includes additional elements not part of the original logo (like a phone number or tagline), see if these can be easily cropped out without compromising the logo’s integrity. Use graphic design software for precise cropping.
Replace the Logo on the Website:
Update the website with the new, high-quality logo, ensuring it aligns with the site’s design standards. Replace both the main and mobile versions of the logo to maintain consistency across all devices.

By following these steps, you can enhance the client's website design, contributing positively to their brand's online presence.

Review Stars

Mon, 15 Apr 2024 14:08:14 GMT

Choosing the Right Color for Review Stars

When selecting a color for review stars on a website, it is important to adhere to specific guidelines to ensure visual consistency and effectiveness. The primary color choice for review stars should be variations of yellow, as this is generally the default and most suitable option.

Default Color Choice: Variations of yellow, such as gold, should be used as the default color for review stars. This choice aligns with the common practice of using vibrant and attention-grabbing colors that stand out against most backgrounds, contributing to a cohesive and polished appearance.

Alternative Color Choices: Designers have the option to use variations of blue or green for review stars, but only if these colors are present in the client’s brand palette. If yellow is not an option or if there are specific brand guidelines that include blue or green, these colors can be used. However, blue and green should only be selected if they are part of the client's established brand colors.

Colors to Avoid: To maintain the effectiveness and visibility of review stars, avoid using the following colors:

Pale Tones: These can lack sufficient contrast and pose accessibility issues.
Colors Close to the Row Background: Such colors may not draw adequate attention to the review stars.

Psychology of Star Colors: Understanding the psychology behind star colors can help in making informed decisions. According to a December 2021 survey by ReviewInc, blue stars were the most trusted, with 28.4% of U.S. consumers preferring them. Blue’s association with security and permanence contributes to its positive perception. Green stars were preferred by 25.8%, while yellow stars were chosen by 25%. Red stars were least favored at 11.6%, and orange stars had an even lower preference at 9.3%.

Men generally trust yellow stars more, whereas women show a preference for red stars. Despite this, yellow, blue, and green remain the most reliable choices for review stars based on overall trust and visibility.

Conclusion: For review stars, use variations of yellow as the default color to align with common practices and ensure design consistency. Variations of blue and green are acceptable only if they are part of the client’s brand colors. Avoid colors that may be perceived negatively or that lack visibility. Adhering to these guidelines will contribute to a positive online presence and enhance the overall effectiveness of review ratings.

Tips

If you decide to switch from the default yellow color, make sure to update all review-related widgets including:

When possible, link the new color to the site's Theme Colors maintain consistency throughout the build and simplify color adjustments for future adjustments.

Elements to Bold for Enhanced Web Design

Thu, 11 Apr 2024 17:17:49 GMT

Elements to Bold for Enhanced Web Design

Our main goal is to make websites as easy as possible for visitors to quickly find and process information. We employ various design elements like bold text and headline drop shadows to guide user attention effectively. For example, bolding elements such as navigation labels, buttons, headlines, key phrases, CTA statements, and form labels can significantly enhance user engagement and readability.

Be cautious, though— overuse of bold text can clutter the page and make it confusing, counteracting our primary objective. This is particularly important as we aim to minimize moments when users might pause to read details like a phone number or reviews, which are opportunities for them to leave the site. Trust your judgment: if you feel there's too much bold, you're probably right.

Tips

If you decide to switch from the default yellow color, make sure to update all review-related widgets including: