Banners

[ux_slider]

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

[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= »6177″ 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= »6175″]

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

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

[/col]

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

[row]

[col span= »4″]

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

[text_box width= »41″]

BACKGROUND VIDEO

[/text_box]

[/ux_banner]