Aller au contenu principal
FR Deutsch Español Italiano Português

Contexte des éléments

Personnalisez l'arrière-plan des éléments en fonction du thème de votre entreprise grâce à des designs accrocheurs et créatifs. Choisissez parmi des images d'arrière-plan personnalisées dans la galerie de photos, téléchargez vos propres images, utilisez des arrière-plans vidéo ou appliquez des couleurs et des dégradés pour ajouter une touche unique à votre site

Note

Pour les arrière-plans de page, voir Contexte du thème.

Tout fichier (texte, image, vidéo ou audio) téléchargé sur le système est accessible au public. Aucune information personnelle et/ou confidentielle ne doit être téléchargée. Pour supprimer complètement le fichier, supprimez-le du Media Manager.

.

Astuce

Toutes les vidéos d'arrière-plan YouTube affichent le titre et l'expéditeur de la vidéo avant le début du chargement de la vidéo. Il n'est pas possible de supprimer ces éléments sans modifier manuellement le CSS. En raison de cette modification, les vidéos YouTube ne sont pas recommandées pour les vidéos d'arrière-plan.

Pour modifier l'arrière-plan des éléments :

  1. Pour accéder à l'éditeur de conception, cliquez avec le bouton droit sur l'élément, puis cliquez surModifier le design. Ou si vous êtes en mode Flex ou Editor 2.0, sélectionnez Modifier le design dans le menu flottant pour ouvrir le panneau de conception. Cliquez sur l'élément pour ouvrir le menu flottant, puis cliquez sur l'option permettant de modifier le design.

  2. Naviguez jusqu'au Contexte section.

  3. En fonction de l'élément, sélectionnez couleur, Image, ou Vidéo et sélectionnez l'arrière-plan souhaité.

    • Certains éléments disposent également d'une option pour les curseurs d'image. Pour créer un curseur d'image, sélectionnez plusieurs images, puis cliquez sur Terminé. Pour des informations détaillées sur les curseurs d'arrière-plan, voir Sliders d'image d'arrière-plan.

    • Pour plus de détails sur les options de couleur, voir Sélecteur de couleurs

  4. (Facultatif)Lorsque vous sélectionnez une image pour l'arrière-plan, cliquez surN'optimisez pas cette imagebascule pour empêcher l'optimisation si une seule image est utilisée (ce paramètre apparaît une fois qu'une image a été sélectionnée).

Sliders d'image d'arrière-plan

Certains conteneurs offrent la possibilité d'ajouter un curseur d'image d'arrière-plan.

Pour créer un curseur d'arrière-plan :

  1. Pour accéder à l'éditeur de conception, cliquez avec le bouton droit sur l'élément, puis cliquez surModifier le design. Ou si vous êtes en mode Flex ou Editor 2.0, sélectionnez Modifier le design dans le menu flottant pour ouvrir le panneau de conception. Cliquez sur l'élément pour ouvrir le menu flottant, puis cliquez sur l'option permettant de modifier le design.

  2. Naviguez jusqu'au Contexte section.

  3. Cliquez Image.

  4. Cliquez sur le signe + et sélectionnez plusieurs images plutôt qu'une seule dans le sélecteur d'images.

  5. Cliquez Terminé.

  6. (Facultatif) Une fois le curseur créé, vous pouvez définir les paramètres de la diapositive, tels que le style de transition de la diapositive et la vitesse de la diapositive, dans le menu de conception des lignes.

  7. (Facultatif) Toutes les autres options d'image d'arrière-plan, telles que la superposition d'arrière-plan, le positionnement et le style d'affichage, peuvent être appliquées au curseur.

Configuration de l'image d'arrière-plan

Une fois qu'une image ou un curseur d'image a été configuré, des options de configuration supplémentaires seront disponibles.

Bien que les options puissent varier, les deux options les plus courantes sont les suivantes :

  • Styles d'affichage des images : ce sont les différentes manières dont vous pouvez contrôler la façon dont l'image ou les images sont affichées dans le conteneur. Ces options vous permettent de régler la façon dont une image s'ajuste, se répète ou s'étire pour couvrir la zone. Il existe quatre options :

    • Couvercle: étire l'image pour couvrir toute la zone sans perdre son rapport hauteur/largeur (puisqu'elle couvre la surface du conteneur, certaines parties de l'image peuvent être coupées).

    • Image complète: affiche l'image complète. Bien que l'image ne soit pas coupée, des barres peuvent apparaître de chaque côté ou au-dessus et en dessous de l'image, en fonction de la taille du conteneur

    • Tuile: Répète l'image complète à sa taille d'origine sous forme de mosaïque pour remplir la zone. Si l'image est plus grande que le conteneur, elle ne se répétera pas.

    • Pas de répétition: affiche l'image complète à sa taille d'origine sans la répéter. Si l'image est plus grande que le conteneur, elle sera coupée. S'il est plus petit que le conteneur, il y aura de l'espace autour de l'image.

  • Type de position de l'image (Editor 2.0 et mode Flex uniquement) : Choisissez entre Par défaut, Statique ou Parallax. Notez que la position statique ne fonctionnera pas sur les appareils iOS.

  • Poste: Ce paramètre détermine l'endroit où l'image est placée, par exemple au centre, en haut, en bas, à gauche ou à droite du conteneur. Le réglage de position fonctionne conjointement avec les options d'affichage de l'image pour contrôler le mode d'affichage de l'image. La position de l'image d'arrière-plan est définie par taille d'écran dans Editor 2.0 et en mode Flex.

image-display-configuration.png

Arrière-plans vidéo

Utilisez les arrière-plans vidéo pour ajouter rapidement une vidéo depuis YouTube, Vimeo ou Dailymotion. Les arrière-plans vidéo peuvent attirer l'attention des visiteurs grâce à leur contenu animé et ajouter une touche moderne et élégante à n'importe quel site.

Astuce

Toutes les vidéos d'arrière-plan YouTube affichent le titre et l'expéditeur de la vidéo avant le début du chargement de la vidéo. Il n'est pas possible de supprimer ces éléments sans modifier manuellement le CSS. En raison de cette modification, les vidéos YouTube ne sont pas recommandées pour les vidéos d'arrière-plan.

Pour ajouter un arrière-plan vidéo à un conteneur :

  1. Préparez une vidéo à mettre en ligne ou l'URL partageable d'une vidéo mise en ligne sur YouTube, Vimeo ou Dailymotion.

  2. Cliquez avec le bouton droit sur l'élément auquel vous souhaitez ajouter cet arrière-plan, puis cliquez sur Modifier le design.

  3. Naviguez jusqu'au Contexte section.

  4. Cliquez surVidéoonglet. Les options suivantes s'offrent à vous :

    • Cliquez Télécharger une vidéo et sélectionnez la vidéo que vous souhaitez mettre en ligne. Vous pouvez télécharger jusqu'à 200 Mo dans tous les formats. Vous pouvez télécharger une vidéo depuis votre appareil, Facebook, Instagram, Dropbox, Google Drive ou enregistrer une vidéo à l'aide de votre webcam.

    • Collez l'URL de la vidéo que vous souhaitez utiliser dans la zone de texte URL YouTube, Vimeo ou Dailymotion.

      Note

      Les vidéos YouTube ne sont pas prises en charge sur les appareils mobiles car elles ne se diffusent pas automatiquement sur les appareils iOS.

Considérations

  • Les vidéos YouTube ne sont pas prises en charge sur les appareils mobiles car elles ne se diffusent pas automatiquement sur les appareils iOS.

  • Les iPhones dont la batterie est en mode faible consommation ne diffuseront pas automatiquement les vidéos sur un site et afficheront à la place un bouton de lecture.

  • Les vidéos d'arrière-plan n'émettront pas de son.

  • Le chargement des vidéos peut prendre du temps et de la bande passante, et peuvent détourner l'attention des utilisateurs des liens importants ou du texte de votre page. Utilisez donc les vidéos avec parcimonie.

  • Pensez à ajouter une superposition avec une opacité plus élevée de l'arrière-plan vidéo pour rendre l'effet plus subtil.

  • Lorsque vous ajoutez une vidéo Dailymotion faisant partie d'une playlist, veillez à n'ajouter que le lien direct vers la vidéo (et omettez le paramètre de playlist, qui ressemble à ceci : ? liste de lecture = x1x2f3). Si l'URL de votre vidéo comporte ce paramètre, supprimez-le simplement. Par exemple : https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2 serait https://www.dailymotion.com/video/x60ktex

Modifier la couleur d'arrière-plan de la section lors du défilement

Définissez une couleur d'arrière-plan qui assure une transition fluide lorsque les utilisateurs font défiler la section, créant ainsi un repère visuel dynamique qui améliore l'engagement et met en évidence les modifications de contenu.

Pour modifier la couleur de fond d'une section lors du défilement :

  1. Cliquez sur la section souhaitée pour ouvrir le menu flottant, puis cliquez sur Design.

  2. Développez le Style section du panneau de conception.

  3. Sélectionnez un Couleur de fond. Ce sera la première couleur que les utilisateurs verront lorsqu'ils feront défiler la page vers le bas.

  4. Activez le Changer de couleur sur le défilement basculer.

  5. Sélectionnez un Couleur de fond sur le parchemin. Il s'agit de la couleur vers laquelle votre section passe lorsque l'utilisateur fait défiler la page vers le bas.

    image__41_.png

Résolution des problèmes et FAQ

La lecture de la vidéo n'est pas automatique sur mobile

Si vous utilisez un iPhone, le problème peut être dû au mode faible consommation. La désactivation du mode faible consommation peut résoudre le problème.

Les paramètres du navigateur constituent une autre possibilité.

La vidéo n'a pas de son

Les vidéos d'arrière-plan, par défaut, n'émettent pas de son. Si votre vidéo nécessite du son, pensez plutôt à utiliser le widget vidéo.

Une partie de ma vidéo ou de mon image est coupée

Cela est dû au fait que le rapport hauteur/largeur de l'image ou de la vidéo est différent de celui du conteneur.

Selon votre objectif, cela peut être difficile à atteindre. Si l'image ou la vidéo doit s'adapter à un conteneur qui change en fonction de la taille de l'écran, il n'existe pas de solution parfaite pour éviter qu'elle ne soit coupée. La partie visible de l'image ou de la vidéo varie en fonction de la taille de l'écran.

S'il n'est pas nécessaire que l'image couvre toute la surface, Image complète l'option dans les options d'affichage de l'image peut être utilisée (voir la section de cet article, Configuration de l'image d'arrière-plan).

arrière-plans vidéo ne disposent pas actuellement d'une option vidéo complète. Le réglage du rapport hauteur/largeur de la vidéo d'origine peut y remédier.

Pour plus d'informations sur le rapport hauteur/largeur, voir Directives et spécifications relatives aux médias.

La vidéo ne s'affiche pas

Si la vidéo est ajoutée via un lien, le problème peut être lié aux paramètres de confidentialité de la vidéo. Pour vérifier cela, essayez d'utiliser un autre lien vidéo. Si la nouvelle vidéo fonctionne, cela signifie que les paramètres de confidentialité de la vidéo d'origine empêchent son affichage sur le site.

La solution dépendra de la plateforme hébergeant la vidéo, et leur équipe d'assistance pourra peut-être vous aider.

Was this article helpful?

Retour en haut