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