Links
Overview
| General Information | Short Explanation |
|---|---|
| Behaviour | Open in the same or in another tab |
| Link Type | Intern Link, Extern Link, DAP Link |
| Follow | Follow or nofollow |
| Target | Link Target |
| HTML ID | Anchor Link |
| Query String | Some components have the option of adding a query string to internal links, which is appended to the end of the URL. |
| Link Formats |
|---|
| Button Link |
| CTA |
| Document Link |
| HTML ID |
| Icon Link |
| Link |
| Other Information | Short Explanation |
|---|---|
| Image | Not a link, but appears in the text editor under "links" |
| Inline Simple Icon | Not a link, but appears in the text editor under "links" |
General Information
Most links offer you a choice between Internal Link and External Link. The Internal link leads to a sub-page within the EGGER projects (Case Studies, Corporate Project, Current Project). The External link leads to an external URL address. Some also offer you a DAP Link, which leads to a file on the AWS Cloud from which you can choose a certain document. In the next part we will talk about the general link settings: Behaviour, Link Type, Target and the HTML ID.
Behaviour
The behavior determines whether you want to open the link in the same window or in a new tab. Note: If you use an external link that leaves www.egger.com, you must open it in a new tab/window.
Link Type
Important
If you change the link from one link type to another, always delete all content in the other link types, otherwise there will be conflicts and the link will no longer work. Therefore, only one link type per link should be filled at a time.
Internal Link
If you select Internal Link, the name of the EGGER website you are currently editing is displayed in the target field below (e.g. egger_ws_corporate). You can change the project by clicking on this field and then select the Corporate Project or the Case Study Project. Next to this field is a search field labeled Enter search term. You can use this field to select the page to which the link should lead within the project you chose.
External Link
If you select External Link, you can select an external URL to link to. Below this, you can select a target type that indicates the type of website to which you are linking the button. With the option "follow" or "no follow" you influence whether the link should be followed up, which is relevant for SEO. Note: If you use an external Link that leaves www.egger.com you have to open it in a new tab/window.
DAP Link
If you select the DAP Link, if available, the content area will change a little bit and you will be offered to add a target (seen on the screenshot above). Clicking on add opens a new window:
Here you can choose a document from the AWS cloud.
Follow
Note: Only relevant for external links.
Here you decide whether Google should reference the page or not. This is relevant for search engine optimization (SEO). The default value is "Follow", meaning the page will be referenced automatically by Google.
As soon as you click on the Follow, the field turns blue and says nofollow.
Target
This field adapts to the chosen link type. But in general, this field is used to decide where the link should lead to. So it determines the destination. If it is an external link, then you need a URL and if it is an internal link, then you need to choose the right project and the right subpage. For a DAP link, you choose a document from the AWS cloud. For more information click here
HTML ID
= Anchor Link
Anchor links are commonly used for navigation within a website, allowing users to move between different pages or sections of a page. The HTML ID is an anchor link. An anchor link is a link that redirects to a specific location on another or the same Egger website. This HTML ID can be used to create a link to a specific component.
To use an anchor link, you need to complete two steps:
- First, you need to give the component you want to link to (the target) an HTML ID. An HTML ID can only be given to a headline. So give your component a headline, select it and click on links. Now select HTML ID.
The following field will open:
Now give the component a unique HTML ID. This must be in English. The display text is the headline you have marked.
- The second step is linking another component to the HTML ID you have just assigned. To do this, first simply select a link format (Button Link, CTA, ...). In the settings of the link you need on the one hand the target and on the other hand the HTML-ID.
The HTML ID field is only available if you have selected internal link. To create a link to the component we assigned an HTML ID in step one, you must first select the page in the target where that component is located. In the HTML ID, enter the ID that you just assigned in step one. Now you have a working anchor Link.
Query String
Some components have the option of adding a query string to internal links, which is appended to the end of the URL.
This can be used, for example, to create pre-filtered links to the decor search.
To do this, add the block to be appended at the end of the link in the Query String field (marked dark red):
The query string starts with a question mark (?) and is followed by one or more key-value pairs, each separated by an ampersand (&).
Link Formats
Button Link
[1] Event Tracking ID = This field is filled automatically. 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] Title = Please give this link a meaningful title. This is relevant for SEO.
[4] Displaytext = This is the text that will be visible inside the button.
[5] Colour = Choose whether your button should be red or white
[6] Style = Full means that the button uses the entire column span you selected. Automatic means that the button adjusts to the length of the text.
[7] Behavior = Decide whether the tab should be opened in the same window or in a new tab. Note: If you use an external Link that leaves www.egger.com you have to open it in a new tab/window.
[8] Link type = Explained here
[9] HTML ID = Intended for anchor links
CTA
[1] Event Tracking ID = This field is filled automatically. 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] Title = Please give this link a meaningful title.
[4] Displaytext = Enter the Text the user will see and click to use the link.
[5] Behavior = Decide whether the tab should be opened in the same window or in a new tab. Note: If you use an external Link that leaves www.egger.com you have to open it in a new tab/window.
[6] Link type = Explained here
[7] Target = Depends on the link type. Please have a look here
[8] HTML ID = Intended for anchor links
Document Link
[1] Link type = Explained here
[2] Event Tracking ID = This field is filled automatically. Please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[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 = Please give this link a meaningful title.
[5] Displaytext = Enter the Text the user will see and click to use the link.
[6] Behavior = Decide whether the tab should be opened in the same window or in a new tab. Note: If you use an external Link that leaves www.egger.com you have to open it in a new tab/window.
[7] Icon = What type of document do you offer? Select the corresponding icon that appears in front of the link name.
[8] URL = Add the URL that leads to the document you offer.
[9] Destination Type = Since your URL leads to an external page you can let the user know to which kind of destination the link is taking him.
[10] No follow = The no follow is interesting for SEO since it is sometimes better if Google doesn't follow a certain page. For more information click here
Icon Link
[1] Link Type = Explained here
[2] Event Tracking ID = This field is filled automatically. Please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[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 = Please give this link a meaningful title.
[5] Displaytext = Enter the Text the user will see and click to use the link.
[6] Behavior = Decide whether the tab should be opened in the same window or in a new tab. Note: If you use an external Link that leaves www.egger.com you have to open it in a new tab/window.
[7] Target = Since it is an internal Link you see the window target. For more information see here
[8] HTML ID = Enter the HTML ID of the component you want to link the anchor to.
[9] Icon = Choose an icon from the icon list.
[10] Color = Choose whether the icon should be red, gray or green.
Link
=(Inline Link)
This is an inline link, that will be shown within the text.
[1] Link Type = Explained here
[2] Event Tracking ID = This field is filled automatically. Please leave this field alone, unless you have a good reason to change it. For more information, see the chapter Tracking
[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 = Please give this link a meaningful title.
[5] Displaytext = Enter the Text the user will see and click to use the link.
[6] Behavior = Decide whether the tab should be opened in the same window or in a new tab. Note: If you use an external Link that leaves www.egger.com you have to open it in a new tab/window.
[7] Target = Since it is an internal Link you see the window target. For more information see here
[8] HTML ID = Enter the HTML ID of the component you want to link the anchor to. For more information click here
Other Information
The following options are not links, however since they appear in the text-editor of multiple components underneath the dropdown "links" we will explain them here.
Image
This option is only available in the text-editor of multiple components and allows you to add a picture in the text area. This is not a link!!
[1] Event Tracking ID = This field is filled automatically. 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 in the chapter Components)
[4] Alt-Text = insert the alt-text in your local language. If this field is not maintained, the system will use the default alt-text of the picture automatically.
[5] Caption = insert the caption that will be shown underneath the image
[6] Position = Choose whether the image should be positioned left or right of the text.
[7] Size = You can decide whether the image should be 30% or 50% of its original size
Inline Simple Icon
This allows you to insert an Icon within a text line. This is not a link.
[1] Icon = Choose an icon from the icon list.
[2] Aspect Ratio = 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
[3] Color = Choose whether the icon should be red, gray or green.
[4] Position = Choose whether the icon should be positioned left or right
[5] Size = You can decide whether the image should be 30% or 50% of its original size
last updated: 01/25