Row, Column Layouts and Text
Responsive WordPress pages and posts based on Bootstrap grid using row and column principles.
Rows, Columns and Text Layout
Visual Composer uses Bootstrap grid principle to form responsive row and column layout that looks good on all type of devices.
First Column
This is a row with 2 equal columns and text paragraphs aligned on left and right. It is possible to drag columns to change their order which is handy in case you have tons of elements in each column and you wish to swap them.
Second Column
This is a row with 2 equal columns and text paragraphs aligned on left and right. It is possible to drag columns to change their order which is handy in case you have tons of elements in each column and you wish to swap them.
First Column
This is a row with 2 columns where left column is bigger than right column. Such layout comes in handy if you would like to create sidebar based pages.
Second Column
This is a row with 2 columns where left column is bigger than right column. Such layout comes in handy if you would like to create sidebar based pages.
First Column
This is a row with 3 equal columns and text paragraphs aligned on left, centre and right. Such layout comes in very handy if you want to display core features or products.
Second Column
This is a row with 3 equal columns and text paragraphs aligned on left, centre and right. Such layout comes in very handy if you want to display core features or products.
Third Column
This is a row with 3 equal columns and text paragraphs aligned on left, centre and right. Such layout comes in very handy if you want to display core features or products.
First Column
This is a row with 6 equal columns which is a perfect solution for displaying grid of features.
Second Column
This is a row with 6 equal columns which is a perfect solution for displaying grid of features.
Third Column
This is a row with 6 equal columns which is a perfect solution for displaying grid of features.
Fourth Column
This is a row with 6 equal columns which is a perfect solution for displaying grid of features.
Fifth Column
This is a row with 6 equal columns which is a perfect solution for displaying grid of features.
Sixth Column
This is a row with 6 equal columns which is a perfect solution for displaying grid of features.
Row and Column Styling
Style rows and columns by adding background, background color, border, margin and paddings via Design Options settings. Choose from available border styles and background image positions.
First Column
This row has been styled with background color and dotted border. Columns are not styled in this example.
Second Column
This row has been styled with background color and dotted border. Columns are not styled in this example.
First Column
There are 2 columns in this row and each of them has been styled separately from other. It is also allowed to combine row and column styling to create truly unique design.
Second Column
There are 2 columns in this row and each of them has been styled separately from other. It is also allowed to combine row and column styling to create truly unique design.
Full Width Rows
Full width sections based on row principle with content control. Set content to be fixed or full width together with row background.
First Column
This row is stretched, but the columns are still fixed. Such layouts come in handy if you would like to use background color or image in full width, but at the same time leave text centred.
Second Column
This row is stretched, but the columns are still fixed. Such layouts come in handy if you would like to use background color or image in full width, but at the same time leave text centred.
First Column
This is stretched row with stretched content. By default there is 15 pixels padding on the left and right side of the row, but it can be easily removed by choosing “Stretch row and content without spaces”.
Second Column
This is stretched row with stretched content. By default there is 15 pixels padding on the left and right side of the row, but it can be easily removed by choosing “Stretch row and content without spaces”.
Responsive Rows and Columns
All rows and columns are fully responsive meaning your WordPress site is mobile friendly. With easy to use responsiveness tool you can control how your columns behave on different type of devices or even hide them.
First Responsive Column
This is a row with 2 equal columns, but if you will view this layout on the mobile screen size you will see only one column, because second column is disabled on the mobile view. In addition – visible column size will take all available space.
Second Responsive Column
This is a row with 2 equal columns and text paragraphs aligned on left and right. It is possible to drag columns to change their order which is handy in case you have tons of elements in each column and you wish to swap them.
Multiline Rows
Even Bootstrap is limited to 12/12 column principles by default Visual Composer allows creating layouts which exceeds it by placing columns into several lines within one row.
First Column
This row contains 3 columns – while first 2 columns are displayed in one line third column is placed in the next line.
Second Column
This row contains 3 columns – while first 2 columns are displayed in one line third column is placed in the next line.
Third Column
This row contains 3 columns – while first 2 columns are displayed in one line third column is placed in the next line.
Parallax Row with Background
Parallax rows with background allows creating trendy website layouts with parallax effect in order to drag your customer attention and ensure your site if following latest design standards. Combination of Parallax effect and Design Options allows create advanced parallax with more than one background level.
Video Background With Parallax Row
Beautiful video background effects for your row allows dragging visitors attention with the help of YouTube videos. Option to combine video background with Parallax effect allows creating award winning sites.
Full Height Row
Full height section rows is a perfect layout for creating One Page WordPress sites and Landing Pages. Full height is a good solution whenever you want to display Call to Action type block and focus your potential customer attention on specific details.
Inner Row and Column
In order to create advanced layouts Visual Composer introduces Inner Row and Columns element which means you can insert row into row. Inners rows and columns can be styled the same way as regular row and column by applying Design Options tool.
First Column
This is a regular row with 2 equal columns with exception that left column contains inner row element.
Inner Row
This content is placed in inner row for even more advanced styling.
Second Column
This is a regular row with 2 equal columns with exception that both of the columns contain inner row element.
Inner Row
This content is placed in inner row for even more advanced styling.
Want Some More?
Why don’t you test it yourself? You are only one click away from your personal demo which allow you to access of the elements and see how easy it is to work with Visual Composer Page Builder for WordPress.
