Vous souhaitez mettre un wall au format bandeau sur votre contenu ?
Grâce à notre template natif et à la fonctionnalité “ajout de CSS parent” dans l’édition de votre apparence, le paramétrage de ce type de format est encore plus facile !
Il faudra pour vous prévoir deux étapes essentielles :
Configurer correctement le HTML de votre page
Paramétrer dans le Dashboard poool votre apparence, ainsi que la manière dont celle-ci va s'afficher sur votre contenu
Intégrer l’élément dans le HTML de la page
Avant toute chose, afin de pouvoir afficher correctement le wall, vous devez intégrer dans le HTML de votre page une div à partir de laquelle votre contenu sera masqué. Vous pouvez lui donner l’id de votre choix. Pour bien démarrer sur l'installation du SDK, veuillez vous référer à notre documentation.
Pour notre exemple dans cet article, nous créons une div "fullscreen-widget" :
<div id="fullscreen-widget">
</div>
💡 Par défaut, le wall Access s'affiche dans la 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.
Comme vu dans notre exemple, vous pouvez tout à fait choisir le nom de cette div, en lui appliquant un id (#le-nom-de-l'id) ou une classe CSS (.le-nom-de-la-classe) selon vos besoins.
Créer une apparence dans votre Dashboard
Dans votre Dashboard Poool Access, créez une apparence avancée.
Choisissez l'option "partir d'un template" et sélectionnez dans la liste qui s'offre à vous "wall bloquant pleine largeur".
A partir du modèle qui vous est proposé, vous pouvez ensuite construire et ajuster votre apparence comme vous le souhaitez. Si vous cherchez plus de détail sur le paramétrage des apparences avancées, n'hésitez pas à consulter notre article dédié.
💡 N’oubliez pas de tester le rendu en version mobile. Selon vos besoins, il peut être intéressant de créer une apparence mobile spécifique.
Gérer le mode d'apparition de votre élément
Pour gérer le mode d’apparition de votre élément, vous pouvez ensuite utiliser la fonctionnalité du "CSS conteneur parent". Toujours dans la section apparences, il s’agit d’une nouvelle fonctionnalité qui apparaîtra en dessous du bloc CSS personnalisé.
Pour y accéder, sélectionnez l'option "modifier les propriétés de l'apparence".
Une fois sur la page "modifier les propriétés de l'apparence", rendez vous sur les blocs CSS à gauche de votre apparence.
Dans notre exemple, on gère l’aspect “par dessus” avec le CSS suivant :
#p3-parent-frame {
position: fixed;
right: 0;
bottom: 0;
left: 0;
}
Vous pouvez aussi aller plus loin et appliquer un voile obscur par-dessus le contenu avec ce CSS :
#p3-parent-frame {
position: fixed;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,.6);
padding-top: 40vh;
}
💡Le CSS du conteneur parent s'appliquera sur votre site directement, mais vous ne pourrez pas avoir une preview du résultat global, à ce stade.
Depuis le Dashboard, vous pouvez donc tester votre apparence, mais pas le rendu définitif de la bannière sur votre contenu.
Prévoyez donc de bien prévisualiser le(s) scénario(s) comprenant cette apparence sur votre site, pour vous assurer que cela répond à vos attentes.
Et hop, le tour est joué ! 🎉
