Below you'll find instructions to implement a fixed-position inline template with a semi-transparent blur strip,
Immediately after the article excerpt block (with the class excerpt), add an empty div for the Piano template and add a CSS class, for example, piano-container.
Now, add the below CSS classes to your website's code. To define the location where the Piano template would be shown, you can use the max-height parameter for the article excerpt (for example with the class excerpt--cropped). Its value can be fine-tuned as well as the height and opacity of the strip. The Piano template will be located right after that:
excerpt-cropped {
max-height: 265px;
overflow-y: hidden;
}
piano-container {
position: relative;
}
piano-container--show::before {
content: "";
position: absolute;
bottom: 100%;
left: 0;
right: 0;
width: 100%;
height: 100px;
background-image: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 30%, rgba(255, 255, 255, 0) 100%);
}
After this is one, you'll need to proceed with the following steps:
-
Create a new experience in Composer and specify this class
piano-containeras a container where the Piano inline template will show up -
Crop the article to show the Piano template. For this, you would apply in Composer to the block
excerpta CSS classexcerpt--croppedwhich would crop the article to a certain height. -
In Composer then apply to the block
piano-containera CSS classpiano-container--showwhich adds a semi-transparent strip.
Note, that Piano inline templates fit the container in which they are placed. Therefore you need to define the size of the element where the inline template should be shown for it to appear correctly. These dimensions need to be set before the template is loaded.