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].