Shortcode – UX Banners

UX Banners are responsive and animated banners.
These banners can be inserted into a UX Slider or into a banner grid.

 [ux_banner bg="http://imageurl" height="500px" animation="flipInX"]  <h1>DEFAULT BANNER</h1> <h3>This is a simple banner with centered text. Change text and background easely... </h3> ____ [/ux_banner]
 [ux_banner  bg="http://imageurl" height="560px" link="" animation="fadeInLeft" text_align="center" text_pos="right center" text_color="dark" text_width="40%"]  <h3>This Weekend Only</h3> ____ <h1>FREE SHIPPING</h1> <h2>ON ALL ORDERS!</h2> ____  [button text='Browse products' link='http://']  [/ux_banner]
 [ux_banner  bg="http://imageurl" height="560px" link="" animation="fadeInLeft" text_align="center" text_pos="right center" text_color="dark" text_width="40%"]  <h3>This Weekend Only</h3> ____ <h1>FREE SHIPPING</h1> <h2>ON ALL ORDERS!</h2> ____  [button text='Browse products' link='http://']  [/ux_banner]
 [ux_banner  bg="http://imageurl" height="560px" link="" animation="fadeInLeft" text_align="center" text_pos="right center" text_color="dark" text_width="40%"]  <h3 class="alt-font">It has Finaly started...</h3> ____ <h1 class="h-large">HUGE SALE</h1> <h1>UP TO 70% OFF</h1> ____  [button style="alt-button white" text="Shop men" link="http://"] [button style="alt-button white" text="Shop women" link="http://"] [button style="alt-button white" text="Shop kids" link="http://"]  [/ux_banner]
 [ux_banner  bg="http://imageurl" height="560px" link="" animation="fadeInLeft" text_align="center" text_pos="right center" text_color="dark" text_width="40%" parallax="2"]  <h3 class="alt-font">It has Finaly started...</h3> ____ <h1 class="h-large">PARALLAX</h1> <h1>UP TO 70% OFF</h1> ____  [button style="alt-button white" text="Shop men" link="http://"] [button style="alt-button white" text="Shop women" link="http://"] [button style="alt-button white" text="Shop kids" link="http://"]  [/ux_banner]
 [ux_banner  bg="http://imageurl" height="300px" animation="flipInX"]  <h1>ABOUT US</h1> ___ [share] [/ux_banner]

Banner Grid

 [ux_banner_grid]  [col span="6"] [ux_banner height="600px" bg=""] [/ux_banner] [/col]  [col span="3" ] [ux_banner height="600px" bg=""] [/ux_banner] [/col]  [col span="3" ] [ux_banner height="292px" bg=""] [/ux_banner] [/col]  [col span="3"] [ux_banner height="292px" bg=""] [/ux_banner] [/col]  [/ux_banner_grid]

3-column Banner Row


 [row]  [col span=1/3] [ux_banner link="http://localhost:8888/test/blog/" bg="http://imageurl" hover="zoom" height="160px"] <h2 class="uppercase">Weekly Giveaway</h2> ___ [/ux_banner] [/col]  [col  span=1/3] [ux_banner link="http://localhost:8888/test/blog/" bg="http://imageurl" hover="zoom" height="160px"] <h2 class="uppercase">Join our  competition</h2> ___ [/ux_banner] [/col]  [col span=1/3] [ux_banner link="http://localhost:8888/test/pages/about-us/" bg="http://imageurl" hover="zoom" height="160px"] <h2 class="uppercase">ABOUT US </h2> ___ [/ux_banner] [/col]  [/row]

Video banner

 [ux_banner bg="#000" video_mp4="http://videourl.mp4" video_ogg=""  height="600px" link="" animation="fadeInRight" text_align="left" text_pos="left center" text_color="light" text_width="40%"] <h3 class="alt-font">Summer coming...</h3> ____ <h1>THIS IS AN AWESOME VIDEO BANNER</h1> ____ [button  text="Shop men" link="http://localhost:8888/test/product-category/men/"] [button  text="Shop women" link="http://localhost:8888/test/product-category/women/"]  [/ux_banner] 

Banner with snow effect

 [ux_banner bg="http://imageurl" height="500px" animation="flipInX" effect="snow"]  <h1>DEFAULT BANNER</h1> <h3>This is a simple banner with centered text. Change text and background easely... </h3> ____ [/ux_banner]

Banner with glass effect

 [ux_banner bg="http://imageurl" height="500px" animation="flipInX" effect="sliding-glass"]  <h1>DEFAULT BANNER</h1> <h3>This is a simple banner with centered text. Change text and background easely... </h3> ____ [/ux_banner]

Banner with sparkle effect

 [ux_banner bg="http://imageurl" height="500px" animation="flipInX" effect="sparkle"]  <h1>DEFAULT BANNER</h1> <h3>This is a simple banner with centered text. Change text and background easely... </h3> ____ [/ux_banner]

Banner with confetti effect

 [ux_banner bg="http://imageurl" height="500px" animation="flipInX" effect="confetti"]  <h1>DEFAULT BANNER</h1> <h3>This is a simple banner with centered text. Change text and background easely... </h3> ____ [/ux_banner]