Navigation Button

Building in the WCMS

Related Pages

Creating a Navigation Button

Navigation button is a Visual Composer module.  It can be added to Visual Composer pages or modules only.  To embed a button in a WYSIWYG field or in multiple pages, add it to a Visual Composer module.

In Visual Composer, use the “Add Element” tool to add the navigation button. Tips:

  • To apply an accent border, don’t forget to select the side and thickness in the Borders and Layout tab. (Simply selecting a color in the Colors tab does not create an accent border.)
  • You can use the Preview tab in button Settings to see the overall effect, but you must preview in all viewports to see how button text is handled.

Enhancing Layout for a Button Group

  • To make all buttons in a row the same height, open the row Settings and, in the General tab, check “Make All Modules Equal Height.”
  • To remove the space below a button (for a more compact layout), open the button Settings and, in the Advanced tab, check “Suppress Bottom (Container) Margin.”
  • To make multiple buttons appear as a set, try adding background shading to the row or column:  Open the row/column Settings. Then, in the General tab, click the browse button for “Additional CSS Classes” and scroll to Background Color.
WCMS Quick Facts

The navigation button is a single-use Visual Composer element. To use a button on multiple pages or in a WYSIWYG field, insert it in a Visual Composer module.

To make all the buttons in a row the same height, open row Settings and check “Make All Modules Equal Height.”

For a more compact vertical layout with multiple rows of buttons, check the option “Suppress Bottom (Container) Margin” for each button as necessary.

Page last reviewed: May 10, 2018
Content source: WCMS / Template Team