TUTORIAL : TEXT - BASIC RICH TEXT

TUTORIAL: ALTERNATING COMPONENT

DISPATCHER TEASER LIST COMPONENT: TUTORIAL

JUMBOTRON: TUTORIAL

Jumbotron is a component that links an alias document, showing image or a cliplister as a background. The teaser introduction text is optional and appears as a text box. Link target for Alias is mandatory. There is an option to open the link in a new tab. Link label (visible text for the button) and Link tooltip (visible when the user hovers over the link) are optional. There is also an option to have a cliplister instead of an image. TextBox's position can be right, left, or center. Link type can be button, text, or no link. There are options to show text* and to Title: set H1 tag *. The title font color can be black, white, or grey. Tite font style can be: normal, bold, and italic. Text font color can be black, white, or grey. The button font color can be black, white, or grey. The button background color can be Primary (green), No color, White, or Red. Box background color can be Primary (green), Secondary (grey), or White. Box Background Transparency can be 0%, 25%, 50%, 75%, and 100%. There are options to show the button and show the title. The maximum number of Jumbotron slides is 5.

HEADLINE STAGE COMPONENT : TUTORIAL

PROCESS BAR COMPONENT: TUTORIAL

4 icons are mandatory.

There are 29 icons to choose from. They are the same as in the process bar component above.

Text under the icon is mandatory. Text used here in the example is the name of the icon. 
Description under the icon is optional.
There is a possibility for adding a link, which opens when a user clicks on the icon.
COLOR - depends on the brand, green for HG, blue for Dremel

STAGED TYPOGRAPHY - TUTORIAL

FAQ question and answer: TUTORIAL

The Question and Answer should be added to CMS prior to creating this component, and subcategory should be added to each question.
The number of FAQs in this component is not limited. Currently there is no option of putting questions in alphabetical order. In order they are added to the component is the order they can be seen on the front-end.

INFO BOX: TUTORIAL

There are 2  variants of Info Box Component: TIP and Warning and one must be chosen.

TIP variant looks like a blue letter i icon and blue outline of the box.
WARNING variant looks like a red exclamation mark and red outline of the box.
Title and Text are mandatory fields. Possibiliy of linking internal or external documents/urls within the text. 
No limitation of text characters.

CONTACT OPTIONS: TUTORIAL

Contact options component has 4 possibilities for reaching a contact:

1. Via linkage by linking internal and already created document (can be Generic, Project, Article, Listicle, Alias)
2.  Via hotline (adding hotline number and working hours)
3. Via fax
4. Via text message sending trough Web site

Contact cards are flippable, so you can choose a front and a back icon of the card. Click on each card to see their back. (1st is not flippable, leads to a link by clicking on it)

For each contact card  you can choose 1 icon (for some 1 for front, 1 for back view) from 29. You can check here, how they look: *List of all icons possible to be added to Process bar, Staged Typography and Contact options..

Video Cliplister Component: TUTORIAL

Video - Cliplister component is used to add official Bosch video to the document (Web-page)

Only mandatory section which has to be fulfilled within this component is Cliplister ID. 

Headline and Caption sections are not mandatory, but it is always better to have an additional description of the asset, and it also helps search engines understand what the video is about while crawling the web-page in the purpose of SEO.

Video - Youtube Component - TUTORIAL 

Video - YouTube component only takes YouTube video ID, not the whole URL. YouTube video ID can be taken from the URL and it is the value of variable "v=". In the following example video ID is bolded: https://www.youtube.com/watch?v=tCcuebKLmXk

Wcag Iframe Title* is mandatory field  - name of the Youtube video copied from the YT under the video

Teaser Row - Standard - TUTORIAL 

Teaser row - Standard component is used to display documents, as teasers, in a single row. Up to four teasers can be displayed at one time. Visual presentation of this component can differ based on amount of documents added to it.

Minimum amount of selected documents per row is 2 and the maximum amount is 4.

Picture and text displayed in teasers are taken from and configured in corresponding document, but there is an option to add differet image and video only for this teaser.

Title, Descitpiton and Label alignement can be formated individually to be positioned left, center or right.

Teaser Row - Editorial: TUTORIAL

Teaser row Editorial component is a type of component which is generaly used to tease an End-user with its look and forward him to specific page.
This component demands previously created documents (pages) as they are used to tease and direct user to the same.
At least 2 documents have to be added.
Type of documents that can be shown as teaser: Article, Listicle, Step by Step, Encyclopedia, Tutorial, Tag

Teaser Row - Tags: TUTORIAL

Picture and text displayed in individual teasers are taken from and configured in corresponding document.

First and second row of the component must be filled with 3 documents.

Documents that can be selected to be displayed inside first row of this component are Strategic tag, Format tag. Content Tag

Documents that can be selected to be displayed inside second row of this component are Alias page, Listicle page, Article page, Step by Step Project Document, Tutorial, Encyclopedia, Strategic tag, Format tag. Content Tag.

Documents that can be selected to be linked inside footer button are Generic Document, , CatalogCategoryDocument. Alias page, Listicle page, Article page, Step by Step Project Document, Tutorial, Encyclopedia, Strategic tag, Format tag. Content Tag.

Teaser row - Full Width: TUTORIAL

Teaser row - Full Width component is used to display chosen document in form of a teaser. Styling refers to background and can be  - primary (green), secondary (dark grey) and no background (white).

Only one document can be selected per teaser row

Picture and text displayed in Teaser Row are taken from and configured in corresponding document. Image position can be left or right.

Teaser Row Followup: TUTORIAL 

Teaser row - Follow Up is used to display customer relevant information that will lead customer to respective support page or give Bosch Hotline information. Minimum 2 documents can be added, maximum 4.

It consists two different kinds of columns :
a) standard teaser column with headline, body text and link;
b) support hotline teaser with short text, opening hours, phone number and legal text

Only 3 types of documents can be linked in this component: Followup Standard Document, Followup Hotline Document and FAQ.

Color of Teaser row Followup depends on a brand - HG green, Dremel blue.

Teaser Row - Multicolumn: TUTORIAL

Teaser Row - Multicolumn is specific teaser with three elements, minimum and maximum number of teasers is 3.

Minimum one link per element, but maximum number of links per element is not limited. There is an option that link opens in a new tab. (checkbox)

You can chose from 29 icons. Check the list and look of icons here.

The background color of each card can be chosen from: Dark green, Dremel Blue, Light blue to Turquoise (gradient), Turquoise to Light green (gradient), Light green to Medium green (gradient) and Dark Blue to Light Blue (gradient).

Headline and Link for each card are mandatory.

TEASER ROW - DOWNLOAD: TUTORIAL 
Teaser row - Download component is used to give a end user possibility to download some important PDF file.
Minimum number of files to be downloaded is 1, and maximum number of files to be downloaded is 4.
Title, Image, Alternative label for image, LINK (PDF) are mandatory.
Description is optional.
Link to the download is created internally by adding a new PDF file in Assets.
The color of the buttons depends on the brand - HG green, Dremel blue.

Image Row - Multicolumn: TUTORIAL
Image - Multi Column is a component for adding several images with caption into one row as a teaser.
Headline and Body text for the row are optional.
Alternative label is mandatroy for each image. Title label and Caption are optional.
Title and description of the image are optional.
Minimum number of images is 1, maximum number of images per one component is 4.
Make sure that all images are previously uploaded to the system and having resolution 3200x1800 (mandatory), JPG format and not bigger than 4 MB.

IMAGE - CAPTIONED IMAGE: TUTORIAL 
Captioned image is a component which is used within different types of documents and its purpose is to graphically  present the subject of the content within the document.
The image has to be previously uploaded to the CMS Images section and prerequirements for the upload are: 3200x1800 resolution, JPEG format and not bigger than 4 MB.

Alternative label ( Commonly described as Alternate text) is an attribute added to an image tag in HTML and this text appears inside the image container when the image can not be displayed and it also helps search engines understand what an image is about, and its main purpose is to be shown in case images on a page cannot be found or loaded and is imortant for the SEO.
Title Label and Caption are optional, but importan for SEO as well.
Caption and Alt text have to be precise, clear and not too lengthy (characterwise).

There are  Form components and the majority of them are third party integration and not maintainable in CMS, they can just be added as they are. Please contact the CMS editors' team for more information.

1. Form - Contact
2. Form - Newsletter Sign Up
3. Form - Newsletter Form (General)
4. Form - Newsletter Sign Up Teaser
5. Form - Newsletter Sign Up (North America)
6. Form - Newsletter Unsubscribe (North America)
7. Form - Newsletter Campaign Sign Up
8. Form - Newsletter Sign Up Rotozip
9. Form - Newsletter Unsubscribe Rotozip
10. Form - Product Registration
11. Form - Email Contact (North America)
12. Form - Email Contact Rotozip
13. MyBosch sign-in
14. Newsletter Sign Up Teaser
15. MyDremel Sign In
16. MyDremelNorthAmericaSignInCompound
17. Price Spider Dealer Locator
18. Nexmart Dealer Locator

Makers Profile: TUTORIAL

Makers Profile is a component used on the Dremel website to introduce makers who share their talent and passion using Dremel tools. 

Maker Tag image and the alternative label for it are mandatory.
Upperline is optional. Headline and Text are mandatory.
Key fact Term and Defintion are mandatory. The number of key facts is not limited.
ImagePosition can be top or center.
TextBodyWidth can be normal, wide or full.

You can check our Makers Profile here.

Expandable Teaser Group: TUTORIAL

This component is used as a teaser with additional information. It looks like and image teaser with a clickable + button. When the users clicks on the +, the teaser expands with additional field with an image and title, and description and link can be added as well.

Headline (Main headline for the group) is mandatory.

Headline, Flyout Headline, Main Image, Flayout Image and Alternative labels for images are mandatory as well.

There is an option to add a Flyout link, if you want and possibility to open in new tab.

The number of teasers is not limited.

Image - Subline Carousel: TUTORIAL 

This component has image prerequisites that have to be fulfilled before its use and which clearly state that image has to be 16:9 Aspect ratio with 3200 x 1800 pixels resolution, a size of less than 4 MB, and JPEG format.

An alternative label ( Commonly described as Alternate text) is an attribute added to an image tag in HTML and this text appears inside the image container when the image can not be displayed it also helps search engines understand what an image is about, and its main purpose is to be shown in case images on a page cannot be found or loaded.

The number of Carousel images goes from one to infinity, there is no upper limit.

Teaser Row - Headline & Text: TUTORIAL
Teaser Row - Headline & Text is a component used to have more than 2 teasers as a headline and text.
The minimum number of teasers in a row is 1, maximum 4.
Background color depends on the brand: HG green, Dremel blue

Headline Text Images: TUTORIAL

Headline Text Images is a component that integrates text and images. 
Title and Description are optional fields.
Background for the Title and Description is white and cannot be changed.
Font of the Title and Description, as well as the size and the color, cannot be changed.
Color of the Title and Description is black.
The background of the whole component depends on the brand: green for HG, blue for Dremel.
There is a mandatory main image, and from 1 to 4 images in the second row.
Images need to be delivered: 3200x1800, size of less than 4 MB, in JPEG format.
The alternative label is mandatory for every image.

Text - Quote: TUTORIAL

Text - Quote component is a component which is generaly used to emphasize or to repeat the words that someone else has said or written.

Text - Quote and Author are both mandatory fields.

Hotspot: TUTORIAL

This component gives a possibility to add a hotspot on image - clickable + button that open a text with title, and image, for some additional informaiton.
The number of hotspot items is not limited.
The position of hotspot item can be complicated. There are mandatory X* and Y* fields that refer to the coordinates of the position, which are numeric, and can be very difficult to position an item to the wanted place.

Teaser Row - Alternating (3 Slots) : TUTORIAL

Teaser Row - Alternating is a teaser component that consists of 3 cards: Main, Upper and Lower Card. All 3 are mandatory cards and they usually link an Alias document.
Main Card ist the biggest one, and can be positioned left or right. 
Only the Main Card can have a CTA button whose Style can be: primary (green), white, red and no background.
Font color of the Title and Text can be: white, black , grey and primary.

Teaser Row - Centered (5 Slots) : TUTORIAL

Teaser Row - Centered (5 Slots) is a teaser component that consists of 5 cards: Main, Left Top Card, Left Bottom Card, Right Top Card and RIght Bottom Card. All 5 are mandatory cards and they usually link an Alias document.
Main Card ist the biggest one, and is in the center,
Only the Main Card can have a CTA button whose Style can be: primary (green), white, red and no background.
Font color of the Title and Text can be: white, black , grey and primary.

Teaser Row - Carousel: TUTORIAL

Teaser Row - Carousel is a component that links an alias document, showing image or a cliplister as a background. The teaser introduction text is optional and appears as a text box. Link target for Alias is mandatory. There is an option to open the link in a new tab. Link label (visible text for the button) and Link tooltip (visible when the user hovers over the link) are optional. There is also an option to have a cliplister instead of an image. TextBox's position can be right, left, or center. Link type can be button, text, or no link. There are options to show text* and to Title: set H1 tag *. The title font color can be black, white, or grey. Tite font style can be: normal, bold, and italic. Text font color can be black, white, or grey. The button font color can be black, white, or grey. The button background color can be Primary (green), No color, White, or Red. Box background color can be Primary (green), Secondary (grey), or White. Box Background Transparency can be 0%, 25%, 50%, 75%, and 100%. There are options to show the button and show the title. The maximum number of Teaser Row - Carousel.

IMAGES TO BE DELIVERED IN 3200X1800 and 1908x530, JPG, and not bigger than 4 MB.

ButtonBarCompound: TUTORIAL

ButtonBarCompound is a component used as a Call To Action Button.
There are options for Internal and External Link.

For Internal link a document from the CMS is selected (usually an Alias document) with a possibility to configre text for CTA button, different than it is configured in the selected document. 

For External link a URL is added, option to open the link in a new tab and Link label (Visible Text for CTA button).

CTA button font color can be: Black, White and Grey.
CTA button font can be: Normal, Bold and Italic.
CTA button background color can be: Primary (Green), No Background, White and Red.

Teaser Row - Slider Cards Compound: TUTORIAL

Teaser Row - Slider Cards Compound is used to display documents, as teasers, in a single row.
Up to 8 teasers can be displayed in a row, although the number of teasers is not limited, only 8 can be seen in a row on the Front End.
Title, Image, Alternative label for image and Link Target are mandatory. Title is clickable and leads to the linked page. 
There is an option that link can open in a new tab.
This component is usually used for presenting products.

Table compound: TUTORIAL

Table compound is a component used to present some overview or numeric data.
Mandatory fileds are numbers of rows and columns.
There is an option of headers: None, First column, First Row and Both.
Width and Height can be adjusted by adding numeric values.
Alignment can be: left, right and center.
Cell spacing and cell padding can be adjusted by adding numeric values.
There is also an option of internal and external linking within the text.

Spacer is a component used to divide 2 components.
It can be small, medium and large.

This component can be added as additonal search of the website.

Teaser Row - 4 slots: TUTORIAL

Teaser Row - 4 slots is a component that consists of 4 cards, 2 per row. They are: Left Upper Card, Right Upper card, Left Lower Card and Right Lower Card.
Title, Tag image, Alternative label for image, Link and Link label (Visibel text for CTA) are mandatory for each card.
Font, color, background or shape of the CTA cannot be changed.
Introduction is optional.
Deliver images in: 3200x1800, JPG, not bigger than 4 MB.