Paramètres des pop-ups web

Utilisez le panneau Paramètres du pop-up pour personnaliser le style et le positionnement d’une mise en page de contenu de pop-up web. Les onglets de page et + Ajouter une page se trouvent en haut du panneau. Consultez Travailler avec plusieurs pages.

Les Paramètres généraux couvrent l’apparence et le positionnement de l’ensemble du pop-up. La Page actuelle couvre les médias et la taille de la page que vous modifiez.

Note

Ces paramètres contrôlent uniquement le design du pop-up. L’audience, le ciblage de page, le délai, la fréquence et les paramètres de lancement sont configurés dans la campagne de pop-up web.

Images et vidéo

Si la mise en page inclut un ou plusieurs blocs de médias, ouvrez Page actuelle. Chaque bloc de médias a un aperçu et des contrôles.

1. Cliquez sur Changer l’image pour choisir un fichier depuis la Médiathèque de votre projet, ou collez ou modifiez directement l’URL de l’image.
2. Définissez comment l’image remplit son cadre avec Ajustement (Naturel, Couvrir ou Contenir). L’option Ajustement n’est pas affichée pour une image de fond, qui couvre toujours sa zone.
3. Vous pouvez adoucir l’image avec Flou (0 à 20 px).
4. Pour les médias en arrière-plan uniquement, utilisez Assombrir (0 à 100 %) pour ajouter un voile sombre afin que le texte superposé à l’image reste lisible.

Image pour le thème sombre

Avec le thème sombre activé, chaque bloc d’image ajoute une ligne Image pour le thème sombre.

1. Cliquez sur Changer l’image ou définissez l’URL de l’image (thème sombre) pour choisir une image différente pour le mode sombre (par exemple, un logo avec de l’encre foncée).
2. Laissez ce champ vide pour continuer à afficher l’URL de l’image claire dans les deux thèmes.

L’image du thème sombre s’applique partout où l’image de ce bloc est affichée, y compris pour une image de fond ou une affiche de vidéo.

Vidéo

1. Réglez Média sur Vidéo.
2. Entrez une URL de vidéo : un lien direct vers le fichier vidéo. La vidéo n’accepte qu’une URL externe. Vous ne pouvez pas téléverser une vidéo dans la Médiathèque. Exportez-la en MP4 (vidéo H.264, audio AAC) avec le « démarrage rapide » activé (parfois appelé « optimisé pour le web »), afin que le navigateur puisse commencer la lecture avant le téléchargement complet du fichier. Si l’URL ne se charge pas, les visiteurs ne verront que l’affiche.
3. L’option Boucle est activée par défaut, la vidéo est donc lue en continu. Désactivez-la pour arrêter la lecture après une fois.
4. Activez Afficher les contrôles pour afficher les contrôles de lecture, de pause et de volume intégrés du navigateur. Les vidéos démarrent toujours en sourdine. Sans cette option, les visiteurs n’ont aucun moyen d’activer le son.
5. Vous pouvez définir une URL d’affiche : l’image affichée pendant le chargement de la vidéo. Recommandé. Sur un ancien script de pop-up qui ne prend pas en charge la vidéo, seule l’affiche est affichée. Laissez ce champ vide, et ce visiteur ne verra rien à l’endroit où la vidéo devrait se trouver.

Mise en page des médias

Certaines mises en page ajoutent également une section Variables de modèle avec des paramètres de positionnement pour le bloc de médias. Définissez la Largeur de l’image (part de la largeur du pop-up, en pourcentage) et la Position de l’image (Gauche ou Droite) lorsque la mise en page comporte des médias à côté du texte.

La section Variables de modèle n’apparaît que lorsque la mise en page actuelle possède de tels paramètres. Sur une mise en page en barre inférieure, elle propose la Largeur des boutons au lieu des contrôles d’image.

Taille et style du pop-up

1. Sous Page actuelle → TAILLE, laissez Largeur et Hauteur vides pour un pop-up qui s’adapte à son contenu, ou définissez une taille fixe en pixels. Dans un pop-up avec plusieurs pages, chaque page a sa propre taille.
2. Activez Pleine hauteur lorsque la page doit remplir la hauteur disponible.
3. Dans les Paramètres généraux, définissez le Rayon des coins et l’Ombre pour l’arrondi des coins et l’ombre portée du pop-up.
4. Choisissez l’Animation : la manière dont le pop-up apparaît (Par défaut, Aucune, Fondu ou Glissement).

Avec le thème sombre activé, l’Ombre suit le sélecteur de thème soleil/lune. Réglez le sélecteur sur Sombre pour modifier l’ombre de la palette sombre séparément de celle de la palette claire. Une ombre réglée pour une page claire est souvent invisible sur une page sombre, les deux nécessitent donc généralement des valeurs différentes. Laissez l’ombre sombre intacte pour continuer à utiliser la valeur de l’Ombre claire dans les deux thèmes.

Couleurs

1. Cliquez sur Couleurs pour développer la palette de couleurs du pop-up.
2. Définissez l’Arrière-plan et l’Accentuation (boutons) pour l’arrière-plan du pop-up et la couleur d’accentuation appliquée aux boutons.
3. Définissez le Texte et le Texte secondaire pour le corps du texte et pour le texte secondaire tel que les légendes et les chapeaux.
4. Si la mise en page a du texte sur une image de fond, définissez le Texte sur image pour ce texte.

Mode sombre

1. Dans Couleurs, activez Activer le thème sombre pour donner au pop-up une seconde palette pour les visiteurs dont l’appareil est réglé sur un thème de couleurs sombres. Si cette option est désactivée, le pop-up s’affiche toujours avec la palette claire ci-dessus, pour chaque visiteur.
2. Utilisez le sélecteur soleil/lune au-dessus des champs de couleur pour choisir la palette que vous modifiez. Le canevas se redessine dans ce thème.
3. Cliquez sur Auto depuis clair pour (re)générer la palette sombre à partir des couleurs claires actuelles. Les arrière-plans et les surfaces deviennent sombres, et le texte devient clair. L’Accentuation et le Texte sur image sont conservés sans changement. Modifiez l’un des cinq champs par la suite pour affiner les réglages.

Désactiver à nouveau Activer le thème sombre conserve la palette sombre. La réactiver restaure vos modifications au lieu de régénérer à partir de zéro.

Le même sélecteur soleil/lune apparaît à côté de Fermer l’aperçu (Échap) lorsque vous ouvrez l’Aperçu sur un pop-up avec le thème sombre activé. Vous pouvez également vérifier les deux palettes dans l’aperçu en taille réelle.

Le navigateur d’un visiteur décide de la palette qu’il voit, en fonction du paramètre de mode sombre de son système d’exploitation. Il n’y a pas de sélecteur sombre/clair sur le pop-up lui-même. Un site peut forcer un thème pour tout le monde, quel que soit le paramètre du système d’exploitation. Consultez webPopups.colorScheme dans la documentation du SDK Web.

Le thème sombre affecte également les images, l’ombre et la superposition dans ce panneau. Chacun suit le même sélecteur de thème soleil/lune une fois activé.

Positionnement et superposition

1. Dans POSITIONNEMENT, choisissez où le pop-up s’ancre sur la page à l’aide de la grille 3×3 de Position.
2. Définissez le Décalage du bord à la distance en pixels du bord sélectionné.
3. Dans SUPERPOSITION, activez Assombrir la page derrière pour assombrir le reste de la page pendant que le pop-up est affiché, dans les deux thèmes. La désactivation supprime complètement l’assombrissement, y compris les valeurs du thème sombre définies ci-dessous.
4. Définissez la Couleur et l’Opacité pour la superposition (opacité de 0 à 1).

Avec le thème sombre activé, la Couleur et l’Opacité suivent également le sélecteur de thème soleil/lune. Réglez le sélecteur sur Sombre pour donner à l’assombrissement sa propre couleur et intensité pour la palette sombre. Tant que vous ne les modifiez pas, le thème sombre affiche la même Couleur et Opacité que le thème clair.

Sombre

Clair