🚨 Ce cas d'usage nécessite l'intervention de votre équipe technique
Mettre un wall pleine largeur qui couvre l'intégralité de son contenu façon The New York Times, vous en rêviez ? Suivez le guide pour réaliser ce type de wall facilement grâce à Poool Access.
Pas de panique ! On vous explique tout étape par étape avec un exemple dans cet article 🧘
Intégrez des éléments dans le HTML
Par défaut, le wall s'affiche dans une "boîte" qui porte le nom "poool-widget". Si on traduit cela en HTML : le wall s'affiche dans une div portant l'id "poool-widget".
On vient ensuite appliquer des règles de style CSS spécifiquement sur cette div grâce au sélecteur CSS.
💡 Vous avez dit "sélecteur CSS" ?
Un sélecteur CSS est un mot-clef qui permet de désigner une catégorie d'éléments HTML de la page.
En l'occurence ici, on utilisera les sélecteurs de classe et d'id pour cibler les éléments portants ces sélecteurs.
Pour placer votre wall par-dessus votre contenu, il va falloir le déplacer dans une nouvelle div et lui appliquer des nouvelles règles CSS.
Créez une nouvelle div
Dans le HTML de votre page, intégrez une div avec un id de votre choix.
Pour notre exemple, nous créons une div avec l'id "fullscreen-widget", voici ce que nous intégrons au HTML de notre page:
Appliquez du CSS
Pour gérer le style et le comportement de votre nouvelle div, il faut lui ajouter des règles CSS.
Voici ce que nous avons intégré à notre code, notamment pour gérer l'aspect bloquant et "par-dessus" le contenu de notre div :
Maintenant, ajoutez du CSS pour gérer le comportement du wall qui viendra à l'intérieur de cette div.
Si vous utilisez une apparence basique (comme dans notre exemple), utilisez le sélecteur CSS .p3-paywall.
Si vous utilisez une apparance avancée, utilisez le sélecteur CSS .p3-advanced-paywall.
Pour notre exemple, voici le CSS que nous avons intégré à notre code, notamment pour gérer la position du wall dans la div :
Cacher la div
Il faudra également penser à cacher/détruire la div une fois le déblocage effectué.
Pour notre exemple et selon l'intégration Poool utilisée :
Intégration Paywall V5
Intégration Legacy (poool.js)
Voilà, votre élément cible est prêt 🎉
Créez une apparence
Dans votre Dashboard Poool Access, créez une apparence basique ou avancée pour ce wall.
🚨Les apparences avancées ne sont disponibles que dans le plan Enterprise
Pour notre exemple, nous avons créé une apparence basique avec le format Panorama :
Appliquez votre apparence à un scénario ou un widget
Dans votre Dashboard Poool, appliquez votre apparence au scénario ou au widget de votre choix.
Pour un scénario
Allez dans les options du scénario (en bas de la page), sélectionnez l'apparence dans la liste déroulante.
Pour un widget
Allez dans le widget concerné, sélectionnez l'apparence dans la liste déroulante.
Renseignez le sélecteur CSS de l'élément cible
Allez dans chaque widget concerné, puis Configuration Avancée et renseignez dans le champ "Elément parent cible dans la page" le sélecteur CSS (id ou classe) de l'élément cible.
💡 Comment renseigner le sélecteur CSS de l'élément cible ?
Si l'élément a une classe : .le-nom-de-la-classe
Si l'élément a un id : #le-nom-de-l'id
🚨 Si vous souhaitez que l'intégralité des widgets de votre scénario soit affichée dans votre élément cible, il faudra répéter la manœuvre sur chaque widget.
Pour notre exemple, nous renseignons donc "#fullscreen-widget" (car notre élément cible porte un id.) sur les 3 widgets paramétrés dans notre scénario.
Votre wall par-dessus le contenu est prêt ! Vous n'avez plus qu'à activer votre scénario 🚀