Made in Builder

×

Developers

Product

Use Cases

Pricing

Developers

Resources

Company

Get StartedLogin

Product

Features

Integrations

Talk to an Expert

Pricing

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

Block Types in Builder

Blocks are the drag-and-drop building blocks that give your project structure. Blocks contain and format the content inside them.

This article describes the following Blocks available in Builder:

Text block

Image block

Columns block

Box block

Embed block

Button block

Section block

Custom Code block

Templates

Symbols

Text block

The Text Block, like all the blocks, is available in the Insert tab. Just drag it onto your page and enter your text.

Directly in the text editor window you can set inline styling such as the level of heading, or normal text, bold, italic, highlighting, lists, and font color.

On the Style tab you can set the font face, weight, size, color, alignment, line height, and more.

👉 Tip: If you are pasting text into the textbox rather than typing it in, use CMD+SHIFT+V (or CRTL+SHIFT+V on a PC) to paste the text into the box to avoid highlighting.

This short video shows how to use the Text Block and includes some styling.

The Image block

The Image block, available from the Insert tab, manages your image's responsiveness, size, and performance for you.

You drag the Image block onto the work area and add an image to it by uploading your image.

Using the Style tab, you can set properties on the image, such as margins, padding, min- and max-width and height, as well as whether the image fills the container.

You can turn your image into a banner by constraining the height, and you can add text over the image.

👉 Tip: When you use the Builder Image block, you're assured of the best performance and optimization for your images. It is recommended that you always use the Image block around your images and not place them into your page using another method. For more information, check out Working with Images.

This short video shows how to use the Image block.

The Columns block

To use the Columns block, drag it from the Insert tab onto your page. Once you drop onto your page, the Edit menu lets you add and remove columns.

If you drag another type of element into the column area, such as placing an image between two columns, the image will become a column and inherit all the properties and responsiveness of the other columns.

You can change the spacing between and around the columns by dragging the small dot at the edge of a column. When you do, the columns will all adopt that equal space between each of them. Dragging the vertical lines changes the width of the column.

You can check the mobile layout from the top bar to see that your columns adapt properly to the smaller screen sizes.

The following video shows the operations you can perform on columns.

The Box block

The Box block, available on the Insert tab, is the most minimal building block in Builder. The Box can contain your content so that you can control the width and other properties separately from the rest of your content. This is especially handy to prevent your text from running completely across wide screens, making it difficult to read.

Box blocks can have background colors to set them apart, shadows, borders, border radii, margins, padding, and all the properties an element can have in CSS.

Box blocks can also contain other elements such as images.

This video shows what you can do with a Box block.

The Embed block

The Embed block gives you a place to embed into your pages videos and other assets you find on the web, such as Instagram posts.

Find the Embed block on the Insert tab. Just drag it onto your page and add the URL in the Edit menu.

This video demonstrates the process with a YouTube video and an Instagram post.

The Button block

The Button block lets you create and style a button that you can use to link to another page. To use it, drag it onto your page from the Insert tab.

You can style the button in the Style tab and change styles such as the size, color, and font.

You can also set a trigger so that the color or other properties of the button change when the user hovers over it. That behavior is available in the Animate tab.

If you want to try out the Button animation, check out this video. While you may not want to make the button label bigger on hover, this shows how you can.

The Section block

The Section block, available on the Insert tab, is useful when you want part of your page to go full bleed—all the way to the edges. You can choose a different background color for the section, and place text over it. You can constrain the width of the text so that it isn't too wide on large screens, improving readability.

The following video demonstrates the use of the Section block.

The Custom Code block

Use the Custom Code block when you have code to paste from anther site. For example, YouTube provides both a URL and embed code. The YouTube embed code gives you more options than the plain URL, such as where to start the replay and whether or not to show the video controls. Because these parameters are not in the YouTube URL, you can't use the Embed block's URL feature to set them. Instead, use the Custom Code block to include all those parameters.

This video shows the usage of the Custom Code block.

Templates

Templates are useful when you want to have a styled piece of content to use many places, but want to be able to change the content or make minor edits to styles.

A good example is our Tip template. It has the pointing finger and the styling, but we change the text depending on the tip we want to convey.

You'll note that this is similar to Symbols below, but Symbols have exactly the same content wherever they are used.

Templates are available further down on the Insert menu under the Templates tab.

You can create your own Templates by selecting a group of content and choosing Save as Template.

For more information on Reusable Blocks, of which Templates are one type, refer to Reusing Blocks.

The following video shows the use of two Templates.

Symbols

Symbols, also found further down on the Insert menu under the Symbols tab, are very similar to Templates.

Symbols are also reusable pieces of content, but their content does not change based on where they are used. You can change a Symbol after it's created, but that change will be reflected everywhere that Symbol is used.

For more information on Reusable Blocks, of which Symbols are one type, refer to Reusing Blocks.

This video demonstrates the use of a Symbol.

Next steps

For more information on building with blocks check out Getting Started with the Visual Editor.

Was this article helpful?