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:

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.

If you don't see a block you want to use, click on the expand icon next to the search field to look through all the Blocks available on your team account. Select what you want and those will be added to your site's Block Drawer.

If you want to add a TIME Sites Block to your site, you can follow the steps here.

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.
​

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 TIME Sites. 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 only place Blocks at the root level of your page. Meaning that when you add a block to your page, it can't go inside of another element. Once you've placed your block, you can drag the block or any content inside of it to any other location on your page.

Once placed, a Block becomes fully editable on the page, the same as other elements in TIME Sites. 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.

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.)

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.

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.

Any Block you create will be available for anyone else in your Team Account to access. By default, only the website the block was created from will have access to it from the Block Drawer. To make your block a default block (this will make it available in every site's Block Drawer), hover over the block in either your Block Drawer or Library, click on the 3 dots, and select "Make Default Block"