Required Check Items
- 1. Section title is defined as H2 (36px for PC/tablet, 26px for mobile), check below section for font size.
- 2. Use Advantech blue as linked text or elments with hyperlink, avoid use mulitple colors to style text. Please check below section for references.
- 3. Please remove Advantech logo from the images since the website logo is already on the same page. Please check below section for references.
- 4. Older version of content needs to editing again with the current version of the content builder. Please check below section for references.
- 5. Please avoid use special symbol on the page title or section title. Please check below section for references.
- 6. Please avoid using multimple main images that would inceasing the overall height. Please check below section for references.
- 7. Text only block's width should be set to 820px and aligned in the center. Please check below section for references.
- 8. Please avoid duplicate block title which will mention in the below section
Font size guidelines
The font size is already set up in CMS platfrom. Please follow the font size hierarchy and use the corresponding HTML tag. Please do not put a unique style to a single HTML element.
Section Title (H2)：36PX / Bold
Section Sub Title (H3)：18PX / Bold
Main Paragraph (P)：16PX
Bullet point (li)：14PX
Content styling
Use Advantech blue as linked text or elments with hyperlink, avoid use mulitple colors to style text.
Don'ts
Adjust the content color. Advantech blue only for the HTML links.
Dos
Use bold text to highlight the main point of the content.
Don'ts
Use the outsourced images and have Advantech logo on it
Dos
Please remove Advantech logo from the images since the website logo is already on the same page.
Component Editability
Older version of component would display normally on the webpage, but unable to modified without rebuild the content with new version of component.
Don'ts
Edit area can't add on new component.
Dos
Rebuild the content again with the new version of the component is suggested.
Don'ts
old version of the cards display abnormally.
Dos
Rebuild the content again with the new version of the component is suggested.
Don'ts
If you install grammary on your browser, it would add source code in the HTML
Dos
Turn the grammry off before you start editing
Layout suggestion
On a website with a width of 1600px, the maximum image width is 1200px. Please ensure that the image has sufficient pixel resolution.
The webpage size becomes a maximum width of 1600 pixels. Please use more than three cards for each section.
Don'ts
Putting two cards in one section would make the image area too big.
Dos
Put three to four cards in one section.
Don'ts
Putting two cards in one section would make the image area too big.
Dos
Use horizontal cards instead of the vertical card.
Don'ts
Please avoid use multiple column for long text content. The word break makes it difficult to read.
Dos
Use horizontal cards instead of the vertical card.
Don'ts
Please avoid using space tab to create blank space, which would caused elements display unblanced.
Dos
Keep the module's original settings which the margin or padding is preset
Don'ts
Please avoid increasing the font size without blance the content display.
Dos
Please set the proper font size
Don'ts
Please avoid use special symbol on the page title.
Dos
Use proper symble to display propler when it aslo appear in the breadcrumb.
Don'ts
Please avoid use special symbol on the section title which would caused the left side quick select menu display inappropriate.
Dos
Keep section title in a simple and appropriate way.
Don'ts
Please avoid using multimple main images that would in ceasing the overall height of the extended product contents
Dos
Please keep the reading pace short that would help user focus on the targeted content
Don'ts
Please avoid using multiple titles that might cause reading confusing
Dos
Only content title is simple and easy to understand
Text only block
Text only block's width should be set to 820px and aligned in the center.
Margins
Margins between content blocks should be 40px
Learn how to add a blank in CMS platform. Click here
