CMS Guide

Table of contents

• Working With Custom HTML Modules' Content Editors (WYSIWYG)
• General Tips/Advice for CMS Users
• Style Management
• Code Snippets
• Section Guidelines
• Available CMS Sections

Working With Custom HTML Modules' Content Editors (WYSIWYG)

How do I replace placeholder ("lorem ipsum") or unwanted text?

The content editor can be finicky. To replace placeholder or unwanted text, we recommend the following steps:

• Click the BLOCKS button to reveal outlines around block-level elements.
• Select and replace the text you wish to edit, or add new text and delete the placeholder.
• Avoid deleting all placeholder text before you have added your content. You will risk removing necessary markup.
• Edit text elements individually for best results.

Can I copy/paste from other sources?

• Be cautious when copy/pasting text into a Custom HTML module.
• When copying from an external document, take steps to ensure the text you are copying is plain text (as opposed to rich text.)
• When copying from a web page, make sure you are ONLY including text and not actual HTML tags (<p>, <br>, etc.) as this could result in unintended styling/format inconsistencies.

How do I change text appearance?

• Use the STYLE dropdown in the toolbar to add classes.
• Refer to Style Management for visual examples of available classes/styles.
• Change styles sparingly to maintain consistency with the module’s template.

Why isn't the STYLE dropdown applying the styles I expect?

Make sure you are following these guidelines:

• Apply one Style class at a time; exceptions are “Spacing” and “Text color” classes.
• Style classes for links and buttons should be applied to links only. If applied to any other element, the element will be highlighted in yellow to alert you of this.
• If the suggestions above don't solve your issue, click the “clear formatting” button to remove all classes from the element and then reapply classes.

How do I add/edit a link?

• Use the "insert/edit link" button in the toolbar.
• To edit a link, click the link text, then click the "insert/edit link" button.
• Create the link first before assigning a style dropdown class to it.
• Using proper link text is very important. For more details, see Does link text matter?

How do I add or edit an image?

• Use the "asset picker" button in the toolbar to add or modify images
• Avoid adding images to modules that didn’t already contain an image.
• Consider adding alt text for accessibility (editable through the "asset picker" button). For more details, see Do I need to update/include alt text for every image?

How do I add a code snippet?

• Use the "insert code snippet" button in the toolbar to add pre-made snippets of code into the content editor.
• Only use snippets meant for the specific module you’re editing (indicated by section number).
• Refer to the section dividers in this guide for the code snippet names used in templates.
• See Code Snippets for more information.

How can I revert to the original "lorem ipsum" placeholder content?

• Make a note of the module’s "section number" and find the corresponding code snippet. Use this snippet to “reset” your content.
• Multiple snippets with the same section number may exist; choose based on the type of content that is in the module.
• The section dividers in this guide indicate the correct code snippet for the template.
• See Code Snippets for more information.

Does heading level (H1, H2, etc.) matter?

• Yes. For SEO and accessibility purposes.
• You must ensure a hierarchical structure: the top heading on the page should be H1.
• Avoid skipping heading levels on a page (e.g., don’t use H3 before H2).
• Use the STYLE dropdown to change the heading appearance without altering the heading level. Note that any applied style heading class will overwrite any native h# element styling.

General Tips/Advice for CMS Users

Can I change the layout assignment of a page/section/module?

• Never change a layout assignment unless specifically instructed to do so. This will almost always lead to unintended results.

Can I add a module to a section?

• Never add a module to a section unless instructed in section notes.

What should I name a section I’m creating from the “Add New” menu?

• Use consistent naming conventions.
• We recommend:
  • For sections used only on one page: “[Page Name OR Abbreviated Page Name] - [Section Template Name]”. Example: "Home - Copy - (Section 8)"
  • For sections used on multiple pages: use a name summarizing its purpose/intent and include the section template name. Example: "Career Area CTAs - (Section 1)".
• NOTE: While you can change a section's name after creating it, you will not be able to change the names of the modules included in the section. Modules will inherit the original section name by default. We recommend that you carefully choose a good name for each section you create.

How do I choose a section template ("add new") from the Section Catalog menu?

• Use the "search" field and enter terms that summarize the type of content you want to add.
• Common keywords to try: "Image and Copy", "Testimonial", "Copy", "Multi Item".
• Searching by keyword will help you narrow down the list of results.

How do I create a "blank" page (not from a page template)?

• Click the "Add Page" button in the "Primary CMS Theme".
• Enter the page name.
• Choose the layout: "v2 - Default Content Page - CMS"

Which theme should my page be assigned to?

• Assign CMS pages to the "Primary CMS Theme".
• Do not assign to "Default Theme (GST)".

How do I add a Hero Banner?

• Configure fields in the "Banner" section at the top of the Content Page.
• "headline" and "Short Description" fields are optional.
• Note: Headline is an H1 level and may require you to change the heading level of assigned sections.

Where should I upload asset files?

• Open the "cms" folder. Upload assets to the APAC GST v2_0 folder.
• Once within the APAC GST v2_0 folder, images are further organized in subfolders. Choose the subfolder that applies to your image. The img folder should be used if the image does not apply to any of the other subfolders.

How can I ensure that my content will be accessible to all users?

• Follow the recommendations in this guide, especially regarding link text, image alt text, and heading levels.
• See Accessibility for Radancy CMS Publishers for more information.

Do I need to update/include alt text for every image?

• Consider alt text for images that are added or replaced. See this alt text decision tree for more details.
• Alt text can be left blank for descriptive, non-essential images.
• Alt text improves accessibility and SEO.

Does link text matter?

• Yes.
• For accessibility use meaningful link text that would still make sense if it were taken out of the surrounding context.
• Avoid "click here" or "learn more".

Style Management

Headings

Headline 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.

Headline 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.

Headline 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.

Headline 3 - Alternate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.

Headline 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.

Headline 4 - Alternate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.

Headline 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.

Headline 5 - Alternate

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.

Headline 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.

Headline 6 - Alternate 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.

Headline 6 - Alternate 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quis risus est. Duis pulvinar eros diam, sed tempus nisl venenatis eget.

Text

This is body copy large using Helvetica Neue Regular at 22px, with a 30px line-height in the color of Black. Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui. This is an inline hyperlink using Helvetica Neue Bold, the color will automatically change to match the theme

This is the default body copy. This is body copy medium using Helvetica Neue Regular at 16px, with a 23px line-height in the color of Black. Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui. This is an inline hyperlink using Helvetica Neue Bold, the color will automatically change to match the theme

This is body copy small using Helvetica Neue Regular at 14px, with a 20px line-height in the color of Black. Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui. This is an inline hyperlink using Helvetica Neue Bold, the color will automatically change to match the theme

Blockquotes

“Employee blockquote uses Helvetica Neue Regular at 22px and 30px line-height in the color Black. Nam ornare lectus ullamcorper nisl accumsan accumsan. Mauris et arcu sit amet enim lacinia pellentesque.”

“Employee blockquote uses Helvetica Neue Regular at 22px and 30px line-height in the color Black. Nam ornare lectus ullamcorper nisl accumsan accumsan. Mauris et arcu sit amet enim lacinia pellentesque.”

Name

Title/Department

Title/Department Bold

Title/Department Italic

Title/Department Bold Italic

Lists

• This is a list item using default font size with a 26px line-height in the color #000000.
• This is a list item showing the use of bold text.
• This is a list item showing the use of italic text.
• This is a list item showing the use of all available text styles.

1. This is a ordered list paragraph using default font size with a 26px line-height in the color #000000.
2. Ordered list 2
3. Ordered list 3
4. Ordered list 4

• Unordered link list 1
• Unordered link list 2
• Unordered link list 3

Links

Link: This is how default linking text should appear.

Arrow Link

Buttons

The default primary and secondary button colors will automatically change to match theme color. Styles and Code Snippets are available for each button.

• Primary Button
• Primary Button - Motion
• Primary Button - NAPA
• Primary Button Small
• Primary Button Small - Motion
• Primary Button Small - NAPA
• Secondary Button
• Secondary Button - Motion
• Secondary Button - NAPA
• Secondary Button Small
• Secondary Button Small - Motion
• Secondary Button Small - NAPA

Tables

This is a test of a table. No current creative designs have been programmed.

Figures

Code Snippets

• Only use code snippets prefixed with "v2"
• Only use code snippets with matching "Section Number" titles for the section you are editing.
• “Section Number” code snippets are typically used to reset a Custom HTML Module to its template state.

Section Guidelines

• Common "Use Existing" sections (e.g., Job Alerts, Related Content) and all "Add New" CMS templates are listed.
• Sections are ordered numerically by their assigned Section Number. Note some numbers may be skipped as not all sections on the site need to be included in the CMS Guide.

Note that section titles are color coded based on which menu they can be found in after clicking the "add section" button on any page:

• Red - find this section in the "Use Existing" Menu.
• Green - find this section in the "Add New" Menu.

Keep in mind:

• Editing a section from the "Use Existing" Menu affects every instance of that section.
• Sections added via the "Add New" Menu can be edited freely, as each addition creates a new instance.

Available CMS Sections

The following is a list of sections that can be added to the site by a CMS user.