Blog Layout

RevLocal Microsite Migration

October 15, 2024

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

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:

  1. Create backup
  • pre_firstlast (pre_jamesclark)
  1. Import all microsite images
  2. Populate the image gallery
  3. Assign hero image and logo in Business Images
  4. Apply microsite color scheme to site Theme
  5. Add external links to global navigation
  6. Remove duplicate contact info
  7. Site Check
  8. Create backup
  9. post_build_firstlast (post_build_james-clark)


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


Examples



Step 1: Site Backup

  • pre_firstlast (pre_jamesclark)

Step 2:  Import Microsite Images

  1. 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

Import Microsite Images

Populate Gallery

Populate Hero /Logo

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

  1. Navigate to Theme > Colors.
  2. For each color update:
  3. Click the arrow next to the color to update.
  4. Select the color swatch to edit.
  5. Use the eye dropper tool (next to the hex code).
  6. Sample the corresponding color from the microsite.
  7. Update the following colors:
  8. "HDR - button hover": Sample from microsite header
  9. "Nav - button on": Sample from hero row (or buttons if hero matches header)
  10. "Hero Bar": Sample from header again
  11. Optional: If the microsite uses a yellow variant, update "Reviews Stars" with this color.
  12. Text Color Adjustments:
  13. 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.
  14. This may apply to navigation, hero bar, or button text.

Site Color Theme

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.

  1. Update Hero Button (if applicable)
  2. 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.
  3. Maintain the same text and functionality as on the microsite.
  4. Preserve Row Above Footer (if applicable):
  5. If the microsite has a row above the footer with external links, replicate this on the Hibu site.
  6. Note: These links may be independent of the hero button(s).
  7. Add External Links to Site Navigation:
  8. Open Pages
  9. Locate the Additional Link / URL placeholder
  10. Click the three dots at the very right of the placeholder
  11. Rename the page as it's labeled on the site (e.g., Pay Now, Order Online, View Menu, Learn More)
  12. Click "Show or Hide from Navigation" and then "Show All"
  13. Click "Edit External URL" and enter the complete URL
  14. Ensure "Open in new window" remains checked
  15. 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)

Image Best Practices for Hibu Websites

By Hibu Sections • March 25, 2025
What to Know Before You Submit / Upload a Photo Images can make or break a small business website. Whether you’re a contractor, hairstylist, dentist, or restaurant owner, the photos you upload should build trust, highlight your work, and make your business look professional. Most business owners aren’t photographers. They're using iPhones or Androids, often snapping pictures during the workday. That’s fine — as long as you follow a few simple best practices. This guide covers what you need to know before you add images to your site, including: The right image sizes and formats for web What types of images help convert leads How to take better photos of your team and your work Tips for lighting, composition, naming, and consistency When to not use images at all The tips here work for any type of business — we’ve just included examples from home service contractors since they make up a large number of Hibu sites. Let’s get everything in frame.

Pixel vs. Percentage Units in Web Design

By Hibu Sections • March 24, 2025
Pixel vs. Percentage Units: Why They Matter in Responsive Web Design When you're building websites that need to work across all screen sizes—from wide desktop monitors to narrow mobile phones—how you size elements matters. At Hibu, we design for everyone. That means every element must display correctly on every device. If your content is misaligned, crammed, or floating awkwardly, users won’t stick around—and they won’t convert. One of the most important layout choices you’ll make is whether to use pixel or percentage units for sizing.

How to Use the Contrast Checker

By Hibu Sections • March 21, 2025
How to Use the Contrast Checker Text needs to be easy to read—on every device, for every visitor. At Hibu, we aim to make every website as easy to read as possible. The HWP Contrast Checker helps with that by showing whether your text color has enough contrast against the background. You’ll find it inside the color picker whenever you're selecting a text color.

Collection Site Build Time Study

By Hibu Sections • March 6, 2025
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.
Show More →
Share by: