Pour optimiser l'impact des éléments Engage et garantir une bonne intégration avec le design d'un site, il est essentiel de bien configurer leur placement. Cet article détaille les différentes méthodes de positionnement sur une page web.
Placement sur une div existante
Tirer parti d’une classe ou d’un ID existant
Les éléments Engage peuvent être insérés directement dans une div spécifique de votre page. Pour cela :
Utilisez une classe CSS ou un ID existant pour identifier la div cible.
Assurez-vous que cette div est bien positionnée dans votre code HTML et que son affichage est prévu pour recevoir un élément Engage.
Sur le dashboard Engage, utilisez la condition d'affichage "dans un élément cible" avec une valeur commençant par "." ou "#" selon le sélecteur à cibler (classe ou ID).
Exemple d'une div #engage-container sur une page :
<div id="engage-container"></div>
Respect des dimensions de la div cible
Si la div cible possède déjà des dimensions définies, telles que :
<div id="engage-container" style="width: 300px; height: 250px;"></div>
L'élément Engage prendra alors automatiquement ces dimensions. Dans le cas contraire, la div cible adoptera des dimensions automatiques en fonction des blocs chargés depuis le dashboard.
Exemple d'une balise présente entre 2 paragraphes d'un article et possédant des dimensions fixes, permettant d'accueillir un élément Engage.
Pour faciliter la construction d'un élément, il peut être souhaitable de refléter les dimensions de la div sur l'élément Engage. Dans ce cas, insérez le css suivant dans les réglages de l'élément :
.p3-app {
width: 300px;
height: 250px;
}Pour les éléments en surimpression : utilisation du CSS parent
Positionnement de l’élément sur l’écran
Les éléments Engage peuvent être affichés en surimpression pour maximiser leur visibilité. Vous avez la possibilité de tout configurer depuis le dashboard, sans besoin d'avoir une div à disposition sur votre site.
Pour gérer les règles de positionnement, utilisez le bloc "CSS conteneur parent" qui se trouve sous :
"Modifier les propriétés de l'élément" > "Configuration avancée".
Sur cet exemple, l’élément s'affichera en bas à droite de l'écran de manière sticky (quel que soit le statut de défilement de la page) :
#p3-parent-frame {
position: fixed;
bottom: 20px;
right: 20px;
}
💡Le sélecteur #p3-parent-frame est celui qu'il faut utiliser. Il sera automatiquement transformé pour cibler l'identifiant unique aléatoire de l'iframe.
Gestion des niveaux d'affichage avec z-index
Si vous observez des superpositions entre l'élément Engage et d'autres parties de votre page, vous avez la possibilité d'utiliser la propriété z-index pour forcer Engage à s'afficher sur la couche la plus visible de l'écran :
#p3-parent-frame {
z-index: 9999;
}Effet flouté / obscurci sur l’écran
Pour mettre en avant un élément Engage et obscurcir le reste de la page, appliquez un effet de flou couplé à une superposition d'opacité sur le bloc "CSS conteneur parent" :
#p3-parent-frame {
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(5px);
}Cela ajoutera un voile semi-transparent et un effet de flou sur l'ensemble de la page, mettant ainsi en avant l’élément Engage.
En complément, utilisez le bloc css principal afin de pouvoir centrer l'élément sur la hauteur de l'écran :
html, body, .p3-app, .background {
min-height: 100vh;
}Enfin, ajoutez une classe nommée "background" sur votre composant de rangée principale :
Exemple d'un élément centré sur l'écran, avec effet flou & obscurci en background, utilisant la fonctionnalité "CSS conteneur parent".
Le positionnement des éléments Engage joue un rôle clé dans leur efficacité. En exploitant les classes existantes, en ajustant les dimensions et en utilisant les fonctionnalités CSS pour appliquer une surimpression, vous assurez une intégration fluide et impactante de vos éléments Engage sur votre site web.