--- title: "Concevoir un pop-up et son teaser" description: "Choisissez le type de pop-up, mettez en forme le pop-up et son bouton de fermeture, et ajoutez un teaser qui invite les visiteurs à l’ouvrir." url: https://scratcher.io/fr/help/sharing/popup-design-and-teaser language: fr --- 1. [Centre d’aide](https://scratcher.io/fr/help) 2. [Publication et partage](https://scratcher.io/fr/help/sharing) 3. Concevoir un pop-up et son teaser # Concevoir un pop-up et son teaser Choisissez le type de pop-up, mettez en forme le pop-up et son bouton de fermeture, et ajoutez un teaser qui invite les visiteurs à l’ouvrir. Une campagne pop-up comporte deux parties : le pop-up lui-même et un teaser facultatif. Le teaser est une petite bannière sur votre site, comme « Tournez la roue et gagnez 🎁 », qui ouvre le pop-up quand on clique dessus. ## Type et position du pop-up Ouvrez **Emplacement** sous **Mise en page** dans l’éditeur : - **Type** : un pop-up standard, une barre en haut ou en bas de l’écran, un slider dans un coin, ou une pleine page. La barre, le slider et la pleine page font partie des forfaits supérieurs. - **Alignement** : l’endroit où se place le pop-up. Les barres peuvent être en haut ou en bas, les sliders à gauche ou à droite, et les pop-ups standard n’importe où sur une grille de 3 × 3. La première fois que vous ouvrez un nouveau pop-up, Scratcher vous demande le domaine sur lequel il sera affiché. Vous pouvez le modifier plus tard sous **Domaine**. ## Mettre en forme le pop-up Cliquez sur **Paramètres du pop-up** au-dessus de la page, ou cliquez sur le bord du pop-up. Dans l’onglet **Styles** : - **Pop-up** : **Arrière-plan**, **Fond d’arrière-plan** (le voile assombri derrière le pop-up), **Bordure**, **Taille**, **Forme**, **Alignement du contenu** et **Marge extérieure**. - **Bouton de fermeture** : son **Arrière-plan**, la couleur de l’**Icône**, la **Taille**, le coin (**Alignement**) et la **Marge extérieure**. Dans l’onglet **Effets**, choisissez comment le pop-up s’ouvre et se ferme, par exemple **Fondu** ou **Glisser**. Options du pop-up : - **Masquer le teaser à la fermeture** : masque aussi le teaser quand quelqu’un ferme le pop-up. - **Masquer après l’envoi du formulaire** : ne montre plus le pop-up aux visiteurs qui s’y sont déjà inscrits. ## Le teaser Sous **Parcours**, la ligne **Teaser** vous permet d’activer ou de désactiver le teaser. Cliquez sur **Paramètres** dans son menu pour le configurer : - **Action** : **Afficher le pop-up**, **Lien** ou **Aucun**. - **Masquer sur ordinateur**, **Masquer sur tablette**, **Masquer sur mobile**. - **Styles** : l’**Arrière-plan**, la **Bordure**, la **Taille**, la **Forme**, le coin (**Alignement**) et la **Marge extérieure** du teaser, ainsi que son propre bouton de fermeture. Le teaser s’affiche dès le chargement de la page ; les déclencheurs de **Affichage** ne s’appliquent qu’au pop-up. Concevez le teaser comme une page, et enregistrez-le avec **Enregistrer le teaser comme modèle** pour le réutiliser. ## Image d’arrière-plan dans les pop-ups Les pop-ups disposent d’un élément **Arrière-plan de l’image** qui remplit un côté du pop-up avec une image. Réglez sa **Hauteur sur mobile** pour contrôler la place qu’il prend sur l’écran des téléphones. ## Ouvrir un pop-up depuis votre propre bouton Avec l’option de déclenchement **Déclencheur au clic**, le pop-up s’ouvre quand quelqu’un clique sur un élément de votre site web. Saisissez le sélecteur CSS de l’élément, par exemple `.open-competition`. Demandez à votre développeur web si vous avez un doute. Publication et partage - [Partager le lien et le code QR de votre campagne](https://scratcher.io/fr/help/sharing/share-your-campaign-link) - [Intégrer une campagne à votre site web](https://scratcher.io/fr/help/sharing/embed-on-your-website) - [Afficher une campagne en pop-up](https://scratcher.io/fr/help/sharing/show-a-campaign-as-a-popup) - [Concevoir un pop-up et son teaser](https://scratcher.io/fr/help/sharing/popup-design-and-teaser) - [Choisir l’adresse web de votre campagne](https://scratcher.io/fr/help/sharing/campaign-url-and-own-domain) - [Envoyer des e-mails depuis votre propre domaine](https://scratcher.io/fr/help/sharing/email-sending-domain) - [Faire tourner vos campagnes avec les planifications](https://scratcher.io/fr/help/sharing/campaign-schedules) ## Articles associés - [Comment fonctionnent les réglages d’un élément](https://scratcher.io/fr/help/elements/element-settings-basics): Les onglets Contenu, Styles, Paramètres et Effets, les tailles, formes, bordures, couleurs et arrière-plans, les modifications pour mobile et les options. - [Intégrer une campagne à votre site web](https://scratcher.io/fr/help/sharing/embed-on-your-website): Placez une campagne dans une page de votre site web grâce au script d’intégration, vérifiez qu’elle fonctionne et corrigez les problèmes courants. - [Afficher une campagne en pop-up](https://scratcher.io/fr/help/sharing/show-a-campaign-as-a-popup): Installez le script une fois, choisissez le type de pop-up, et décidez sur quelles pages, quand et à quelle fréquence il s’affiche. ## Besoin d’aide supplémentaire ? De vraies personnes sont là pour vous aider. Si vous utilisez déjà Scratcher, le plus rapide est le chat dans la plateforme. - **[Discutez avec nous](https://platform.scratcher.io/login)** Connectez-vous et cliquez sur le bouton de chat en bas à droite. Rex répond immédiatement, et notre équipe est à un clic. - **[Prenez rendez-vous](https://scratcher.io/fr/book-a-meeting)** Un appel vidéo gratuit de 30 minutes avec notre équipe : une démonstration, des idées de campagnes ou de l’aide pour votre configuration. - **[Écrivez-nous](mailto:contact@scratcher.io)** Écrivez à contact@scratcher.io et nous vous répondrons.