Blocks are the drag-and-drop building blocks that give your project structure. You can drag and drop text, video, images, sections, columns, and many more types of blocks to give your design structure.
- All blocks are in the Insert tab in the Visual Editor.
- Blocks contain and format the content inside them.
- Select a block to edit its options, styles, data, and more in the Visual Editor.
- There are built-in blocks but, on an Enterprise plan, you can make your own with custom components.
The video below shows dragging in each of the basic blocks covered in this document. After dragging and dropping the blocks into the work area, the user applies a few basic styles in the Style tab, selects some images, and applies alt text.
These are just a few examples with minimal edits, but you can fully customize your content to meet endless use cases.
In addition to the basic blocks covered in the video, the Insert tab offers many other bocks as well as many pre-made templates. Additionally, if you're on an Enterprise plan, you can even Register custom components.
The Text Block, like all the blocks, is available in the Insert tab. Drag it onto your page and enter your text.
With a Text block selected, go to the Style tab to specify styles such as the font family, weight, size, color, alignment, line height, and more.
In addition to using the Text dialogue to edit text, you can optionally use Inline text editing to edit text directly on the Page without having to open a dialogue.
When you toggle Inline text editing on or off, the setting applies to all Text blocks.
- In the Text dialogue — accessed by double clicking the Text block or by going to the Options tab — set the Inline text editing toggle to the on position.
- Click on a Text block to edit and edit as usual.
- To toggle off Inline text editing, select a Text block, go to the Options tab, and toggle the Inline text editing to the off position.
Note that Inline text editing is currently only supported for built-in Builder components. Custom components do not support inline text editing.
The next video shows using Inline text editing.
With the slash, /, command, you can quickly pull up the most in-demand features of the Visual Editor. To use the slash command, you must be using Inline editing.
Options available include adding:
Add blocks, including:
- Text
- Image
- Video
- Columns
- Sections
- Forms and form elements
- Custom code
Formatting text such as:
- Headings (
h1,h2, andh3) - Ordered lists
- Unordered lists
- Bold
- Italics
- Underline
When using the slash command to add another element within a Text block, the existing Text block splits into two. This can be helpful for quickly breaking up large blocks of copy.
To use the slash command:
- While inline editing a text block, press Enter to start a new line.
- When the new line starts, the Text block displays a prompt that reads Type '/' for commands.
- Press the slash,
/, key. - Select the option you'd like from the list.
The next video shows a few examples of using the slash command to add structure and elements in the Visual Editor.
The Image block manages your image's responsiveness, size, and performance for you. Drag the Image block onto the work area and add an image to it by uploading your image.
Using the Style tab, set properties on the image, such as margins, padding, min- and max-width and height, as well as whether the image fills the container.
When you use the Builder Image block, you're assured of the best performance and optimization for your images. We recommend that you always use the Image block for your images and not place them into your design using another method. For more information, read Working with Images.
The Columns block is perfect for controlling layout for sections, such as when you want a number of images beside one another, but then want them to adapt to smaller screen widths by stacking. Or, for example, a section of a design with an image on one side and copy and button on the other.
With the Columns block selected, use the Edit dialogue or Options tab to add and remove columns. Note that if you reduce the number of columns, the content in those column is also removed.
If you drag another type of element into the column area, such as placing an Image block between two columns, the image becomes a column and inherits all the properties 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 apply that equal space between each of them.
The following video shows making these edits on a Columns 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 gives you a place to embed into your videos and other assets, such as Instagram posts.
Find the Embed block in the Insert tab under Media. Drag the Embed block onto the work area and add the URL in the Edit menu.
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.
Use Custom Code blocks to add HTML to your content. If you need access to state and other Builder-provided global variables, use custom JavaScript as outlined in the Custom Code in the Visual Editor.
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.