How to Use Content Builder

The Volusion Content Builder helps you edit article pages right from your storefront. With the Content Builder, you can instantly add content using a variety of premade layouts—or you can enhance your own custom HTML content.

Note that the Content Builder is intended for article pages only. If you need to edit other storefront content, including product descriptions and template design elements, see our Easy Editor article for further instruction.

Storefront Article Editing

To expose Content Builder on your storefront, visit any page that contains an article and click the arrow to expand the Storefront Editor. If the page you’re viewing doesn’t contain any editable articles, you’ll see a message indicating that the Content Builder won’t work for that page.

Once you’ve expanded the Storefront Editor, you’ll see a dotted line around the editable content region.

Adding New Content

If you just want to add a few words to an existing block of text, place your mouse over the area you want to edit and click anywhere to start typing. You’ll know you’re ready to edit when you see the Block Actions toolbar above the area you’re editing.

The Content Builder offers a variety of premade content blocks with custom formatting. Some content blocks are text only; others include stylized headings, social media links, icons, buttons, formatted images, maps, videos, and multi-column layouts. For more information on different types of content blocks, see below.

To add a new content block to an article:

  1. Hover over the desired content block layout until you see the drag-and-drop cursor:
  2. Hold down your mouse button to drag the content block into the content area, then release it. If you need to drop the block above or below existing content, look for the shaded gray bar to determine where the block will display in relation to your original content:
  3. Once you’ve inserted a content block, you can use a variety of Content Builder tools to modify the content. If the Storefront Editor panel is obscuring any of your content, click X to hide it.
  4. When you’re satisfied with your changes, click Save.

Note that you can click Cancel at any time to revert your article content to the way it was before you began making changes:

Editing Existing Content

If you’ve already added a few content blocks to an article, you can edit each block individually. Click anywhere within an article to see the content contained by that block. A solid blue line appears around an individual block:

From here, you can use the Content Builder tools to edit your existing content.

Non-Editable Content

If the page you’re viewing doesn’t contain any editable articles, you’ll see a message indicating that the Content Builder won’t work for that page. For example, if you aren’t using Article 2 to store content on your homepage—perhaps you’re only using the Slideshow feature—you won’t see the option to use Content Builder.

Certain articles are incompatible with Content Builder, particularly if they contain dynamic variables or custom scripts. If you try to edit one of these articles from the storefront, you’ll see a message that the Content Builder was disabled in order to protect your existing content.

You’ll also see a link that takes you directly to the Admin Area view for that article, where you can make any changes necessary and save.

Content Builder Tools

Content Builder offers a variety of on-page editing capabilities for different types of content. Certain tools will only appear when you’re editing a specific element within a content block.

Block Actions

The Block Actions toolbar displays at the top of a selected content block. These tools apply to the content block as a whole, rather than specific content within the block.

Drag

The Drag tool lets you move a content block up or down within the content area.

Hover over the icon until you see the drag-and-drop cursor display, then hold down your mouse button to drag the content block up or down. A gray bar indicates where the content block will display in relation to other content; once you see the bar appear above or below your other content (depending on where you want to move it), release the mouse button.

HTML

Click this button to view the HTML code view of a selected content block.

Duplicate

Click this button to duplicate an entire content block. The new content block will display below the original, unless you choose to move it.

Delete

Click this button to delete the entire content block, then click OK to confirm the action. This deletion will not become permanent until you click Save at the bottom of the page.

Text

The Text toolbar displays at the top of the page. You can hover over the individual icons in the Text toolbar to view each button's function.

 Bold

Highlight a section of text and click this button to make the text bold.

 Italic

Highlight a section of text and click this button to make the text italic.

 Underline

Highlight a section of text and click this button to underline the text.

 Strikethrough

 

Highlight a section of text and click this button to add a strikethrough effect to the text.

 Color

Highlight a section of text and click this button to expose the Color dialog box.

You can change the Text Color, the Background color for the selected text, or the Block Background for the entire content block. Use the drop-down menu to select which element you want to change, then choose a color from the available options.

To remove color from a highlighted section of text, select the appropriate element from the drop-down menu and click the eraser icon.

 Font Size

Highlight the text you want to change, then click this button to select from a list of common font sizes.

 Clean

Click this button to strip all formatting from a highlighted section of text. The selected text will revert to its original plain text state.

 Paragraph

Highlight the text you want to resize, then click this button to select from a list of common font sizes.

 Font

Highlight the text you want to restyle, then choose from a list of common fonts.

 Alignment

Highlight the section of text you want to align, then select this icon to choose Left, Right, Center, or Full alignment.

 List

Click this button to insert a list of items. In the dialog box that displays, choose from a Bulleted or Numbered list type. You can also use the Indent tool to display styled, inset text, or use the Outdent tool to remove any indentation formatting.

 Link

Click this button to insert a link.

In the dialog box that displays, use the Link field to enter the destination URL. Use the Text field to enter the text that will display for the link, then enter a link Title if desired (this value shows when a visitor hovers over the link).

If you want the link to open in a new browser tab or window, select New Window.

Click OK to finalize your changes.

 Remove Link

To remove a link, highlight the linked text and click this button.

 Icon

Click this button to insert symbol or icon to your content block.

 HTML

Click this button to view the HTML code view of a selected content block.