Filtres Backdrop

L'outil Backdrop vous permet de dessiner des éléments Backdrop et d'appliquer des effets de filtre CSS à leur arrière-plan.

L'outil Backdrop n'est disponible que pour les annonces vidéo et les annonces illustrées.

Les éléments Backdrop doivent être au moins partiellement transparents pour que l'effet de filtre Backdrop appliqué en arrière-plan puisse être visible. Par défaut, les nouveaux éléments Backdrop sont créés avec un niveau d'opacité de 0,5. Vous pouvez le modifier pour ajuster l'intensité de l'effet de filtre Backdrop.

Vous pouvez ajouter un élément Backdrop comme suit :

1. Sélectionnez la forme de l'élément Backdrop en cliquant de manière prolongée sur l'outil Backdrop  dans la barre d'outils jusqu'à ce qu'un menu contextuel s'affiche :
   • Rectangle
   • Ovale
   • Polygone
2. Définissez des options supplémentaires pour la forme de l'élément Backdrop.
   • Élément rectangulaire uniquement : définissez l'arrondi des angles dans la barre d'options de l'outil située en haut. Le bouton Conserver à l'identique  permet d'utiliser le même arrondi pour tous les angles.
   • Élément polygonal uniquement : sélectionnez la forme de votre choix dans la barre d'options de l'outil située en haut. Utilisez l'option Forme libre pour dessiner votre propre forme. Si vous sélectionnez l'option Polygone standard, saisissez le nombre de côtés de votre choix pour le polygone.
3. Dessinez l'élément Backdrop.
   • Maintenez la touche Maj enfoncée tout en dessinant l'élément de sorte que sa largeur et sa hauteur soient égales. L'utilisation de la touche Maj n'a aucune incidence sur les éléments de forme libre ni sur certaines formes prédéfinies dont les côtés sont toujours de longueur égale : les triangles, les losanges, les pentagones, les hexagones et les étoiles.
   • Maintenez la touche Maj enfoncée pour utiliser la position initiale du dessin comme point central de l'élément.
   • Une fois le polygone Backdrop tracé, vous pouvez faire glisser chaque sommet pour modifier sa forme, mais vous ne pouvez pas en modifier le nombre de côtés.
4. Dans le panneau Effets CSS, configurez le filtre Backdrop que vous souhaitez appliquer. Par défaut, c'est le filtre "Flou" qui s'applique aux nouveaux éléments Backdrop. Les filtres suivants sont disponibles :
   • Flou
   • Luminosité
   • Contraste
   • Ombre projetée
   • Nuances de gris
   • Faire pivoter la teinte
   • Inverser
   • Opacité
   • Saturer
   • Sépia

Liste des filtres Backdrop

Flou

Ce filtre applique un effet de flou à l'arrière-plan.

Options de configuration

• Rayon : rayon du flou, compris entre 0 px et 100 px.

Luminosité

Ce filtre permet d'augmenter ou de diminuer la luminosité de l'arrière-plan.

Options de configuration

• Pourcentage : en réglant la luminosité sur 0 %, vous créez un arrière-plan noir, tandis qu'en choisissant 100 %, vous conservez l'arrière-plan intact. Le pourcentage maximal est de 1 000 %.

Contraste

Ce filtre permet d'ajuster le contraste de l'arrière-plan.

Options de configuration

• Pourcentage : en réglant le contraste sur 0 %, vous créez un arrière-plan tout gris, tandis qu'en choisissant 100 %, vous conservez l'arrière-plan intact. Le pourcentage maximal est de 1 000 %.

Ombre projetée

Ce filtre ajoute une ombre projetée à l'arrière-plan. Cet effet n'est parfois visible que s'il est associé à un autre filtre Backdrop ou si l'élément parent est partiellement transparent.

Options de configuration

• Décalage horizontal : distance horizontale jusqu'à l'ombre projetée, comprise entre -100 px et 100 px.
• Décalage vertical : distance verticale jusqu'à l'ombre projetée, comprise entre -100 px et 100 px.
• Rayon : rayon de l'ombre, compris entre 0 px et 100 px.
• Couleur : couleur de l'ombre.

Nuances de gris

Ce filtre convertit l'arrière-plan en nuances de gris.

Options de configuration

• Pourcentage : en réglant la valeur sur 0 %, vous conservez l'arrière-plan intact, tandis qu'en choisissant 100 %, vous créez un arrière-plan tout en nuances de gris.

Faire pivoter la teinte

Ce filtre permet d'ajuster les couleurs de l'arrière-plan.

Options de configuration

• Angle : nombre de degrés de rotation autour de la roue des couleurs, compris entre 0° et 360°.

Inverser

Ce filtre inverse les couleurs de l'arrière-plan.

Options de configuration

• Pourcentage : en réglant la valeur sur 0 %, vous conservez l'arrière-plan intact, tandis qu'en choisissant 100 %, vous inversez complètement ses couleurs. Une valeur de 50 % correspond à un arrière-plan gris.

Opacité

Ce filtre modifie l'opacité de l'arrière-plan. Cet effet n'est parfois visible que s'il est associé à un autre filtre Backdrop.

Options de configuration

• Pourcentage : en réglant l'opacité sur 0 %, vous créez un arrière-plan complètement transparent, tandis qu'en choisissant 100 %, vous conservez l'arrière-plan intact.

Saturer

Ce filtre permet de régler la saturation de l'arrière-plan.

Options de configuration

• Pourcentage : en réglant la valeur sur 0 %, vous créez un arrière-plan sans aucune saturation, tandis qu'en choisissant 100 %, vous conservez l'arrière-plan intact. Le pourcentage maximal est de 1 000 %.

Sépia

Ce filtre convertit l'arrière-plan en sépia.

Options de configuration

• Pourcentage : en réglant la valeur sur 0 %, vous conservez l'arrière-plan intact, tandis qu'en choisissant 100 %, vous créez un arrière-plan tout en nuances sépia.

Ajouter un autre filtre

Vous pouvez appliquer plusieurs filtres aux éléments Backdrop. Pour ajouter un autre filtre :

1. sélectionnez l'élément Backdrop ;
2. dans le panneau Effets CSS, cliquez sur  Ajouter des filtres ;
3. sélectionnez le filtre que vous souhaitez appliquer.

Réorganiser les filtres

Si vous ajoutez plusieurs filtres à un même élément, ils sont appliqués dans l'ordre dans lequel ils figurent dans le panneau Effets CSS.

Vous pouvez réorganiser les filtres comme suit :

1. Pointez sur le nom du filtre que vous souhaitez réorganiser. Trois points  s'affichent.
2. Utilisez les points comme une poignée et glissez-déposez le filtre à l'emplacement de votre choix dans le panneau.

Masquer un filtre

Vous pouvez masquer un filtre pour que son effet n'apparaisse pas dans l'espace de création, dans les aperçus ni dans les fichiers publiés.

Pour masquer un filtre :

1. Pointez sur le nom du filtre.
2. Cliquez sur l'icône Masquer .
3. Pour afficher de nouveau le filtre, cliquez sur l'icône Afficher .

Vous ne pouvez pas modifier les commandes des filtres masqués.

Supprimer un filtre

Pour supprimer un filtre :

1. Pointez sur le nom du filtre.
2. Cliquez sur l'icône Supprimer .

Modifier des éléments Backdrop

Vous pouvez modifier les éléments Backdrop directement dans l'espace de création ou à l'aide du panneau "Propriétés".

Redimensionner un élément Backdrop

Sélectionnez l'élément Backdrop, puis redimensionnez-le comme suit :

• Modifiez la largeur et la hauteur dans le panneau Propriétés.
• Utilisez l'outil de sélection  avec l'option Commande de transformation activée dans la barre d'options de l'outil située en haut.
• Maintenez la touche Maj enfoncée pendant l'opération afin de conserver les proportions.
• Maintenez la touche Maj (Windows) ou Option (Mac) enfoncée tout en faisant glisser l'élément Backdrop pour le redimensionner sans en modifier le point central.

Modifier la courbure des angles d'un élément Backdrop rectangulaire

Vous pouvez modifier les angles d'un élément Backdrop rectangulaire de sorte qu'ils soient droits ou arrondis, et ajuster le rayon de courbure des angles arrondis.

1. Sélectionnez l'élément Backdrop.
2. Dans le panneau Propriétés, ajustez l'arrondi des angles en pixels ou en pourcentage. Si vous définissez l'arrondi sur 0, l'angle est droit.
3. Lorsque le bouton Conserver à l'identique  est activé, la même valeur est appliquée aux quatre coins. Désactivez le bouton  pour configurer chaque angle séparément.

Modifier la forme d'un élément Backdrop polygonal

Vous pouvez ajuster la forme d'un élément Backdrop polygonal dans l'espace de création :

1. Sélectionnez l'élément Backdrop polygonal.
2. Sélectionnez l'outil Élément Backdrop polygonal  dans la barre d'outils. Des poignées apparaissent à chaque sommet.
3. Faites glisser chaque sommet à l'emplacement souhaité.
   • Maintenez la touche Maj enfoncée pendant l'opération pour déplacer le sommet le long d'un seul axe (vertical ou horizontal).

Remarque : Vous ne pouvez pas modifier le nombre de côtés d'un élément Backdrop polygonal existant.

Animer des éléments Backdrop

L'animation des éléments Backdrop n'est disponible que dans les documents vidéo.

Vous pouvez animer la taille, la position et les propriétés de filtre d'un élément Backdrop.

Élément Backdrop ovale animé

Vous pouvez animer les angles arrondis des éléments Backdrop rectangulaires. Pour les éléments Backdrop polygonaux, vous pouvez aussi animer leur forme (mais pas le nombre de leurs côtés) en repositionnant les sommets au niveau d'une image clé.

Éléments Backdrop dans les mises en page multitailles

Les mises en page multitailles ne sont disponibles que dans les annonces illustrées.

Les mises en page à multitailles vous permettent d'appliquer des forçages aux propriétés d'un élément Backdrop, y compris ses propriétés de filtre, pour des tailles et des plages de tailles spécifiques. Elles vous permettent aussi de modifier la forme d'un élément Backdrop polygonal.

Les filtres associés à des forçages affichent un libellé Filtres Backdrop jaune dans le panneau "Responsive".

Comme pour les autres éléments, vous ne pouvez ajouter ou supprimer des éléments Backdrop que lorsque vous modifiez le document de base.