Shared elements overview

What are Elements?

Elements are the fundamental building blocks of your Composer pages. Learn more about how elements work in the article, "Understanding elements" and read about each of the 5 tabs in the element library: Standard, Module, Layout, Social, and Shared.

In this Article


A Shared element is any element that has been customized and then saved for later re-use on a different page or banner. Navigate to a Composer page and locate the Shared tab in the Element Library.

shared elements.png

Shared Elements Work Differently! 

You'll notice that Shared Elements work a bit differently than other elements.

  • Site admins can drag and drop a Shared element just like any other element.
  • However, when the Shared element is added to a page or banner, it will automatically retain the original customizations that were applied when it was first saved. 
  • Read more about how they work in this article. 

  Are you a visual learner?

Skip straight to the video tutorial!

Create a Shared element

Start by adding any type element to a page from The Element Library and customizing it. Open up the Element Settings window by clicking the gear icon at the upper-right corner of the element.

make a shared element in settings gear.png

Click the Share toggle in the top right corner of the Element Settings window.

make a shared element.png

Give the element a unique name that describes its contents or functions, then click Save and Convert to Shared Element.

save and convert.png

The new Shared element will appear in the Shared section of the element library.

shared elements in the element library.png

Edit a Shared element

You can edit Shared elements after creating them by going to Composer > Elements in Composer left navigation.

edit a shared element.png

Click on an element to open it for further editing. Any edits you make to an element here will be applied to all instances of that element.

Manage your shared element in Composer

When you drop a shared element onto a page or banner, the usual gear icon will be replaced with a Shared button.

manage a shared element.png

Not seeing your Shared Element in a Banner? 

Shared elements in banners may need a little extra push in order to update. You may need to republish the banner in order to see the update on your site.

Make a Shared element unique - "Orphan and Edit"

You can still edit Ehared elements that have been placed onto a page. When you click the Shared button, you'll be prompted to decide an option: Orphan and Edit or Edit Shared.

  • Orphan and Edit means you can work on this copy of the Shared element in isolation. After a Shared element has been orphaned, it will act like an independent, non-shared element.
  • Edit Shared means you will edit the saved master copy of the Shared element.

orphan and edit element

Share an Accordion or Tabs element

You may notice that an Accordion or Tabs Element does not have the Share button in the top right corner. It's not possible to share one of these Elements directly.  

can't share an accordion or tabs element.png

To share an Accordion or Tabs Element, first place the element into a Container element, then you can share the Container element. share a container element.png

Share a Container element

Container elements can be shared and reused on other pages. All elements inside the Container will be included when the shared Container is added to another page.

Important Note

Unlike regular shared elements, shared Container elements cannot be orphaned. This means that shared Container elements can only be edited in the Shared Element editor.

Delete a shared element

Shared elements can be deleted when no longer needed and when you want to remove this as an option showing up in the Element library for your users.

  • Step 1: Navigate to Elements tab
    To delete a shared element, back out of the Pages menu and click on the Elements tab in the left navigation of Composer. You may also click directly on the element in a banner and you will be taken straight to the Elements tab in Composer.

edit a shared element.png

  • Step 2: Choose the element you would like to delete.
    Click the trashcan icon in the bottom right corner. 

delete an element.png

  • Step 3: Decide how you want to delete your shared element
    A window will pop up saying "Are you sure you want to delete this shared element", telling you how many times this element is used, and giving you two more options: 
    delete shared element.png
    • Orphan elements on all pages: The element stays on the page, is no longer shared, and can be edited individually.
    • Delete elements on all pages: This selection removes this shared element from any page that it lives on. It will no longer be visible. 

Important Note

If you do not see the trashcan icon, it may be that you are trying to delete a Container element which cannot be deleted.

Quick Tutorial: Use Shared Elements

23 STEPS

1. To learn how to share elements, we'll start on an interior page with existing elements.

Step 1 image

2. Toggle Compose on to enter edit mode.

Step 2 image

3. Click the gear icon to view the element's settings.

Step 3 image

4. Click Share

Step 4 image

5. Give this shared element a name that describes its content. Type Counselor.

Step 5 image

6. Click Save and Convert to Shared Element

Step 6 image

7. Notice the element now indicates it is shared. To edit the element, click Shared.

Step 7 image

8. Here you can choose to Orphan and Edit, which means you can edit this element individually, without affecting anywhere it has been shared. Or you can edit the shared element. Click Edit Shared

Step 8 image

9. Shared elements are located in the Elements section. The elements here work the same as on a page, but they are not styled to the site's theme.

Step 9 image

10. Make edits to the element as needed - we've added the word "All" in front of Students.

Step 10 image

11. Click Publish

Step 11 image

12. Click Publish to confirm this will update all the pages where this element is used.

Step 12 image

13. If needed, you can use the trash can icon to delete the element, and the settings gear to update the element's name.

Step 13 image

14. Navigate back to the page, by exiting the element menu. Click Elements

Step 14 image

15. Click Pages

Step 15 image

16. Click Counseling

Step 16 image

17. Notice this element has been updated.

Step 17 image

18. Next, let's learn how to add a shared element to another page. After navigating to the page, toggle Compose to enter edit mode.

Step 18 image

19. Click Add element to column

Step 19 image

20. In the element library, click Shared

Step 20 image

21. Click Counselor

Step 21 image

22. Toggle Compose off to enter preview mode.

Step 22 image

23. Don't forget to publish the page to make your changes live. You've learned how to convert a single element to a shared element, edit, delete, and rename the element, and add a shared element to another page.

Step 23 image

** Best experienced in Full Screen (click the icon in the top right corner before you begin) **

https://www.iorad.com/player/2368128/Use-Shared-Elements

Set permissions for Shared elements

Grant access for your admin users to also manage Shared elements by going in to your Composer Global Permissions area and locating the column labeled Shared Elements.

Shared Elements permissions.png

  • Not Allowed means users will not see the Elements area in Composer left navigation. 
  • View means users will see the Elements area but not be able to edit or manage any of the Shared elements listed there. This level cannot Orphan and Edit a shared element on a page. 
  • View & Edit level allows for the ability to make changes to a Shared element in the Elements area, including the Orphan and Edit feature, but users cannot Publish their changes. 
  • View, Edit & Publish provides for the user to make changes, as well as Orphan and Edit, a Shared element. They can also Publish those changes. 
  • View, Edit, Publish & Delete means the admin user can make changes, Orphan and Edit a Shared element, and also has the added ability to Delete a Shared element from the Elements area. 
  • Admin permission level is the highest level which allows for all of the management of tasks within the Elements area and also includes the ability to manage Permissions levels of other admin groups in Global Composer permissions. 
Was this article helpful?
7 out of 11 found this helpful

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.