Do you want to add a full-width banner to your content?

With our native template and the “add parent CSS” feature in your appearance settings, configuring this type of format is even easier!

You will need to follow two essential steps:

Properly configure the HTML of your page.
Setup your appearance in the Poool Dashboard, as well as how it will be displayed on your content.

Integrate the element into the page's HTML

First of all, to properly display the banner in the desired location, you need to integrate a div into your page's HTML where the banner will appear. You can give it any ID or class you like.

For our example in this article, we create a div called "fullscreen-widget":

<div id="fullscreen-widget">
</div>

🔎 By default, the Access wall is displayed in the div with the ID "#poool-widget".

Next, you apply CSS style rules specifically to this div using the CSS selector.

As seen in our example, you can choose the name of this div, applying an ID (#id-name) or a CSS class (.class-name) according to your needs.

Create an appearance in your Dashboard

In your Poool Access Dashboard, create an advanced appearance.

Choose the "Start from a template" option.

Select the "Full-width wall" from the list of available templates.

Starting from the provided template, you can then build and adjust your appearance as you wish. If you need more details on configuring advanced appearances, feel free to consult our dedicated article.

💡 Don’t forget to test the rendering on mobile. Depending on your needs, it may be beneficial to create a specific mobile appearance.

Manage the way your element is displayed

To manage the display mode of your element, you can use the "parent container CSS" feature. Still in the appearance section, this is a new feature that will appear below the custom CSS block.

To access it, select the option "edit appearance properties".

Once on the "change your paywall's properties" page, navigate to the CSS blocks on the left side of your appearance.

In our example, we manage the "overlay" aspect with the following CSS:

#p3-parent-frame { 
   position: fixed; 
   right: 0; 
   bottom: 0; 
   left: 0; 
}

You can also take it further and apply a masking effect with this CSS:

#p3-parent-frame { 
   position: fixed; 
   right: 0; 
   bottom: 0; 
   left: 0;
   background: rgba(0,0,0,.8);
   overflow: hidden;
   z-index: 100000;
}

💡The parent container CSS will apply directly to your site, but you won't be able to preview the overall result. In the Dashboard, you can test your appearance, but not the final rendering of the banner on your content.

Therefore, be sure to thoroughly test these formats on your site to ensure they meet your expectations.

Save everything, activate the scenario, and voilà, you're done! 🎉