Element Controls

Every element of Visual Composer Website Builder has its own controls to operate with. Depending on the type of element there are 3 different controls available:

  • Row controls
  • Column controls
  • Element controls

Upon hover of the element, the exact controls will appear on the top left corner of the element. On hover of controls, Visual Composer Website Builder will display borders of the element with the following colors:

  • Blue for row
  • Yellow for columns
  • Green for elements

Element border outline with colors in Visual Composer Website Builder

Note: More complex elements like tabs (available soon) will also use blue and yellow colors to display tab group and separate tab container.

The controls of Visual Composer Website Builder will also display the hierarchy of the layout. It will show all elements (including parent elements) that are hovered at the moment. Such approach allows you to quickly access any parent element on hover. There is no limit on how many parents elements controls can be displayed at the same moment.

Element controls and hierarchy in Visual Composer Website Builder for WordPress

In addition, the last element will display edit and delete options next to the element icon for quick action.

Example: If you hover the text block that is inserted into row/column, you will see the controls for a row, column, and text block.

Row controls

Drag and drop editor in WordPress with easy to use handlers

Row element controls will be displayed with a blue border on hover and following options available in the drop-down menu:

  • Move Row – option to drag and drop row
  • Add Column – option to add 100% width column to particular row
  • Edit – edit row parameters
  • Row Layout – edit number of columns and behavior of columns within particular row
  • Design Options – access row design options
  • Clone – clone row (it will duplicate row with all the content)
  • Hide – option to temporary hide element in Public and Frontend editor
  • Remove – delete row

Column controls

Element controls for column to edit your layout in WordPress

Column element controls will be displayed with a yellow border on hover and following options available in the drop-down menu:

  • Move Column – option to drag and drop column
  • Add Element – option to add element to particular column
  • Edit – edit column parameters
  • Design Options – access column design options
  • Clone – clone column (it will duplicate column with all the content within parent row)
  • Paste – paste element into column that has been copied
  • Remove – delete column

Content element controls

Element border outline with colors in Visual Composer Website Builder

Content element controls will be displayed with a green border on hover and following options available in the drop-down menu:

  • Move Element – option to drag and drop content element
  • Edit – edit element parameters
  • Design Options – access element design options
  • Clone – clone element (it will duplicate element within parent column)
  • Copy – copy element into a clipboard (you can paste element into columns via column control)
  • Hide – option to temporary hide element in Public and Frontend editor
  • Remove – delete element