Banners
[ux_slider]
[ux_banner height="700px" bg="18" bg_overlay="rgba(0, 0, 0, 0.25)"]
[text_box width="51" animate="fadeInLeft" text_depth="1"]
[divider]
[button text="A button" color="success" depth="3"]
[/text_box]
[/ux_banner]
[ux_banner height="700px" bg="18"]
[text_box width="46" animate="fadeInRight" parallax="1" position_x="5"]
[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="18" 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"]
[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"]
[ux_image id="17"]
[/col]
[col span="14"]
[ux_banner height="56.25%" height__sm="50%" bg="18" bg_overlay="rgba(22, 20, 16, 0.18)" hover="glow"]
[text_box width="36" position_x="90"]
[button text="Click me!"]
[/text_box]
[/ux_banner]
[/col]
[col span="6" span__sm="12" align="center"]
[/col]
[col span="6" span__sm="12"]
[ux_image id="17" image_size="original"]
[/col]
[/row]
[title style="center" text="Banner Hover effects"]
[row]
[col span="4"]
[ux_banner height="200px" bg="18" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="glow"]
[text_box width="36"]
[/text_box]
[/ux_banner]
[/col]
[col span="4"]
[ux_banner height="200px" bg="18" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="zoom"]
[text_box width="36"]
[/text_box]
[/ux_banner]
[/col]
[col span="4"]
[ux_banner height="200px" bg="18" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="zoom-fade"]
[text_box width="36"]
[/text_box]
[/ux_banner]
[/col]
[col span="4"]
[ux_banner height="200px" bg="18" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="blur"]
[text_box width="36"]
[/text_box]
[/ux_banner]
[/col]
[col span="4"]
[ux_banner height="200px" bg="18" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="fade-in"]
[text_box width="36"]
[/text_box]
[/ux_banner]
[/col]
[col span="4"]
[ux_banner height="200px" bg="18" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="fade-out"]
[text_box width="36"]
[/text_box]
[/ux_banner]
[/col]
[col span="4"]
[ux_banner height="200px" bg="18" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="color"]
[text_box width="36"]
[/text_box]
[/ux_banner]
[/col]
[col span="4"]
[ux_banner height="200px" bg="18" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="grayscale"]
[text_box width="36"]
[/text_box]
[/ux_banner]
[/col]
[col span="4"]
[ux_banner height="200px" bg="18" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="overlay-add"]
[text_box width="51"]
[/text_box]
[/ux_banner]
[/col]
[/row]
[row]
[col span__sm="12"]
[/col]
[/row]
[row]
[col span="6" span__sm="12"]
[ux_banner height="200px" bg="18" 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"]
[/text_box]
[/ux_banner]
[/col]
[col span="6" span__sm="12"]
[ux_banner height="200px" bg="18" bg_size="medium" bg_overlay="rgba(22, 20, 16, 0.18)" hover="overlay-add"]
[text_box width="51"]
[/text_box]
[/ux_banner]
[/col]
[/row]
[ux_banner height="500px" bg="18" parallax="2"]
[text_box width="41"]
[/text_box]
[/ux_banner]
[ux_banner height="700px" bg="18" 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="18"]
[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="18" 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="17"]
[/col]
[col span="14"]
[ux_banner height="56.25%" height__sm="50%" bg="18" 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="17" image_size="original"]
[/col]
[/row]
[title style="center" text="Banner Hover effects"]
[row]
[col span="4"]
[ux_banner height="200px" bg="18" 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="18" 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="18" 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="18" 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="18" 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="18" 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="18" 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="18" 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="18" 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="18" 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="18" 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="18" parallax="2"]
[text_box width="41"]
BACKGROUND VIDEO
[/text_box]
[/ux_banner]