Versions Compared

Old Version 33

changes.mady.by.user Andrea Intveen

Saved on

compared with

New Version Current

changes.mady.by.user Andrea Intveen

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Table of Contents

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

...

Note

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

...

  • 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

  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 PagesONLY 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 thesecond 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 (will replace H1) blank

    • Will replace H1 in the new design.
      (lightbulb) 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

...

  1. Page Title: blank

    • Will replace H1 in the new design.
      (lightbulb) 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

    • (lightbulb) 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

Note

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

...

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.

  2. Save and publish

  3. Check page with component

    image-20240126-102752.png

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.

...

Note

Local admins may use this module only

  • For Landing pages

  • One time per page

  • At the top of the page

Do not use the Anchor Link List for any local pages in Service or Support!

...

  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

...

Note

The sections shown in the image below which shows “(Deprecated)” will all be taken out with the release of the new design. Therefore it would be preferred to not use this forLanding Pages.

...

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.

...

Note

In the Spotlight page, the system will take over the categorization of the web page you link to.

If the linked web page has not been categorized or in case you link to an external url, the Spotlight page does not show any category.

image-20240214-132414.png

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.

...

Panel
panelIconIdatlassian-light_bulb_on
panelIcon:light_bulb_on:
panelIconText:light_bulb_on:
bgColor#FFFAE6

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.

 

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.

Note

While all options are available in Contentstack “CTA button” modules, please use the different new options with care as long we have not received the final FA website guidelines.

To be continued