New and updated modules/components for the new Design

1. Main Teaser NEW

The main teaser is the new eye-catcher of each web page. It is accessible from 1:Create a Web page - Webpage” in Contentstack, and will replace the former H1 headline (white on red). As of today, in [DESIGN RELAUNCH] Main Teaser, it is still named “Page Title (will replace H1)”.

In Contentstack you will 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 - for example, Solutions - Automotive

  • Two different approaches a) web pages b) Landing pages (see the following explanations)

• 3rd tier - all levels below,

Second tier teaser - Approach to be used for Landing pages ONLY

Open

Example: Landing page with 2nd tier teaser full-size image

• Create a new teaser image in the correct size. i.e. Background: 1920x640 px (JPEG)

  • Upload and publish the image.

• Open Contentstack and open a web page

• Go to [DESIGN RELAUNCH] Main Teaser
  
  

  Open

  

   

1. Teaser Tier: Second

2. Background Image: select an image

   • The background image is a pre-defined grey background, pre-defined and set by the system, if chosen

   • For local Landing Pages ONLY you can choose a full-size image. The image size to be used is 1920x640 px (JPEG). → See example above

3. Foreground image: select an image

   • The foreground image will be added to the pre-defined grey background and will be used for the second tier teaser only. → See example below

   • The image size is 880x496 px PNG. The image need to have a transparent background.

   • To be used for local Service and Support pages with 2nd tier teasers.

4. Factory Automation Text Color: Choose color (default is black)

   • Factory Automation will be displayed in every page, and cannot be omitted.

   • Based on the Image color, you can choose the color to be black or white.

5. Page Title (will replace H1) blank

   • Will replace H1 in the new design.
     If you leave it blank, H1 will be taken over. You can overwrite it for the new design.

   • In future H1 will be provided here.

6. Page Title Color: Choose color (default is black)

   • Based on the Image color, you can choose the color to be black or white.

7. Save and publish

8. Check page with component

Third tier teaser - To be oberved, only if you create a new subpage.

For the design relaunch, the Third teaser background images have been pre-defined and implemented by the system, if you chose “3rd tier teaser”

• Open Contentstack and open a web page

• Go to [DESIGN RELAUNCH] Main Teaser
  
  

   

1. Page Title: blank

   • Will replace H1 in the new design.
     If you leave it blank, H1 will be taken over. You can overwrite it for the new design.

   • In future H1 will be provided here.

2. Page Title Color: Default is black

   • Even if you changed the colour, it would appear in black in 3rd tier teasers.

3. Teaser Tier: Third

4. Background Image: select an image

1. Display Automating the World Text: default is off

   • You can choose to display “Automating the World” text if felt to be necessary.

   • We recommend to switch it on.

2. Save and publish

3. Check page with component
   
   

2. Anchor Link List NEW

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 [Design Relaunch] Anchor Link List module is accessible from 1:Create a Web page - Content options - Content block”. It works only together with the Headline module.

1. Add “[Design Relaunch] Anchor Link List” to the top of the content block.

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

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 [Design relaunch ] 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!

The result

3. Text/Image/Link Module

• Open a web page and edit a Content Block

• Add/edit a module Text/Image/Link

• Provide an internal name to this module to make it easier for you to identify the modules of a content block.

1. Add Body Text

2. Add an Image (optional)

   1. Allow Image Zoom

   2. Display image with border

3. Set image width to

   • full

   • one-half

   • one-third

   • one-fourth

4. Set Image position (Image left or right)

   • left

   • right

5. Image Headline 3 (optional) New

6. Image Sub Header (optional) New

7. Image Links

8. Add a list of links

   • Add at least one group entry

     • Add a link text

     • Set a link

If you want to link to other web page, sub pages etc., i.e. links which are supposed to appear below the text block, please use this link feature.

9. Save and publish the Content Block

10. Check page

4. Headlines

The new design offers two additional headline styles which are ready to use (in Content blocks) for the new design.

5. Spotlight slider and Spotlight page NEW

The so-called Spotlight slider on the HOME page will replace the Main Slider of the old design.

“Spotlight slider” is a new content type in Contentstack. During the change process, both content types can be maintained in parallel.

Start with (re-)creating the required images in the new size. See https://freshcells.atlassian.net/wiki/spaces/MEFAUM/pages/3464822808/Image+sizes+for+the+new+Design#Spotlight-Slider

In Contentstack, please go to 1: Create a Webpage - Content option - Spotlight Slider https://eu-app.contentstack.com/#!/stack/blt5412ff9af9aef77f/content-type/home_image_teaser_slider/en/entry/blte4e48431a3660c3e/edit to maintain the Spotlight sliders.

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.
      
      

       

   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.

6. Mega dropdown menu NEW

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. CTA Button new options

The new Style guides provide extended options to display buttons in the frontend. You will not only be able to choose a button colour scheme (primary and secondary), but also different sizes, widths and alignment in the page.

To be continued