Numbered headlines with columns ( : ) refer.to the numbers in the chart above.
Content Block | A content block is a specific content type in Contentstack. In a content block, you can edit pieces of content and adjust styling settings. Those content blocks you can reference e.g. to a webpage to display the content in there. Content Module | Within a Content Block, there are many options to create and arrange content, e.g. in a table, a combination of text and images etc. These options are provided in a list of Content Modules, from which you can choose. Content Type | A content type is a predefined structure for a dataset in Contentstack. In the Contentstack interface, each content type has a related form to create datasets (entries) following the predefined structure. E.g. a Content Block is a specific Content Type. Entry | An entry in Contentstack is a dataset following a specific structure, which is defined in the respective content type. A comprehensive list of terms you find in the https://freshcells.atlassian.net/wiki/spaces/MFADEXT/pages/2486337624 |
A web page consists of many elements which will be compiled in a defined way to ensure a proper styling across the website. The structure chart below shows a very simple kind of web page. It covers the most common types pages.
Numbered headlines with columns ( : ) refer.to the numbers in the chart above.
Update as of September 2022 There are two new videos giving instructions of
All other explanations below are still valid, but refer to the Classic Contentstack design. |
The following video provides a step-by-step instruction of how to create a Landing page. |
When you create a Landing page, please never forget to add /lp/ to the url.
For the second video click here or scroll down to “2. How to Work with Content blocks”.
Due to the Design Relaunch this field became obsolete. The H1 headline will be maintained in the new Main teaser content type. |
Each web page has a unique main headline.
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.
Please always validate the URL before the web page will be published! Once the web page is live, the page might be indexed with the URL. Later updates can lead to broken links in the search results of search engines as well as “dead ends” if the URL has been shared, e.g. in an email. |
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 (“/”).
Take care of special characters |
Safeguard proper SEO If you create a web page which should be linked in the main navigation and become part of a section, e.g. “Support”, please take care to reflect the navigation structure in the URL field, e.g. “/support/training”. If you create a page tree from the main navigation, you need to set all super-ordinated (parent) pages by hand in the URL field. E.g. for a page with training locations it would be “/support/training/locations”.
|
Shorter might be better If you create a page with a long H1 Headline, the URL will also become long and probably messy. You can shorten the URL. Example: You create a page “Return of Goods”. The automatically created URL will be “/return-of-goods”. → Just click the pencil icon at the right of the URL field and change the URL to “/return”. |
URL and navigation
Example: “Return”, a sub-page of “Support”
|
Landing pages Creating a landing page works in exactly the same way like pages of the page tree. However, the URL allows to optimize the URL for marketing purposes.
Example: You create a landingpage “Frühjahrsmesse” in the German website. The automatically created URL will be “/fr-hjahrsmesse”
|
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.
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.
Please keep in mind that a content block is an independent dataset which can be used in multiple pages! This means that if you change a content block, you might also impact the content of another page. So, please be careful! |
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.
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
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.
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.
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.
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.
Apart from the first level button, the mega dropdown design will offer the option for only one more direct click to a page, i.e. either b) the overview page or c) the sub pages directly. If you choose b), you need to ensure that you add links or teasers onto the overview page to make the sub pages acessible. This would be the recommended approach. |
With the new design this section became obsolete.
If or how this section will be offered in future is currently under consideration.
Service / support blocks are intended to be used for providing specific fast lane links to related pages across the website.
To create a Service / Support Block, create an Entry of the Content Type “Right Navigation Link List” and reference it in the Web Page options for the right navigation.
Go to Right Navigation Link Lists in Contentstack and create a new Entry
Provide a Title which will be used as headline in the website
Either click “+ Page” to add an internal link to a page in the website or click “+ External” to add an external link (e.g. to the e-shop)Although you can add an external link here, you should do this in exceptional cases only, but keep the visitor in our website.
Save and publish the Entry
|
“Content Block” is such flexible and powerful, it can be used in many places for various purposes. This also leads to the fact that one Content Block can be nested into another Content Block. Please keep in mind to never nest an entry into itself. You can give every Entry an internal name. Use this option for easily distinguishing Content Blocks in Contentstack. |
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.
The following video provides a step-by-step instruction of how to create a Content Block. |
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.
Text/Image/Links to display the image at the top
Headline to display the first sub headline
Text/Image/Links to display the paragraph's body text
Headline to display the second sub headline
Text/Image/Links to display the paragraph's body text
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.
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
|
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).
Advanced option: Use the “Anchor” to the headline to define a point of interest within a website content to which you like to explicitely point a user. Type any test string into the anchor name field. Do not use special characters and replace spaces e.g. with an underscore (“_”). |
An anchor allows to point to a specific point within the website content. To do so, the anchor name must be added to the URL with a “#” before the anchor name. Anchors are mostly used in emails to point to one specific paragraph in a web page. This is especially useful if the paragraph is at the bottom of the page to avoid forcing users to scroll and search. Example: In an email you want to point to a paragraph in a long webpage, e.g. https://eu3a.mitsubishielectric.com/fa/en/solutions/capabilities/scs. In this page, you want to point to “Advanced Safety System” which is in the lower part of the page.
|
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 upload 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 → https://freshcells.atlassian.net/wiki/spaces/MFADEXT/pages/2610364429
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 link: You can link to any web or product page. Try to avoid to link users away from our website.
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.
If you create a list of links, you have to add some information for each link separately.
|
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 colour.
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
You can embed videos, either uploaded or linked from the corporate Youtube channel. The video will be provided with a video player. To learn more about uploads, please check the manual → https://freshcells.atlassian.net/wiki/spaces/MFADEXT/pages/2610364429
Please keep in mind that the video content will be managed in a separate content type. If you want to change the video to be displayed, either select another entry from the list or create a new Entry of the “Video” type. For more details how to use references, please check the respective manual.
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.
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.
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”.
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.
The Image list displays a list of images 1,2,3,4. If you add more than 4 images it will appear as an image slider.
This Image List modules need to have a reference to a ContentType which is called ‘'Image List’'.
In the ContentType “Image List” you will have the possibility to create generic image lists which can be used several times. On the image itself you can add links to your images.
Fixed height and aspect ratio which can be selected in the image list itself. 
|
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.
You could do this directly here, but we strongly recommend to first create a form and completely define the details. Once this is completed, the defined form can be easily included into a content block or an appointment detail, by clicking “Choose an existing entry”. Example: If you want to have a short contact form to allow website users to easily contact you and you want the form to look always the same, you can create the form once and use it in as many places as needed.
|
Please observe the changes related the new “Manage Newsletter Subscription page” settings. For the details please see the new update User manual “Newsletter Widget and Manage Subscriptions page”. |
You can embed a button to open a newsletter subscription form somewhere in the content block and edit the label of the button.
This would be independent from the General Newsletter Subscription button available in all web pages by default (from “Newsletter” in Inquiries in the right navigation).
For individual newsletter registrations, e.g. from a landing page, you have to select to which newsletter subscription widget you want to relate to in a content block.
You can embed a button to open a newsletter subscription form somewhere in the content block and edit the label of the button.
This would be independent from the General Newsletter Subscription button available in all web pages by default (from “Newsletter” in Inquiries in the right navigation).
For individual newsletter registrations, e.g. from a landing page, you have to select to which newsletter subscription widget you want to relate to in a content block.
In the settings of the subscription widget, you will define the specific newsletter which the user would subscribe to. This contact list needs be created in MailJet beforehand plus the Newsletter needs to be created in Contentstack (by Support) and localized by you For details please see Newsletter Widget and Manage Subscriptions page. |
To add a Newsletter Widget into a Content Block, please follow these Steps Reference a Newsletter Subscription Widget into your contentblock.
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.
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.
A collapsible won't work in a tab set. (See “Avoid endless nesting!” below)
Both modules work in the same way:
Add the module to your content block
Add as many Module Items as you need and set the title for each item.
Create a new content block or choose an existing to add content to a tab or a collapsible.
After choosing Tab Sets or Collapsible, you will follow the process of creating a Content Block again.
Avoid endless nesting! If you add a content block to a Tab set or a Collapsible, don’t add another Tab set or Collapsible to that. It will not work, and is not very comfortable for website users, either. Less clicks are better. This setting has been made to avoid nesting of content. |
The Teaser Slider allows to arrange combinations of images and headlines horizontally. If you provide more than four slides in here. Arrows will allow in the website to scroll through the slides.
To embed a Teaser Slider
Select the respective module and provide an internal name
In the “Slides” box, click “Add a group entry”
Reference a target page or add a Title and an external URL
Click the plus icon at the top right of the Slide form to add more slides
|
With this module, you can create link lists with a headline, optionally an image and a short text, at the top. The teaser will look similar to the Product Teaser in 2.5.1.
To create a teaser
Select the respective module and click “Add a group entry”
Provide a headline text and optionally choose a Web Page which is linked in the headline or provide an external URL
Optionally add an image
Optionally add a short text
In the box “Links”, “Add a group entry”
Define a link by either choosing a Web Page or by providing an external URL and a link Title
Select the desired icon to be displayed left to the link. By default, this is the right arrow
Repeat a. and b. for each link you want to add
Repeat 1. to 5. to add more Link List Teasers which will be displayed one next to each other
You can embed a Product Category tile, like used e.g. in the Products main page, into your web page. Select the module and choose the Product Category you want to point to. The links in the tile will forward to the respective pages in the Products section of the website.
Since products and product categories will be created centrally, you cannot create any new Entries in here.
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.
/return → Google will not determine the page as sub-page of “Support”
/