SafeWise Elementor Guide

Basic Elementor Instructions

  • How to Login
    • If you don't already have a login to SW, you should've received your login info in your email (check your spam folder)
      • If you have need a login or have issues, send a DM to Krystal Rogers-Nelson on slack
    • Live site (visual composer)
      • https://www.safewise.com/cl-login
  • Introduction to Elementor

Tips and Tricks

  • Clear your cache often.  (Especially when using preview).
  • Hard refresh. Do a hard refresh to reload a page you're working on to see the changes you've made reflected. (CMD/CTR "R")
  • Save often. Click on the green "update" button.
  • Use 2 screens
    • It's more efficient to use two screens. You should have your draft and seo brief open on one screen, then the wp draft open on the other screen so it's easy to compare, make sure you don't miss anything and copy/paste what you need.
  • Use the Navigation bar in elementor to move sections or components around.
    • It's easier than trying to drag them within the editor window.
    • You can pin it to the right side of your screen.
  • Section the content and use headings.
    • Keep everything under each H2 heading in the same "section".
    • Create a new section for each H2 and add an anchor above the heading (anchors create the sticky TOC at the top of the page)
    • Each heading should be in a separate heading component (H2-H4), not in a text block component.
      • Headings should be cascading and should not skip (i.e. from a 2 to a 4).
  • Check Links
    • Make sure any affiliate ($-making) links are "no follow" and "open in a new tab"
    • Use relative links for internal links and go-links.
      • Any time we add an internal link to another page on safewise.com, it should be a relative link, open in the same tab, and do-follow.
        • a relative link is everything after the "www.safewise.com" in the url (i.e. /resources/parental-control-filters-buyers-guide/).
    • go-links should also be relative links that are no-follow and open in a new tab (i.e. /go/bark/online-security/parental-control/).

Page Examples

How to Use Common Components

1. Hero Cards and subheadings

  • There should be a subheadings (hook copy) on pages with hero cards).
  • Make sure the right hero card component is being used based on the page type
    • Best pieces should use hero card- best of -icon list
    • Versus pieces should use hero card - versus- icon list
    • Reviews should use hero card - standalone- copy.
  • Fill in the "banner" field if it doesn't have one
    • The banner should have a label that is a use-case or best-label (i.e. Top Pick, Best Overall DIY System, etc.)
  • Move the hero card component into the article header section and change the header to "brand review header."
  • On city geo pages, there is a block for hero cards ("Geo Hero Cards" with corresponding region)
  • Detailed instructions
  • How-to Video
    • UPDATE: It says in the video you need to select "stack" in the layout settings within the hero card component. You do NOT need to do this anymore; just leave it as "site default."
      • Dev will be updating that setting so that the "site default" will be stacked.

2. Headings and Featured Snippet

  • Headings
    • Every heading needs to be moved to its own heading component with an seo h-tag (H2-H4).
      • This means you'll need to separate text into multiple text content components with the heading components above the text content components.
  • All headings should be sentence case. If they are capital case on a page you're updating, change them to sentence case.
  • You don't need to add a heading component for the H1 at the top of the page.
    • The article header at the top of the page (shaded blue) will automatically pull in the H2 from the wp dashboard.
  • Featured Snippet.
    • Add a heading in the "heading box" within the component.
    • Add dividers above and below the featured snippet component (unless there is a last updated box above it, then you only need to add a divider below it).
    • Leave the bolded styling in the list (product names bolded with tags and labels un-bolded).
    • Links in this component should be jumplinks (same tab, do-follow).
    • You can add an image to the snippet list by adding it from the library or uploading a new one.
      • Click on the plus sign under  "image select" in the component.
  • Detailed instructions
  • How-to Video: Headings
  • How to Video: Snippet List jumplinks

3. Tables

  • The row with cta buttons (learn more) needs to be set as a button.
    • Select "link" then "button" under "type" 
    • Insert correct anchor text and url in corresponding boxes.
  • Check images/logos for managed logos or wordpress uploads.
    • Our most important brand logos should be found under "managed logos" rather than "wordpress upload".
  • Images/logos and prices should be clickable
    • affiliate links should be set as no-follow, new tab.
    •  "read review" link should be an internal link set as follow, same tab
  • Check table on mobile to make sure everything is displaying correctly.
    • Ideally we want to limit table rows to only 5-7 rows total.
  • For any tables with yes or no, select "icon with text" under "fields" settings, then select "yes light" or "no light" in the icon dropdown under "values"
    • You will see a green checkmark or red x next to the yes or no text (instead of the green or red background color)
  • If there are other "fields" in the table that are not displaying correctly, update the setting in the "field" section, then correct any text in the "values" section that need to be updated.
  • If the top row of the table is a label (best for...top pick etc), you will need to add html tags to bold those (use instead of ).
    • This is one of the only places you should be adding html.
      • Another place you can add html if you need is to add a line break if there are multiple words in a table cell (use line breaks, not bullets).
  • *ONLY for tables we use on multiple pages * (i.e. Best Home Security Systems (BHSS) table or a Best Medical Alert Systems (BMAS) table, etc.)
    • Use a "block" component instead of the regular manual comparison table component  (the table blocks already have the table built in it).
    • For FAQ pages with the BHSS table at the bottom, select the "BHSS or BMAS- Top 5 (with divider)" block.
    • For pages with a table within the content, select the block without the divider and either the Top 5 or Top 10.
  • Detailed instructions
  • How-to Video

4. Product Cards

  • Product cards should go into an inner row so they're not so GIANT.
    • Move the text block into the column to the right of it.
    • Adjust the settings of the inner row to 33 66 so the card section on the left is smaller than the text section on the right.
    • Make sure the heading is ABOVE the inner section, not within it.
    • Add a "label" field whenever possible
      • The label should be a use-case or best-label (i.e. Top Pick, Best Overall DIY System, etc.)
  • Detailed instructions
  • How-to Video

5. Images and Videos

  • Single Images should use the simple image component.
    • Select "medium large size" as default to keep file sizes small and save on page speed.
      • If there is a short and wide image, you can select "extra wide size"
      • If there is a screenshot that is displaying too big, you can add it to an inner section with two columns, or add a new section with three columns to keep the image displaying at a reasonable size (not giant).
  • Featured, social and hero images are added in the same place we used to add them (within the regular wordpress editor, so you'll need to exit elementor and go back to the dashboard to do this).
    • You can find these images by clicking on the link in AT in the "design/photo deliverables" field.
      • If design assets were not included, you can find lifestyle images on istock, or follow these instructions for finding a product photo.
      • Remember to push the "update" button within that view before clicking into "edit with elementorl;" otherwise they won't save.
    • Image Sizes
      • Hero Image*: 1600px x 500px
      • Feature/Article Image*: 800px x 500px

      • Snippet Image: 730px x 475px

      • Facebook*: 1200px x 630px

      • Pinterest: 564px x 864px

      • Logo Image**: 320px x 200px

      • Isolated Product Image**: 200px x 200px

      • Isolated Equipment Image: 300px x 300

      • Image Carousel: 1000px x 460px

      • Screenshots: Max of 800 wide. Height can vary depending on image orientation.

        *These three images should be the same image, but different sizes.

        **Image should be centered on white background.

    • When uploading images, remember:

      • UX Image guidelines from design

      • Only add images if they are useful and add value (complement the text and/or serve a purpose like visually breaking up major content sections)
      • Remember to keep file sizes as small as possible (while still maintaining a clear picture). Large file sizes can slow down page speed which creates a bad UX.
      • Don't use cheesy/generic images that don't add value.
    • In general, image sizes should be <100kb.

      • You can use an app called Image optim to minimize file size

        • Run Image Optim App and drag exported file into the box. Image Optim automatically optimizes the size without further input
        • If you need help resizing an image, reach out to Kassidi!
  • Videos Use the image & video component rather than the simple image component for:
    • Videos (use the youtube link instead of the iframe embed code) 
    • Multiple images that could be displayed together in a slide show (like multiple graphics on an outreach piece).
  • Detailed instructions

6. Callout Boxes and Email sign up form

  • Email sign up
    • To add an email sign up form, you'll need to add a new section and select the email sign up form header from the template block drop down in settings.
  • Callout box (aka heads up box). Use the callout box -horizontal component.
    • Select the correct icon to match heading.
    • Icons
      • Bell = Warning/Heads up!/Reminder
      • Checklist = Add to your to-do list
      • Light Bulb = Pro/Expert or Insider tip. Deals.
      • Notepad = Keep in mind/Take note
      • Thumbs-down = We don't recommend/bad idea
      • Thumbs-up = We do recommend/good idea 
  • Detailed instructions 

7. Anchors, Dividers, Disclaimers, and Sources.

  • Anchors. These should be included above each H2 sections (unless it's a short piece that doesn't require them, like a listicle or blog/column).
    • These create the sticky table of contents at the top of the page.
    • Whatever you type in the label box will display in the sticky TOC (if you don't want it to display, you can toggle "no").
    • They're also used to create jumplinks.
      • Do not use special characters in the label within the anchor component (including  -,_, $, /, etc.)
      • You can add an anchor to use for jumplinks and select "no" if you have lowercase text you don't want to display.
      • You can add spaces in the label field, then the component will automatically add _ in between words. For the jumplink to work, you'll need to use the _'s.
  •  How-to Video: Jumplinks and Anchors
  • Dividers. We use these sparingly.
    • A divider should only go:
      • Above and below a featured snippet component
      • Below the "Related articles" section
        • which is above the sources/full disclaimer section at the bottom of the page.
      • Above a BHSS table at the bottom of a page (only on FAQ pages).
      • Above an outreach section on a jumplink piece.
    • If you see them other places, please delete.
  • Disclaimers. All disclaimers should go in the disclaimer component.
    • The heading for the full disclaimer at the bottom of the apge should go in a heading component above the disclaimer component and should be set as an H4 at the very bottom fo the page.
      • If you find a page with no other headers on the page, then you can make the h-tag stylistic instead of seo.
    • Other disclaimers go under hero cards or tables when there are prices with a jump link to the full disclaimer at the bottom of the page.
    • Disclaimer text should NOT be italicized.
    • If you come across a page with a photo credit (not a caption), use the disclaimer component.
  • Sources. The sources section should be below the "Related Pages" section and above the "Disclaimer" section.
    • The heading for the sources section should be an seo-H3 in it's own heading component.
    • There should be a divider above the sources section.
    • Check for source references within the text body and make the number superscript in the text content component.
      • Make sure source links open in a new tab and are do-follow if they're reputable sources and not .com links (.org,.gov,.edu)
  • Detailed instructions

8. Related pages

  • The related pages section on the live page is in a text content component.
    • The heading for this section should be H2 and sentence case. 
    • The bulleted list of article titles below the heading should be internal links and should be capital case.
      • They should also be automatically underlined in elementor since they're links.
      • They should open in the same tab and do-follow.
  • There is a separate related pages component in coolwhip II that will automatically be added to each page. Ignore for now.
  • Detailed instructions

9. Accordion/FAQ sections

  • Any page with an FAQ section in it should use the accordion component (best ofs, reviews, etc)
    • The exception would be individual FAQ pages and FAQ hub pages.
    • You can also use the accordian component for long sections near the bottom of the page like "things to consider...")
  • Detailed instructions 

10. Pros/Cons 

  • Use the pros/cons - top block component.
    • If there are old labels on pages you are updating like “what we like” and “what we don’t like”, move them into a pros/cons component instead.
    • Tables should not have pros/cons within them- use the pros/cons component instead.
    • Condense any additional text into a bulleted list if you need to keep some keywords recommended from Marketmuse. 
  • Detailed instructions 

Components Glossary on SW

These are the components we are currently using on SW  (in alphabetical order).

Accordians *NEW

(Use for FAQ sections)

  • Used on any page with an FAQ section, most commonly best pieces, versus and reviews.
Block *NEW

(Use for BHSS tables)

  • Used on FAQ pages, Best-ofs and brand reviews in the home security category.
    • For FAQ pages with the table at the bottom of the page,, select the "BHSS - Top 5 (with Divider" block.
    • For pages with an in-content BHSS table, use either the "BHSS - Top 5 (no divider)" or "BHSS - Top 10" to match what is on the live page.
    • For geo pages, you will add a "Geo Hero Cards" block.
      • Select the block with the region that corresponds to the state you are working on.
Block Quote *NEW

(Use for quotes)

  • Used on any page with a quote from a person. Most commonly outreach pieces, best pieces and guides.
Callout Box - Horizontal

(Use for tips, advice, reminders, etc. Previously heads up box)

  • Used on multiple page types.
  • On our live site the only icon we had was a "thumbs up," so you'll need to update the icon to match the heading for the callout box (heads up box on live site)
Disclaimer *NEW
  • Used mostly on best pieces, reviews, versus pieces and some buyer's guides.
  • Use underneath hero cards and tables when prices are included
  • Use for "full disclaimer" text at bottom of page.
    • The full disclaimer at the bottom of the page needs an H4 heading component above the disclaimer component.
Divider
  • Used on any page with a disclaimer and/or sources, as well as FAQ pages with the BHSS table at the bottom.
  • Only use in these instances:
    • Above and below the featured snippet component
      • If there is a "last updated" component directly above the featured snippet, you won't need to add a divider above the featured snippet.
    • Below "Related Pages" section (above disclaimer/ sources)
    • Above bhss tables on FAQ pages.
    • Above an outreach section on a jumplink piece.
  • Remove any extra Dividers that exist on the page (some were added manually, so they will need to be deleted within the text content component).
Featured Snippet
  • Used on best pieces, reviews, and guides.
  • Can be used to list several products or brands with their use cases (in order to attract featured snippets).
  • Can also be used as a table of contents on info guides, buyers guides and how-tos.
Heading *NEW
  • Used on every piece.
  • You don't need to add a heading component for the H1 at the top of the page.
    • The article header at the top of the page (shaded blue) will automatically pull in the H2 from the wp dashboard.
  • You need to put H2s and H3s in a separate heading component rather than keeping them in a text block.
  • Make sure you select SEO H2 and SEO H3 rather than stylistic.
Hero Cards- Best Of- Icon List
  • Used for best pieces only.
Hero Cards- Standalone- Icon list
  • Used for brand and product reviews.
Hero Cards- Versus - Icon List *NEW
  • Used for versus pieces only.

Images and Videos

 (Images & videos component)

  • Used on any page with a video or several illustrated graphics.
  • This is the component we will use to enter the youtube link for a video (we don't have the current ability to add embed code for videos (iframe html)
  • If you have a specialized graphic or designed image that you want users to be able to zoom in or out, use this component
    • (for single images, use the simple images component).
    • If you have multiple images to display, use this component.
  • You'll need to select images from the library or upload them (if they're not already in the library).
Inner Section
  • These creates two columns within the main section that you can add components to (similar to a row within a row in VC).
  • We use this often for product cards.
Last Updated
  • Used on any page with an "update box," with timely information.
  • Ensure the last updated date that is displaying is the most recent date.
Manual Comparison Table
  • Used mostly on best pieces, reviews and versus pieces.
  • Top row should be bolded use-case or best labels.
  • Second row should be brand or product name.
  • Third row should be logo or product image.
  • Bottom row should be "read review" with jumplinks
  • Second to bottom row should be cta buttons with affiliate links.
Page Anchor
  • Used on every page.
  • Similary to the live page, we use page anchors to create a floating nav for users.
    • You don't enter a dash when you type the "label." That is automatically added for you in the component.
    • Whatever text you type in the "label" box will show up in the sticky TOC for users, unless you select "no" within the component under "show in sticky TOC".
  • Page anchors generally should be used above each H2 section
  • Page anchors are also used to create jumplinks.
    • Do not use special characters in the label within the anchor component (include -, $, /, etc.)
Product Card - Float *NEW
  • Used mostly on best pieces, reviews versus pieces, and some guides.
    • (previously product callout box)
  • You'll need to put this component into an inner section.
    • Drag the component into the left side of the inner section
    • Drag the text block relating to this product to the ride side of the inner section.
Pros and Cons - Top Block
  • Primarily used on best pieces, reviews, and occasionally on guides.
Ranking
  • Primarily used on outreach pieces for items in a ranked list.
  • Make sure the correct icons are selected for each item in the component.
Section

 (Plus sign)

  • Used on every page.
  • Equivalent of a row in VC.
  • If you click the folder you can add a saved template.
  • You can access advanced settings by clicking on the six dots at the top of the component.
    • You'll need to do this if using a header template such as the article header, footer, or the email sign up form.
Simgle Image
  • Used on several types on pages.
  • This is the component we will use most often for single images.
  • You'll need to select images from the library or upload them (if they're not already in the library)
  • Image sizes:
    • Hero Image*: 1600px x 500px

    • Feature/Article Image*: 800px x 500px

    • Snippet Image: 730px x 475px

    • Facebook*: 1200px x 630px

    • Pinterest: 564px x 864px

    • Logo Image**: 320px x 200px

    • Isolated Product Image**: 200px x 200px

    • Isolated Equipment Image: 300px x 300

    • Image Carousel: 1000px x 460px

    • Screenshots: Max of 800 wide. Height can vary depending on image orientation.

      *These three images should be the same image, but different sizes.

      **Image should be centered on white background.

Simple Map
  • Primarily used on safest cities pieces with links to state safest cities pages.
  • We also use this on the home page and it links to state geo pages.
Single Button *NEW
  • Only used on occasion, typically on reviews or versus.
  • If they are being used together with a product image, we typically use a product card instead.
Template Block *NEW

(Email Subscription Form)

  • A template block is different than a page template.
  • There are template blocks created for the article footer and headers on every page.
    • You don't need to add a separate heading for the H1. The header template block will pull in the H1 from the wp dashboard.
  • The email subscription form has been saved as a template block and can be added using the advanced settings within the section component.
  • The "Email Form" template block will need to be added to  FAQ pages, listicles and all guides.
Text Content
  • Used on every page.
  • This is the component you'll use for all text.

Images

Sizes

Image Sizes in Coolwhip II

  • Hero Image*: 1600px x 500px
  • Feature/Article Image*: 800px x 500px
  • Snippet Image: 730px x 475px
  • Facebook*: 1200px x 630px
  • Pinterest: 564px x 864px
  • Logo Image**: 320px x 200px
  • Isolated Product Image**: 200px x 200px
  • Isolated Equipment Image**: 300px x 300px
  • Image Carousel: 1000px x 460px
  • Screenshot: Max 800px wide. Height can vary depending on image orientation.

Underlined sizes are new/different.
*These three images should be the same image, but different sizes.
**Image should be centered on white background.

Guidelines

*New images guidelines for Coolwhip II*

→ In general, image sizes should be <100kb. 

  • The design team uses an app called Image optim to minimize file size

Imagery guidelines in SW brand book

Selecting and Editing an Image

  1. If you use your own photo...
  • Use Canva or Pixlr to edit the photo. 
    • Adjust (lower) the saturation of the photo 
    • Size the photo according to image sizes listed above
    • Download (save as JPG- smaller file size)
    • Upload to its folder on Google Drive (if applicable)
  • You can also use Preview app to edit a photo.
    • Instructions (on mac):
      • Open images in Preview App
      • Tools>Adjust Size: set width to 800px
      • If images are PNG, select File>Export: set format to JPEG
      • Drag quality slider until file size dips under 100KB if not already there
      • Click Save
  • To decrease the file size, use an app like Image Optim.
  • Run Image Optim App and drag exported file into the box. Image Optim automatically optimizes the size without further input
  • If you need help resizing an image, reach out to Kassidi!
  1. If you need a stock photo... 
  • Use istockphoto
    • Select a photo using the SafeWise photo guidelines.
    • Apply the desaturation filter.
    • Size the photo according to image sizes listed above
    • Download (save as JPG if given an option)
    • Upload to its folder on Google Drive
  • Login credentials (please log out once you’re done so others can get in)
    • User: joshwangrud
    • Pw: 1CLdesign
  • To decrease the file size, use an app like Image Optim.
  • Run Image Optim App and drag exported file into the box. Image Optim automatically optimizes the size without further input
  • If you need help resizing an image, reach out to Kassidi!
  1. If you need a product/logo photo…
  • Try finding product/logo from a press kit (if a brand has one)
  • If all else fails, download image from Amazon/Walmart (do NOT download lifestyle photos, only isolated product photos)
    • Open Canva and click Custom Dimensions
    • Enter height and width in pixels
    • Drag and drop download photo into Canva
    • Select image and paste onto canvas
    • Center image and size appropriately (provide some white space around the sides)
    • Rename file following naming conventions
    • Download (save as JPG if given an option)
    • Upload to its folder on Google Drive
  • To decrease the file size, use an app like Image Optim.
  • Run Image Optim App and drag exported file into the box. Image Optim automatically optimizes the size without further input
  • If you need help resizing an image, reach out to Kassidi!
  • ***If you end up needing to use images from Amazon, please log that information here.***

Note: be sure to always add alt text to images. Also, the Image Decision Tree can help you with finding images too. 

Amazon Affiliate Imagery Decision Tree

​Below is the order in which you should place images on site that link to Amazon Affiliate products...

  • (Preferred method) In-House photography
    • Bring the product in house, photograph, and use own imagery.

If this isn't an option or isn't possible…

  • Use the site stripe image from Amazon
    • This is the image link you can grab straight from the Amazon Affiliate site stripe. 

If that doesn’t work in the context of the page or the item isn’t from Amazon...

  • Find a brand media kit or see if we have the image in our compliance folder
    • Here is our brand compliance folder
    • Or
    • Find the brand online and see if they have a media kit available for image use. This is usually available under the "Press" footer link on a branded site or something similar. Googling "[brand] media kit" also often works. 

or

  • If the site doesn’t have a brand or media kit but they have a good image on their website, download and use the image but we must attribute properly: 
      1. Attribute either below the photo or at the bottom of the page using the language: Image sourced from [insert hyperlink of company's site] and is property of [legal name of company]
      2. Have the photo link to the official website
      3. In the unlikely event that the company asks us to take the photo down- we take it down.

If they don't have a media kit and the site stripe doesn’t work in the context of your page...

  • Download the image from Amazon
    • This is a last-resort option. If we do download the image from Amazon make sure it links back to that item's product page.

Step-by-Step Instructions

1. Hero Cards

Subheadings

  • Add a "heading" component, copy/paste the text from the live site into the "subheader" box.
    • Make sure the subheader text is set to "medium text."
  • Drag the component into the shaded "header" section and change it to the "brand review header" in the advanced settings.

Hero card types

  • Make sure the right hero card component is being used based on the page type
    • Best pieces should use hero card- best of- icon list
    • Versus pieces should use hero card - versus- icon list
    • Reviews should use hero card - standalone- copy.
  • Move the hero card component into the article header (blue shaded section at top).
    • Make sure the correct header is selected for the page type you're working on.
      • Any page with hero cards at the top of the page should use "brand review header."
      • Don't select "brand review header" on pages without hero cards or the article title won't display.
  • Make sure to fill out the "banner" field. Otherwise the card won't display properly.
    • The label should be a use-case or best-label (i.e. Top Pick, Best Overall DIY System, Best for Social Media, etc.)
  • Check logos. All brand logos should be a managed logo.
    • (If there is a logo that isn't managed, select wordpress upload and select it from the library).
  • Check formatting.
    • Check that each "field" is set up correctly (either text, link image, icon, etc)
    • Check each "item" and make sure the anchor text and links are in the correct fields and match the live site (view packages, read review, phone number, etc)
  • If there are phone numbers, check to see if there is a mapi shortcode on the live site or not.
    • If there is, select shortcode under "type", paste the mapi shortcode into the box, then leave the cta anchor text blank.
    • If there isn't shortcode, select the "manual link" and enter the phone number for both the "phone number" field and the "phone text" field.
      • You don't need to add tel:, it will automatically make it a click to call number.
  • The "layout" for hero cards should stay as "site default."
    • Dev will be updating this so that it automatically stacks hero cards on mobile.
    • UPDATE: It says in the hero card how-to video you need to select "stack" in the layout settings within the hero card component. You do NOT need to do this anymore; just leave it as "site default."
      • Dev will be updating that setting so that the "site default" will be stacked.
  • For geo pages, you will replace existing hero cards with a "Geo Hero Cards" block
    • Select the block with the region that corresponds to the state you are working on.
    • Drag the hero card block into the header  (select "brand review" in advanced settings under "template block") so that they display correctly.
2. Headings and Featured Snippet
  • Headings.
    • Every heading needs to be moved to its own heading component (H2-H4), not H1.
    • This means you'll most likely need to separate text blocks into multiple text content components so that you can put the heading component where it needs to go. 
  • Make sure to select the corresponding "seo" setting instead of the "sytlistic" under "heading size".
  • All headings should be sentence case. 
  • Headings should automatically be bolded (don't worry about matching the selective bolding from the live site right now).
  • How-to Video: Headings
  • Featured Snippet
    • Check to make sure there is heading in the featured snippet component. It will automatically be an seo h2, which is important for google crawling.
    • Add dividers above and below the featured snippet component (unless there is a last updated box above it, then only add a divider below).
    • Leave the bolded styling in the list (product names bolded with tags and labels un-bolded).
    • If there are affiliate links in the featured snippet list instead of jumplinks, leave as is in elementor, but keep the "featured snippet" box unchecked in the QC checklist and make a note so that. weknow to update those later, after migration.
    • Keep the same bold formatting in the snippet list as in the live site (product names/brands should be bolded, the best-label should be unbolded)
    • If there is a snippet image on the live site and it's missing from the staging site, make sure to select the same image from the library by clicking on the plus sign under  "image select" in the component.
    • How to Video: Snippet List jumplinks
3. Tables
  • If the top row of the table is a label (best for...top pick etc), you will need to add html tags to bold those (use <strong> instead of <b> ).
    • This is one of the only places you should be adding html.
      • Another place you can add html if you need is to add a line break if there are multiple words in a table cell
  • Check images/logos for managed logos or wordpress uploads.
    • most brand logos should be found under "managed logos" rather than "wordpress upload".
  • For the row with CTA buttons you WILL need to fix both the field setting AND the text in the "Items" section so that the anchor text is separated out into the "anchor text" box and the url is in the "url" box.
    • The field should be set to "link" and then you'll need to select "button" in the drop down below.
  • You will also need to check if there is a bottom row with "read review" links and make sure that field is set to "link" only (not button).
    • Those should have a jumplink or an internal link (follow, same tab) in the "url" box under items.
  • If there is a row with yes and no, you will need to change the "field" setting to "icon with text."
    • In the items section, you will need to make sure the anchor text has only the word yes or no (not the x or checkmark symbol), then you'll select (yes light or no light) to add the green checkmark or red x icon.
  • For the rest of the rows (aka "fields") you shouldn't need to separate out the anchor text and url as long as they are displaying correctly and the links work (this will save time during swarm).
  • In genernal, check to make sure images/logos and monthly prices (match live site) are clickable and that the links are set up correctly (affiliate links: no follow, new tab for affiliate links, internal links: do follow/same tab).
    • Check each "item" and make sure the anchor text and links are in the correct fields and match the live site (view packages, read review, phone number, etc)
      • The only places we should be using html in the manual text box is to bold the labels in the top row of the table (i.e. best overall, etc.-- <strong>) or for line breaks (<br>). 
    • For yes/nos in tables, select "icon with text." We will NOT be using the "yes/no" setting.
      • If there is icon with text, choose "yes light" or "no light" to match the live page.
        • Make sure the anchor text doesn't have extra html or characters
      • If there is a disclaimer reference character, make sure that is included in the anchor text (i.e. *, ^, etc). 
    • Update settings so the cta row is set to a button, check for managed logos, check no-follow and open in a new tab tags, etc.)
      • The buttons display wonkily when you first change the field to "button," but they will correct themselves once you fix the anchor text and link in each "item" in the 'values" section.
  • Ensure the logo or product images are clickable (select "image" in the "field" settings for the row with the logos or product images)
    • Select either managed logo or wordpress upload.
    • There will be a box to enter the url
  • Ensure prices are clickable (select "link" in the "field" settings).
    • Make sure the correct affiliate links are entered into the url box (either amazon or a go-link). Use relative links for go-links (/go/frontpoint/...)
    • If there is an x or a ✓ along with a "yes" or "no" in the table, you'll need to change the field for that row to "icon with text," then select the icon under each "item" (or column).
      • The icon you select will be either "yes light" for a green check mark or "no light" for a red x.
      • Make sure you compare to the live site. Occasionally there is an X with a yes or a ✓ with a no depending on the conotation of what is being rated in taht row of the table (i.e. no contracts is a good thing, so that row would have a no with a ✓ and a yes with an x icon).
  • Remove superfluous html and characters in the text boxes (like <p> tags, ✓  etc)
  • *ONLY for tables we use on multiple pages * (Best Home Security Systems (BHSS) table or a Best Medical Alert Systems (BMAS) table)
    • Replace the comparison table component with a "block" component  (the table blocks already have the table, heading and disclaimer built in it).
    • For FAQ pages with the BHSS table at the bottom, select the "BHSS or BMAS- Top 5 (with divider)" block.
    • For pages with a table within the content, either select the block without the divider and either the Top 5 or Top 10.
  • For tables at the bottom of FAQ pages, or best-ofs with big comparison tables (i.e. Best Home Security Systems or Best Medical Alert Systems) please add the corresponding block  instead of using the comparison table component.
    • Any /faq/senior-safety/pages should have a BMAS -top 5 (with divider) table block at the bottom of page .
    • Any /home-security-faq/ pages should have a BHSS -top 5 (with divider) table block at the bottom of the page instead of the existing comparison table.
    • Any best-of pages should use the corresponding table block without the divider.
  • Any home security pages with a Best Home Security Systems (BHSS) table will need a "block" added to that page where the table should go (the block already has the table built in it).
  • How to build a table from scratch.
    • Insert the "manual comparison table" component into a new section.
      • Add a heading component above the table with the table title as an seo h2.
    • In the table component,  you'll first set up the "fields" as the top row and the "values" as the first column.
      • Click the "add field" button and the"add value set" button to match the number of rows and columns you need. Name the field columns in the "label" box.
      • NOTE: This is opposite from what it will look like when you're done.
        • After you've built the table, you'll switch the table orientation (values order) so that the "fields" are rows and the "values" are rows, with the CTA buttons  at the bottom of the table.
      • Fill in the rest of the cells. Make sure the "field" settings are selected for they type of content that will be entered in the corresponding cells.
Best Overall
ProductRing Video Doorbell (2nd Gen)
ImageRing Video Doorbell (2nd gen)
List Price
Learn More
Read Review
4. Product Cards
  • Move product cards (formerly product callout boxes) into an inner row so they're not so GIANT!
    • Move the text block next to its so it looks similar to the live page.
    • Adjust the inner section settings to 33 66 so the card section on the left is smaller than the text section on the right.
    • Keep the heading component separate from the inner section (it should be above it, not within the inner section).
  • Make sure you fill in the "label" field. 
    • The label should be a use-case or best-label (i.e. Top Pick, Best Overall DIY System, etc.)
    • UPDATE: if the live page doesn't have a label, it's ok to leave it off. We have a ticket in to fix the top border.
  • If there are phone numbers, make sure to use the mapi shortcode from the live page in the "url" field. 
5. Images and Videos
  • Images should be in the simple image component. They should be set to either  "medium large."
    • *IMPORTANT* When you add an image from the library, or upload a new image, be sure to name the file before you upload it and add alt text after you upload it (before you insert it into the post). This is helpful for seo and accessibility (screen readers for visually impaired).
    • Check to make sure the post has the hero image, featured image and social image. If it's missing, leave the "check images" box unchecked in the QC checklist. 
    • In general:
      • Images/graphics that supplement the text in a useful way, or are helping to visually separate major sections on the page,  should stay on page. 
      • Delete any old stock images with overlay text or generic cheesy images that aren't adding value. (This is rare. You shouldn't have to do this often).
  • Videos Use the image & video component rather than the simple image component for:
    • Videos (use the youtube link instead of the iframe embed code) 
      • Add the images and video component
      • Click on "add item"under "gallery"
      • Select "video" under media type"
      • Copy and paste the share url from the youtube video you want to share.
    • Multiple images that could be displayed together in a slide show (like graphics on an outreach piece)
6. Callout Boxes and Email Sign Up Form

Callout box (heads up box in VC)

  • Use the callout box -horizontal component.
    • Select correct icon and adjust heading name to match, if needed.
  • Icons
    • Bell = Warning/Heads up!/Reminder
    • Checklist = Add to your to-do list
    • Light Bulb = Pro/Expert or Insider tip. Deals.
    • Notepad = Keep in mind/Take note
    • Thumbs-down = We don't recommend/bad idea (avoid these if possible)
    • Thumbs-up = We do recommend/good idea (avoid these if possible)

Email Sign Up Form (Active Campaign form in VC)

  • There are only a handful of pages that have the email form right now (mostly FAQ pages or guides)
    • Only add them to pages that have it on the live site.
  • To add an email sign up form, you'll need to add a new section.
    • Under "settings" select "yes" under template block then select "email sign up form" in the drop down.
7. Anchors, Disclaimers, Dividers, and Sources

Anchors.

  • As a general rule, anchors should be above each H2 sections (key sections on the page).
  • They are also used for jumplinks.
    • If there is a page with a full disclaimer on the bottom, you'll need to add an anchor to that section also so that the jumplink from higher up on the page will work.
    • Whatever you type in the label box will display in the sticky TOC (if you don't want it to display, you can toggle "no").
    • Do not use special characters in the label within the anchor component (include -, $, /, etc.)
  • If you are creating a jumplink, you'll need to add the text you want to use and add a # where you want to add the link (i.e. #Simplisafe). Then you'll need to add the text without the # in the "label' section of the anchor component with no dashes, just spaces (the component will add dashes for you if there is more than one word like: "How_to_Install").
    • The text you choose will also be used for the sticky table of contents (TOC), so keep it short and direct.
    • There is an option to not include it in the TOC if you don't want it visible to users.

Dividers. We use these sparingly.

  • A divider should only go in 1 of 4 places:
    • 1) Above and below the featured snippet component
      • If there is a "last updated" component directly above the featured snippet, you won't need to add a divider above the featured snippet.
  • (2) Below "Related Pages" section (above disclaimer/ sources).
  • (3) Above BHSS tables on FAQ pages in the home security category.
  • (4) Above Outreach sections on best-of pages

Disclaimers. Disclaimers should go in the disclaimer component.

  • The full disclaimer heading should be H4 and should go on the very bottom of the page.
    • If you find a page with no other headers on the page, then you can make the h-tag stylistic instead of seo.
    • If there are no sources on the page, you can use h3.
  • Disclaimer text should NOT be italicized.
  • If you come across a page with a photo credit (not a caption), use the disclaimer component.
  • Other disclaimers go under hero cards or tables when there are prices.

Sources. The sources section should be below the "Related Pages" section and above the "Disclaimer" section.

  • The heading for the sources section should be an seo-H3.
    • If you find a page with no other headers on the page, then you can make the h-tag stylistic instead of seo.
  • There should be a divider above the sources section, so you may need to add the divider component.
  • Check for source reference numbers throughout the content and make them superscript in the text content component.
8. Related pages
  • The related pages section on the live page is in a text content component.
    • The heading for this section should be H2 and sentence case.
      • The bulleted list of article titles below the heading should be internal links (same tab, do-follow) and should be capital case.
  • There will also be the related pages component at the bottom of the page automatically. We're leaving both for now.
9. FAQ Section

Insert the accordian component below the H2 FAQ heading.

  • Add a new item for each question/answer.
  • Enter the question in the "label" field and answer in the text block section.
10. Pros/Cons
  • If there are old labels “what we like” and “what we don’t like”, update them in the component to “Pros” and “Cons”
The End!