How to create references

Watch the Video

Wistia video thumbnail

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. 

  1. 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.
  2. 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.
  3. Reference objects will get an individual ID. This can disable applied stylings when they have been written for a particular ID.
  4. References take effect within a project and all its subpages, but not across projects.
  5. 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 menu!

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. Double-click on the element you like to reference. Go to the breadcrumbs. 

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.

Reference settings

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.

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. If you struggle to reference a certain element or need a 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.

Back to the top

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us