[ux_slider][ux_banner height="700px" bg="900" bg_overlay="rgba(0, 0, 0, 0.25)"][text_box width="51" animate="fadeInLeft" text_depth="1"]

Create Amazing Banners with Drag and Drop

[divider][button text="A button" color="success" depth="3"][/text_box][/ux_banner][ux_banner height="700px" bg="900"][text_box width="46" animate="fadeInRight" parallax="1" position_x="5"]

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....

[button text="Buy now" color="white"][button text="Learn more" color="white" style="outline"][/text_box][/ux_banner][/ux_slider][row v_align="middle"][col span="7"][ux_banner height="600px" bg="900" bg_pos="44% 39%"][text_box width="63" width__sm="78" padding="39px" position_x="5" position_x__sm="50" text_color="dark" bg="rgba(255, 255, 255, 0.85)" depth="2"]

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....

[button text="Simple Link" style="link" icon="icon-play"][button text="Simple Button"][/text_box][/ux_banner][/col][col span="5" span__sm="12" align="center"]

Drag And Drop Banner System

Flatsome Banners is the heart of Flatsome. Our Banner System let you create beautiful responsive banners with drag and drop.

[ux_image id="899"][/col][col span="14"][ux_banner height="56.25%" height__sm="50%" bg="900" bg_overlay="rgba(22, 20, 16, 0.18)" hover="glow"][text_box width="36" position_x="90"]

Small Title

You can place a text box wherever you want on a Banner

[button text="Click me!"][/text_box][/ux_banner][/col][col span="6" span__sm="12" align="center"]

Banner Focus Point™

Set a focus point on the banner and the image will adjust to mobile a tablet screens. Perfect for resposnive Websites.

[/col][col span="6" span__sm="12"][ux_image id="899" image_size="original"][/col][/row][title style="center" text="Banner Hover effects"][row][col span="4"][ux_banner height="200px" bg="900" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="glow"][text_box width="36"]

Glow

[/text_box][/ux_banner][/col][col span="4"][ux_banner height="200px" bg="900" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="zoom"][text_box width="36"]

Zoom

[/text_box][/ux_banner][/col][col span="4"][ux_banner height="200px" bg="900" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="zoom-fade"][text_box width="36"]

Zoom Fade

[/text_box][/ux_banner][/col][col span="4"][ux_banner height="200px" bg="900" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="blur"][text_box width="36"]

Blur

[/text_box][/ux_banner][/col][col span="4"][ux_banner height="200px" bg="900" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="fade-in"][text_box width="36"]

Fade In

[/text_box][/ux_banner][/col][col span="4"][ux_banner height="200px" bg="900" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="fade-out"][text_box width="36"]

Fade Out

[/text_box][/ux_banner][/col][col span="4"][ux_banner height="200px" bg="900" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="color"][text_box width="36"]

Add Color

[/text_box][/ux_banner][/col][col span="4"][ux_banner height="200px" bg="900" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="grayscale"][text_box width="36"]

Grayscale

[/text_box][/ux_banner][/col][col span="4"][ux_banner height="200px" bg="900" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="overlay-add"][text_box width="51"]

Add Overlay

Overlay can be any color

[/text_box][/ux_banner][/col][/row][row][col span__sm="12"]

You can also combine hover effects to create amazing hover effects

[/col][/row][row][col span="6" span__sm="12"][ux_banner height="200px" bg="900" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="overlay-add" border="3px 3px 3px 3px" border_margin="10px 10px 10px 10px" border_hover="zoom"][text_box width="51"]

Add animated borders

[/text_box][/ux_banner][/col][col span="6" span__sm="12"][ux_banner height="200px" bg="900" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="overlay-add"][text_box width="51"]

Add Overlay

Overlay can be any color

[/text_box][/ux_banner][/col][/row][ux_banner height="500px" bg="900" parallax="2"][text_box width="41"]

BACKGROUND VIDEO

[/text_box][/ux_banner]