# Slick Banner web part

**URL:** <https://community.origamiconnect.com/t/slick-banner-web-part/205>\
**Category:** Archive Manuals\
**Created:** [February 3, 2022, 6:33pm UTC](https://community.origamiconnect.com/t/slick-banner-web-part/205 "2022-02-03T18:33:05Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![origami](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.origamiconnect.com/origami/32/436_2.png) [@origami](https://community.origamiconnect.com/u/origami)\
**Post date:** [February 3, 2022, 6:33pm UTC](https://community.origamiconnect.com/t/slick-banner-web-part/205/1 "2022-02-03T18:33:05Z")

</div>

> Slick banner looks best at the top of the page.

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/f/f87a4738e17ec99ba5ebc209e14d6a26ca8552de.jpeg)

> **Updating banner content**
>
> You can update banner heading, description text, and image in web art properties as shown below:
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/1X/6c9040aed0326735ef9d1e0d432687242be21274.png)
> 
> If you’d like to use the currently logged-in user name anywhere in your text, type in {firstname} in your text as shown in the default example.

> **Adding video to the banner**
>
> You can embed YouTube, Vimeo and other types of streaming video directly into the banner to make it look like Example 2 above.
> 
> Simply add your video Embed URL to the web part properties like this:  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/1X/652c6fce9b2fd42ef674562256d139712eebd4fb.png)
> 
> **NOTE:** When copying video URL from YouTube, be sure to have the embed URL like shown here:  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/1X/af1abc92185d8e268f5766d09963806b5fc77edc.png).  
> To embed from Vimeo, copy the Embed video URL and not just a video link:  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/1X/4367db976932308d7538b38fa24c3c76acc2fd7b.png)

> **Updating banner style**
>
> **Wave at the bottom**  
> You can also choose whether you want the banner to show a wave at the bottom.  
> Example 3 above shows how the banner looks without the wave. Here is the property that controls this display style  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/1X/dbeeb732a4846814e3e974bb0880cf2f8d665d38.png).
> 
> **Linear gradient**  
> Finally, if you want to use the gradient and not an image, you can insert a gradient code instead of URL of the image like this:  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/1X/c6fbe9ecc23a643249d1252c8352d80d7928fd5a.png)
> 
> Here is where you can create a custom gradient in seconds:  
> [https://cssgradient.io/](https://cssgradient.io/)
> 
> When done, just copy the code which will look similar to this into the web part property:  
> _linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(238,14,66,1) 0%, rgba(44,14,69,1) 100%)_

> **Turning the banner into a page footer**
>
> You can use the banner as a wavy footer so the page footer will look like this.
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/1X/abc4be4701cbc5413b3f411c163487917e3ad215.png)
> 
> To enable this footer, simply add the banner web part to the bottom of the page in the Full-Width section and turn on the [Flip Wave] option as shown below.  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/1X/0bd7359b24d2d8655c4ff7feff5dabe6fb6cc40c.png)

> **Set a focal point for banner image**
>
> You don’t need to make a perfectly sized image to have it look good on your intranet.  
> You can change the focal point of an image by using these sliders in web part properties:
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/1X/0e013c155913fc60226d1ed74020b5923e73fa9e.png)
> 
> Origami banner will instantly preview what has changed as shown below.
> 
> **BEFORE**
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/1X/818efe03aa6cda9328a511ed0fcc4f3a0e1a78fe.jpeg)
> 
> **AFTER**
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/1X/047bc06d2b79bc09a17c678a68336c202358126b.jpeg)

> **What image resolution is best for carousel images?**
>
> See this guidance on what images are best for the carousel: [Why images in carousels look different depending on screen resolution?](https://community.origamiconnect.com/t/why-images-in-carousels-look-different-depending-on-screen-resolution/881)