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)

Callouts and Coupons

By Hibu Sections • October 29, 2024
Discover how to boost engagement with two key website tools: callouts and coupons. Built with the Swiss Army Widget, these elements help you highlight key information and drive conversions through strategic promotions. Learn the essential differences and best practices for maximizing their impact on your site.

Client Provided Privacy Policies

By Hibu Sections • October 28, 2024
As digital marketing evolves, state privacy laws are becoming increasingly stringent. For businesses working with third-party marketing services, having an up-to-date, compliant privacy policy isn't just good practice—it's essential. Our streamlined process helps clients implement custom privacy policies that meet these requirements while maintaining their website's professional appearance.

Left Logo Header

By Hibu Sections • October 22, 2024
A new pre-designed "Left Logo" header section is now available to make it easier to accommodate client requests for left-aligned logos. No need to start from scratch—this ready-made section ensures consistent, high-quality design for desktop views.

New Form Sections

By Hibu Sections • September 24, 2024
We've added new forms to make your work easier, including enhanced contact forms and job application fields. Plus, we'll walk you through how to replace your old forms with the new ones in just a few steps.
Show More →
Share by: