Synced objects are essentially exactly what they sound like they are…they’re objects in your experience that are in sync with one another! This means that when you have two synced objects (or groups of objects), any change you make to one will be reflected on the other. In this article, we’ll explore what some use cases for synced objects are, how to create them, and some frequently asked synced objects questions.
Use Cases
Menu Navigation: A common use case for synced objects is to create menu navigation that will be used across multiple pages. To create an experience that looks like the example below, you can sync your logo, text, icons, and CTAs that you want to make up your menu. This makes it easier to copy and paste the menu to multiple pages as one unit. This allows you to keep your menu, and any changes you may need to make, in sync across every page.
Repeated CTAs: You can also sync objects to create consistent CTAs across your experience. If you have a standard CTA that you want to appear on each page of your experience, you can sync the objects and easily copy and paste the CTA throughout your experience. This is especially helpful if your CTA is comprised of multiple assets and you want them to be arranged the same way on each page. Additionally, if you are testing different CTAs, you would only have to change one version of the synced object to have all of the CTAs updated. In the screenshot below, you can see an example of a CTA being repeated throughout an experience syncing objects to create a CTA simplifies reusability and future editing.
Consistent Header or Footer: Another use case for syncing objects is creating a consistent header or footer across different pages of an experience. This is a great way to tie your pages together and create a uniform look and feel. As with the previous examples, this simplifies future edits to your experience because one edit or change to the synced objects will carry over to all other copies of those synced objects. In the screenshot below, you can see a header comprised of synced objects that was kept consistent across multiple pages of an experience.
How to Create Synced Objects
Now you know why you may want to use a synced object, but how do you create one?
- Create or drag and drop the assets that you want to be a part of your synced objects onto the canvas.
- In the layers panel, select all of the objects that you want to be synced and toggle the Synced Objects button at the bottom of the layers panel (see screenshot below).
- Now, when you copy and paste the synced object, any changes that you make to one will be reflected on all.
Frequently Asked Questions
Are they the same as smart groups?
Yes, smart groups were renamed synced objects to remove confusion from “groups”. The functionality is exactly the same.
How do you edit synced objects?
If you double click on synced objects, you will enter editing mode. Any changes you make to one synced object will update every instance of that synced object within an experience. After you finish making changes, you can click the green Studio button or double click outside of the group to return to the canvas.
How do interactions work with synced objects?
When objects are synced, they can only interact with other objects within the synced group or navigate to other pages in the experience. So for example, you won’t be able to create a “scroll to anchor” interaction because the synced object could only exist across multiple pages. Additionally, a hotspot outside of your synced object cannot target an object inside the synced object.
Grouping objects is another way you can have multiple objects in your experience behave as one…check out this Educate article for more info on grouping! As always, if you have any questions about synced objects or other Ceros functionality, don’t hesitate to ping our support team in the studio.