Workshop: From idea to application in 60 minutes

Announcing Visual Copilot - Figma to production in half the time

Builder.io
Builder.io
Contact sales

Workshop: From idea to application in 60 minutes

Announcing Visual Copilot - Figma to production in half the time

The Options tab in the Visual Editor provides options for configuring the content, layout, behavior, page settings, accessibility, and advanced properties of a block.

To edit options for a block in the Options tab in a Builder Project—that is, you are on a Fusion plan—you must be in Design mode.

To display block-specific options, select a block and open the Options tab.

The image below shows a selected button in the Fusion Visual Editor and its corresponding Options tab:

The Options tab is selected in the Visual Editor. A placard reads “Options tab for a button,” and an arrow points to the Options tab while one points to a selected button.

When you select a block that's in the work area, the Options tab changes according to the context.

For example:

  • A selected Image block features an option to change the photo.
  • A selected Button block gives you a way to change the text of the button, add a link, and a toggle to open the link in a new tab.

The screenshot below shows a selected Text block and the Block options that provide a way to edit the copy, toggle Inline text editing, and adding a link to the block:

The Options tab is open in the Visual Editor. An arrow points to the Options tab, which shows the options available for a Text block. These options for a Text block include a rich text editor, a toggle for inline text editing, and a URL field for making the whole block a link.

The table below lists configurable options by block type:

Block typeBlock OptionsAdvanced Options

Section

Fill page width: resize the Section to expand to the width of the page.

Max inner width: the max width of the inner content of the Section.

Link URL: provide a URL to make the whole block a link.

Lazy load: delay rendering until the block is in view.

Columns

Column layout: select a grid layout from the layout.

Columns list: rename, reorder, or delete columns.

Column: add a new column.

Space: define spacing between columns in pixels.

Stack columns at: specify a breakpoint for stacking.

Reverse columns when stacked: reorder columns on smaller screens.

Image

Image: upload or select an asset.

n/a

Video

Video: upload or select a video file.

Poster image: set a placeholder before playback.

Auto play, controls, muted, loop, and plays inline: toggle standard playback features.

Fit, preload, position: adjust layout and loading behavior.

Aspect ratio: lock dimensions.

Link URL: assign a hyperlink to the video.

Fit content: resize container to match the video.

Height and Width: define dimensions manually.

Lazy load: defer video loading until in view.

Custom code

Code: insert custom HTML, CSS, or JavaScript.

Link URL: assign a destination link to the code block.

Replace nodes: preserve server-rendered DOM.

Scripts client only: run scripts only on the browser.

Box

Link URL: set a destination link for the block.

n/a

Text

Text: rich text editor where you can type and apply selected formatting options.

Inline text editing: enable text editing with a double-click.

Link URL: assign a hyperlink to the text.

n/a

Embed

URL: enter a valid embed link, such as YouTube or Google Maps.

Link URL: assign a hyperlink to the embedded block.

n/a

For more information on what you can do with the Visual Editor tabs, visit Style tab for details on styling blocks.

Was this article helpful?