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 control types available:

  • Row controls;
  • Column controls;
  • Element controls.

Element controls and hierarchy in Visual Composer Website Builder for WordPress

As you hover elements in the Frontend editor, you will see a full hierarchy of elements from left to right (ex. row, column, single image).

In addition, various types of elements use different border colors to outline elements:

  • Blue for rows;
  • Yellow for columns;
  • Green for elements;

Element border outline with colors in Visual Composer Website Builder

Note: Complex container elements like tabs will also use blue and yellow colors to display tab group and separate tab container.

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 – use drag and drop to move row;
  • Add Column – add 100% wide column to the row;
  • Edit – open row element edit window;
  • Row Layout – edit number of columns and responsiveness;
  • Design Options – open design options (part of the element edit window);
  • Clone – clone row (duplicate row with all the content);
  • Copy – copy row (allow to paste it at the bottom, after another row, or inside column);
  • Paste after – paste copied row after particular row (available only if you have copied a row);
  • Hide – temporary hide element in Public and Frontend editor (element will be available via Tree View);
  • Remove – delete a row (you can also delete elements with drag and drop).

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 – use drag and drop to sort columns within the row;
  • Add Element – option to add an element to a particular column;
  • Edit – open column element edit window;
  • Design Options – open design options (part of the element edit window);
  • Clone – clone column (duplicate column with all the content within the same row);
  • Copy – copy column (allow to paste column in the same or another row);
  • Paste – paste copied elements;
  • Remove – delete column (you can also delete elements with drag and drop).

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 – use drag and drop to move elements across layouts;
  • Edit – open column element edit window;
  • Design Options – open design options (part of the element edit window);
  • Clone – clone element (duplicate element within the same column);
  • Copy – copy element (you can paste element into columns);
  • Hide – temporary hide element in Public and Frontend editor (element will be available via Tree View);
  • Remove – delete an element (you can also delete elements with drag and drop).

Note: Visual Composer allows you to copy elements between pages. To do that, copy the element and navigate to another page to paste it.

Copy/Paste elements in blank page or bottom of the page