Organize Content in Contentstack

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.

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

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

1: H1 Headline

Each web page has a unique main headline.

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: 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.

4: 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

5: 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

6: 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.

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.

6.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.

7: Right Navigation Settings [DEPRECATED]

With the new design this section became obsolete.

7.1: Right Navigation Link Lists

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.

1. Go to Right Navigation Link Lists in Contentstack and create a new Entry

2. Provide a Title which will be used as headline in the website

3. 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.

4. Save and publish the Entry

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.

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.

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.

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.

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).

2.1.2. Text/Image/Links [will be slightly changed with the design relaunch: Option to add“Image” headline]

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.

2.1.3. Table

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

2.1.4. Video

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.

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.

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”.

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. Image List

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.

2.1.10 Interactive document

2.2. Form Modules

2.2.1. Form

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 Reference a Newsletter Subscription Widget into your contentblock.

2.3. Modules to Structure Content

2.3.1. 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.

2.3.2. 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.

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. Teaser Slider

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

1. Select the respective module and provide an internal name

2. In the “Slides” box, click “Add a group entry”

3. Embed an image

4. Reference a target page or add a Title and an external URL

5. Click the plus icon at the top right of the Slide form to add more slides

2.4.2. Teaser (Link List) [DEPRECATED]

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

1. Select the respective module and click “Add a group entry”

2. Provide a headline text and optionally choose a Web Page which is linked in the headline or provide an external URL

3. Optionally add an image

4. Optionally add a short text

5. In the box “Links”, “Add a group entry”

   1. Define a link by either choosing a Web Page or by providing an external URL and a link Title

   2. Select the desired icon to be displayed left to the link. By default, this is the right arrow

   3. Repeat a. and b. for each link you want to add

6. Repeat 1. to 5. to add more Link List Teasers which will be displayed one next to each other

2.5. Dynamic Content Modules

2.5.1. [A] Product Teaser [DEPRECATED for the new design]

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.

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.