You have finally decided to use the amazing Visual Composer to create the page you have imagined. After you have chosen your favourite element to use let’s see the options you have to play with regarding the Columns & Rows.
Setting your Rows
It is very important for the user to know the options Engic offers in Rows in order to place correctly the elements given. Options are plenty; let’s have a look:
Give a name for the section (row). This will be useful if you need an anchor menu (see Anchor Menus in this documentation).
Choose the color for your fonts so texts will be readable.
Set the color for your headings(H1-H6). Select among default, light, dark or one of the primary colors.
In case that you like to use one of your classes.
Select among 3 different row types.
- Fullwidth Background – the background will be stretched
- InContainer – the background for this row will be in the container of Engic (1170px)
- Fullwidth Element – the content of this row will be stretched and not just the background
Section Window Height
Select if you like your section has the window height.
Select the background for your section (row). You can use none, color, image, hosted video or video YouTube. Here you can set the parallax effect in case you use a background image.
You can easily increase the padding top of your section (row).
You can easily increase the padding bottom of your section (row).
Set the margin-bottom of your section (row). For example you must set 0px if you like to collapse it with the next section (row).
Check this box if the row you create is the first section just below header. This option ensures that there will be no gap between your header and your first section.
Check this box for your last section, the section just above footer. This option ensures that there will be no gap between your footer and your last section.
Equal Column Height
If selected columns will have equal heights. Recommended for multiple columns with different background colors.
Equal Height Columns and Middle Content
If selected column content will have equal height and centered vertically.
Tablet Portrait Equal Column Height / Middle Content
Select if you wish to keep or disable the Equal Column Height / Middle Content.
Select gap between columns in row.
Here you can hide any row/section you prefer on devices. You can hide rows on tablet, both landscape and portrait orientation, and on mobiles.
Let’s see these options:
If selected, the row will be hidden on desktops/laptops.
Tablet Landscape Visibility
If selected, the row will be hidden on tablet devices with landscape orientation.
Tablet Portrait Visibility
If selected, the row will be hidden on tablet devices with portrait orientation.
If selected, the row will be hidden on mobile devices.
These are major settings to specify your spaces, especially when you use multiple colored rows or rows with image background.
For example: You have two rows with full background that you want to stick each other. Just set 0px the margin-bottom of your first row.
Setting your Columns
Here you can add and Element ID and/or an Extra class.
Here you can set background colors, paddings, margins and borders for the columns content.
Width & Responsiveness
First of all, you can change the width of your column. Additionally, you are able to set the responsive behaviour of your column in various devices or even to hide elements. Analytically:
Set the responsive behavior for the column on desktops/laptops.
Set the responsive behavior for the column on tablet devices with landscape orientation.
Set the responsive behavior for the column on tablet devices with portrait orientation.
Set the column to full width of hide it on mobile devices.