Blocks are the drag-and-drop building blocks that give your project structure. Blocks contain and format the content inside them.
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/Ctrl + Shift + v to avoid pasting the source text styles along with the text.
This short video shows how to use the Text Block and includes some styling.
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.
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, 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 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 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, 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.
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: Use Custom Code Blocks 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 in the Templates section.
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.
For more information on building with blocks check out Getting Started with the Visual Editor.
Looking to hire a third 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.
