Clones are live copies of an element. When the origin element is changed, every clone across your pages updates automatically.

Basic knowledge

A clone is a linked copy of an element that includes all of its content. This link creates a parent element and a child element. The parent element is the “origin,” and the child element is the cloned element. If the content of the parent element is modified, the content in the child element changes automatically as well.

Once a clone has been created, the child elements inside it can no longer be selected individually.

More information about clones: 

• Custom classes assigned to the origin parent element are retained on the clone, so it inherits all CSS that applies to the original.

• Generic classes are replaced with their clone equivalents. E.g. .ed-headline will become .ed-reference-headline, .ed-text will become .ed-reference-text etc. 
  Note: Styles written for .ed-text but not for .ed-clone-text may no longer apply.

• Each clone is assigned its own unique ID.
  Note: Styles written for a specific ID may no longer apply.

• Clones work within a single project and all of its pages. They cannot be used across different projects.

A clone can be converted back into a regular element, after which both the parent and its child elements can be edited individually. Automatic updating is no longer available, because the connection no longer exists. The result is equivalent to duplicating an element.

Create a clone

As an example, we will clone a banner. This is a good way to keep the same header across all pages.

You can create a clone in any of the following ways:

1. Right-click inside the element you want to clone and select Create clone. The clone is inserted directly below the origin element. From there you can copy and paste it whereever you want. 
2. Right-click the element and click "Send clone to..." and choose the pages you want to clone to be sent to. The page will open in a new tab with the clone at the bottom of the page, so you can drag and drop it to the desired location. 
3. Right-click the element and select Copy element. Then navigate to the target location, right-click, and select Paste as clone. This also works across pages.

Tip: You can also use keyboard shortcuts for those actions. Press [CTRL + C] to copy the element, then [CTRL + SHIFT + V] to paste it as a clone after the currently selected element. Pressing [CTRL + V] pastes a regular duplicate instead.

After creating a clone, the element is labeled Clone. This lets you tell at a glance whether an element is an original or a clone. The classes remain unchanged.

Clone settings

Double-click a clone to open its settings panel on the left. The panel shows the clone’s ID and offers the following options:

• Copy settings: Select this checkbox to apply certain effects and animations of the original to the clone as well.
• Convert clone: Converts the clone into a regular duplicate and removes the connection between the origin element and the clone.
• Show origin element: Takes you to the location of the original element.

Under Style, you can configure the clone like any other element, for example by adding animations, setting an expiry date, or applying custom classes.

Partial referencing

In some cases, you may not want to clone an entire header. For example, you might want a different header background on a page while keeping the menu and info bar identical. In this case, clone only the specific parts:

1. Copy the entire website section. Check the breadcrumbs to make sure the correct container is selected. Right-click the section in the breadcrumbs and select Copy, or press [CTRL + C].
2. Paste the header onto the page. Use a regular paste here, not Paste as clone.

In this example, the header background and the central text should be adjustable, while the menu and info bar stay consistent across all pages. To achieve this:

3. Go back to the original header and select the info bar. Use the breadcrumbs to confirm the correct element is selected, then right-click and select Create as clone. 
4. Right-click on the clone, hover over Send to and select the page it should be added to. This page opens in a new tab and you can place the cloned info bar in the copied banner. 
5. Delete the original (non-cloned) info bar so that only the clone remains. Check the breadcrumbs to make sure you are keeping the clone.
6. Repeat the steps for the menu bar.

The info bar and menu bar are now clones and update whenever their originals change, while the header background and text remain freely editable. You can repeat this process as often as needed to keep a consistent look across all pages.

Best practices

Before creating a clone, consider which element you want to clone and how it relates to other elements. The breadcrumbs help you identify the right one. For instance, you may not want the entire header on a subpage, or you may want to change the text or images in the header area while keeping the menu and contact information consistent.

Several connected elements can be cloned at once. We recommend using clones for the header section, the menu, and the footer, as these are typically identical on every page.

To show the cookie bar on every page, place it in the footer. Since the footer is already cloned across all subpages, no additional work is needed.

If you have trouble cloning a specific element or need further guidance, feel free to reach out to us or the Sitejet 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