Components
Overview
Here is an overview of all components:
| New Components | Old Components |
|---|---|
| Text Components | |
| Textblock | Textblock, BulletPointList, Headline |
| Textbox | TextBox, TextBoxContainer, InfoBox, SupportItemList, TeaserTopDownloads |
| Interview | Question & Answer |
| Headline | New Component |
| Notification | New Component |
| Media Components | |
| Image | ImageIcon, SingleImageBox, CMS Image, TeaserSingleBox |
| Image Gallery | Image Gallery |
| Image Teaser | TeaserImageOverlay (Headline and Overlay) |
| Image Thumb Slider | ImageGallery (Style: ThumbSlider) |
| Image Icon | New Component |
| Image Stage | New Component |
| Slider | Slider + SliderItem (Styles: Fullwrap, Caption, Bottom, Overlay & Video) |
| Video | VideoTeaser, VideoTeaserOverlay |
| Autoplay Video | New Component |
| Simple Icon Image | New Component |
| Vector Image | New Component |
| Vector Overlay | New Component |
| Tile Stage | New Component |
| Gradient Teaser | New Component |
| Content Slider | New Component |
| Media Stage | New Component |
| Text & Image Components | |
| Banner Component | BannerComponent, TeaserListModuleGroup |
| Banner Dropdown | MyEGGERConversionComponent |
| Product Teaser | New Component |
| Product Teaser List | EsDecorList, EsBaseProductList, ProductTeaserList |
| Image Text Overlay | TeaserWithOverlay |
| Simple Image Compare | SlideControl |
| Multi Image Compare | AdvancedSlideControl |
| Simple Annotated Image | New Component |
| Text Annotated Image | New Component |
| Text Image Box | TextWithImageBox (image position = left/right/bottom) |
| Progress Indicator | New Component |
| Quote | New Component |
| Bannerlist | New Component |
| Linked Teaser List | New Component |
| Slide Control | New Component |
| CTA Components | |
| CTA Box | QuicklinkComponent, SupportItemList, TeaserMultiButton |
| Iconbox | New Component |
| News Teaser | HomeTeaserNewsComponent |
| Contact Box | ContactPerson, ContactBox, ContactTeaser |
| Contact Teaser | ContactPerson, ContactBox, ContactTeaser |
| CTA Heroteaser | New Component |
| Mixed Components | |
| Accordion | Accordion & Accordion Items (Text Component, Image Component) |
| DecorSlider | DecorSlider, DecorSlider with Headline |
| Content List | New Component |
| Editorial Feature Container | New Component |
| Property Data | New Component |
| Property Data List | New Component |
| Category Container | New Component |
| Product Comparison | New Component |
| Heroteaser | New Component |
| Search Components | |
| Country Routing | New Component |
| Search Result Item | New Component - Other |
| Floor Finder Teaser | Floorfinder Teaser other |
| Partner Search | PartnerSearchComponent - CTA c |
| Job Search | PartnerSearchComponent |
| Decor Search | DecorSearchComponent (1 & 2 Buttons) - other |
| Other | |
| Table | DynamicTableBoxComponent |
| Timeline | Timeline |
| Chiplist | New Component |
| Downloads | |
| Download List | DownloadContainer |
| Download Search | DynamicDownloadTabComponent |
| Grid | |
| Grid Wrap | New Component |
| Accordion Grid | New Component |
| Campaign Grid | New Component |
| Tab Grid | New Component |
| Special Components | |
| Microfrontend | Connection to e.g. microservices |
| Inline Navigation | Currently only on dynamic page templates |
| Home Stage | Old Home Page Component |
| Home Icon | Old Home Page Component |
| Dynamic Component | Only for dynamic page templates |
General Information: In Hybris you had to think in Columns when you were positioning your components in one Grid. In FirstSpirit this has changed and you have to think in rows when you are positioning your components in a Grid. For further information on this topic, please have a look at Component Placement
Layout
In this section located next to the content area you can choose the layout for your page.
This needs to be done separately for mobile, tablet and desktop. You can choose separately for each device, whether the component should be visible or not, over how many columns (= Col Span) and rows (= Row Span) it should be displayed and in which order it should appear.
Visibility is a useful tool when you want to make a particular component invisible for a particular device. This can be useful if, for example, an image looks good for desktop but is unnecessary for mobile devices because the user would have to scroll past it.
For more information, please have a look at Component Placement
Restrictions
Sometimes it is necessary to make a page or component only available for certain countries, users or other aspects. The restrictions are used for this purpose.
To do this, go to the restrictions tab and click on New. If you would like to edit an already existing restriction, just click on the intended restriction.
After you have done this, another page will open. On this page you can choose between the following restrictions:
- Country
- Country Collection
- Customer Group
- Division
- Service Role
The procedure is the same for all restrictions. You go to the drop-down menu next to the restriction and select the appropriate abbreviation. For example. Customer group: dis. Once you have chosen an abbreviation, click on it and add it with the plus (+) next to it. If you click on a restriction by mistake, you can easily remove it by clicking on the minus (-).
At the bottom of the restrictions page there is the option to invert the chosen restrictions:
By clicking on Yes you reverse the selected restrictions. It is easiest to explain this with an example: Let's assume you have selected the following restriction: Country = IT. Without inversion, this would mean that this component is only visible in Italy. However, if you invert the restriction by selecting Yes, this means that the component is visible in every country except Italy.
For more information regarding restrictions click here
Text Components
General Information
The content section looks slightly different for each component, whereas the layout and restrictions sections stay the same for each of them. The different content areas are explained below for each component. However, since multiple components have the same text editor in their content area, this is explained in the General Information, as are the layout and restriction areas.
Content
In this part we will talk about the text editor located in the content section of multiple components.
Here is an overall explanation on the editor:
| Key | Name | Explanation |
|---|---|---|
| 1 | Format | Different formatting styles |
| 2 | Style | Additional styling options |
| 3 | Remove Formatting | Removes the formatting |
| 4 | Bold | Font type: bold |
| 5 | Italic | Font type: cursive/italic |
| 6 | Links | Insert a link, icon or image |
| 7 | List | Add/remove a list. |
| 8 | Undo | Undo your last step |
| 9 | Redo | Redo your last step |
Format
This part is about the dropdown called Format in the text editor of the content section of multiple components:
This dropdown allows you to choose between different formatting styles. Just select the text you want to edit and choose your preferred formatting style:
- Standard = normal text
- Headlines = choose between h2, h3, h4
- Quote short = longer lines framing the text
- Quote long = shorter lines framing the text
- Note = smaller text
- Simple remark = similar to Note, but slightly bigger
- Simple line = makes a line appear
- Source Code (Second image)
This is what the different formats look like:
Styles
This part is about the dropdown called Styles in the text editor of the content section of multiple components:
This dropdown allows you to add different styles to your text:
- Underlined = underlines your text
- Superscript = Superscripts a text
- Subscript = Subscripts a text
Just select the text you want to edit and choose your preferred style:
This is what the different styles look like:
Links
This part is about the links available in the text editor of the content section of multiple components:
In this text editor different links are available:
| Name | Explanation |
|---|---|
| Button | This link appears in a red or white button |
| CTA | This is a red link with >> in front. |
| Document Link | This link leads to a document, you can add an icon if you want to. |
| HTML ID | Here you write the HTML ID if you want to create an anchor link to this component. |
| Icon Link | This is a link with an icon |
| Image | This is not a link! This is a way to implement an image in the text area. |
| Inline Simple Icon | This is not a link! This is a way to implement an icon in the text area. |
| Link | This is an inline link, it appears red and gets underlined by mouseover. |
For further information regarding links and how to implement them have a look at Links
Lists
This part is about the option to create lists in the text editor of the content section of multiple components:
In the text editor right next to Links is the option to create Lists. Just select the text you want to change into a list and click on the list button. Bullets will appear in front of the text. To change the format of the bullets themselves, right-click on one of the bullet-points. A small window opens in which you must select edit list properties.
You can then choose between:
- disc
- tick
- number.
Textblock
- combines old TextBlock, BulletPointListComponent and HeadlineComponent
- can also be used outside of a Grid
- divided into three sections – content, layout and restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Textlayout Mobile, Tablet, Desktop = here you insert in how many columns your content should be displayed. For mobile devices you can choose only one column, for tablets between one and two columns and for desktops between one, two or three columns. Our new system is then so intelligent that it independently divides the text between the columns, so that the text is automatically balanced.
[3] Text = here you insert all texts, bulletpoint lists, headlines etc. You do have the normal editing tools at the top of the “Text” field. For further information on the editor, please have a look at Text Components.
Textbox
- combines old TextBox, TextBoxContainer, InfoBox, SupportItemList and TeaserTopDownloads
- can also be used outside of the Grid
- divided into three sections – content, layout and restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Background = choose the background color of the textbox, you can choose either grey or white
[3] Red Framing = the red line on top of the box - you can select whether you want it or not
[4] Text = here you insert all texts, bulletpoint lists, headlines etc. You do have the normal editing tools at the top of the “Text” field. For further information on the editor, please have a look at Text Components.
[5] Aspect Ratio = what the box should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
Interview
- previously: Question and Answer
- can also be used outside of the Grid
- divided into three sections – content, layout and restrictions
Content
This part is about the content area of the interview, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Interviewer = the person who asks the questions
[3] Interviewee = the person who is being interviewed
[4] Question/Answer: here you can create Interview Elements by clicking on "New" in the blue box at the bottom of the component. Then the next window opens:
Interview-Element
For each question and its answer, you must create a new element. In this element you can enter the question in one field and the answer to it in the next one. This element also has a field for the component UID, which is filled with the old component UID from the old WCMS Hybris.
Headline
- can also be used outside of the Grid
- divided into three sections – content, layout and restrictions
The Headline was created to put in front of a component with an appropriate/better padding when it's used outside the Grid.
Content
This part is about the content area of the interview, as layout and restrictions have already been explained here
As you can see there are 3 different Headline Types you can choose from: H2, H3, H4. They work as Headline or Sub-Headline.
Notification
- can only be used inside of the Grid
- divided into three sections – content, layout and restrictions
- is excluded from indexing. If content that is relevant for SEO or needs to be crawled for other reasons is maintained here, please inform us by sending a COMSupport ticket.
Content
This part is about the content area of the interview, as layout and restrictions have already been explained here
[1] Icon = choose from 5 different Icons. The notification can look slightly different depending which Icon you choose it will be be black, yellow green or red.
[2] Headline = the Headline will be bold and above the text (it is not obligatory).
[3] Text = insert here the text for the Notification (is mandatory)
Media Components
General Information
In this area we will explain how you select an image and change an already existing selection as this works the same for every image.
Selecting an image
Selecting an image is always the same for every media component. You have a field within the component that says "Image". For the media components this is a mandatory field. As long as it is empty you will receive an error message and therefore you cannot release the components/the page.
[1] only shows the media project 0 Egger.com Media, as this is the only project, where our media is saved
[2] here you can directly enter a search term if you know the name of the image and choose the image right away
[3] or you click in this field to open a separate window which gives you more search options and a preview of the images. (see more on the screenshot further below) - also once an image is selected and you hover over this field with your mouse, you can either delete the picture from this component (via clicking the x) or you can switch out the image for another one by clicking on the icon with the folder and the arrow right next to the x.
[3] Limit search results gives you the option to enter a search term, search in different folders and select a filter for the last modified images, that were modified in the last week or month.
Icons
All icons used on Egger.com are stored in the Icon Font Generator. This tool is connected to First Spirit and thus facilitates the access. Therefore, the selection and filtering process is the same as for an image and will not be explained again. Note, however, that the icons cannot be edited (e.g. the focus point), but must be used as they are. Icons are stored in the Font Generator Tool in an .svg format and can only be uploaded by the Corporate Online Marketing Team. So if you need an icon that is not already available, please get in contact with the Corporate Online Marketing team. If you want to see all available icons in your project, please click on the "Data Source" icon in the top navigation and then go to the Icon tab.
Please note: Icons need to meet the following criteria that they can be uploaded to the Icon Font Generator: - svg - 16x16 px - black - one path
Editing an existing picture
If an image has already been selected and you want to delete or change the image this works slightly different:
Explanation
| Icon | Explanation |
|---|---|
 |
With the first icon you delete the current reference to an image. |
 |
With the second icon you can replace the image with another one. |
 |
With the third icon you can edit the Image Metadata. After you did that please release your changes in the media project. |
 |
With the fourth icon you can edit the image as a whole. After you did that please release your changes in the media project. |
 |
With the last icon you can edit the image section/focus point shown. After you did that please release your changes in the media project. |
Image
- combines old ImageIcon, SingleImageBox, CMS Image and TeaserSingleBox
- can also be used outside of the Grid
- divided into three sections – content, layout and restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Image = choose an already uploaded image from the media project (for further explanation on this field, please have a look at Media Components)
[3] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt text of the image.
[4] Enable Zoom = here you decide whether you want to allow a zoom for the image or not. Note: If you allow the zoom, then you can no longer place a link on this image.
[5] Link = Insert the link here. For more information have a look at Links. This option is disabled if you have enabled zoom.
[6] Aspect Ratio decides how the image should be displayed - you can choose separately for mobile, tablet and desktop if is should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[7] Aspect Ratio Zoom sets how the zoom image should be displayed - you have the same options as for the normal image
[8] Caption: Please add only a short text. For more information have a look at the Texteditor.
Image Gallery
- This is a new component
- can also be used outside of the Grid
- divided into three sections – content, layout and restrictions
New Style
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[3] Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[4] Here you can add the image gallery elements that contain the images - just click on new at the end of the section in the blue box
Image Gallery Element
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Image = choose an already uploaded image from the media project (for further explanation on this field, please have a look at Media Components)
[3] Enable Zoom = here you decide whether you want to allow a zoom for the image or not.
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[6] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[7] Caption = insert the caption that will be shown underneath the image. Please add only a short text.
Note: Restrictions can be set not only for the image group component but also for the image group elements. For further information on restrictions, please have a look at Restrictions.
Image Teaser
- previously TeaserImageOverlay (Headline and Overlay)
- can also be used outside of a Grid
- divided into four sections – content, overlay position, layout and restrictions
Content - Headline
This part is about the content area, as layout and restrictions have already been explained here.
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Teaserlayout = you can choose between a heading that will be displayed in the upper left corner of the image, or an overlay, which is a red box with text. Here we explain the Image Teaser with the chosen Teaserlayout Headline
[3] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Image Brightness = choose here if your image is light or dark; depending on this, the color of the headline will be either white or dark gray
[6] Aspect Ratio is where you decide how the image should be displayed - you can choose separately for mobile, tablet and desktop if is should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[7] Headline = depending on the selected image brightness displayed in white or dark gray on the image
[8] Target = insert the link here. For more information have a look at Links
Content - Overlay
This design is outdated and we recommend that you no longer use the red boxes if possible.
There is a slight difference if your chosen Teaserlayout is Overlay.
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Teaserlayout = you can choose between a heading that will be displayed in the upper left corner of the image, or an overlay, which is a red box with text. Here we explain the Image Teaser with the chosen Teaserlayout Overlay
[3] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Aspect Ratio = how the images should be displayed - you can choose separately for mobile, tablet and desktop if is should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[6] Headline = write a short Headline. It will appear in the overlay.
[7] Text = write a short text. It will appear in the overlay.
[8] Target = insert the link here. For more information have a look at Links
Overlay Position
If your chosen Teaserlayout is an overlay, you can choose the position of the overlay here. To do that click on the new tab called Overlay position.
You can choose the position separately for mobile, tablet and desktop and you have the following options:
Image Thumb Slider
This design is outdated and we recommend that you no longer use the red boxes if possible.
- can also be used outside of the Grid
- divided into three sections: content, layout and restrictions
- the overlay position can be chosen for each Image Thumb Slider Element separately
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[3] Tracking Description = please leave this field empty, unless you have a good reason to fill it.For more information, see the chapter Tracking
[4] Data Image ID = in general, please leave this field empty, except in certain cases. For more information, see the chapter Tracking
[5] To add a new Image Thumb Slider Element that contains the image you have to click on new in the blue field on the bottom of the page. If you do the following window will open:
Image Thumb Slider Element - Image
This is an example of an image thumb slider with an overlay and a caption.
Here we will describe the thumb slider image element image
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Element Type = choose image
[3] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Image Tracking ID = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[6] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[7] Thumbnail Caption = caption for the smaller thumbnail next to the slider
[8] Image Element - consists of the overlay headline, text and target.
You can choose the overlay position for each Thumb Slider Element separately. To do that click on the tab called Overlay position. The position can again be chosen for each device (mobile, tablet, desktop) individually, like for the Image Teaser.
Image Thumb Slider Element - Video
There is a slight difference if the image thumb slider element is a video.
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Element Type = choose video
[3] Image = choose an already uploaded image as a thumbnail from the media project for further explanation on this field, please have a look at Media Components
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[6] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[7] Thumbnail Caption = caption for the smaller thumbnail next to the slider
[8] Video Element - consists of the YouTube ID or Adaptive Video URL. The layer Caption and Layer Headline.
YouTube ID
After inserting the Youtube ID the adaptive Video URL option will disappear and will be replaced by the channel link, like in the screenshot below:
[1] Youtube ID = the Youtube ID is the last part of the YouTube URL, that is shown in the screenshot with XXXXX
For the youtube video "EGGER Italia - Buona Pasqua" with the following URL: https://www.youtube.com/watch?v=UPkXucd44OM, the ID would be UPkXucd44OM, as can be seen in the screenshot above.
[2] Channel Link = ??
[3] Layer Caption = this is the caption, that will be shown underneath the video within the glightbox that opens up, once the user clicks on the playbutton on the thumbnail image
[4] Layer Headline = this is the headline, that will be shown above the video within the glightbox that opens, when the user clicks on the playbutton on the preview image
Adaptive Video URL
If you insert something into the Adaptive Video URL Field the Youtube ID field will get disabled:
[1] Adaptive Video URL = the adaptive URL is intended for internal videos. To use such a video, you need to send it to the Corporate Online Marketing team, which will upload it to the internal database. After that you will receive the adaptive URL, which you need to enter here.
[2] Layer Caption = this is the caption, that will be shown underneath the video within the glightbox that opens up, once the user clicks on the playbutton on the thumbnail image
[3] Layer Headline = this is the headline, that will be shown above the video within the glightbox that opens, when the user clicks on the playbutton on the preview image
Image Icon
- This is a new component
- can be used inside and outside of the Grid
- consists of Content, Layout and Restrictions
The Image Icon can be used, when an icon needs to be shown on an image and will be visible in the right bottom corner.
Icons
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Aspect Ratio = what the Image should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[2] Size = is for the icon size (small, medium, large)
[3] Icons = here you can add different icons
Image Stage
This design is outdated and we recommend that you no longer use the red boxes if possible.
- can be used inside and outside of the Grid
- consists of Content, Layout and Restrictions
This component features images with an overlay box that inlcudes a headline, a text and an optional link. It is possible to activate "automatic sliding" which means that there is no need for a user to manually click through the slider.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Automatic Sliding = you can choose wheter it's automatically sliding or not
[2] Elements = here you can add more Elements to the Image Stage
Slider
- can also be used outside of the Grid
- divided into three sections: content, layout and restrictions
- the overlay position can be chosen for each Slider Element separately
Content
This part is about the content area, as layout and restrictions have already been explained here
We don't recommend the outdated red box
All the settings you make in this section are global. This means that they are automatically applied to each slider element and do not need to be set separately for each.
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[3] Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[4] Automatic sliding = choose if you want the slider to slide automatically or if the user has to click on the arrow to see the next image in the slider
[5] Overlay Style = choose if you want no overlay, an overlay or a caption that will be shown underneath the image. This will apply for all slider elements
This design is outdated and we recommend that you no longer use the red boxes if possible.
[6] Indicator = these are the small dots/squares at the bottom of the slider images, that show the user, how many images there are in the slider
[7] click on new to add the slider elements
[8] Aspect Ratio = how the images should be displayed - you can choose separately for mobile, tablet and desktop if is should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
Slider Element - Image
To add a new Slider Element that contains the image you have to click on new in the blue field on the bottom of the page.
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Element Type = choose image
[3] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[6] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[7] Image Elements = consists of the headline, text and target. For more information about selecting a target, see Links.
You can choose the overlay position for each Slider Element separately. To do that click on the tab called Overlay position. The position can again be chosen for each device (mobile, tablet, desktop) individually.
Slider Element - Video
If you want to add a video to the slider, some of the fields you need to fill in change:
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Element Type = select a video
[3] Image = choose an already uploaded video from the media project for further explanation on this field, please have a look at Media Components
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[6] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[7] Video Elements = consists of YouTube ID, adaptive video URL, preview caption, layer caption and layer headline
- YouTube ID = the last part of the YouTube URL, that is shown in the screenshot with XXXXX
For the youtube video "EGGER Italia - Buona Pasqua" with the following URL: https://www.youtube.com/watch?v=UPkXucd44OM, the ID would be UPkXucd44OM, as can be seen in the screenshot above.
- Adaptive Video URL = the adaptive URL is intended for internal videos. To use such a video, you need to send it to the Coporate Marketing team, which will upload it to the internal database. After that you will receive the adaptive URL, which you need to enter here.
- Preview Caption = the caption that is shown underneath the preview image, this can be used for a short description of the video
- Layer Headline = this is the headline, that will be shown above the video within the glightbox that opens, when the user clicks on the playbutton on the preview image
- Layer Caption = this is the caption, that will be shown underneath the video within the glightbox that opens up, once the user clicks on the playbutton on the preview image
You can choose the overlay position for each Slider Element separately. To do that click on the tab called Overlay position. The position can again be chosen for each device (mobile, tablet, desktop) individually, like for the Image Teaser.
Example
This is an example of a Slider with the Overlay Style: Overlay.
This is an example of a Slider with the Overlay Style: Nothing.
This is an example of a Slider with the Overlay Style: Caption
Video
- combines old VideoTeaser and VideoTeaserOverlay
- can also be used outside of the Grid
- divided into three sections: content, layout and restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Preview Image = choose an already uploaded image from the media project that will be shown on the website as a preview for the video. For further explanation on this field, please have a look at Media Components
[3] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[4] Aspect Ratio = what the video should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[5] Preview Caption = the caption that is shown underneath the preview image, this can be used for a short description of the video
[6] YouTube ID = the last part of the YouTube URL, that is shown in the screenshot with XXXXX
For the youtube video "EGGER Italia - Buona Pasqua" with the following URL: https://www.youtube.com/watch?v=UPkXucd44OM, the ID would be UPkXucd44OM, as can be seen in the screenshot above.
[7] Adaptive Video URL = the adaptive URL is intended for internal videos. To use such a video, you need to send it to the Coporate Marketing team, which will upload it to the internal database. After that you will receive the adaptive URL, which you need to enter here.
[8] Data Video ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
Autoplay Video
- This is a new Component
- can also be used outside of the Grid
- divided into three sections: content, layout and restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Video = this URL is intended for internal videos. To use such a video, you need to send it to the Corporate Online Marketing team, which will upload it to the internal database. After that you will receive the required URL, which you need to enter here.
[2] Aspect Ratio = what the video should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
Specification for the Autoplay Video
- Needs to be a MP4 file
- Needs to be HLS coded
- Can't have any sound
- Needs to be without loops. The system will play it in a loop automatically.
Request link from COMSupport and provide the COMSupport Ticket with following information:
Where to find the mp4 video: *(link)
Video Title:
Description:
Language:
Market: *(can be international)
Simple Icon Image
- This is a new Component
- must be placed within a Grid container
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Target = insert the link here. For more information have a look at Links
[2] Icon = choose an already set-up icon in your Icon Data Source. This works in a similar way to selecting an image. For more information, please have a look at Icons in the selecting image paragraph of Media Components
[3] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[4] Icon Color = choose the color the icon should be displayed in. You can choose between gray, red and green
[5] Icon Size = here you can choose the size of the Icon. It can be Small, Medium, Large and XL
[6] Aspect Ratio = what the Image of the banner should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
Vector Image
- This is a new component
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components. Please keep in mind that for this component you can only choose an .svg (scalable vector graphics) image. You find those in a folder called Icons in the media project.
[2] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[3] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[4] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[5] Link = insert the link here. For more information have a look at Links
[6] Caption = caption underneath the picture
[7] Image Size = you can choose the size of the Vector Image. It can be Small, Medium, Large and XL
[8] Aspect Ratio = what the Image should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
Vector Overlay
- can only be used in the Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
The Vector Overlay is there for overlaying e.g. an image as you can see on the Screenshot below:
[1] Space Left = you can choose between 1-9 cols. The higher the col the more the Vector Overlay will move to the right
[2] Space Left MD = you can choose between 1-5 cols and it is for Tablet Layout as you can see below how it will change:
[3] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components. Please keep in mind that for this component you can only choose an .svg (scalable vector graphics) image. You find those in a folder called Icons in the media project.
Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[4] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[5] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
Tile Stage
- This is a new component
- only outside of the Grid
- consists of Content and Restrictions
The Tile Stage consists of a background image and up to three tiles (either three, two or one tile are possible). The image tile always has a zoom and the icons for the icon tiles can be freely chosen from the pool of available icons.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Zoom Image = here you can choose if you want to let them zoom into a certain image. You can choose an image from the database but it is recommended to choose the same image
[2] Information Tiles = here you can add the smaller pictures which you can see on the first Screenshot. Important to know, you can only add 3 tiles max.
Content of the Tile Element
[1] Headline = the title for the Tile
[2] Element Type = choose between Icon or Image
[3] Image = when you chose Image at the Element Type you can now choose one from the database. If you chose an Icon you can now choose an Icon here
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Zoom Image = choose the same or an opposite image. It allows people to click the Tile and can see the bigger image (recommended to choose the same image)
[6] Text = the Text for the Tile. You can also leave it empty like on the Screenshot
Gradient Teaser
- This is a new component
- can be used inside and outside of the Grid
- consists of Content and Restrictions
The Gradient Teaser gives us the possibility to highlight specific texts with an image and a headline. It can be combined with the Heroteaser which then creates a combination and an overlay.
Content
This part is about the content area and restrictions have already been explained here
[1] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[2] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[3] Primary Text = is the big red headline
[4] Secondary Text = is the subheadline, beneath the Primary Text
It can be combined with the Heroteaser which then creates an automatic overlay:
Content Slider
- this is a new component
- only outside of the Grid
- consists of Content and Restrictions
The content slider provides the option to include many images within one slider. A user can view through the images when clicking on the arrows in the top right corner. Links are optional and it is possible to inlcude some text per image.
Content
This part is about the content area and restrictions have already been explained here
[1] Display Text For Link = it is the visible text for the link. For example as you can see on the Screenshot above the link "option to include link"
[2] Link = insert the link here. For more information have a look at Links
[3] Elements = here you add Elements to the Slider when you press "New"
Elements
[1] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[2] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[3] Text = here you can insert the text for the banner component. You have the same editing options as for the normal Text Components. For further information on the editor, please have a look at Text Components.
[4] Position = here you can choose where the text on the Slider will be sown, right or left. You can choose it individually for every Element
Media Stage
- This is a new component
- can be used only outside of the Grid
- consists of Content, Layout and Restrictions
The Media Stage features images/videos including an overlay caption (in the right bottom corner) and a headline like text for each image/video (in the left upper corner). By clicking on the arrows a user can click through the images/videos at their pace and has the possibility to maximize an image by clicking on the magnifier.
Content and Selection
This part is about the content area and restrictions have already been explained here
In the Items you can add three different content types. Such as Image Media Slider, Video Media Stage Element and Iframe media Slider.
Attention
Iframes may only contain EGGER content (e.g. plant tour or 3D view decors) and no external applications. The content must meet our programming specifications and come from our security framework.
Image Media Slider
[1] Image Media Slider = is a standard Image like in Image Component. In the Screenshot you can see how this Element works:
[1] Preview Image = choose an already uploaded image from the media project that will be shown on the website as a preview for the video. For further explanation on this field, please have a look at Media Components
[2] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[3] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[4] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[5] Enable Zoom = here you decide whether you want to allow a zoom for the image or not.
[6] Overlay Caption = this is the text on the right corner of the image
[7] Thumb Caption = the caption of the thumbnail
[8] Image Brightness = choose here if your image is light or dark; depending on this, the color of the headline will be either white or dark gray
Video Media Slider
[2] Video Media Stage Element = is a standard Video like in Video Component. In the Screenshot you can see how this Element works:
[1] Preview Caption = the caption that is shown underneath the preview image, this can be used for a short description of the video
[2] Layer Headline = this is the headline, that will be shown above the video within the glightbox that opens, when the user clicks on the playbutton on the preview image
[3] Layer Caption = this is the caption, that will be shown underneath the video within the glightbox that opens up, once the user clicks on the playbutton on the preview image
[4] YouTube ID = the link for the YouTube Video
[5] Adaptive Video URL = the adaptive URL is intended for internal videos. To use such a video, you need to send it to the Coporate Marketing team, which will upload it to the internal database. After that you will receive the adaptive URL, which you need to enter here.
[6] Data Video ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
Iframe Media Slider
[3] Iframe Media Slider = shows a website inside the Media Stage, like you can see on the Screenshot:
Attention
Iframes may only contain EGGER content (e.g. plant tour or 3D view decors) and no external applications. The content must meet our programming specifications and come from our security framework.
Thumb Caption = is the caption on the top as you can see on the Screenshot "Iframe Media Slider"
Iframe URL = is the URL for the content
Text + Image Components
This part is about components that combine text and images.
Banner Component
- combines old BannerComponent and TeaserListModuleGroup
- divided into three sections: content, layout and restrictions
- must be placed within a Grid container
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[3] Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter TrackingImage Text Overlay
[4] Image Orientation = choose whether the component should be horizontal or vertical. Depending on this decision, the text will appear below or to the right of the image. Scroll to the end of this section on banner components to see examples.
[5] Image Fit = choose, if the image should be automatically fit to the length of the text or not.
[6] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[7] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[8] Aspect Ratio = what the Image of the banner should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[9] Text = here you can insert the text for the banner component. You have the same editing options as for the normal Text Components. For further information on the editor, please have a look at Text Components.
Example
A horizontal banner component could look like this, for example:
A vertical banner component could look like this, for example:
Banner Dropdown
- previously MyEGGERConversionComponent
- can be used in and outside of the Grid
- divided into three sections: content, layout and restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[3] Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[4] Opened group = choose, which element shall be open (-1 = no element group is open, 1 = first element is opened, 2 = second element is opened, ...)
[5] Groups per Row = possibility to choose how many groups will be shown in one row - you can choose between 2, 3 and 4. Whereas 4 is the default value.
[6] Here you add the group elements
Since there are several layers in this component, we have color-coded the example for better understanding.
After clicking on the Add button you add a new group element and the following page opens:
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Group Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[3] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[4] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[6] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[7] Group Title = give this group a title. In the example this is the headline marked in red.
[8] Headline Overlay = the overlay that opens itself has this title. In the example this is the headline marked in orange.
[9] Text = there will be a text underneath the Headline. In the example this is the text marked in yellow.
[10] Button Target = insert the link here. For more information have a look at Links
Below the Button Target you can add another element by clicking on New. When you do the following screen will open:
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[3] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[4] Image Tracking ID = please leave this field empty, unless you have a good reason to change it. For more information, see the chapter Tracking
[5] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[6] Text = here you insert the text. You have the same editing options as for the normal Text Components. For further information on the editor, please have a look at Text Components. In the example this is the text marked in green.
Product Teaser
- previously Product Banner
- This is a new component
- must be placed within a Grid container
- consists of content, style, layout and restrictions
Note: There are different types of the Product Teaser. Here, only the manual type works differently, the other options work in the same way and are explained together. Please use the manual type sparingly and only if there is no other option.
Content - Decors and Products
There is a slight difference between the content of the type Manual and the other types, therefore we will explain them here:
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Type = choose either EDP Decors, EFP Decors, Products or Shop Products. For all these options, you use the Data Access Plugin (DAP). This means that the data and images associated with a particular decor or product are taken directly from the PIM. The advantage of this method is that if a particular product or decor is no longer available in your market, it will be automatically removed from the website.
[3] Click here on Add to add a new Decor or Product Element.
Note: There is a slight difference in how you search for the different types in the search field:
- EDP = Decor Code
- EFP = Article number
- Products = Product Code
- Shop Product = Material number
Content - Manual
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Type = choose Manual for this page to open. Manual means that you are uploading a text and an image manually.
[3] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Link = insert the link here. For more information have a look at Links
[6] Aspect Ratio = what the Image of the banner should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
Product Teaser List
- previously Product Banner List
- combines old EsDecorList, EsBaseProductList and ProductTeaserList
- can ONLY be used outside of the Grid
- consists of content, style, layout and restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
There are two different settings for the product teaser list. One is the product teaser list where you choose the "List" type, and the other is the product teaser list with the type "Category".
The first two settings for the product teaser list remain the same regardless of which type you choose.
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Itemsize = you choose the size of the item. You can choose separately for mobile, tablet and desktop, with the option Large and Medium for the smartphone and additionally the option Small for tablet and desktop. The Itemsize also decides how many items are placed next to each other:
- Large: 3 items in a row
- Medium: 4 items in a row
- Small: 6 items in a row
Scroll to the bottom of the Product Teaser List section to see examples.
Then you need to select the type. The main difference between category and list is that if you select Category, all the elements that belong to the selected category will be displayed. If you select List, you can select the elements individually.
Category
If you have chosen category this is what the content page will look like:
[3] Type = you choose category
[4] Categories = if you click on Add you can add an already existing category
The categories you can choose from are:
- edc = EGGER Decorative Collection
- ebp = EGGER Building Products (Only the Product Family)
- home = EGGER Home Flooring
- pro = EGGER Pro Flooring
- edp = EGGER Decorative Products (Only the Product Family)
- industry = EGGER Industry Collection
- efp = EGGER Flooring Products
The main difference between products and collections of the same department (e.g. edc and edp) is that products include the products that the department offers (e.g. edp = eurolight) and collections are the decors that you can choose for the products.
List
[3] Type = you choose list
[4] Select certain elements from EDP Decors, EFP Decors or Products that you want to display in the Product Teaser List. You can mix these three categories and choose multiple elements per category by clicking on Add.
Note: Even though you can mix the decors in the list, their order will always remain as specified in the component: EDP Decors, EFP Decors and Products.
Example
These are examples of the product teaser list with different item sizes:
Large
Medium
Small
Image Text Overlay
- previously TeaserWithOverlay
- can also be used outside of the Grid
- consists of content, style, layout and restrictions
- interactive component: by clicking on the image an overlay appears, where more information can be given
A Image Text Overlay means an image which, when clicked, is overlaid by another image with text or just plain text.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components. This is the image the users sees without clicking on the picture.
[3] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[4] Overlay Image = the image that appears on the overlay - if no image is selected, the background of the overlay stays white
[5] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[6] Overlay Text = the text that appears on the overlay
[7] Icon = choose an already set-up icon in your Icon Data Source. This works in a similar way to selecting an image. For more information, please have a look at Media Components
An Image Text Overlay could look like this, for example:
Picture with the overlay closed
After clicking on the picture the overlay opens, it can be with a picture:
After clicking on the picture the overlay opens, it can also be without a picture:
Style
This part is about the Style area, as layout and restrictions have already been explained here
Aspect Ratio = what the Image should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
Simple Image Compare
- previously Slide Control
- can also be used outside of the Grid
- consists of content, style, layout and restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Aspect Ratio = what the box should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[3] choose Left Image to insert all information for the left image of the compare slider, choose Right Image to insert all information for the right image of the compare slider
[4] Left/Right Image = the image, that shall appear on the left/right side of the compare slider - choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components.
[5] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[6] Left/Right ID = Default values (A, B) are already defined, but can still be changed
[7] Left/Right Label = short description of the respective image (most commonly a decor code)
Attention: Please use at least six columns in the layout options, otherwise the component will not be displayed correctly.
Multi Image Compare
- previously Advanced Slide Control
- can also be used outside of the Grid
- consists of content, style, layout and restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
To simplify the explanation we have color coded the different headings and subheadings.
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[3] Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[4] Headline = headline on top of the box above the images (Red in the example)
[5] Toptext = text on top of the box between headline and images (Orange in the example)
[6] Groups = click here to create a new group with the images that shall be compared
[7] Left ID = default value (A) is already defined, but can still be changed - it is the same ID for all left images in the comparison
[8] Right ID = default value (B) is already defined, but can still be changed - it is the same ID for all right images in the comparison
Multi Image Compare Group
You can create a group via clicking on "New" at the bottom of "Groups" (see number 6 above) Within the group, you have the option to add the images that shall be compared. Within one group you can add several images.
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Group Title = the title, that will be shown on the right side next to the comparison and above the group elements (yellow in the example)
[3] Elements = add the elements that contain the images for comparison here - just click on "new" at the bottom
Multi Image Compare Element
The elements contain the images, that shall be compared in the multi image comparison. Each element consists of one left and one right image, that will be compared. Within one group, several elements can be added.
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Thumbtext = the text that is shown next to the thumbnail underneath the thumbtitle next to the image compare, that describes the image a little further (most commonly the decor name) (Blue in the example)
[3] Thumbtitle = the title that is shown next to the thumbnail next to the image compare, that describes the image a little further (most commonly the decor code) (Green in the example)
[4] Bottomtext = the text that is shown underneath the images that are currently compared (most commonly a short description of the images e.g. decor code and name) (purple in the example)
[5] Thumbnail = the image that will be shown on the right side of the image compare as a preview
[6] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[7] Image Tracking ID = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[8] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[9] Left/Right Image = contains left/right image, left/right image alt-text and left/right label
- Left/right Image = the image, that shall appear on the left/right side of the compare slider - choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
- Left/right Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
- Left/Right Label = short description of the respective image (most commonly a decor code) (In this example there is no label, however the place where it would be is market in pink)
A label would look like this:
Simple Annotated Image
- This is a new component
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Image = choose an already uploaded video from the media project for further explanation on this field, please have a look at Media Components
[2] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[3] Aspect Ratio = what the Image of the banner should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[4] Points = Add new points by clicking on New.
Points
After you have clicked on New a new window will open:
On an annotated image there are small squares which you can move with Float X and Float Y. As can be seen on the example picture below.
Float X = X-axis
Float Y = Y-axis
The desired coordinates on the respective axes must be specified with a number between 0 and 1 and separated with a comma (e.g. 0,5). The points are automatically numbered in the order in which they were created.
Text Annotated Image
- This is a new component
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
- this component works only for desktop and tablet. Please make the component invisible on mobile devices. If you need to use it for cell phones, then use the simple annotated image.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Image = choose an already uploaded video from the media project for further explanation on this field, please have a look at Media Components
[2] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[3] Image Brightness = choose here if your image is light or dark
[4] Aspect Ratio = what the Image of the banner should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[5] Points = Add new points by clicking on New
Points
After you have clicked on New a new window will open:
On an annotated image there are small squares which you can move with Float X and Float Y. The desired coordinates on the respective axes must be specified with a number between 0 and 1 and separated with a comma (e.g. 0,5).
[1] Float X = X-axis
[2] Float Y = Y-axis
[3] Line Length = leading away from these small squares is a line. Here you decide how long the line should be. The lengths has to be specified with a number between 0 and 1 and separated with a comma (e.g. 0,75).
[4] Text = you can add a small text above the line.
[5] Tag Orientation = the direction in which the line and the associated text should be aligned.
Text Image Box
- previously TextWithImageBox (image position = left/right/bottom)
- can also be used outside of the Grid
- consists of Content, Image position, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[3] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[4] Aspect Ratio = how the image should be displayed - you can choose separately for mobile, tablet and desktop if is should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[5] Image Fit = choose, if the image should be automatically fit to the length of the text or not.
[6] Enable Zoom = here you decide whether you want to allow a zoom for the image or not.
[7] Text = here you insert all texts, bulletpoint lists, headlines etc. You have the same editing options as for the normal Text Components. For further information on the editor, please have a look at Text Components.
Image Position
Here you can choose if you want the image to be shown left, right or at the bottom of the text. The position can only be chosen for Desktop and Tablet. (Desktop is the default value. When you choose a position for desktop, it applies automatically also for tablet.) On mobile devices the image position is automatically at the bottom of the text.
Example
This is an example of a text image box with the image positioned on the left side.
This is an example of a text image box with the image positioned on the right side.
This is an example of a text image box with the image positioned on the bottom.
Progress Indicator
- New Component
- must be placed within a Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Icon = choose an already set-up icon in your Icon Data Source. This is works in a similar way to selecting an image. For more information, please have a look at Media Components
[2] Icon Color = choose the color the icon should be displayed in. You can choose between gray, red and green
[3] Text = insert the text that is shown next to the Icon. You have the same editing options as for the normal Text Components. For further information on the editor, please have a look at Text Components.
[4] Primary Progress = indicates the progress made. The progress has to be written in a number from 0 to 1. Split the number with a comma (e.g. 0,5). It will be displayed in a darker shade of the selected color.
[5] Secondary Progress = indicates the progress made. The progress has to be written in a number from 0 to 1. Split the number with a comma (e.g. 0,5).It will be displayed in a lighter shade of the selected color.
Example of a progress indicator with green icons
Only primary progress shown:
Primary and secondary progress shown:
Bannerlist
- New Component
- can be used only outside of the Grid
- consists of Content and Restrictions
The Bannerlist gives us the option to show more than one teaser with an image, text and link. If there are more than three elements the user can click through all elements via the arrows at the top.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Link = insert the link here. For more information have a look at Links
[2] Visible initial elements = you can choose between 3 and 4 elements which are displayed in the beginning. When you slide them you still will be able to see either 3 or 4 elements
[3] Elements = here you can add the different elements
Elements
Here you are inside a new Element:
[1] Image = choose an already uploaded image from the media project (for further explanation on this field, please have a look at Media Components)
[2] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt text of the image.
[3] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[4] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[5] Overline = above the Headline. With a smaller font
[6] Headline = headline on top of the text and beneath the image
[7] Text = here you insert all texts, bulletpoint lists, headlines etc. You have the same editing options as for the normal Text Components. For further information on the editor, please have a look at Text Components.
[9] Link Display Text = the visible Text for the Link
[9] Link = insert the link here. For more information have a look at Links
Quote
- New Component
- can be used inside and outside of the Grid
- consists of Content, Layout and Restrictions
The Quote can be used to integrate a quote of a person. The image, the button or social icon can be inlcuded optionally.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Alt-Text = unlikley for other components, here it is adviced to put the name from the "speaker" in it and the department they are working in
[2] Quote Text = the text the person said - it will be put automatically under "" quotation marks. Please don't add them yourself
[3] Name of contact = the name of the quoted person
[4] Function/Job description = the department and the city they are working in
[5] Type = here you can choose between a Button or Social Media Icons
[6] Button/Social Media Icons = Button is standard like in all other components, while the Social Media icons need to be added by yourself
Social Media Icons
[1] Box for inserting a Link = here you cann add a Link
[2] Restrictions = possibility to put restrictions on the Social Media Icons. Because they may differ in other countries. For more information please have a look here Restrictions
Box for inserting a Link
[1] Link type = internal = already existing egger pages; external = link to another website
[2] Event Tracking ID = possibility to put restrictions on the Social Media Icons. Because they may differ in other countries
[3] Event Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[4] Title = headline for the icon
[5] Displaytext = text for the social media icon
[6] Behavior = opens in the same or in another tab
[7] Target = insert the link here or direct on a existing egger page. For more information have a look at Links
[8] HTML ID = here you write the HTML ID if you want to create an anchor link to this component
[9] Icon = choose an already set-up icon in your Icon Data Source. This is works in a similar way to selecting an image. For more information, please have a look at Media Components
[10] Color = choose the color you like or fits best
Linked Teaser List
- New Component
- can be used inside and outside of the Grid
- consists of Content, Layout and Restrictions
the Linked Teaser List can show icons and text and optional you can put a link to the icons.
Content
This part is about the content area, as layout and restrictions have already been explained here
Inside the Linked Teaser List you can add new Elements. You then can add the standard features like Headline, Text, Icon and Link. The background will be automatically dark grey and the font white.
[1] Icon = choose an already set-up icon in your Icon Data Source. This works in a similar way to selecting an image. For more information, please have a look at Media Components
[2] Headline = title for the Teaser, located on the right from the icon and above the Text
[3] Text = standard Text in white
[4] Link = the URL intern or extern Links
Slide Control
- can be used inside and outside of the Grid
- consists of Content and Restrictions
With this component, the user is able to compare e.g. two roomscenes. If the slide bar is moved from left to right, the left image takes more room and vice versa.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Left Image:
Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly.
[2] Left Overline = so to speak the headline of the left - "Right overline" on the Screenshot
[3] Left Text = mandatory field. It is the "Right text" on the Screenshot
[4] Link = insert the link here. For more information have a look at Links
[5] Display Text For Link = it is the visible text for the link. It is only visible when you hover on the text as you can see here:
[6] Link = it is possible to insert a link here and is mandatory
[7] Right image = it has all the same elements (1-6) as the Left Image as it is explained above
CTA Components
CTA Box
- combines old QuickLinkComponent, SupportItemList and TeaserMultiButtom
- must be placed within a Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] CTA Box Elements = add here your CTA Box Elements
CTA Box Elements
Here you have the option to choose between:
- Headline Paragraph
- CTA Icon Link
- CTA Image Link
- CTA Quick Link
You don´t have to use each of the elements for each CTA Box, you can simply choose what you need. However, you can combine any and all CTA elements.
CTA Box Element - Headline Paragraph
This is the headline that shows at the top of the CTA Box. It is not a link, just a headline. It is optional if you want to use a headline for your CTA Box or not. The only field required for the CTA Headline Paragraph is the Display Text.
CTA Box Element - CTA Icon Link
Here you can choose your target and the icon that should be placed next to the target. For more information have a look at Links and Media Components respectively.
CTA Box Element - CTA Image Link
Here you can choose your target (for more information have a look at Links) and the image, that needs to be placed next to the target. If the component is smaller than 400 pixels, the image is automatically hidden because there is not enough space to display the image correctly.
Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
CTA Box Element - CTA Quicklink
Here you only need to choose your target. For more information have a look at Links.
Example
This is an example of a headline paragraph placed above an icon link:
This is an example for a quicklink without a headline paragraph:
This is an image link with a headline paragraph:
Iconbox
- previously HomeIconBox
- Only inside of Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Tag = Icon; here you choose the icon from your Icon Data Source that shall be displayed in the icon box. This works in a similar way to selecting an image. For more information, please have a look at Media Components
[3] Target = insert the link here. For more information have a look at Links
Example
This is an example of an icon box that automatically changes color when you hover over it.
Not hovering over it:
Hovering over it:
News Teaser
- previously HomeTeaserNewsComponent
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
is used for the news overview - the page does not currently exist, so please do not use the component for the time being
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Headline = will be shown above the news
[3] Results displayed = you can choose if 3, 5 or 7 news results shall be displayed
[4] Tag = news need to be tagged in order for them to be shown within the News Teaser. By clicking on Add you can choose the respective tag that was used for the news you want to show in this teaser. If necessary you can also create new tags by clicking on new.
[5] Folder = you must select the News folder for the component to work.
[6] Target = this link will show at the end of the news teaser (mainly will be used to link to the news overview page). For more information have a look at Links
[7] Aspect Ratio = = what the teaser should look like - you can choose separately for mobile, tablet and desktop if the teaser should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
Contact Box
- must be placed within a Grid
- consists of Content, Layout and Restrictions
Specific information regarding a contact person can be specified. This component is outdated and therefore it is recommended to use the Contact Teaser
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Headline = Title of the contact box. Shown above the image. This field is mandatory.
[3] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[6] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[7] Aspect Ratio = what the box should look like - you can choose separately for mobile, tablet and desktop if the teaser should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[8] Text = here you insert all the necessary information to contact the person portrayed in the contact box. You do have the normal editing tools at the top of the “Text” field. For further information on the editor, please have a look at Text Components.
Contact Teaser
- must be placed within a Grid
- consists of Content, Layout and Restrictions
The Contact teaser can be used to integrate a contact person in a certain section, including either only their email adress or also their social media handles.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[2] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[3] Name of contact = the person who is in charge
[4] Job description = what is this person doing
[5] Text = here you insert all texts, bulletpoint lists, headlines etc. You have the same editing options as for the normal Text Components. For further information on the editor, please have a look at Text Components.
[6] Type = you can choose between Primary Button as displayed on the Screenshot or Social Icons such as Whatsapp Symbol for example
[7] Link = you can add a text and a link for the button or the social icons
CTA Heroteaser
- New component
- can be in and outside of the Grid
- consists of Content, Layout and Restrictions
The CTA Heroteaser can be used to link and highlight important information.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Icon = here you can choose an icon from the database
[2] Headline = title for the Heroteaser, between Icon and Link
[3] Display Text for Link = the text for the red button
[4] Link = the URL intern or extern Links
Furthermore it can be combined with all the other components, which then causes an overlay:
Mixed Components
Accordion
- can also be used outside of the Grid
- consist of content, layout and restrictions
Here additional information is opening up when a user is clicking on the plus sign. The information dissappears/closes when the user clicks on the arrows. Unlike the Accordion Grid in the Accordion can only be added text.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Add the Accordion Elements here by clicking on New.
Accordion Element
After you added an accordion element the following page will open:
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Title = this will be shown even when the accordion element is closed (e.g. Sustainability Report -> the year would be inserted into the title field)
[3] Text = here you insert all texts, bulletpoint lists, headlines etc. You do have the normal editing tools at the top of the “Text” field. For further information on the editor, please have a look at Text Components.
- Insert an image or a link via clicking on the link symbold (marked in yellow). Then you can choose which of them you want to insert.
Inserting an image
When you choose to insert an image, a new window opens:
[1] Event Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[2] Event Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[3] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Caption = the caption needs to be maintained in order to be able to save the component
Inserting a link
For more information have a look at Links
Decor Slider
- previously Multislider
- combines Multislider and Multislider with Headline
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[3] Elements = click on new to add the DecorSlider elements
Note: There are different types of the DecorSlider. Here, only the manual type works differently, the other options work in the same way and are explained together. Please use the manual type sparingly and only if there is no other option.
DecorSlider Element - EDP/EFP
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Type = select the type of Decor you want for this Element. In this case EDP or EFP. We would recommend choosing the same type for every element of the DecorSlider.
[3] EDP/EFP Decors = for both these options, you use the Data Access Plug In. This means that the data and images associated with a particular decor or product are taken directly from the PIM. The advantage of this method is that if a particular product or decor is no longer available in your market, it will be automatically removed from the website.
DecorSlider Element - Manual
After you added a mulislider element the following page will open:
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Type = select the type of Decor you want for this Element. In this case Manual. We would recommend choosing the same type for every element of the DecorSlider.
[3] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[4] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[5] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[6] Link = insert the link here. For more information have a look at Links
Content List
- New component
- only outside the Grid
- consists of Content and Restrictions
The Content List is used to display various types of content in a unified way. It is used to highlight specific topics using either icons, images or numbers with or without a headline and/or text and possibly a link either for each teaser, one link for all teasers or without a link.
Content
This section pertains to the content area, and the restrictions have already been explained here
[1] Type = here you can choose the background of the element
[2] Elements = here it's possible to add new elements
New Item Expample
Inside the new element you can choose between image icon and number. Then you can add these things out of the media database.
[1] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[2] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[3] Headline = the title of the Item. It will be displayed between image and text
[4] Text = here you insert all texts, bulletpoint lists, headlines etc. You do have the normal editing tools at the top of the “Text” field. For further information on the editor, please have a look at Text Components.
[5] Display Text For Link = it is the visible text for the link
[6] Link = insert the link here. For more information have a look at Links
Note: when you choose Icon it will be the same like Image. Only the alt-text won't be there. When you choose Number the image/icon part will be gone. Instead you have to insert a number from 1 to 10.
Editorial Feature Container
- New Component
- only outside the Grid
- consists of Content and Restrictions
The Editorial feature is an interactive "dark mode" component that can be closed and opened and slide. It can feature various information presented in different ways such as with a linked teaser list.
The Editorial Feature Container can open after you click the Button. In this case the red button "Start exploring"
Content
This section pertains to the content area, and the restrictions have already been explained here
[1] Previous Text = the title for the text which comes before
[2] Previous Tracking ID = ID for tracking the clicks. Please leave this field emtpy unless you want to track it. For more information, see the chapter Tracking
[3] Previous Tracking Description = description which data the tracking is collectiong
[4] Elements = here you can add the elements, when you add more than one element the component can slide
[5] Next Text = the title for the text which comes after
[6] Next Tracking ID = ID for tracking the clicks. Please leave this field emtpy unless you want to track it. For more information, see the chapter Tracking
[7] Next Tracking Description = description which data the tracking is collectiong. Please leave this field emtpy unless you want to track it. For more information, see the chapter Tracking
Elements
[1] Header Image = choose an already uploaded image from the media project (for further explanation on this field, please have a look at Media Components)
[2] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt text of the image.
[3] Image Tracking = ID for tracking the clicks. Please leave this field emtpy unless you want to track it. For more information, see the chapter Tracking
[4] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[5] Header Text = here you can insert the text for the Editorial Feature. You have the same editing options as for the normal Text Components. For further information on the editor, please have a look at Text Components.
[6] Background top Image = the background image, as you can see on the example Screenshot the man in the back and the top background image (there can be two background images)
[1] Intro Button Text = text for the intro Button/when the Editorial Feature is closed
[2] Intro Button Tracking = ID for tracking the clicks. Please leave this field emtpy unless you want to track it. For more information, see the chapter Tracking
[3] Collapse Button Text = text for the collapse Button, when the Editorial Feature is open/fullbild
[4] Collapse Button Tracking = ID for tracking the clicks. Please leave this field emtpy unless you want to track it. For more information, see the chapter Tracking
[5] Content = the title for the text which comes after
[6] Background bottom image = the background image on the bottom
Property Data
- New component
- in and outside of the Grid
- consists of Content and Restrictions
The property data component features an icon in either grey, red or green including a title and a short description.
Content
This section pertains to the content area, and the restrictions have already been explained here
[1] Icon = choose an icon from the database
[2] Icon color = choose the color you want
[3] Title = headline for the icon, will be in the same color as the icon and color you picked
[4] Description = is underneath the headline and has a standard text
Property Data List
- New component
- Only outside of the Grid
- consists of Content and Restrictions
The Property Data List features icons in either grey, red or green including a title and a short description.
Content
This section pertains to the content area, and the restrictions have already been explained here
[1] Properties = here you can add the differne Property Data Elements. It is the same layout like in Property Data
[2] Property Size = you can change the size of the Icons. Individually for Mobile, Tablet, Laptop and Desktop. I can be changed in Small, Medium or Large and it will affect all the Elements inside. In the Property Data this is not possible.
Category Container
- New component
- only outside the Grid
- consists of Content and Restrictions
The category container provides the option to include an image that can either be located to the left, right or bottom as well as a headline, text and optional primary and/or secondary link. The image will slide in when the user scrolls down.
Content
This section pertains to the content area, and the restrictions have already been explained here
[1] Image Position = choose where the image is put. Left, right or bottom. If you choose bottom the componente will be splittet, first Text, then image in fullsize
[2] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[3] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
[4] Primary Button = the main button in red
[5] Secondary Button = button displayed as an CTA and underneath the Primary Button
Product Comparison
- only inside the Grid
- consists of Content and Restrictions
This component features an image, text (also bullet points) and a link. Additional tags, a second link are optional.
Content
This section pertains to the content area, and the restrictions have already been explained here
[1] Image = choose an already uploaded image from the media project (for further explanation on this field, please have a look at Media Components). Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt text of the image.
[2] Aspect Ratio decides how the image should be displayed - you can choose separately for mobile, tablet and desktop if is should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
[3] Taglist = here you can insert "Tags". These are keywords what the Product is about
[4] Text = here you insert all texts, bulletpoint lists, headlines etc. You do have the normal editing tools at the top of the “Text” field. For further information on the editor, please have a look at Text Components
[5] Primary Button = the main button in red with white font. Here you can add the displayed text and a Link. For more information have a look at Links.
[6] Secondary Button = this button will have red font and white background. Here you can add the displayed text and a Link. For more information have a look at Links.
Heroteaser
- only inside the Grid
- consists of Content, Layout and Restrictions
Content
This section pertains to the content area, and the restrictions have already been explained here
Here you can add a Heroteaser
[1] Type = here you can choose the type of the Heroteaser. It can be: 
Text = here you insert all texts, bulletpoint lists, headlines etc. You do have the normal editing tools at the top of the “Text” field. For further information on the editor, please have a look at Text Components
Column = in the Column you can add different Elements of Text Components. Which are then displayed like in a Column
Fact = here you can type in a key and a value. The key is for example 1 and the key is a fact as you can see on the Screenshot
Indicator = it is the same Indicator as you can see here Progress Indicator
Property = it is the same Indicator as you can see here Property Data
Button = here you can add the Button title and the Link
[2] + [3] Space Left and Right for Desktop = the space left or right means how many cols you are away from the left/right edge. For example when you have 3 and 3 cols then your element is in the middle of the screen
[4] + [5] Space Left and Right for Tablet = the space left or right means how many cols you are away from the left/right edge
[6] Text = here you insert all texts, bulletpoint lists, headlines etc. You do have the normal editing tools at the top of the “Text” field. For further information on the editor, please have a look at Text Components.
It can be combined with the Gradient Teaser or other components which then creates an automatic overlay as you can see in the Screenshot:
Search Components
Job Search
- New component
- can only be used outside the Grid
- consists of Content and Restrictions
The Job Search lets the user search for a job offer directly on the egger.com. Then the user will then be directed to our success factors page.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Type = Here you can choose the background of the component - if it's a grey background or a image you can choose
[2] Image Brightness = makes the background image a little bit brighter or darker
[3] All Screen Sizes = here you can add variable or fixed. We recommend always variable for the responsive design
[4] Link Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[5] Link Tracking Description = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
Decor Search
- previously DecorSearchComponent
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Headline = this is the headline visible above the search field and the Description box
[3] Descriptiontext = Visible above the search field.
[4] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[5] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[6] Image Brightness = choose here if your image is light or dark; depending on this, the color of the headline will be either white or dark gray
[7] Target = here you create the necessary link for the Decorsearch. For more information have a look at Links
[8] Placeholder Search = this is the text, that will be visible inside the search field.
[9] Search Param Name = add at the search param name: text - it doesn't have to be translated - just add it like that and then add the Target (Search Link) and here enter in the URL field for flooring: /flooring/decors or for decorative: /interior/decors - please be here aware to not have here ?text= added - just the relative link. For clarification see screenshot below:
[10] First Button Link = here you can add a link to the first button. For more information have a look at Links
[11] Second Button Link = here you can add a link to a second button. For more information have a look at Links
Partner Search
- previously PartnerSearchComponent
- can also be used outside of the Grid
- consists of Content, Placeholder Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Data Track ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[3] Headline = will be shown above the search fields. The default value Partner Search is already selected.
[4] Text = describes what the user should do with the search fields. Is displayed underneath the headline. Please keep this text as short as possible.
[5] Tag = this is a way to pre-filter your search. By clicking on add, you can select a tag, after which you can pre-filter the partners to be found through this search. For example, you could add the pre-filter Distributer to only show partners that have the associated tag. You can select multiple tags to further refine the search. If necessary you can also create new tags by clicking on new.
[6] Button Title = the title of the button below the search fields that starts the search. It is a good idea to use the same title and text for the button. E.g. Search
[7] Button Text = the text you see on the button. It is a good idea to use the same title and text for the button. E.g. Search
[8] Aspect Ratio = what the image should look like - you can choose separately for mobile, tablet and desktop if the teaser should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
Placeholder
[1] Search = determines the text to be read in the upper search field.
[2] City/ZIP = determines the text to be read in the lower search field.
[3] URL productParam = please insert type to ensure that the component is working properly.
[4] URL locationParam = please insert searchAdress to ensure that the component is working properly.
Floor Finder Teaser
- previously FloorFinderTeaser
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Headline = give the Floor Finder Teaser a meaningful title
[3] Text = write a small explanatory text.
[4] Target = insert the link here. For more information have a look at Links
[5] Stepcount = how many steps you need to finish the process.
Search Result Item
- New Component
- can be used outside the Grid
- Image is optional
Here a preview from the layout of the component - one without the image and one with the image.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Image = choose an already uploaded image from the media project for further explanation on this field, please have a look at Media Components
[2] Alt-Text = insert the alt text in your local language. This field is usually mandatory and is marked and highlighted accordingly. In certain cases, if this field is not maintained, the system automatically uses the default alt-text of the image.
[3] Image Tracking ID = please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[4] Image Tracking Description = please leave this field empty, unless you have a good reason to fill it. For more information, see the chapter Tracking
Note: You do not need to set an aspect ratio for this image, as it is defined in the layout itself.
[5] Preheadline = enter here the preheadline like the date of the PR - it will be shown over the main Headline, a simple textfield, where the headline style is already defined.
[6] Headline = the main Headline.
[7] Text = add here your teaser text - it is a simple textfield with no further formatting options.
[8] Link = insert the link here. For more information have a look at Links
Country Routing
- New component
- only outside the Grid
- consists of Content and Restrictions
The Country Routing component is used to search for pre-set locations. You can add country options there and assign them a title and a link. Afterward, you can select from the options in the component using a search field or a dropdown menu.
Content
This part is about the content area and restrictions have already been explained here
[1] Background Type = here it is possible to chose a grey background or a default image with a world map
[2] Headline = in this case it is "Map"
[3] Text = the text under the headline
[4] Placeholder = is the text in the selection box
[5] Display Text For Link = it is the visible text for the link
[6] Link = it is possible to insert a link here. URL can be intern or extern Links
[7] Country Options = you can add the different countries see below:
[1] Text = name of the country
[2] Link = URL for the country e.g. www.egger.com/en/?country=GB
Other
Chiplist
- New component
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
Linked list and anchor links for easy navigation. You can put anchor links for the same page or links to other pages.
Content
This part is about the content area, as layout and restrictions have already been explained here
Overall the Chiplist needs to be linked with another component, e.g. an Headline. For more information have a look at Links
First Step: Inside the Chiplist Element and inside the Link you will find HTML Id. It is important to fill in a word you like e.g. "teaser".
Second Step: Then you need to type same word e.g. in the Headline ID.
Third Step: After these steps the Chiplist and the Headline are linked. When you click on the Chiplist "Teaser" then it will jump to the correct Headline.
Table
- previously DynamicTableBoxComponent
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Wrapping = decide if you want a wrap or not.
[3] Table Fixation = is the table sorted by row, by column or not at all?
[4] Table = here you insert all the necessary information into the table and edit the table itself. You do have the normal editing tools at the top of the “Text” field. For further information on the editor, please have a look at Text Components. Additionally to the usual editing tools you have the tools to edit the table:
[5]
| Tool | Name | Explanation |
|---|---|---|
 |
Add Row | Add a row below the row where your cursor is located. |
 |
Delete Row | Delete the row your curser is locuated in. |
 |
Add Column | Add a column to the right of the column your cursor is located in. |
 |
Delete Column | Delete the column your curser is locuated in. |
 |
Merge Cells | Merge the selected cells. |
 |
Unmerge Cells | Unmerge the cells you selected. |
 |
Edit Cell Properties | Edit the cell properties like the alignment or the width. |
Example
A table with a row fixation and a wrapper could look like this:
And a table with a column fixation and without a wrapper could look like this:
Timeline
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
The timeline component is a visualization of specific timeline. It features each element below each other, however it is up for decision whether a box is presented to the left or right side.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] To add a new Timeline click on New
Timeline Element
After you have clicked on new, the following window opens:
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Headline = the headline will be visible above the set time period.
[3] Text = this is the text that will be visible below the set time period.
[4] Time = set the time that you need for this element of the Timeline. You can specify the time either in numbers or in characters.
[5] Icon = choose an already set-up icon in your Icon Data Source. This is works in a similar way to selecting an image. For more information, please have a look at Media Components
[6] Position = you decide whether the timeline should be positioned on the right or the left side.
Restrictions: You can add a restriction for the whole timeline or only for a single element. For more information regarding restrictions click here
Downloads
Download List
- previously DonwloadContainer
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Headline = is the headline visible above the list of links.
[3] Link = insert the link here. For more information have a look at Links
Note: If the link is an "image data package", then please always use the DAP link. The reason for this is that these image data packages need a signature from the system and this does not work manually.
Download Search
- previously DynamicDownloadTabComponent
- can also be used outside of the Grid
- consists of Content, Layout and Restrictions
Content
This part is about the content area, as layout and restrictions have already been explained here
[1]Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
Next you can select either a website area or a product category:
[2] Website Area = this means that you would like to make documents available for download that are located on a specific area in our PIM. Within the PIM, documents are tagged with keywords and thus assigned to a specific area. So, by selecting a website area, you also select the documents associated with that area.
[3] Product Category = choose the product category meant for this download search. This means that you make documents available for download that are located on a specific area in our PIS in the Sharepoint. Within the PIS, documents are tagged with keywords and thus assigned to a product category. So, by selecting a product category, you also select the documents associated with that area.
Grid
The grid system in FirstSpirit consists of a series of horizontal and vertical lines that intersect to form a set of columns and rows. This structure provides a framework for organizing and aligning content elements on your pages. The grid system offers flexibility in terms of content placement and arrangement. You can adjust the layout by resizing and repositioning content elements within the grid.
For more information plese check GRID Chapter
Grid Wrap
- New Component
- must be placed within a Grid container
- consists of Content, Layout and Restrictions
The Grid wrap can only be placed inside a Grid container. You add a Grid wrap by clicking on the plus inside the Grid container and adding the Grid wrap. This Grid wrap helps to combine components and therefore influences the layout. The Grid container is the easiest way to achieve a certain order and layout, but we will explain this with several examples.
Let's assume we are trying to achieve this layout:
If we would try to do this without a Grid wrap the content in the Grid container would probably look something like this:
In this method we would try to sort the different components inside the Grid container to get the desired layout. The problem with this method is that the components have a colspan-6, as can be seen in the image, and so the last three components are automatically placed next to each other instead of underneath. This would look like this:
It is much easier to use the Grid wrap. When using the Grid wrap, the contents of the Grid container would look like this:
Inside the Grid wrap the content looks like this:
So you add the components you want to combine (in this case the textblock with the headline, the image and the texblock with the text) inside a Grid wrap and put them in the right order. If you add a ColSpan the components inside the Grid wrap won't be placed next to each other, instead they will be placed underneath each other. By doing this you achieve this layout:
Accordion Grid
- New component
- only outside of a Grid
- consists of Content and Restrictions
Within the Accordion Grid it is possible to include other components such as a text-image box within the accordion. This means that you are able to arrange images and text more flexible. It is only possible to open one section at a time.
As you can see this is a closed Accordion Grid. When you click on the elements you can see what's within.
Content
This part is about the content area, as layout and restrictions have already been explained here
Accordion Grid Elements can be added in this section. Just click on "NEW"
[1] Title = here you can add the headline for the Accordion Grid Element
[2] Content = choose the content you would like to have inside. Such as Quote, Text, Images, etc.
Campaign Grid
- New Component
- only outside of a Grid
- consists of Content and Restrictions
The campaign Grid is a new component - it is an own Grid and in there just 4 components (text or image) can be used. White spaces between these components can be defined via a horizontal & vertical space fields.
Content
This part is about the content area, as layout and restrictions have already been explained here
[1] Horizontal Space = defines how much left or right the element is
[2] Vertical Space = defines if it's up or at the bottom
[3] Type = you can choosed between Text and Image.
[4] Text = here you can add all sorts of text elements. Such as text, headlines, CTAs, Buttons, bullet points, etc.
Tab Grid
- only outside of a Grid
- consists of Content and Restrictions
Similar to the Accordion Grid the Tab Grid is an own grid type, where the editor can create different tabs. Within these tabs the editor can use all components, that can be added in a normal grid container.
Content
This part is about the content area, as layout and restrictions have already been explained here
First Step
Here you can see the menu for adding new Tabs:
Second Step
Here it is important to insert a Headline. This will show as the Tab Headline e.g. Images and More. Furthermore, on the next Screenshot you can see the Tab Grid Item which can be also added with "NEW":
Third Step
Here you are inside of one specific Tab Item:
[1] Component UID = all old components, that were migrated from the old WCMS Hybris contain the component UID from Hybris. This field is locked and therefore cannot be edited. This field was only for information purposes during the conversion from Hybris to FirstSpirit and will therefore be removed in the future once this infomation is no longer needed.
[2] Background = choose the background color of the textbox, you can choose either grey or white
[3] Red Framing = the red line on top of the box - you can select whether you want it or not
[4] Text = here you insert all texts, bulletpoint lists, headlines etc. You do have the normal editing tools at the top of the “Text” field. For further information on the editor, please have a look at Text Components.
[5] Aspect Ratio = what the box should look like - you can choose separately for mobile, tablet and desktop if the box should be square or different versions of rectangular. You can choose between the formats: 16:9, 1:1, 1:2, 2:1, 3:4, 4:3, 7:3. For more information click here
Special Components
Microfrontend
Connection to microservices, for example (e.g. Locations component HR). Only used in special cases.
Inline Navigation
Currently only working on dynamic page templates (e.g. Decordetailpage EDP).
Home Stage
Component that was used on the old home page template. Please do not use it anymore.
Home Icon
Component that was used on the old home page template. Please do not use it anymore.
Dynamic Component
Only use on dynamic page templates. You can find a detailed explanation at the chapter about dynamic pages or click here.
last updated: 02/25