For a better experience please change your browser to CHROME, FIREFOX, OPERA or Internet Explorer.

    [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″]

    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]