[ux_slider]

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

[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=\”71675\” 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=\”71674\”]

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

[ux_banner height=\”56.25%\” height__sm=\”50%\” bg=\”71675\” 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=\”71674\” image_size=\”original\”]

[/col]

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

[row]

[col span=\”4\”]

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

[text_box width=\”41\”]

BACKGROUND VIDEO

[/text_box]

[/ux_banner]