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