How to create a reference

References are cloned elements that are updated automatically when the original element is changed. Imagine you want to use a certain element a couple of times on all your subpages, e.g. the footer or a contact form - with references you would only need to adjust the original elements and all references would be updated immediately, so you don't need to adjust them one by one.

Basic knowledge

A reference is a clone of an element or section. When a reference is created, e.g. of a section with multiple elements it converts this section and 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 since they act as one.

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 (website) and all its subpages, but cannot be applied across different projects (websites).
References can be converted into a separate element and then be changed individually (parent and child elements). This will disconnect the reference from its original element which means that the automatic updating behavior will no longer work because it's no longer referenced. It's basically the same as duplicating an element.

To illustrate how it works let's reference a header. 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 which will create the reference 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 section.
right-click and select Copy 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 a reference after whichever element is currently 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.

Reference settings

Double-clicking the reference element will open up its settings panel on 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 "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.

Partial referencing

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 section. 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 use Paste in this step and not 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 + SHIFT + V] to paste 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 original 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.

Best practices

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.

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.

Basic knowledge