[ux_banner height= »446px » bg= »451″ bg_overlay= »rgba(0, 0, 0, 0.61) » bg_pos= »58% 26% »]
[text_box width= »100″ width__sm= »75″ parallax= »-1″]
Flatsome Grid System
Responsive Rows and Columns
Create Amazing layouts by using Flatsome Row and Column System powered by Flexbox
[/text_box]
[/ux_banner]
Simple 4-column row
[col span= »3″ span__sm= »6″ bg_color= »rgba(255, 0, 211, 0.96) » color= »light » depth_hover= »5″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
[/col]
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
Vertical Centered Row
[col span= »6″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
[/col]
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
Bottom Align Row
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
[/col]
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
Equal aligned row
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
[/col]
[col span= »3″ span__sm= »6″ bg_color= »rgba(231, 231, 231, 0.96) »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
Rows With Drop shadow
[col span= »4″ span__sm= »12″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
You can set Column Depth for All columns or per column.
[/col]
[col span= »4″ span__sm= »12″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
Divided row
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »12″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
Dashed Lined Row
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
Solid Lined Row
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
Custom Background on a Column
[col span= »5″ span__sm= »6″ padding= »30px 30px 30px 30px » bg_color= »rgb(38, 65, 116) » color= »light » depth= »2″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »3″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »3″ span__sm= »12″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
Full Width Row with Backgrounds
[col span= »4″ span__sm= »12″ bg_color= »rgb(0, 0, 0) » color= »light »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummyLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »12″ bg_color= »rgb(153, 120, 222) » color= »light »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummyLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
[col span= »4″ span__sm= »12″ bg_color= »rgb(120, 154, 222) » color= »light »]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummyLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/col]
Nested Rows
[col span= »4″ span__sm= »12″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »8″ span__sm= »12″]
[row_inner]
[col_inner span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col_inner]
[col_inner span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col_inner]
[col_inner span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col_inner]
[col_inner span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col_inner]
[col_inner span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col_inner]
[col_inner span= »4″ span__sm= »6″]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col_inner]
[/row_inner]
[/col]
[section bg_color= »rgb(231, 231, 231) »]
[col span= »4″ span__sm= »6″]
Column with a drop shadow and white background
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »6″]
Column with a drop shadow and white background
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ padding= »30px 30px 30px 30px » bg_color= »rgb(255, 255, 255) » depth= »3″ depth_hover= »5″]
Column with a drop shadow and white background
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[/section]
[section bg_color= »rgb(0, 0, 0) »]
[col span= »4″ span__sm= »12″ padding= »20px » bg_color= »rgb(255, 255, 255) »]
Column with a drop shadow and white background
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ color= »light »]
Column with a drop shadow and white background
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ color= »light »]
Column with a drop shadow and white background
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[/section]
[section bg_color= »rgb(231, 231, 231) »]
[col span= »4″ span__sm= »6″ parallax= »1″]
Parallax Column
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »6″ parallax= »2″]
Parallax Column
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ parallax= »3″]
Parallax Column
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[/section]
[col span= »7″ span__sm= »10″ align= »center »]
A Centered Columns Row
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
Animated Columns
[col span= »4″ span__sm= »12″ animate= »fadeInUp »]
Fade In Up
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ animate= »fadeInDown »]
Fade In Down
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ animate= »fadeInLeft »]
Fade In Left
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ animate= »fadeInRight »]
Fade In Right
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ animate= »bounceIn »]
Bounce In
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ animate= »bounceInUp »]
Bounce In Up
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ animate= »bounceInDown »]
Bounce In Down
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ animate= »bounceInLeft »]
Bounce In Left
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »4″ span__sm= »12″ animate= »bounceInRight »]
Bounce In Right
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »6″ span__sm= »12″ animate= »flipInY »]
Flip In Y
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »6″ span__sm= »12″ animate= »flipInX »]
Flip In X
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]
[col span= »6″ span__sm= »12″ animate= »blurIn »]
Blur In
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat….
[/col]