Built-in template: content lock

A built-in inline template can also be used to lock content. Unlike a modal, it still shows the article but only its very beginning (for example, first 2 paragraphs). For greater teasing effect, a fade-out strip can be added at the top of the template to highlight that the content is there but a user cannot access it until they sign up or, say, buy a subscription.

DemoTo return from the demo page, please use the browser Back button. We were trying to make the demo as close to real life as possible, and did not provide any link to go back intentionally.

How-to

Setting up a template

We need to set up an inline template using Composer.

Hiding content with fade-out effect

Let's say you have an empty container for a template with a CSS class .piano-container. Once it's ready, just put it between paragraphs or where you want your users to see the template.

When specifying the container in Composer, you should add an Apply CSS card to assign another class, piano-container--active, to it. The goal is to hide the content only when experience is running.

The most lightweight way to hide your content is to put a Piano container with a template in it on the same level as all your paragraphs within the article. Then a few lines of CSS code can do the trick and make all the elements after container invisible, like this:

.piano-container--active ~ * {
  display: none;
}

To add fade-out effect, all you need to do is describe it in your CSS as a pseudo-element, here is an example:

.piano-container--active {
  position: relative;
}

.piano-container--active::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  height: 200px;
  background-image: linear-gradient(
    to top,
    #ffffff 0%,
    #ffffff 20%,
    rgba(255, 255, 255, 0) 100%
  );
}

You can modify it however you like, for example, adjust its height or transparency.

Setting template size

Piano inline templates take 100% of the parent container width. By parent container we mean the <div> you specify on your end for the Piano template to show up. Regarding its height, the browser counts it automatically according to the template content. So nothing needs to be defined. Instead, just let the Piano template be parsed freely — things like setting up a fixed height would prevent it from displaying correctly.