Skip to main content
All CollectionsWorking with Blocks
Creating a New Design Block in Design Studio
Creating a New Design Block in Design Studio

How to create your own custom Blocks and save them for others to use.

Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over 9 months ago

Any collection of elements that you’ve added to the page can be saved as a reusable Block. From that point on, it will appear in the Blocks drawer for you to use on that website.

What can go in a block?

Text, images, videos, grids, galleries, links, embeds, and interactions can go in a block, as long as they are all in the same parent container. If you want to save an interaction as part of a block, all aspects of that interaction (triggers and affected elements) need to be in the block.

What can't go in a block?

Elements that aren’t in the same parent element at anchor links cannot be saved in a block. In the image below, section wrapper 1 and section wrapper 2 can be saved as blocks individually, but not together as they are not in the same container.

Saving a New Block

To save some page elements as a Block, they’ll need to be contained within a single parent element. In other words, it’s not possible to save multiple elements that are at the same level of hierarchy as a Block:

Elements of a new Block must be within a single parent element.


Everything that’s currently contained in the parent element will be saved as a part of this Block. This includes any text content within text elements, any images or videos that have been added, and all of the block-level and inline styling that has been applied. Interactions and hover states will also be saved as part of the Block.

To know if you've selected the correct parent element to save your block, the easiest way is to click on one of the elements you want to save, then look in the bottom left corner of the screen. There you will see breadcrumbs of the elements that hold your content. The leftmost element (section wrapper in the image below) is the root-level parent container on your screen.

To save your Block, click the green gear icon in the upper right corner of the part of the container you want to save as a Block, and select "Save as Block". You can also press Shift \ to save a block. (shown below)

Tagging

A dialog will ask you what you’d like to name your Block.

Ultimately, tags keep your Blocks organized. Tagging the Block ensures it’s associated correctly with both your organizational system in My TIME Sites. Learn more about using tags here.

Adding Blocks to Templates (from My TIME Sites)

If you need to associate the block you just tagged with a specific set of templates – or to your entire account – follow the instructions below:

1. When the block is tagged (per above screenshot), go back to My TIME Sites by clicking the Jewel icon in the upper left, and "My TIME Sites"

2. Click "Blocks" on the left

3. Find the block you just created and click "Manage Block"

4. Now you can make the Block default for all templates and sites–or you can associate it with specific templates

Other things to consider

There are a number of things you should consider when saving a Block, especially if other members of your team are going to use it: Where have you applied styling, and where do you want to allow it to inherit global styles? Are the elements well-labeled? Is the Block responsive? We’ve compiled a “best practices” guide to walk you through some of those decisions.

Did this answer your question?