Site Web avancé : arrière-plans des éléments

Personnalisez l'arrière-plan des éléments pour qu'il corresponde au thème de votre entreprise grâce à des designs attrayants et créatifs. Choisissez parmi des images d'arrière-plan personnalisées dans la galerie photo, importez vos propres images, utilisez des arrière-plans vidéo ou appliquez des couleurs et des dégradés pour donner une touche unique à votre site.

Note :

Pour les arrière-plans de page, voir Arrière-plan 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 ou confidentielle ne doit y être téléchargée. Pour supprimer définitivement un fichier, supprimez-le du Gestionnaire de médias.

Pour plus de détails sur les directives relatives aux médias, voir Médias : Directives et spécifications.

Conseil :

Toutes les vidéos d'arrière-plan YouTube affichent le titre et l'auteur de la mise en ligne avant le début du chargement. Il est impossible de supprimer ces éléments sans modifier manuellement le CSS. En raison de ce changement, les vidéos YouTube ne sont pas recommandées comme vidéos d'arrière-plan.

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

  1. Pour accéder à l'éditeur de conception, faites un clic droit sur l'élément, puis cliquez sur « Modifier la conception ». Si vous êtes en mode flexible ou en Éditeur 2.0, sélectionnez « Modifier la conception » dans le menu flottant pour ouvrir le panneau de conception.
  2. Accédez à la section Arrière-plan.
  3. Selon l’élément, sélectionnez Couleur, Image ou Vidéo et choisissez l’arrière-plan souhaité.
    • Certains éléments permettent également d'utiliser des curseurs d'images. Pour créer un curseur d'images, sélectionnez plusieurs images, puis cliquez sur « Terminé ». Pour plus d'informations sur les curseurs d'arrière-plan, consultez la section « Curseurs d'images 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 un arrière-plan, cliquez sur le bouton Ne pas optimiser cette image pour empêcher l'optimisation si une seule image est utilisée (ce paramètre apparaîtra après la sélection d'une image).

Curseurs d'images 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, faites un clic droit sur l'élément, puis cliquez sur « Modifier la conception ». Si vous êtes en mode flexible ou en Éditeur 2.0, sélectionnez « Modifier la conception » dans le menu flottant pour ouvrir le panneau de conception.
  2. Accédez à la section Arrière-plan.
  3. Cliquez sur l'image.
  4. Cliquez sur le signe + et sélectionnez plusieurs images plutôt qu’une seule image dans le sélecteur d’images.
  5. Cliquez sur Terminé.
  6. (Facultatif) Une fois le curseur créé, vous pouvez définir les paramètres de la diapositive tels que le style de transition et la vitesse de la diapositive à partir du menu de conception de ligne.
  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 plus courantes sont :

  • Styles d'affichage des images : voici les différentes façons de contrôler l'affichage des images dans le conteneur. Ces options permettent d'ajuster l'image à sa taille, sa répétition ou son extension. Quatre options sont disponibles :
    • Couverture : étire l'image pour couvrir toute la zone sans perdre son rapport hauteur/largeur (puisqu'elle couvre la zone 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 tronquée, des barres peuvent apparaître de chaque côté ou au-dessus et en dessous de l'image, selon la taille du conteneur.
    • Mosaïque : répète l'image entière à sa taille d'origine selon un motif de mosaïque pour remplir la zone. Si l'image est plus grande que le conteneur, elle ne se répétera pas.
    • Sans répétition : affiche l'image entière à sa taille d'origine, sans répétition. Si l'image est plus grande que le conteneur, elle sera coupée. Si elle est plus petite, un espace sera laissé autour de l'image.
  • Type de position de l'image (Éditeur 2.0 et mode flexible uniquement) : sélectionnez entre Par défaut, Statique ou Parallaxe.
  • Position : ce paramètre détermine l'emplacement de l'image (centre, haut, bas, gauche ou droite du conteneur, par exemple). Ce paramètre fonctionne conjointement avec les options d'affichage de l'image pour contrôler son affichage.
    • Dans Editor 2.0 et le mode flex, la position de l'image d'arrière-plan est définie en fonction de la taille de l'écran.

Arrière-plans vidéo

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

Pas à pas :

  1. Pour ajouter un arrière-plan vidéo à votre site, obtenez l'URL YouTube, Vimeo ou Dailymotion que vous souhaitez utiliser.
  2. Cliquez avec le bouton droit sur la ligne ou la colonne à laquelle vous souhaitez ajouter cet arrière-plan, puis cliquez sur Modifier la conception.
  3. Cliquez sur l'onglet « Vidéo ». Vous disposez des options suivantes :
    • Cliquez sur « Importer une vidéo » et sélectionnez la vidéo que vous souhaitez importer. Vous pouvez importer jusqu'à 200 Mo, tous formats confondus. Vous pouvez importer une vidéo depuis votre appareil, Facebook, Instagram, Dropbox, Google Drive ou l'enregistrer avec votre webcam.
      • Veuillez noter que cette fonctionnalité est encore en développement et sera progressivement déployée auprès de tous les clients.
    • Collez l'URL de la vidéo que vous souhaitez utiliser dans la zone de texte URL YouTube, Vimeo ou Dailymotion.

Considérations

  • Les vidéos YouTube ne sont pas prises en charge sur mobile car elles ne sont pas lues automatiquement sur les appareils iOS.
  • Les iPhones avec une batterie en mode faible consommation ne liront pas automatiquement les vidéos sur un site et afficheront à la place un bouton de lecture.
  • Les vidéos d'arrière-plan ne liront pas de son.
  • Les vidéos peuvent prendre du temps et de la bande passante à charger et peuvent distraire les utilisateurs des liens ou du texte importants sur votre page, alors utilisez les vidéos avec parcimonie.
  • Pensez à réduire l’opacité de l’arrière-plan de la 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 à omettre le paramètre playlist, qui ressemble à ceci :?playlist=x1x2f3). Si l'URL de votre vidéo contient ce paramètre, supprimez-le.

Résolution de problèmes et FAQ

La vidéo ne se lit pas automatiquement sur mobile

Si vous utilisez un iPhone, le problème pourrait être dû au mode basse consommation. Désactiver ce mode pourrait résoudre le problème.

Une autre possibilité est de paramétrer le navigateur.

La vidéo n'a pas de son

Par défaut, les vidéos d'arrière-plan n'ont pas de son. Si votre vidéo nécessite du son, utilisez plutôt 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 complexe à adresser. Si l'image ou la vidéo doit s'adapter à un conteneur qui varie selon la taille de l'écran, il n'existe pas de solution miracle pour éviter qu'elle soit tronquée. La partie visible de l'image ou de la vidéo varie selon la taille de l'écran.

Si l'image n'a pas besoin de couvrir toute la zone, l'option Image complète 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 ).

Les arrière-plans vidéo ne proposent actuellement pas d'option vidéo complète. Ajuster le format d'image de la vidéo d'origine pourrait résoudre le problème.

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

La vidéo ne s'affiche pas

Si la vidéo est ajoutée via un lien, le problème pourrait être lié à ses paramètres de confidentialité. Pour vérifier cela, essayez d'utiliser un autre lien vidéo. Si la nouvelle vidéo fonctionne, cela suggère 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 son équipe d'assistance pourra peut-être vous aider.

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0