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. Drag it onto your page and enter your text.
In the Text dialogue, you can set styles such as the level of heading, or normal text, bold, italic, highlighting, lists, and background color.
With a Text block selected, you can go to the Style tab to specify styles such as the font family, weight, size, color, alignment, line height, and more.
This short video shows how to use the Text Block.
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.
Tip: 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
Tip: 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, 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.
