Made in Builder

Made in

Live Demo πŸ‘‰ All Demo, No Pitch: Content & Commerce / & Elastic Path on 12/13




Use Cases





Get StartedLogin





Talk to an Expert











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



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



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 block gives you a container to put other blocks within, such as text and images.

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

By default, the Box block is constrained in width by its parent, such as another box or the page. If you'd like its width to be unconstrained and fill the whole width of the viewport, use a Section block instead.

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 fill the width of the viewport, even beyond the width of the rest of your page.

You can style Section blocks just like any other block. Sections are ideal for containing Columns, Text, image, and Box blocks.

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.

πŸ‘‰ Tip: The Custom Code Block is used to add HTML to your content. If you need access to state and other Builder provided global variables you can instead use custom Javascript as outlined in the Custom Code documentation.

This video shows the usage of the Custom Code block.


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

Looking to hire a 3rd party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

Was this article helpful?