CMS Guide
Table of Contents
- Style Management
- CMS Page Templates
- Working With Custom HTML Modules' Content Editors (WYSIWYG)
- General Tips/Advice for CMS Users
- Additional Notes
- Section Guide
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 BlueLink 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.
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.
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.
-
Header Lorem Ipsum
Lorem ipsum dolor sit amet, consec tetur adipiscing ut enim ad minim veniam, quis nostrud
-
Header Lorem Ipsum
Lorem ipsum dolor sit amet, consec tetur adipiscing ut enim ad minim veniam, quis nostrud
-
Header Lorem Ipsum
Lorem ipsum dolor sit amet, consec tetur adipiscing ut enim ad minim veniam, quis nostrudx
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) 标题
Multi Item (Section 21)
Suggested Use: Pages are selected using a Content Page Display 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.
-
Callout Link Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sit amet ex iaculis ornare.
-
Callout Link Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sit amet ex iaculis ornare.
-
Callout Link Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sit amet ex iaculis ornare.
-
Callout Link Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sit amet ex iaculis ornare.
-
Callout Link Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sit amet ex iaculis ornare.
-
Callout Link Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sit amet ex iaculis ornare.
Multi Item (Section 21a)
Suggested Use: Pages are selected using a Content Page Display 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.
-
Callout Link Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sit amet ex iaculis ornare.
-
Callout Link Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sit amet ex iaculis ornare.
-
Callout Link Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sit amet ex iaculis ornare.
-
Callout Link Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla bibendum sit amet ex iaculis ornare.
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.
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 moreTitle (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 moreTitle (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 moreTitle (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 moreMulti 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.
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.