Afin d'optimiser l'intégration du paywall à votre contenu, vous pouvez ajouter facilement un effet au dessus de votre widget. Tout se paramètre sur votre Dashboard, dans votre apparence.
Appliquer le style dans le bloc CSS du container parent
Dans la section Apparences > Modifier les propriétés de l'apparence
Il vous suffira pour cela d'intégrer un style spécifique dans le bloc CSS du conteneur parent.
💡 Le conteneur parent est l'i-frame dans lequel le paywall est affiché. Le CSS ajouté dans le bloc CSS du container parent sera ajouté directement au sein de la page dans laquelle le paywall se trouve.
Voici le style à appliquer, que vous pouvez copier/coller dans votre bloc :
#poool-widget {
position: relative;
}
#poool-widget::before {
content: "";
position: absolute;
pointer-events: none;
top: -90px;
left: 0;
width: 100%;
height: 90px;
background: linear-gradient(to bottom, transparent, white);
z-index: 10;
}
#poool-widget:has(iframe.p3-outlet[style*="height: 1px"])::before,
#poool-widget:has(iframe.p3-outlet[style*="height:1px"])::before {
display: none !important;
}
Et voilà, votre effet est prêt ! 🎉
Vous pouvez ajuster les valeurs du top et height en fonction du résultat attendu.
Vu qu'il s'applique au sein de la page contenant l'i-frame, celui-ci ne sera pas visible dans le Dashboard. N'hésitez pas à tester le rendu sur votre site directement.