[ux_slider]
[ux_banner height= »700px » bg= »5806″ 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= »5806″]
[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= »5806″ 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= »5805″]
[/col]
[col span= »14″]
[ux_banner height= »56.25% » height__sm= »50% » bg= »5806″ 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= »5805″ image_size= »original »]
[/col]
[/row]
[title style= »center » text= »Banner Hover effects »]
[row]
[col span= »4″]
[ux_banner height= »200px » bg= »5806″ 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= »5806″ 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= »5806″ 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= »5806″ 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= »5806″ 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= »5806″ 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= »5806″ 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= »5806″ 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= »5806″ 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= »5806″ 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= »5806″ 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= »5806″ parallax= »2″]
[text_box width= »41″]
BACKGROUND VIDEO
[/text_box]
[/ux_banner]