Creating clones that update by itself accordingly
Imagine you want to use a certain element a couple times among all your subpages. Wouldn't it be neat to not only do this in a couple 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 basic rules
- A reference always consists of the whole 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.