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.
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;
Note: Complex container elements like tabs will also use blue and yellow colors to display tab group and separate tab container.
Row controls
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
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
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.
