Organize Content in Contentstack

Contentstack has also updated its dashboard and internal search. Please find more detailed here Contentstack Layout - Tips and Tricks | Contentstack Views and Filters .

1. Create a Web Page

Numbered headlines with columns ( : ) refer to the numbers in the chart above.

When you create a Landing page, please never forget to add /lp/ to the URL.

Open

Note: The video may be partly outdated.

For the second video click here or scroll down to “2. How to Work with Content blocks”.

1: Main Teaser and Main Teaser Headline

The main teaser is the eye-catcher of each webpage. It showcases the headline of the page under a new red and grey design element. In Contentstack, adding the H1 main teaser headline is the first step in creating a webpage, depending on which the URL will be generated.

Open

Example: H1- Main Teaser Headline as seen on Contentstack

In Contentstack, you will also find different “tiers” which indicate the levels within each local website:

• Home → not adjustable, pre-defined by DMC.

• 1st tier - all header items, e.g. Solutions, Products,….. Support….About us, Inquiries

  • Not adjustable, pre-defined by DMC and handled by Central Content Management

• 2nd tier - all second level pages, such as Solutions - Automotive

  • Two different approaches a) web pages b) Landing Pages

• 3rd tier - all levels below

Open

Example: 2nd Tier Teaser (central) as seen on the website

2: URL

When you create a new web page, the URL will be automatically generated, based on the H1 headline, you set. Each web page will have a visible URL. Its ending has to be a unique identifier which allows to open a specific web page without using the navigation. Especially for landing pages, this is important.

The URL field allows you to edit the visible last part of the URL of a web page. To do so, click the pencil icon at the right.

Please take care to always start with a leading slash (“/”).

3: Web page teasers

Each web page offers the option to add either an “Overview Teaser” or a “Catchphrase Teaser”. Style and purpose of both have been defined by MELCO DMC. For that reason, they can be created by Central Content Managers only.

You can localize them at any time.

4: Cross-Content Categorization

Like any other element in Contentstack, the Web page must also be categorized.

Open

If you miss the categorization,

• the Web page will not be found in the Advanced Search.

• Relevance sorted documents for that web page will not be available from the Downlaods in the Sidebar (See Organize Content in Contentstack | 7: Service Links in Floating Sidebar )

There are other elements which require a properly categorized web page, such as Out Stories.

5: Page Type

Whatever type of page you want to create, you always start with the Web Page. Most of the pages consist of static content which you create and manage. These kind of pages are “static” (set as default).

If you want to create a page with a calendar, e.g. for trainings, or with a list of news, i.e. press releases, please set the respective page type.

The usage of the page types “calendar” and “news” we describe in another section of this manual.

Open

Example: Choosing a Page type while creating a Webpage on Contentstack.

6: Content Blocks

You need at least one content block in a static page. In this content block you manage the main content area (the green part of chart 1).

How to use the content blocks we describe in part II. of this manual.

In Contentstack, when you open the detail view of an entry where you can edit the content, you find on the right side “Entry Information”. Here you can find in “Referenced in” if your changes will also apply to other pages.

Open

Example: “Entry Information” and “Referenced In”, as seen on any entry page on Contentstack

7: Show SEO Settings (optional)

In the SEO settings you can set the META title and META description.

If you do not, the META title will be taken from the H1 Headline, and no description will be set explicitly. This is okay, because nowadays, search engines are able to extract META descriptions from the page crawling results. However, you can use this field to create a summary of the page content with about 150 characters which includes important keywords.

If you set these information, you should respect limitations in the search engine’s result display: for the title, you should use approx. 50 -56 characters, for the the description approx. 150 characters.

You can find a lot of tools across the internet which supports in creating good META information, e.g. https://app.sistrix.com/en/serp-snippet-generator

8: Navigation Settings (optional)

The navigation below the main teaser is set by default for all pages. For landing pages where this navigation is not required or appropriate, please uncheck the “Show Navigation” box.

Open

Example: The “Show Navigation” box as seen on Contentstack

Additionally, you can define if the web page you’re creating has sub-ordinated pages in the page tree. If this is intended, please set “This page has sub-ordinated pages“ to true and select the web pages which should be sub-ordinated.

Open

Example: Activating the Sub-ordinated pages switch will allow you to add the necessary webpages in Contentstack.

Open

Example: Navigation and Sub-ordinated Pages as seen on the Website

Take care to not endlessly use this feature. A page tree with too many levels appears messy and not user friendly! In general, three levels counted from the main navigation item should be enough.

8.1: Mega dropdown menu

The mega dropdown menu will be created automatically when you create web pages and sub pages. The first level ( a) ) is always indicated as a button.

Open

Example of Polish Support pages without an overview page to be clicked.

9: Service Links in Floating Sidebar

The Floating Sidebar is a new design element that was introduced with the design relaunch. Just like with the Support/Service blocks in the old design which is replaced by the new Sidebar, it is also intended to be used for providing specific fast lane links to related webpages across the website.

In this Sidebar, which appears on the right side of any page, you will find the following icons set as default.

• Contact: includes the “Contact us” as well as the (optional) “Technical support” forms.

• Newsletter: includes the Newsletter Registration Form.

• Service: includes the “Support” and “E-Shop” pages.

• Downloads: clickable icon that leads you to the Downloads section in the “Advanced Search”.

10: HOME page - Special feature “Spotlight”

The HOME page is not editable by local admins. The only exception is the so-called Spotlight slider. In Contentstack, you maintain it in 1: Create a Webpage - Content option - Spotlight Slider Contentstack:

1. Add a new Instance

2. Give it proper Title. This title will be displayed below the image on the Home page.

3. Add a link to a landing page, web or product (category) page.

   1. Use “url” only, if you want to add an external link !

4. You can add up to max 15 instances.

   1. Take care to add min. 3 instances to “activate” the slider.
      
      

      Open

      

      This is what you would see, if you added 2 instances only.

       

   2. Max. 5 instances will be shown in the Spotlight slider on the Home page.

   3. All (15) instances will be shown in the new Spotlight page.

5. You can change the order by re-ordering the instances.

   1. The first 5 instances will appear in the Spotlight slider.

   2. All other instances will appear in the Spotlight page in the pre-defined order.

Open

Add a new instance and localize the Spotlight slider and page at the same time.

Open

Open

2: Work with Content Blocks

A Content Block is a powerful module builder for almost all content purposes. All pages created in Contentstack contain at least one content block in which at the same time you define the styling of a piece of content. Content blocks correspond to the styling options in the frontend. If you create a web page with static content, you always have to create at least one content block, e.g. to edit and display body text and images.

Open

Note: The video may be partly outdated.

Go to “Create a Web Page” to see how to reference a content block in a landing page.

Example: you want to describe the support capabilities of a local company in an appealing manner on one page. You want to have an image at the top and two paragraphs below, each with a sub headline. At the bottom, you want to have a contact form. To achieve this, you create a content block, using from top to bottom the following modules.

Open

Example: Modules of a Content block

1. Text/Image/Links to display the image at the top

2. Headline to display the first sub headline

3. Text/Image/Links to display the paragraph's body text

4. Headline to display the second sub headline

5. Text/Image/Links to display the paragraph's body text

6. Form to display the contact form. We strongly recommend to create the form beforehand in the Form Builder to avoid loosing the focus. (see 2.2.1. Contact form)

Just select the modules in the content block administration and provide the information in it. If you later decide to e.g. change the order of the paragraphs, you just have to drag and drop the modules in Contentstack into the correct order.

Open

Example: Using the 6 Dots on the left of a module, you can drag the modules to rearrange the order of your content.

Before you can save the content block, you have to provide an internal name. This name will not be published in the website, but will help you to distinguish content blocks in Contentstack.

In a Content Block, you can combine many Content Modules and arrange their order to your needs.

If you have created a Content Block

1. Decide which Content Module you need and click the respective button with the purple. +

2. A form opens above the selection with all options you have

3. Fill in the content and adjust the settings

4. To keep the overview, click on the triangle button shown on the top right of each bar to close it. With another click it opens again.

Open

Example: The triangle button on top of each bar

5. After adding all Content Modules, you can drag and drop the bars to arrange the order using the “icon” on the left side of the bar.

6. If you want to remove Content modules, you can use the three dots found on the top right of the bar (near the triangle button) to delete any Content module.
   
   

2.1: Static Content Modules

2.1.1: Headline

You can define the headline text and set it to h2 (default) or h3. The styling of the headline will adapt respectively.

Each web page should have only one h1 headline. This h1 headline you define in the Web Page (see above).

Open

Example: Headline module as seen on Contentstack

2.1.2: Text/Image/Links

Use this module to either add a body text, an image, a list of links or a combination of the three. It is recommended to always have a short text.

The uploading of images is managed in a separate Content Type. You can select from already uploaded images by clicking “Choose an existing entry” or “Create a new entry”. For more information, please check the manual → 2.1.2: Image Upload

If you just want to add images, texts and link lists one among each other, you should add one module after each other, i.e. using “Text/Image/Links” several times. This makes it easier to maintain your content.
But if you want to arrange an image and a text or link list one next to each other, provide the content in one module and set image size and position respectively.

Add an Image (optional)

If you add an image you have different options:

• Allow image zoom: For example, use for graphics and illustrations in order to avoid to have to put them in full-size.  
  Use zoom with care in order to create a benefit for the website visitor or to put a focus on one specific image.  Try to avoid using the zoom, if there is no clear benefit for the website visitor.
  Don't zoom images with a poor quality - the quality would still be poor.

• Display the image with a border: Try to have a consistency within your page
  If images have a border, this border may look different than the one you would choose here. Please avoid having different styles.

• Image Width: Thanks to the zoom function, you can choose a small width, but still put a focus on it.

• Image left or right: When you add an image along with a text, you can choose whether to show the image on the left or the image on the right side of the text.

• Image Headline H3 (optional): You can now add a H3 headline for your image, which will be shown on the left or right, depending on the above selection.

• Image Subheader (optional): Additionally, you can also add a subheader that will appear just below the image headline.

• Image link: You can link to any web or product page to the image. Users will just need to click on the image to access the link. Try to avoid to link users away from our website.

Open

Example: Options to modify your image size and placement on Contentstack

Open

Example: Image Headline and Subheader

Examples: (1) You want to put an image at the top and text below. → Add one module of “Text/Image/Links” to set the image and one more module of “Text/Image/Links” to add the text below. (2) You want to put an image to the left and add text next to it. → Add one module of “Text/Image/Links” set the image, change the image width e.g. to “one-half” and the horizontal position to “left”, and add the text in the same module.

Add a list of links (optional)

If you create a list of links, you have to add some information for each link separately.

Open

Example: Adding a list of links (optional) in the Text/Image/Links Module on Contentstack

1. Link text (Anchor Text): This is the text that will be visible to the users on the website.

2. Icon: Choose the arrow-right icon which will be in front of the text.

3. Links: You can link to a web page within the website, a product/product category or to an external URL.

4. To add multiple links, click on the plus icon on the top right of an instance to add multiple instances.

Open

Example: List of Links added using the Text/Image/Link modules

2.1.3: Table (small update in process)

With this module, you can create tables. Initially, you find a table with 5 rows and 2 columns.

• To add a row, click the plus icon at the right of the row

• To remove a row, click the trash bin at the right of the row

• More options can be found in the context menu that opens with a right click on your mouse

• You can also configure the cell background color.
  
  

  Open

  

  Example: Context menu (open with right mouse click)

Open

Example: The Table module as seen on the Website

• Add or delete columns

  • Change the cell content style to bold font, italic or underline

  • Change the background color of the cell

  • Style the first column as header column → This option is only visible if you do the right click in the first column

  • Style the first row as header row → This option is only visible if you do the right click in the first row

  • The selected option is marked with a dot at the right side in the context menu

2.1.4: [DEPRECATED] Video

The option to embed a video has been added to the Video Teaser feature. Please see Video Teaser creation.

2.1.5: Video Teaser

The Video Teaser feature allows you to create captivating sneak peeks of videos that intrigue your users. By creating separate Video Teaser Groups, you can easily reuse these teasers across various sections of your website.

Check Video Teaser creation to learn how to create and customize them.

2.1.6: Documents

You have the option to link a document in the content for download which you uploaded to Contentstack before.

To do, just add the module and select one or multiple documents.

Click here to see, how you can do https://freshcells.atlassian.net/wiki/x/MoB-nQ

2.1.7: Contact

If you want to display one or multiple Contacts which are in Contentstack, add this module and select the desired Contacts.

Especially if you want to display multiple Contacts, it might be desired to display them with two contacts in a line. In this case, set the width to “one-half”.

For more detailed information: https://freshcells.atlassian.net/wiki/x/AYD-pg

2.1.8: CTA

The Call-To-Action button (CTA) allows to bring a link into the user focus. This is normally used to trigger filling a lead form. CTAs help to optimize conversions.

You can add CTAs to your content. To do so, you have to provide the CTA label (the visible text in the button) and the linked URL. Also, you can adjust the button size, set it to full width, the background color and add the icon open in a new window.

2.1.9: Interactive document

You have an option to add a link to an interactive document which has been previously uploaded on Contentstack.

To add an interactive document:

1. Click on the Interactive Document module button in Contentstack (content block) and add a group entry.

2. Internal Name: Add an internal name for the entry.

3. Display Size: Choose a display size. For the New Design, only use the “One-Third” size.

4. Reference: Choose an existing entry you want to add on the webpage.

5. To add a new instance, click on the plus icon on the top right of the module.

Open

Example: Interactive Document as seen on Contentstack

Open

Example: Interactive Document (One-Third size) as seen on the Website

2.1.10: Horizontal card

The horizontal card can be used to promote or highlight a Blog article or central document. It is available

as full-size and half-size version.

Open

Open

You can add this element to any content block, and more than one time. However, we recommend using it with care to highlight specific documents only.

Using it with care also helps to better structure a web page. At the same time, it avoids an overload of promotional images.

2.2: Form Modules

2.2.1: Form

Open

You can flexibly design contact and other application forms for all your purposes (e.g. for training courses or events). To set up a new form, you have to follow some steps to define all settings. Once this is done, you can easily select from a list to include a form into the web page.

2.2.2: Newsletter Widget

To add a Newsletter Widget into a Content Block, please follow these Steps and Reference a Newsletter Subscription Widget into your content block.

Open

Example: Newsletter Widget button as seen on Contentstack

Open

Example: Newsletter Widget button as seen on the website

2.3: Modules to Structure Content

2.3.1: Anchor Link List

This new feature offers the option to provide the content of the page at the top of the page. This may be required, if you have a long page with various headlines.

In Contentstack, the Anchor Link List module is accessible from 1: Create a Webpage - Content Options - Content Block. It works only together with the Headline module.

1. Add “Anchor Link List” to the top of the content block.

2. Overwrite the Title with an appropriate name for your Landing Page.

Open

Example: Anchor Link List in Contentstack

3. Continue working in the content block.

4. Add Headlines for which you would like to set the links in the Anchor Link List.

   1. Activate Show in Anchor Link List.

   2. Choose minimum two headlines of the same level.

   3. Take care to activate it for consistent headline level only. Do not mix different levels!

Open

Example: Headline in Contentstack

The result

Open

2.3.2: Tab Set

Tab Sets can help you to structure content, especially if you want to add a lot to a page. Using Tab Sets allows you to structure equivalent content (different from sub-ordinated pages).

For example, if you want to describe details about the process to contact support, tabs can help to structure the content in a way that is easy for users to understand and follow.

Open

Example: Tab Set as seen on Contentstack

Open

Example: Tab Set as seen on the website

2.3.3: Collapsible

If you want to add some details which are only relevant for some users or give additional information which is not important to see at the first glance at the page, a Collapsible might be a good option.

Open

Example: Collapsible as seen on Contentstack

Open

Example: Collapsible as seen on the website

A collapsible won't work in a tab set. (See “Avoid endless nesting!” below)

Both modules work in the same way:

1. Add the module to your content block

2. Add as many Module Items as you need and set the title for each item.

3. Create a new content block or choose an existing to add content to a tab or a collapsible.

4. After choosing Tab Sets or Collapsible, you will follow the process of creating a Content Block again.

2.4: Teaser Modules

2.4.1: Image Slider

The Image Slider, is a combination of the former “Image List” and “Teaser Slider” modules. As with the Teaser Slider, you can arrange a combination of images and headlines horizontally. If you provide more than 4 images (or instances), arrows on either side of the slider allow you to scroll through the slides.

Open

Example: Image Slider Instance 1 as seen on Contentstack

Open

Example: Image Slider as seen on the website

To embed an Image Slider:

1. Select the Image Slider module

2. In Slides you add a group entry to create a new Instance. In the Instance you will add images and links as follows.

3. Image: Choose an image according to the size mentioned (640px x 360px).

4. Link (optional):

   1. Title: Add a suitable title for this Instance.

      1. A title can be used without a link.

      2. If you add a link, this title will overwrite the headline of the page you selected.

   2. Page: Choose an existing entry to link an image (or an instance) to an existent web or product category page. This is recommended.

   3. URL: Link to an external web page. This will open in a new tab.

5. By clicking on the plus icon in the top right of the Instance 1 tab to add more instances, you can repeat this process.

2.5: Dynamic Content Modules

2.5.1: Product Teaser

The Product teaser module has been updated in order to meet the DMC FA Website guidelines, i.e. there will be no subpages listed in the frontend.

Its main use is supposed to be in Solutions pages as a so-called Product Line-up. (see e.g. https://emea.mitsubishielectric.com/fa/solutions/industries/lithium-ion-battery which would normally be placed at the bottom of the page).

You can also embed Product teasers into your local Landing Pages.

To embed a Product teaser into your webpage:

1. Select the “Product Teaser” module in Contentstack.

2. Categories: Choose the Product Category or Sub-category that you would like to promote on your page. The links will therefore redirect the customer to the respective product pages on the website.

Open

Contentstack “Product teaser”

Open

Frontend without “Teaser description”

2.5.2: [A] Dynamic Placeholder

Only for Calendars and Forms

The Dynamic Placeholder allows to position a calendar or a news list in surrounding content. Please refer to the respective manuals for instructions. Since we pre-implemented calendar (Training and Events) and news (Press releases), these functions would be used in exceptional cases only.

For more information: https://freshcells.atlassian.net/wiki/x/hQDblg

For more information on uploading press releases: https://freshcells.atlassian.net/wiki/x/FoCfqQ