Slick Banner - modern personalizable banner

Slick banner looks best at the top of the page, similar to examples below.

Example 1 - Wavy Image, no box around the text:

Example 2 - Wavy Image, with the video:

Example 3 - Boxy Image:

Example 4 - Linear Gradient (not an image):

Updating banner content

You can update banner heading, description text, and image in web art properties as shown below:
image

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

NOTE: When copying video URL from YouTube, be sure to have the embed URL like shown here:
image.
To embed from Vimeo, copy the Embed video URL and not just a video link:
image

Updating banner style

Text-box around the text
You can choose whether the banner should display a box around the text or not. As you can see in Example 3 above, there is a semi-transparent box around the text. You can adjust the transparency and the color by using the RGBA code in the web part properties:

image

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.

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

Here is where you can create a custom gradient in seconds:
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.

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

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

Origami banner will instantly preview what has changed as shown below.

BEFORE

AFTER