Creating a page always starts by entering the title and saving the page. This blank page is the base on which you start adding your content.
First you start with adding a content row. Click on the ‘Add Row‘ button in the Visual Composer. The following window appears:
The Visual Composer menu offers the following options:
- Reorder Row: Drag and drop the row to a different position.
- Add Columns: Divide the row into columns. Use the pre-sets or create your own layout. (for example 1/4 + 2/4 + 1/4).
- Edit Columns: Set properties for the column such as name, background color or background image.
- Add Element: Add content to a row or a column.
- Edit Row: Set row properties. For example height, background color or image and text color.
- Copy Row: Copy the row including it’s contents and properties.
- Delete Row: Delete the row including it’s contents and properties.
Additional information
Each row can be divided into columns. The layout of the columns will displayed on desktop and tablet as they appear in the Visual Composer. When displayed on a smartphone the columns are placed underneath each other.
To divide a row into columns, follow these steps:
- Move your mouse to the column icon on the left of the row. This will show the column preset overview:
- Choose a pre-set.
or
- Move your mouse to the column icon on the left of the row. This will show the column preset overview:
- Click on the ‘Custom Layout‘ link to enter a custom column distribution. The following window will appear:
- Enter the distribution in fractions.
- Click on the ‘OK‘ button to save these settings.
The Column Properties menu offers the following options:
- Column Name: Enter the name of the column. Per page you must use an unique name for each column.
- Hide for mobile: When checked, this column is hidden when the page is viewed on a smartphone.
- Background color: Set the background color.
- Background color alpha: Set the transparency of the background color. It can be set in combination with a background image.
- Background image: Select a background image. See also page ‘Using Images‘
The “Add Element” menu offers the following options:
- Row: Adds a row to a row or column.
- Text Block: Adds a text element to a row or column. The text editor will appear:
- Single Image: Add an image to a row or column. The following window will appear:
- Swipeshow: Add a slideshow to a row or column. The following window will appear:
- Video Player: Add a video to a row or column. The following window will appear:
The “Row Properties” menu offers the following options:
- Row Height: Enter the height of the row. This is done in percentages. If you leave the row height set to “Auto”, the height is only determined by the text content.
- Shift content for mobile: Allows you to force text content placed over a background image to shift beneath the background image when viewed on a smartphone. Make sure you select an appropriate background color.
- Hide for mobile: If checked, this row will be hidden when viewed on a smartphone.
- Background color: Set the background color.
- Font Color: Set the text color.
- Background Image: Set the background image. Also see ‘Using Images‘.
- Padding: Create custom padding within a column. This will override the default padding set in the account settings.