[ux_slider]

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

[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=”50190″ 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=”50189″]

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

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

[/col]

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

[row]

[col span=”4″]

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

[text_box width=”41″]

BACKGROUND VIDEO

[/text_box]

[/ux_banner]

Subscribe to Get Latest DIY Crafts Tutorials

You have successfully subscribed to the newsletter

There was an error while trying to send your request. Please try again.

Pily will use the information you provide on this form to be in touch with you and to provide updates and marketing.