How to create references
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!
Table of contents
- Basic knowledge
- Watch the video
- How to create a reference
- Reference settings
- Patrial referencing
- Best practices
A reference converts a container with all its contents into one single instance. This means that once the reference is created 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.
Note: 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 cannot be applied across different projects.
- References can be converted into the original element and then be changed individually (parent and child elements). This will disable automatic updating behavior though. It's basically the same as duplicating an element.
Watch the video
This video was recorded in the old UI. We will update this video soon.
How to create a reference
To illustrate how it works let's reference a banner 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.
- select the element you wish to reference and right-click on the element in the breadcrumb which also opens the context menu where you can select Create reference
Tip: 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 of settings and actions:
- Copy settings: tick this checkbox to duplicate certain effects and animations to also apply to the reference
- Convert reference: use this to turn this reference into a regular duplicate and disable all updating behavior
- Show origin element: this takes you to where the original element is located.
If you click on the "Style" you can adjust the settings for this reference like for any other element, like add animation, set an expiry date, or apply custom classes.
Sometimes you don't want the whole header to be referenced on a subpage, because you want to change the header background, but the menu and the info bar should stay the same. If you only want to reference specific parts follow these steps:
Start by copying the whole preset. Check the breadcrumb to make sure that you selected the right container element. You can then right-click on the preset in the breadcrumb which will open the context menu where you can select "Copy" or you use the shortcuts Ctrl + C.
Now you can paste the header to the subpage. It's important that you paste it in this step and not use "paste as reference".
For our example, we assume that
- we want to change the header background and adjust the text in the middle
- the menu and the info bar should be the same across all subpages
Now, we will only reference the elements that should stay the same - so the info bar and the menu bar. For that, we will go back to our original header and select the info bar. Again, the breadcrumb is a helpful tool to check if you selected the right element. Then we use a right-click to select "copy". We go back to our subpage and use the shortcut Ctrl + Cmd + V or use a right-click to select "paste as reference" to add the info bar below the copied info bar. In this case, our second info bar is a reference:
Now we delete the first info bar so that only the referenced info bar is visible. Check the breadcrumbs to ensure you are deleting/keeping the referenced info bar.
Now repeat the same for the menu bar. Once this is done, you have a referenced info bar and menu bar that change if their origin elements change, but the header background and text can be adjusted to your needs.
You can repeat this as often as you like to ensure a consistent look across all subpages.
It is always important to understand which type of element you like to reference and how this is connected to other elements. Breadcrumbs are a great way to identify the elements. For example, 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 consistent.
It is possible to reference several elements connected together at once. We recommend using the reference method especially for the header-section, the menu and the footer. These elements are usually the same on each page.
If you want the Cookie Bar shown on every page you could set the cookie element into the footer, which is already referenced onto all subpages, so you don’t have to take care of referencing it everywhere. If you struggle to reference a certain element or need special advice feel free to ask us and other Sitejetters in the community.
Become a part of our Community!
Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.