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 groups and separate tab containers.
Right-Click Controls
In addition to default controls that work on mouse hover, Visual Composer has right-click functionality. Once you right-click on the element in your layout, you will instantly see the element controls.
Controls Options
Each control (row, column, element) opens a dropdown of quick options once you hover over the particular element.
Following operations are similar for all controls:
- Move content element - use drag and drop to move elements across layouts and sort within one another (e.g.columns within the row);
- Add content element - add an element by using the Add Element menu in the Navigation bar;
- Access Design Options - click on edit option in the dropdown menu of any element and scroll down to Design Options (part of the element Edit window).
- Hide content element - to hide the element in Public and Frontend editor, click on the eye icon in the upper right corner of the edit window;
Note: The element you have hidden will be available via Tree View.
Row controls
Row element controls will be displayed with a blue border on hover and following options available in the drop-down menu:
- Edit - open row 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);
- Remove - delete a row.
Note: Row Layout is available via the row element Edit window. It allows you to control general row settings, edit the number of columns and manage responsiveness.
Column controls
Column element controls will be displayed with a yellow border on hover and following options available in the drop-down menu:
- Edit - open column 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.
Content element controls
Content element controls will be displayed with a green border on hover and following options available in the drop-down menu:
- Edit - open column element edit window;
- Clone - clone element (duplicate element within the same column);
- Copy - copy element (you can paste element into columns);
- Remove - delete an element.
Note: Visual Composer allows you to copy elements between pages. To do that, copy the element and navigate to another page to paste it.
