Blocks are the drag-and-drop elements that give your project structure. You can drag and drop text, video, images, sections, columns, and many more types of blocks to implment your design.
- Blocks are the fundamental element for building designs within Builder's Visual Editor.
- All Blocks are in the Insert tab in the Visual Editor.
- There are built-in Blocks but, on an Enterprise plan, you can make your own with Custom components.
Within the Visual Editor, basic blocks are widely used elements that appear on just about every content entry. These can be found in the Insert tab in the Visual Editor under the Basics panel.
Each Block within this panel is described in more detail below.
The Text Block, like all blocks, is available in the Insert tab. Drag it onto your page and add 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 content entry 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.
Inline text editing is currently only supported for built-in Builder components. Custom components do not support 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.
There are several options available when using the slash command.
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.
In the following video, a Text block is added to the page and edited using the text dialogue. Then, Inline text editing is enabled and the slash command is used. Finally, the color of a Text block is adjusted within the Style tab.
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 Builder's 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 include them using another method. For more information, read Working with Images.
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.
Button blocks can be used to enable user interactions within your content entry. For more details, visit State and actions.
The Columns block is perfect for placing other blocks directly next to one another. Columns are responsive, and will stack on smaller screen sizes.
With the Columns block selected, use the Edit dialogue or Options tab to add and remove columns. Note that reducing the number of columns removes the content from those columns.
Dragging another element into the column area, such as placing an Image block between two columns, causes the image to become a column and inherit all 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 video below demonstrates some of the features of the Columns block, such as increasing the number of columns and adding blocks to the Columns block interior.
The Box block, available within 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 overall page width. If you'd like its width to be unconstrained and fill the whole width of the viewport, use a Section block instead.
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.
To add external media, such as videos, to your content entry, use the Media panel.
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 Video block gives you a place to upload your videos, similar to an Image block for images.4
Find the Video block in the Insert tab under Media. Drag the Video block onto the work area and then in the Options tab, click Choose File to upload your video.
Additionally, choose a photo to serve as a poster image that shows before the video plays and adjust settings as needed for showing controls, muting, fit, position, and much more.
Use the Custom Code block when you have code to paste from another site.
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.
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.
The video below demonstrates how to embed a YouTube video within a Builder content entry.
Like a cookie cutter, a Template is a design that you can reuse as needed. 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.
An example might be a section with the same basic layout that you can use on multiple pages. For more details, visit Templates.
When you want to create one element, reuse it throughout your site, and update all instances at once, use a Symbol. When you edit and Publish updates, the Symbol updates apply immediately to all occurrences of that Symbol throughout your app.
An example a special callout for an sale that is displayed on multiple pages could be a Symbol.. For more details, visit Intro to Symbols.
For more information on building with blocks check out Getting Started with the Visual Editor.