[ux_slider]

[ux_banner height=”700px” bg=”4799″ 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=”4799″]

[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=”4799″ 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=”4798″]

[/col]
[col span=”14″]

[ux_banner height=”56.25%” height__sm=”50%” bg=”4799″ 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=”4798″ image_size=”original”]

[/col]

[/row]
[title style=”center” text=”Banner Hover effects”]

[row]

[col span=”4″]

[ux_banner height=”200px” bg=”4799″ 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=”4799″ 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=”4799″ 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=”4799″ 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=”4799″ 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=”4799″ 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=”4799″ 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=”4799″ 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=”4799″ 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=”4799″ 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=”4799″ 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=”4799″ parallax=”2″]

[text_box width=”41″]

BACKGROUND VIDEO

[/text_box]

[/ux_banner]

Ready To Start New Project?

We would love to help with any upcoming and existing projects you have! Feel free to contact us through our contact form! We look forward to speaking with you and thank you for your interest in our company!