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
[accordion]
[accordion_block title=”2. Add columns”]
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.
[/accordion_block]
[accordion_block title=”3. Column Properties”]
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‘
[/accordion_block]
[accordion_block title=”4. Add Element”]
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:
[/accordion_block]
[accordion_block title=”5. Row Properties”]
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.
[/accordion_block]
[/accordion]