[ux_slider]

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

[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=»30056″ 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=»30055″]

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

[ux_banner height=»56.25%» height__sm=»50%» bg=»30056″ 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=»30055″ image_size=»original»]

[/col]

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

[row]

[col span=»4″]

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

[text_box width=»41″]

BACKGROUND VIDEO

[/text_box]

[/ux_banner]