Built-in template: multiple 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.

One variant of content lock is multiple content lock. Instead of unlocking the whole article after a user performs the action we need, it shows another couple of paragraphs locking the rest of the content with another content lock template. You can add as many iterations like this as you want.

Of course, we don’t ask a user to register or buy a subscription every time. We’d rather replace a Subscribe button with a Read further button which would simply dismiss the current template and unlock another portion of the article, persistently reminding of subscription options, a special deal, or whatever you want. Or we could let them, for instance, click a Read further button twice and, on the third time, lock the rest of the content completely, leaving only a Subscribe button with no option to read more.

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

Prepare an empty container for an inline template. Let's say its class is .piano-container. Once it's ready, just put it between paragraphs, or where you want your users to see templates, as many times as you want to lock the content. Consider using a CSS class (not ID) as an identifier for a Composer experience since we need to populate one template to multiple containers at the same time. Until dismissed, only the first one will be visible due to the CSS code we're going to provide.

When specifying the container in Composer, you should also 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 elements after container invisible, like this:

.piano-container--active:not(:empty) ~ * {
  display: none;
}

Here and further, we add a :not(:empty) selector. We need it because when a user clicks "Read further", the template gets dismissed and removed from its container. It is empty then. With CSS, we make it show the content going after it but only until we meet the next Piano container.

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

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

.piano-container--active:not(:empty)::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 this strip however you like, for example adjust its height or transparency.

Specifying a template size

Piano inline templates take 100% of the parent container width. By parent container we mean that <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.