Elements - Create References
Watch the Video
Referenced elements are clones that are updated automatically
Imagine you want to use a certain element a couple of times among all your subpages. Wouldn't it be neat to not only do this in a couple of seconds, but also in a way that you never have to bother updating each of them when only a single thing needs changing? Sitejet offers a solution you might want to check out. Creating reference elements!
A couple of basic rules
A reference always consists of the entire container and all its contents and converts it into a single instance. You can not select any child element inside the reference anymore.
- Any custom class set to the referenced parent element will stay on the reference. This will adopt all the CSS valid for the original element.
- Generic classes are replaced with the respective reference class. E.g. .ed-headline will become .ed-reference-headline, .ed-text will become .ed-reference-text etc.
Note: This can disable applied stylings when it has been written for .ed-text, but not for .ed-reference-text.
- Reference objects will get an individual ID. This can disable applied stylings when they have been written for a particular ID.
- References take effect within a project and all its subpages, but not across projects.
- References can be converted into the original element and then be changed individually (parent and child elements). This will disable automatic updating behaviour though. It's basically the same as duplicating an element.
Let's reference a header!
To illustrate how it works let's reference a header preset. This is useful if you want to keep the same header across all subpages.
You can create references by either:
- right-click inside any element you wish to reference and choose Create reference to duplicate this element as a new reference right below.. Make sure you selected the correct element by checking the breadcrumbs at the bottom of the editor. The desired element is usually the leftmost element in the breadcrumbs or the parent container of a preset (indicated by a puzzle icon in front of it)
- right-click and Copy Element, then go to where you want to have your reference and right-click again and choose Paste reference. This will paste the copied element as a reference right where you want it, even across pages.
Tipp: You can use shortcuts to create these references even faster. Simply press [CTRL + C] to copy the desired element and press [CTRL + SHIFT + V] to paste it as reference after whichever element is currenctly selected. Pressing [CTRL + V] will paste a duplicate of the copied element but not a reference.
Note how the container in the breadcrumbs changes to Reference. This way you can easily check whether an element is original or referenced. Also note how the classes stay the same.
Double-clicking the reference element will open up its settings panel to the left.
Here you can find its new ID and a couple settings and actions:
- Copy settings: tick this checkbox to duplicate certain effects and animations to also apply to the reference
- Convert: use this to turn this reference into a regular duplicate and disable all updating behaviour
- Show origin: this takes you to where the original element is located.
You can animate the reference object like any other and also apply custom classes to it.
Under Options > Settings at the bottom you can also set an expiry date to the reference.
Some more common reference types
Partially referencing the header
Sometimes you don't want the entire header on your subpages or you'd like to change the words or images in your header area, while keeping menus and contact info consistant. Here we show you how to achieve this for headers and any other preset as well.
First, make sure to select the entire header once again. Check the breadcrumbs to see if you have the correct element selected. Then right-click and choose Copy Element or use [CTRL + C].
Next we can modify the header to look like we want it for all the subpages.
What we'd like to change: remove the button and replace it with a <h1> headline for the page title. Also we want to have a different background image for each subpage. See the breadcrumbs to find the element with background image set to it.
What we want to stay the same: The logo, the phone and fax number, the navigation and also the info bar at the bottom of the header. These are the elements we need to reference now.
Let's start simple by referencing the logo, info-bar and contact data.
Go back to the index page and select the logo, then create a reference. Keep the reference selected and cut it by right-clicking and Cut Element or [CTRL + X]. Then go back to your subpage, select the logo and paste the reference directly after it. Now delete the logo that is not a reference.
We repeat the exact same process for the contact data as well, which is wrapped into another container. So we need to make sure to select this container as a reference. Once we created a reference of this button-wrapper we can cut it out and paste it after the button-wrapper on the subpage, then delete the old button-wrapper.
Moving on with the navigation. This is similar to the contact buttons in terms of being wrapped in other containers. Here it's actually two more containers spanning the menu element, so we need to make sure to select it all before creating the reference. Click the menu element and select the menu-wrapper-spacer from the breadcrumbs to select it, then create the reference. Then do the same steps from above: Cut, Paste, Replace.
Lastly we have the info-bar, which works exactly the same. Select the parent container (with .info-bar class), create the reference, cut, paste, replace.
And keep in mind to create the reference elements from the index page, since this is the place where you will make changes and all the respective references will automatically apply these changes.
And there you go. You have your partially referenced header ready to go, being able to change title and background image while not having to worry about updating logos, navigation or contact information. You can now copy and paste this header ( warning: don't reference it again as a whole!) across all your subpages and then change image and title as you see fit.
Tip: for this screenshot I selected multiple elements by holding down [CTRL].
More examples will follow soon.
Give a short summary of what this article is about. After that follows the content list. This article also serves the purpose to show you how to style articles - so please read it carefully.
In tech-heavy articles we provide a "Basic Knowledge" section coverin basic things the reader should know about before reading this article. Depending on how much the reader needs to know rather reference to other articles (if they exist) instead of writing everything again.
For the correct formating you will have to edit the underlying code from time to time. To be able to see the HTML code you need to click the "</>"-symbol in the format panel on the top of this article.
The content list is presented in a "<section>"-tag. The links to headlines are wrapped in a "<h4>"-tag as well as a "<a>"-tag which points to the ID of the respective headline. To avoid typos, open the template article and copy it instead of writing a new article from scratch.
Due to a bug in Helpscout you might have to write something in the new article first before being able to paste other text in it. To ensure the correct format please go to the code-view by clicking the "</>"-symbol and copy everything from the template article over to the new article. Remember to type something in the normal view first.
The seperator line is set with a "<hr>"-tag after each section.
Then the article-related sections follow.
Within sections pictures help to explain specific steps more easily. When describing the way to specific points put button- and link-names in quote marks (").
Example: Click "Registrieren", to register a new domain or transfer an already existing domain hosted by another provider by using an auth-code.
If multiple steps are necessary use a numbered list to emphasize the oreder.
- Click the list-symbol (no quote marks, since it is a symbol, not the actual link text) in the format panel
- Then choose the ordered list for steps or an unordered list for a general recap of things
- Helpscout automatically sets the first list entry
- If its possible to get to a specific point through a link provide that link as a clickable link
Headlines are wrapped by a "<h1>"-Tag and have destinct, speaking IDs (so don't use "1","2","3", etc.). This way we can use the ID in the link we provide to the customer to reference a specific section instead of just the article. IDs are not allowed to have whitespaces in them.
As a small recap:
- Headlines are wrapped "<h1>"-tags
- Each headline has a destinct, speaking ID
- IDs are not allowed to have whitespaces in them
In addition to that follow these points:
- Every list entry ALWAYS starts with a capital letter
- Use " instead of '
- When using technical terms write them in bold font
- This can help SEO and
- It's easier for us to find the term once we have an article about it and want to link to it
- keyboard keys are written as "[Ctrl]"
In some help articles you can find warnings, error messages, etc. We avoid negative wording at all times. Instead of using sentences like "Warning: This might delete the whole internet!" better write
" Tip: Correct settings ensure a smooth experience."
(important is the " Tip:" in the beginning of the sentence and having the tip in its own).
Hints for potential problems are given in such blue boxes - with positiv wording of course.