Employee Resources

Website Designer's Guide

Creating a new Page

  1. Using Page tab, duplicate page *Internal*/DUPLICATE ME New Page Base by clicking the gear icon, then click 'Duplicate this page'.
  2. Name the page and select parent folder, the URL will generate automatically, then click 'Create'.
  3. Once the page is created, use *Internal*/Assets & Components to look through available components. Each component works as a block, that you can stack to build a webpage.
    Components are broken into 4 sections: Heroes (for the top of the webpage), Text (basic text sections), Callouts (more complicated sections), and Lists (various styles of text lists).
  4. To add in a component, either cmd + c to copy directly from *Internal*/Assets & Components page, or search 'Symbols' tab and drag and drop the section onto the page.
  5. Then add content by clicking the gear icon. Be sure to use the gear and not the pencil as that will make global edits to all instances of this element.
  6. If page will be linked in the nav: Double click navigation in design to make global edits. Hover over the tab you are editing and click the gear icon (Be sure to click around the text and not the text directly for setting to appear), then click 'show' to view the submenu (these settings will also be to the right side of the editor with the settings tab.). cmd + c to copy nav item and paste to add a new one, drag and drop to the desired location. Use the gear icon to edit the link text, change link type to 'text', and select your new page.
    For footer links, follow the same process, but skip the step to open the dropdown
  7. Once the page is finished, be sure to click the 'Publish' button to make changes live on the site.

Deleting a page

  1. Using the Page tab, hover over the page you wish to delete and click the gear icon. Click the Delete button at the top of the menu.
  2. If the page was linked in the nav: Double click navigation in design to make global edits. Hover over the tab you are editing and click the gear icon (Be sure to click around the text and not the text directly for setting to appear), then click 'show' to view the submenu (these settings will also be to the right side of the editor with the settings tab.). Delete page in the navigation menu.
  3. For footer links, follow the same process, but skip the step to open the dropdown
  4. Once finished, publish changes.

Editing Sections on a page

  1. Use *Internal*/Assets & Components to look through available components. Each component works as a block, that you can stack to build a webpage.
    Components are broken into 4 sections: Heroes (for the top of the webpage), Text (basic text sections), Callouts (more complicated sections), and Lists (various styles of text lists).
  2. To add in a component, either cmd + c to copy directly from *Internal*/Assets & Components page, or search 'Symbols' tab and drag and drop the section onto the page.
  3. Then add content by clicking the gear icon. Be sure to use the gear and not the pencil as that will make global edits to all instances of this element.
  4. To remove a component, simply select it, then hit the delete key.
  5. Once the edit is finished, be sure to click the 'Publish' button to make changes live on the site.

Adding a Section to 'Campaign Resources'

  1. First, add your new category to the collection list. Do this by clicking on the 'CMS' tab, hovering over the collection, and clicking the gear icon. Hover over the 'Category' dropdown and click the gear, then click 'Add Option'. Save changes.
  2. On the Campaign Resources page, select which category you would like to add to, once selected, click the gear tab and select ' Show' to view content
  3. Search 'Campaign Materials Collection' under the 'Symbols' tab. Drag item into the desired location.
  4. Once added, it will take a few steps to get things properly hooked up, First right-click the element and select 'Unlink Instance'.
  5. Once unlinked, type in the desired headline to name collection.
  6. Within the 'Navigator' tab, find the div block containing the list and select the purple element titled 'Collection Wrapper 2'. Under the gear tab, select desired source, it will likely be one that starts with 'Campaign Materials...'
  7. On the same tab, click plus sign on 'Filters', select 'Category' from dropdown, then set the desired category
  8. Now that the list is set we will need to hook individual instances. Click item's headline and select 'Get text from [category], then select 'Name'.
  9. Then we will hook up the two link groups. These contain the icon and text, so be sure to select the box containing both the link and text titled 'Flex Horizontal'.
    For File Download: check the box that says 'Get file from [category]' then select 'File' from the dropdown. Then add a new condition by clicking plus button on 'Conditional Visibility'. Set this to Element is visible when File Upload is set.
    For Share Link: check the box that says 'Get URL from [category]' then select 'Share Link' from the dropdown. Then add a new condition by clicking plus button on 'Conditional Visibility'. Set this to Element is visible when Share Link is set.
  10. Once the edit is finished, be sure to click the 'Publish' button to make changes live on the site.

Modular Text Lists:

  1. On the 'Assets and Components' page scroll to the 'Text Lists' section. There are a variety of text lists in different layouts. These can be mixed together to accommodate various instances.
  2. Components marked with 'h2' or 'h3' are used to start lists. Components without headlines can be stacked under lists with headlines to extend the list.
  3. Drag and drop to build the list that fits your needs and add in content by clicking the gear icon. Be sure to use the gear and not the pencil as that will make global edits to all instances of this element.
  4. Once the edit is finished, be sure to click the 'Publish' button to make changes live on the site.