Blocks are custom-made, reusable components that you can add to your page by simply dragging and dropping. The Blocks drawer contains all of the Blocks currently available for use, which are either template specific or account specific. Therefore, what you can see when you open a site can be limited to what is assigned to that template for use.
To learn more about how to create new Blocks for you and your team to use, refer to this article.
You can access the Blocks drawer once you've opened a webpage. To open the Blocks drawer, click the icon at the top of the left toolbar in the design studio:
Finding a Block
At the top of the drawer, you’ll see a search area and dropdown selector. Each block that you are able to use to build the page will show. You can also search for the right block using the search, or the drop down (shown below), which surfaces blocks based on how they are tagged.
Note: Blocks should be setup as responsive for all device modes. Something to be aware of is that blocks inherit the Global Styles of your site, so additional formatting may be needed. More on this in Blocks and Styling section below.
Placing a Block on the Page
To use a design Block, just drag it from the drawer and place it onto the stage.
Placing a Block 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 Block is about to be placed:
You can place Block at the root level.
Once placed, a Block becomes fully editable on the page, the same as other elements in Brandcast. It does not retain any connection to the Block drawer; even if the original Block is deleted from the drawer, the block you added to your page will be unaffected.
Blocks and Styling
When you drop it on the page, the visual appearance of a Block may depend on how it was designed.
In some cases, a Block may have been saved along with all its own styling – colors, typography, etc. A designer may create a Block this way to ensure its visual appearance stays absolutely identical for every website it’s used on.
In other cases, though, the Block may have had little or no styling applied to it when it was saved. This allows the Block 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 Block, 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.)
Blocks and the Media Library
If the Block 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 Block.
Blocks and Publishing
Creating a new Block, or duplicating an existing Block to another account, does not require you to re-publish the site you are working on. Any Blocks added will automatically be saved to the account you are working in or your destination account.
Blocks and Accounts
Any Block you create may be added to a Team Account or to your Personal Account. If you save your Block to your Team Account, the Block will be available to be used by anyone else on your team. If you save your Block to your Personal Account, the Block will only be available to be used by you. You may also duplicate your Blocks across Team and Personal Accounts.