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 - Linear Gradient (not an image):
Updating banner content
You can update banner heading, description text, and image in web art properties as shown below:
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:
NOTE: When copying video URL from YouTube, be sure to have the embed URL like shown here:
.
To embed from Vimeo, copy the Embed video URL and not just a video link:
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
.
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:
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.
