User Manual For Website Editors and Administrators

Skip to end of banner
Go to start of banner

Main Teaser

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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 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,

Following you will find the example of the “Second tier teaser” which you would use for your b) Landing pages.

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

2nd tier teaser frontend.png
  • 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 Main Teaser

Second level teaser backend.png
  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

    • (warning) For local Landing Pages ONLY you can choose a full-size image. (warning) 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.

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

  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 Color: Choose color (default is black)

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

  6. Save and publish

  7. Check page with component

2nd tier foreground frontend.png

Third tier teaser - To be observed, 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”

If you create a new subpage with a 3rd tier teaser, you have to choose the image

  • Open Contentstack and open a web page

  • Go to Main Teaser

3rd tier teaser backend.png
  1. Page Title Color: Default is black

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

  2. Teaser Tier: Third

  3. Background Image: select an image

For now, please always and only choose “Wave background 3rd tier”.

image-20240126-101904.png

There will be more and 3rd tier teasers in future, as provided in the FA global we guidelines. They wil be uploaded centrally and named according to theire use, e.g. 3rd teaser Support, 3rd teaser Service etc.

  1. Display Automating the World Text: default is off. You can choose to display “Automating the World” text if felt to be necessary.

(lightbulb) We recommend to switch it on.

  1. Save and publish

  2. Check page with component

    image-20240126-102752.png

  • No labels