Existing Site

Adding a Superhero to an Existing Site

Hibu

Rules and Guidelines

  • Post Live Amends may only add Superheros to Smart Sites. 
  • Post Live Amends will make the best attempt to incorporate old hero elements headline, motivating factors, phone, any CTA button (other than Request ______), and full-length background row image.
  • The Superhero does not support sliders, background video, confidence icons such as BBB and Authorized GAF Contractor logos, coupons, video (direct YouTube embed or video splash), and the image used with a Text / Offset Hero (which is typically not sized correctly to fill the full-length Superhero background). 
  • Post Live Amends will use the best judgment when swapping out the slider or cropped image. 
  • The Superhero form has four fields: Full Name, Phone, Email, and a product/service dropdown. 
  • Additional fields are strictly prohibited.
  • We can always add additional fields to the official dedicated Request Form made available to the user in the desktop and mobile header, engagement menu, callouts, and throughout the run of site copy. 
  • If requested, Amends can remove the dropdown or swap it out with another text field (except the Long text /Message field)
  • If the business is medical-related, Post Amends will delete the product/service dropdown (and replace it with another field if requested. )
  • In addition to the home page hero and "pages that sell," the Post Live Amends will add a Superhero to all utility pages that display a hero.

Steps to add Superhero to an Existing Smart Site

  • Create Backup and name it "old-hero"
  • Add Superhero (SH) Section that best matches the existing hero
  • Delete newly added SH section's top row (the one without the form)
  • Copy the headline from the old hero and paste it as the headline in SH
  • Post Live Amends  will make the best attempt to maintain existing font type, style, size, etc.
  • 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. This includes keeping adjectives with their nouns, breaking after punctuation, keeping proper names or hyphenated words on one line, etc.  Learn more and see examples.
  • The motivating factors in the SH hero are connected via the motivating factors widget, which are connected to “Motivating Factors” in the content library (CL). As such, Post Live Amends will create new CL field labeled “Motivating Factors” and populate it existing hero motivating factors
  • View Motivating Factor Widget training in Superhero training for details.
  • Mirror elements found (or not found) in existing hero. For instance
  • Add the CTA button if the old hero includes it
  • NOTE: DO not add Request ______ button that is displayed in old. The button is no longer necessary as the request form is contained in SH.
  • If displayed in the old hero, copy phone (yext tag or manually typed) and paste above SH phone.  Then delete SH phone.
  • If displayed in the old hero, copy Open / Close yext tag and paste above SH Open / Close.  Then delete SH Open / Close.
  • IMPORTANT - Adjust font spacing, alignment on desktop and tablet. 
  • IMPORTANT -Adjust spacing, alignment on mobile.
  • Swap out the SH background image with the old hero background.
  • Flip the background image if needed.
  • When the superhero row includes a form, assume the text (headline, motivating factors, CTA, etc.) on the left and the form on the right will obstruct most of the background image and focal point.  A focal point is the part of an image (or text) that draws the eye of a viewer to the most important part of the image or the area that you want to highlight. Build should flip a stock image or nondescript client provided image using HwP image editing tool to highlight focal point.
  • Do not flip any image that contains text like truck, store front, money, names on lab coats, signage, etc
  • Only flip nondescript client provided images such as those featuring homes, lawns,  food, and the like.
  • Do not feature a flipped image in a hero and the original version of the image somewhere else on the same page.  The original may be displayed elsewhere on another page
  • Build does not need to amend name of flipped image provided the original uploaded image was correctly renamed per guidelines
  • See example
  • Update SH form
  • The form lives inside the column.
  • Click the column to update the background color
  • Use your best judgment. 
  • Text Form Title (not to be confused with widget form title) is independent of form.
  • Update with header request button verbiage
  • Button “Request Estimate,” form title will be “Request Estimate.”
  • Use your best judgment for font type, style, and size.
  • Update field background and placeholder font color if necessary
  • Update Services to field name accordingly (products or services)
  • Update drop-down options per standard guidelines.
  • Update form button text accordingly
  • reCAPTCHA style.  Leave as is.
  • Submission Recipients
  • Update email address to mirror existing Request Form email address
  • Submission Actions
  • (Thank you message).  Leave as it.
  • Note:  It is unnecessary to update form email or other submission fields.
  • Review mobile design. Adjust accordingly.

Once you’re sure your superhero looks as good as it can, copy it.

  • Copy hero.
  • Go to the next page and paste it above the old hero.
  • Swap out the SH headline with the old headline.
  • Swap out the SH background image with the old hero background.
  • Flip the background image if needed.
  • Repeat the process for every page with a hero
  • Create normal post amend backup


Share by: