Snippets are custom-made, reusable design sections that you can add to your page by simply dragging and dropping. The snippets drawer contains all of the snippets currently available for use. To learn more about how to create new snippets for you and your team to use, refer to this article.
You can access the snippets drawer once you've opened a webpage. To open the snippets drawer, click the icon at the top of the left toolbar in the design studio:
Choose an Account
At the top right of the drawer, you’ll see a dropdown account selector. Each account that you belong to has its own library of snippets.
You’ll see your own personal account listed, as well as a collection of pre-made Brandcast Snippets.
If you are a Team Edition user, you’ll also see your team’s account here. (And if you’re a member of more than one team, you’ll see each team listed separately.) Select an account to see the library of snippets currently available to that team.
Brandcast Default Snippets
If you haven’t yet created any of your own snippets, you can experiment with some of the pre-made ones in the “Brandcast” account.
A number of simple headers with mobile menus, footers, and page layouts have been pre-created here. These can provide you with some quick and easy starting points, or just some inspiration for various kinds of page layouts.
Note: Brandcast Snippets are setup as responsive for all device modes. Something to be aware of is that these snippets will inherit the Global Styles of your site, so additional formatting may be needed. More on this in Snippets and Styling section below.
Placing a Snippet on the Page
To use a design snippet, just drag it from the drawer and place it onto the stage.
Placing a snippet works the same as placing any other element in Brandcast. As you drag around the stage, you’ll see a light blue indicator show you where the snippet is about to be placed:
You can place snippets at the root level, or inside of containers and grids that are already on the page.
Keep in mind that the location you drop a snippet may affect its appearance! Dropping a snippet inside a very small container, for example, may yield a very different-looking layout than if you place it by itself at the root level of the page.
Once placed, a snippet becomes fully editable on the page, the same as other elements in Brandcast. It does not retain any connection to the snippets drawer; even if the original snippet is deleted from the drawer, your page design will be unaffected.
Snippets and Styling
When you drop it on the page, the visual appearance of a snippet may depend on how it was designed.
In some cases, a snippet may have been saved along with all its own styling – colors, typography, etc. A designer may create a snippet this way to ensure its visual appearance stays absolutely identical for every website it’s used on.
In other cases, though, the snippet may have had little or no styling applied to it when it was saved. This allows the snippet to automatically inherit the Global Styles of the website it is being used on. This can be very helpful for cases where you want to reuse a snippet, but you need it to adapt slightly to different stylesheets.
(If you’re not familiar with the concept of inheritance on the web, we definitely recommend reading up a bit! We’ve created this article to help orient you.)
Snippets and the Media Library
If the snippet that you placed on the page had images or video included in it, these media assets will automatically be placed into the Media Library for this website. These assets will remain in the Media Library even if you delete the snippet.
Snippets and Publishing
Creating a new snippet, or duplicating an existing snippet to another account, does not require you to re-publish the site you are working on. Any snippets added will automatically be saved to the account you are working in or your destination account.
Snippets and Accounts
Any snippet you create may be added to a Team Account or to your Personal Account. If you save your snippet to your Team Account, the snippet will be available to be used by anyone else on your team. If you save your snippet to your Personal Account, the snippet will only be available to be used by you. You may also duplicate your snippets across Team and Personal Accounts.