Visual Composer

Primary page content can be edited as HTML or with a typical WYSIWYG interface, but the easiest way to edit the main content is with the Visual Composer editor. On the Edit Page screen, if the Visual Composer interface is not showing, click the Backend Editor button.

Content in Visual Composer is first sorted into horizontal rows. These rows can then be split into columns if needed. To add a row, click the large + button at the top or bottom of the Visual Composer panel. In the Add Element pop-up dialog, select Row to insert an empty row.

Rows have a number of controls and settings available:

  • The Move button allows the row to be moved to another place in the layout. Click and drag the row to its new location.
  • The Columns button allows the row to be split into multiple sub-containers. Hover over the button and select one of the other columns layouts (one full-width column is default).
  • The Add Column button is an easy way to add another column to the existing layout.
  • Rows can be collapsed or expanded in the editor for ease of viewing longer pages.
  • Rows have advanced settings that should not be needed when using your custom theme.
  • Rows can be copied if you want to make a duplicate of a current row with all its contents.
  • Rows can be deleted, along with all their contents. Pages have a revision history, but there is no simple “undo” – be careful!

Each column will appear as a grey box under the row header. Columns have their own controls:

  • If the column is empty, it will have a large + in the middle that allows you to add a content element.
  • If the column has content, it will have a small + at the top and bottom to allow you to add a content element at the beginning or end.
  • Columns have their own advanced settings, which should also not be needed when using your custom theme.
  • Columns can be deleted as well.

Once you are finished making changes, click Publish or Update on the right side of the page to make your changes live.

Notes

  • You can also nest rows within parent rows or columns to create more complex layouts if necessary.
  • If you add a content element directly to the main area in Visual Composer, a row with one column will be created as well to contain it.

When you have added content elements inside a column, you can access their settings by hovering over the element and using the controls in the context menu that pops up. More information about individual elements can be found on their respective pages.

Custom Row Styles

By default, rows placed on pages using the full width template will have a gradient background on them, as shown below in the Default Row example. There are a couple of row background styles available:

  • Blue Background: blue
  • White Background: white
  • Calls to Action: calls-to-action
  • Billboard: billboard
  • At-a-Glance: at-glance
  • Page Intro: page-intro

To apply one of the above row background styles, click the pencil icon on the right side of the row component. When the Row Settings dialog opens, click the gear icon to open the Settings menu and select the appropriate option.

Examples

Default

Blue Background

White Background

Video Background

  1. Edit the Row settings
  2. Check the box for Use video background
  3. Scroll down to the bottom of the form and enter the video URL in the Background Video File Link field
  4. To set an image to appear on smaller screens, click the Design Options tab and select a Background image