Skip to main content

CMS Guide

Table of Contents

Style Management

The following labels refer to styling options/classes in the "STYLE" dropdown menu located in the toolbar in every Custom HTML Module's content editor.

Headlines:

Headline XXL

Headline 1

Headline 2

Headline 3

Headline 4

Body copy 18px NotoSans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet, purus sed viverra finibus, ligula sapien pretium nisi, at facilisis augue leo et nisl. Proin vulputate, lectus in aliquam fermentum, justo felis luctus odio, ac fermentum ex ligula ac justo. Sed a nibh in odio pulvinar vehicula nec vel purus. Nullam pharetra metus eget odio gravida, non convallis justo hendrerit.

Fonts:

font-NotoSans

font-NotoSans-Italic

font-NotoSans-Light

font-NotoSans-LightItalic

font-NotoSans-Bold

font-NotoSans-BoldItalic

font-NotoSans-BoldCondTwenty

font-NotoSans-BoldCondTwentyItalic

font-NotoSans-Condensed

font-NotoSans-CondensedItalic

font-NotoSans-StdExtended

font-NotoSans-StdBoldExtended

Default pallet

#000000 Black

#ffffff White

#cccccc Accent

#535456 Text

#cc0000 Red

Brand colors

#007eb9 Blue

#84c5ed Soft Blue

#c8e2f7 Pale Blue

#37a8e0 Light Blue

#00559d Deep Blue

#002e63 Dark Blue

Primary Gradient

Links

Link Blue
Link DarkBlue
Link Blue Chevron
Link DarkBlue Chevron

Buttons






CMS Page Templates

What CMS page templates are available to create new pages with?

The following CMS page templates are available in the "CMS Primary Theme" theme:


Working With Custom HTML Modules' Content Editors (WYSIWYG)

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

The content editor can be finicky. To replace placeholder or unwanted text, we recommend that you first click the “BLOCKS” button in the toolbar to reveal outlines surrounding block-level elements. Then, select the text you wish to replace and type in your desired text. Or, you can place your cursor at the end of the text you want to replace, add your desired text, and then select and delete the placeholder text preceding it. We do NOT recommend selecting all placeholder text in the editor and deleting it before you add your desired content. As a result you may accidentally erase necessary markup that the content depends on. It is always best to edit text elements one at a time rather than deleting everything you don’t want from the start.

Can I copy/paste from other sources?

Be very careful when copy/pasting text content from other sources into a Custom HTML module's content editor. 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 the appearance of text content (color, font size, etc)?

The “STYLE” dropdown in the toolbar can be used to edit the styling/appearance of content. Keep in mind that when you add a style from the dropdown, it does not overwrite other styles previously applied to the element. This allows greater flexibility in cases where you may need more than one syle applied, but you will need to remember to uncheck undesired styles after applying them.

Please refer to Style Management for examples of classes/styles you may apply.

Keep in mind that changing the appearance or styles of text should be done SPARINGLY - for the sake of consistency across pages, it is best to stick with the module's default styling whenever possible.

How do I add/edit a link?

The "insert/edit link" button in the toolbar is used to create and modify links:

  • To create a new link, type your desired link text within the content editor, select it, and then click the "insert/edit link" button. This may be tricky if you're creating a new link next to an already-existing link. To do this, place your cursor at the end of the existing link's text and then press the right arrow key, so your cursor is outside the existing link. Then, type the new link's text, select it and click the "insert/edit link" button.
  • To modify an existing link, click into the middle of the link text within the content editor, then click the "insert/edit link" button.

How do I add/edit an image?

The "asset picker" button in the toolbar allows you to add images into the content editor. To modify an existing asset, click the asset and then click the "asset picker" button. Not all custom HTML modules were made with the intent to have an image placed in them. (Tip: If your default placeholder content did not contain an image, you should avoid adding one with this tool.)

Note: If you're including an image in a Custom HTML module, remember to consider the image alt text (which is editable through the "asset picker" button), and include a value when necessary. For more details, see "Do I need to update/include alt text for every image?" in General Tips/Advice for CMS Users.

How do I add a code snippet?

The "insert code snippet" button in the toolbar adds pre-made snippets of code into the content editor. Note that code snippets are primarily (but not always) used as a way to revert either the entire content of a Custom HTML Module to its default state, or to revert a part of its content to its original state. For example, if you accidentally delete the headline and byline at the top of the Custom HTML Module included in Section 1, you can use a code snippet to add it back in. In most cases you will not need to use code snippets unless you're attempting to "fix" a module (i.e. bring back original content which was since removed.)

General Tips/Advice for CMS Users

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

Be sure to follow all recommendations and instructions given in this guide, particularly the recommendations involving link text, image alt text, and heading levels. To learn more about accessibility, please see Accessibility for Radancy CMS Publishers.

Additional Notes

How can I add to or update the notes to this section?

Find this section (title: "CMS Guide Info") in your section list and edit its "CMS Guide Info - Copy" module to add as many notes as you'd like right here. Be careful to not delete any of the content above or below your notes!

Section Guide

Before using a section from this guide, please read the corresponding documentation for that section. Documentation is found above each section in this guide, on a black background.

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 that when you edit a section from the "Use Existing" Menu, you are editing every instance of that section. Sections added via the "Add New" Menu are safe to be edited freely, as a new instance of the section is created everytime it is added to a page.

CP Banners - Image Background (Section 2)

Suggested Use: Content Page Banner

Image Size and Quality: Users can upload images. Ensure images are of high quality and optimized for web use.
For mobile devices, recommended sizes are 750x1334 (9:16 ratio)
For desktop, recommended sizes are 1920x1080 (16:9 ratio) and 1280x720 (16:9 ratio).

Title (h1) 页面标题 

CP Banner - Blue Gradient Background (Section 2a)

Suggested Use: Content Page Banner

Image Size and Quality: Users can upload images. Ensure images are of high quality and optimized for web use.
For mobile devices, recommended sizes are 750x1334 (9:16 ratio)
For desktop, recommended sizes are 1920x1080 (16:9 ratio) and 1280x720 (16:9 ratio).

Title (h1) 页面标题 

Spotlight Text 2 Col (Section 6)

Suggested Use: shorter copy

Headline (h2) 标题

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor reprehenderit voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

2 Split - Right Image - Left Heading - Copy - CTA Button (Section 7)

Suggested Use: N/A

Image Size and Quality: Users can upload images. Ensure images are of high quality and optimized for web use.
For this section:
For mobile devices, we recommend 9:16 aspect ratio sizes like 750x1334 and 1080x1920.
For desktop, the recommended sizes are 960x540 and 1280x720, both maintaining the 16:9 ratio.

Text Content: Use the WYSIWYG to add and edit text content

Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.

Accessibility: If the image is not purely decorative and convey a message, please provide a descriptive alt text for the image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.

Headline (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla in culpa qui officia deserunt mollit anim id est laborum. a commodo consequat.

Learn more

2 Split - Left Image - Right Heading - Copy - CTA Button (Section 7a)

Suggested Use: N/A

Image Size and Quality: Users can upload images. Ensure images are of high quality and optimized for web use.
For this section:
For mobile devices, we recommend 9:16 aspect ratio sizes like 750x1334 and 1080x1920.
For desktop, the recommended sizes are 960x540 and 1280x720, both maintaining the 16:9 ratio.

Text Content: Use the WYSIWYG to add and edit text content

Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.

Accessibility: If the image is not purely decorative and convey a message, please provide a descriptive alt text for the image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.

Headline (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla in culpa qui officia deserunt mollit anim id est laborum. a commodo consequat.

Learn more

Content box Left Full-width BG (Section 8)

Suggested Use: N/A

Image Size and Quality: Users can upload images. Ensure images are of high quality and optimized for web use.
For mobile devices, recommended sizes are 750x1334 (9:16 ratio)
For desktop, recommended sizes are 1920x1080 (16:9 ratio) and 1280x720 (16:9 ratio).

Text Content: Use the WYSIWYG to add and edit text content

Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.

Accessibility: If the image is not purely decorative and convey a message, please provide a descriptive alt text for the image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.

Headline (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla in culpa qui officia deserunt mollit anim id est laborum. a commodo consequat.

了解更多信息

Image - Copy - BG white 2 Col (Section 9)

Suggested Use: N/A

Image Size and Quality: Users can upload images. Ensure images are of high quality and optimized for web use.
Recommended minimum size is 564 × 342 px

Text Content: Use the WYSIWYG to add and edit text content

Style Management: The style of text and buttons within this section can be customized through the WYSIWYG editor.

Accessibility: If the image is not purely decorative and convey a message, please provide a descriptive alt text for the image. This ensures accessibility for users with visual impairments, allowing screen readers to convey the content and context of the image effectively. For more information, refer to WCAG 2.1, Success Criterion 1.1.1: Non-text Content.

Headline (H2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet, purus sed viverra finibus, ligula sapien pretium nisi, at facilisis augue leo et nisl. Proin vulputate, lectus in aliquam fermentum, justo felis luctus odio, ac fermentum ex ligula ac justo. Sed a nibh in odio pulvinar vehicula nec vel purus. Nullam pharetra metus eget odio gravida, non convallis justo hendrerit.

Related Content Bg White-Blue (Section 10)

Suggested Use: Use this section when you want to handpick which pages to feature in the related content section.

Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla in culpa qui officia deserunt mollit anim id est laborum. a commodo consequat.

Note To Developer: Please include documentation for this section!

Stories 2 Col (Section 11)

Suggested Use: Use this section when you want to handpick via dropdown which pages to feature.

Title (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris. Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in.

Key Facts Number Spin (Section 12)

Suggested Use: N/A

Image Size and Quality: Users can upload icon images. Please resize images to fit this module.

Text Content:

  • Thumbnail Alternative Text: Enter the numeric value in this field.
  • Short Description: This serves as the title.
  • Link Text: This field provides additional information about the module.

The module has been adapted for this use and to be dynamic, allowing all numbers to spin for one second upon scrolling.

Headline (h2) 标题

  • Num 1 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet, purus sed viverra finibus, ligula sapien.
  • Num 2 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet, purus sed viverra finibus, ligula sapien.
  • Num 3 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus laoreet, purus sed viverra finibus, ligula sapien.

Multi Item (Section 21)

Suggested Use: Pages are selected using a Content Page Display module. Copy intro can be edited with WYSIWYG.

Multi Item (Section 21a)

Suggested Use: Pages are selected using a Content Page Display module. Copy intro can be edited with WYSIWYG.

Slider (Section 22)

Suggested Use: The slider module is not CMS-able. The content is located in the layout of the module and needs a developer update or add a new version.

  • 备受认可的工作

    循环经济

    贵金属、PET或稀土——我们创新的回收技术对环境有可持续的影响。

  • 备受认可的工作

    挽救生命

    贺利氏在心脏起搏器方面的创新确保心脏以正确的节奏跳动。

  • 备受认可的工作

    提高电动汽车效率

    贺利氏基板可延长电动汽车中电子设备的使用寿命。

  • 备受认可的工作

    绿色钢铁

    通过我们的传感器,我们为可持续的钢铁生产做出贡献。

Multi Item (Section 23)

Suggested Use: Pages are selected using a Callout Action Link module. Copy intro can be edited with WYSIWYG.

Headline (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquet risus vitae ante tincidunt semper. Aenean laoreet, nibh et posuere egestas, orci neque gravida risus, non rhoncus nunc mauris ac enim. 

Multi Item (Section 24)

Code Snippet: Section 24 - Image / Heading / Copy / CTA

Text Content: Use the WYSIWYG to add and edit text content

Headline (h2)

Title (h3)

Our activities as an employer are closely linked to the Heraeus vision. “We are powered by our people” is an established principle for us.

Learn more

Title (h3)

Our activities as an employer are closely linked to the Heraeus vision. “We are powered by our people” is an established principle for us.

Learn more

Title (h3)

Our activities as an employer are closely linked to the Heraeus vision. “We are powered by our people” is an established principle for us.

Learn more

Title (h3)

Our activities as an employer are closely linked to the Heraeus vision. “We are powered by our people” is an established principle for us.

Learn more

Multi Item (Section 25)

Code Snippet: Section 25 - Icon / Headline / Copy / CTA

Text Content: Use the WYSIWYG to add and edit text content

Image Content: Use the WYSIWYG to add and edit IMAGE- icons—75px by 75px is the recommended size.

Heading (h2)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit.

Title (h3)

Ut enim ad minim veniam, quis nostrud minim veniam, quis ut enim ad veniam.

Learn more

Title (h3)

Ut enim ad minim veniam, quis nostrud minim veniam, quis ut enim ad veniam.

Learn more

Title (h3)

Ut enim ad minim veniam, quis nostrud minim veniam, quis ut enim ad veniam.

Learn more

Title (h3)

Ut enim ad minim veniam, quis nostrud minim veniam, quis ut enim ad veniam.

Learn more

Title (h3)

Ut enim ad minim veniam, quis nostrud minim veniam, quis ut enim ad veniam.

Learn more

Title (h3)

Ut enim ad minim veniam, quis nostrud minim veniam, quis ut enim ad veniam.

Learn more

Slider (Section 26)

Suggested Use: The slider module is not CMS-able. The content is located in the layout of the module and needs a developer to update or add a new version.

  • Rice Zhang, advocating for challenging the status quo

    创新

    任何员工都可以挑战现状,寻求更好的解决方案。

    Rice Zhang
  • Hannah Quinn, appreciating the support for employee success

    技能

    贺利氏真正关心每位员工的成功。我们共同成就伟大事业。

    Hannah Quinn
  • Florian Pfeiffer, reflecting on opportunities for growth

    机遇

    我有机会将所学知识应用于实践,并出国完成各种任务。

    Florian Pfeiffer
  • Dr. Weiwen Dong, embracing global collaboration and rewards

    眼界

    我与来自不同国家的同事一起工作。最重要的是,我们获得了许多意想不到的收获。

    Weiwen Dong 博士