Passer au contenu principal

Mettre en place une pop-in

Mise en place d'une pop-in / popin

Mis à jour aujourd’hui

Vous souhaitez afficher des informations au clic sur un mot, un bouton ou une image ? Pour cela, il faut utiliser une pop-in. Une pop-in est un cadre d'informations qui s'affiche au-dessus du contenu de votre campagne.

Exemple de pop-in d'une campagne Kiabi

Design du pop-in

Avant de configurer votre pop-in, il vous faudra avoir créé les différents éléments graphiques nécessaires. Cliquez sur le bouton ci-dessous pour voir nos recommandations graphiques pour la réalisation de votre pop-in :

Comment mettre en place une pop-in ?

Dans l'onglet Boutons, glissez et déposez un bouton sur votre page. Cliquez ensuite sur le bouton. Les paramètres d'édition du bouton s'affichent, dans le champs "Actions", choisissez "Afficher une pop-in".


Vous avez le choix du type de contenu à afficher dans votre pop-in :

  • Une image

  • Une vidéo

  • Une iFrame

Taille des pop-ins

Pour les différents types de pop-ins, vous pouvez définir leur largeur :

  • Petite (350px)

  • Normale (650px)

  • Large (1200px)

Pop-in image : la largeur s'adapte automatiquement à l’image importée. Ainsi, si votre image dans la pop-in fait 650px*300px, votre pop-in fera 650px de large sur 300px de hauteur. Choisissez une des trois largeurs avant d’uploader votre pop-in.

La hauteur du visuel est libre. Au-delà de 870 px une barre de scroll sera automatiquement ajoutée à la popin.

Pop-in vidéo : choisissez une des trois largeurs décrites précédemment et ajoutez ensuite le lien de votre vidéo Youtube, Dailymotion ou Vimeo. Votre vidéo doit être mode public pour que tout le monde puisse la voir.

Pop-in iFrame : vous avez le choix entre trois largeurs de pop-in. Indiquez ensuite la hauteur de l’iFrame souhaitée.

Automatiquement, la hauteur d’affichage de l’écran fera 870px maximum. Ainsi si vous sélectionnez 870px alors que la page de votre site fait plus que cette hauteur, votre page sera coupée. Il n’y a pas de scroll barre qui s’ajoute automatiquement.

Pour que toute votre page soit affichée, vous devez indiquer la hauteur de toute votre page de votre site. Ainsi, la pop-in affichera une hauteur maximale de 870px mais comportera une scroll barre qui permettra à l’utilisateur de voir l’ensemble de votre site.

✍️ A savoir :

  • Un cache blanc à 70% d’opacité est intercalé automatiquement entre l’écran et la pop in.

  • Une lueur externe noire est appliquée automatiquement pour faire ressortir la pop in.

  • Un bandeau blanc de 35 px avec une croix pour fermer la pop in est automatiquement placé en haut du visuel exporté.

  • La pop in se place automatiquement à 50 px en dessous du haut de l’écran.

  • Il ne peut pas y avoir de bouton dans la popin

Avez-vous trouvé la réponse à votre question ?