When building a Ceros experience, it’s very easy to accumulate a long list of assets in your layers panel. When this happens, it can be helpful to look to either folders or groups to bring some organization to your layers. Both options can help you organize your layers, but they have some distinct differences in functionality. This article will explain when and why to use folders and groups.
Note: If you are looking to optimize your content for screen readers, it’s best practice to use groups over folders. Please see this article on Creating Accessible Content in Ceros for more detailed best practices.
Here’s what you need to know about folders and groups:
Key Takeaways:
- Folders are mainly used for organizing the layers panel. The benefit of folders is that you can arrange your assets into folders by section so you can have a simplified layers panel.
- Groups make certain elements act as if they were one object. Grouping elements enables you to apply interactions and animations to just one object (the group) rather than applying them to every element within the group.
What is a folder?
Folders enable you to bring organization to your layers panel. You can collapse assets into folders, which in turn act like a directory in the layers panel. Folders have no effect on objects or your ability to select the objects directly on the canvas, they are simply used to consolidate the elements in your layers panel. They can also be the target of interactions to show or hide multiple objects at once.
What is a group?
Groups enable Ceros users to “group” a selection of components into a single object so they can be manipulated, animated, or interacted with, as one. Although these assets become one object, the individual assets can still be manipulated by double-clicking on the object on the canvas or selecting the object in the layers panel. Groups, like folders, can be the target of an interaction to show or hide all the assets contained in the group.
Here’s an example of when you would want to use a folder:
When your experience has a lot of different elements, you can sort your layers panel with folders. You can break up different sections of your experience into different folders (i.e. Header Section, Middle Section, Bottom Section) or any other way that makes sense with your experience.
Take a look at the screenshot below, we’ve broken up this experience into different sections to keep ourselves organized. To select any individual objects, all we have to do is drop down the appropriate folder to access the contents within it.
If we didn’t break up our layers panel into folders here, this is what it would look like:
As you can see, your layers panel is much more manageable when broken up into folders.
When would you want to use a group?
In the screenshot below, you can see an example of a situation where you could group objects. The groups here both help organize the content as well as enable you to manipulate the multiple objects within the group as if they were just one object. You can also see in the screenshot below that these groups are nested inside a folder. Folders and groups can be used in conjunction with one another to help organize your layers panel as best as possible.
Now…what are synced objects?
The third option in your layers panel is your synced objects button. Syncing objects enables you to copy and paste the objects (or groups of objects) anywhere in your experience. Any changes made to the synced objects will be reflected everywhere that it’s copied and pasted. Check out this Educate Article on Synced Objects for a more detailed explanation of synced objects and some common use cases for syncing objects.
As always, feel free to chat with our support team with any questions you have regarding folders, groups, or synced objects!