All Collections
Content Studio
Building a new Page Layout with Blocks in Content Studio
Building a new Page Layout with Blocks in Content Studio
Alex Piepenbrink avatar
Written by Alex Piepenbrink
Updated over a week ago

Using the Blocks drawer to build a page by dragging-and-dropping pre-designed content components.

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.

To learn more about how to create new Blocks for you and your team to use, refer to this article.

Using Blocks

You can access the Blocks drawer once you've opened a webpage.

1. Open a Site: Open a webpage or choose a template to use. It will then open in Content Studio

2. Access Blocks: To open the Blocks drawer, click the + Blocks button on the left side of the studio (shown below).

3. Drag and Drop: Scroll to select the block you wish to use. Placing a Block works the same as placing any other element in TIME Sites. Click and drag it to the right side of the screen.

As you drag around the page, you’ll see a light blue indicator show you where the Block is about to be placed

Block Styling

When you drop the Block on a 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.

If the block is editable, you’ll be able to edit text, links and media. (see below)

Editing Text: Double-click inside of the text element in a Block to edit the text

*Note: If the block you select isn’t editable, your design team / designer provides access to editable components within the Block.

Editing / Replacing Images: If the image is able to be replaced, you can click to replace it by:

1. Clicking the image

2. Clicking “replace image” on the left side of the screen

3. Double-click the image in the media library you want to choose

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.

Did this answer your question?