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

Great Health

Nuts are among the healthiest foods you can eat. They’re loaded with antioxidants, fiber, protein, vitamins, minerals, and unsaturated fats. They can lower cholesterol, reduce the risk of cancer, lead to better heart health, and keep your weight under control

 

Big Saving

 We are selling our premium products at lower price compare to the market as we think that good healthy food should come with affordable price. Hence selling them online where it reducing our costs nevertheless we will not compromise in the quality of the products.

Fast Delivery

We know that premium quality products should have come with faster delivery as well. As such, we are providing a quick delivery to the door step. We hope our customers will not only satisfy with our products but also our quick delivery service!

Great Health

Nuts are among the healthiest foods you can eat. They’re loaded with antioxidants, fiber, protein, vitamins, minerals, and unsaturated fats. They can lower cholesterol, reduce the risk of cancer, lead to better heart health, and keep your weight under control

 

Big Saving

 We are selling our premium products at lower price compare to the market as we think that good healthy food should come with affordable price. Hence selling them online where it reducing our costs nevertheless we will not compromise in the quality of the products.

Fast Delivery

We know that premium quality products should have come with faster delivery as well. As such, we are providing a quick delivery to the door step. We hope our customers will not only satisfy with our products but also our quick delivery service!

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