Personnalisez l'arrière-plan de vos éléments pour qu'il corresponde à l'image de votre entreprise grâce à des designs originaux et attrayants. Choisissez parmi les images d'arrière-plan de 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 à tous. Il est interdit de télécharger des informations personnelles ou confidentielles. 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, consultez la section Médias : Directives et spécifications.
Conseil:
Toutes les vidéos d'arrière-plan YouTube affichent le titre et le nom de l'auteur avant le début de la lecture. Il est impossible de supprimer ces éléments sans modifier manuellement le CSS. De ce fait, l'utilisation des vidéos YouTube comme vidéo d'arrière-plan est déconseillée.
Pour modifier l'arrière-plan des éléments :
- Pour accéder à l'éditeur de conception, cliquez avec le bouton droit sur l'élément, puis cliquez sur Modifier la conception . Si vous êtes en mode Flex ou dans l'Éditeur 2.0, sélectionnez Modifier la conception dans le menu flottant pour ouvrir le panneau de conception.
- Accédez à la section Contexte .
- Selon l'élément, sélectionnez Couleur , Image ou Vidéo et choisissez l'arrière-plan souhaité.
- Certains éléments offrent également la possibilité d'ajouter un diaporama d'images. Pour créer un diaporama, sélectionnez plusieurs images, puis cliquez sur Terminé . Pour plus d'informations sur les diaporamas d'arrière-plan, consultez la section Diaporamas d'images d'arrière-plan .
- Pour plus de détails sur les options de couleur, consultez le sélecteur de couleurs.
- (Facultatif) Lors de la sélection d'une image d'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).
Diaporama d'images d'arrière-plan
Certains conteneurs offrent la possibilité d'ajouter un diaporama d'images en arrière-plan.
Pour créer un diaporama d'arrière-plan :
- Pour accéder à l'éditeur de conception, cliquez avec le bouton droit sur l'élément, puis cliquez sur Modifier la conception . Si vous êtes en mode Flex ou dans l'Éditeur 2.0, sélectionnez Modifier la conception dans le menu flottant pour ouvrir le panneau de conception.
- Accédez à la section Contexte .
- Cliquez sur l'image .
- Cliquez sur le signe + et sélectionnez plusieurs images plutôt qu'une seule image à partir du sélecteur d'images.
- Cliquez sur Terminé .
- (Facultatif) Une fois le diaporama créé, vous pouvez définir les paramètres des diapositives, tels que le style de transition et la vitesse de défilement, à partir du menu de conception des lignes.
- (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 l'image ou le diaporama d'images 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 : il s'agit des différentes manières de contrôler l'affichage des images dans le conteneur. Ces options permettent d'ajuster la façon dont une image s'adapte, se répète ou s'étire pour couvrir la zone. 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 en entier. Bien que l’image ne soit pas rognée, des bandes noires peuvent apparaître de chaque côté, au-dessus et en dessous, selon la taille du conteneur.
- Motif mosaïque : Répète l’image complète à sa taille d’origine, selon un motif 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 complète à sa taille d’origine sans la répéter. Si l’image est plus grande que son conteneur, elle sera rognée. Si elle est plus petite, un espace apparaîtra autour.
- Type de position de l'image (Éditeur 2.0 et mode flex uniquement) : Choisissez parmi Par défaut, Statique ou Parallaxe.
- Position : Ce paramètre détermine l’emplacement de l’image (au centre, en haut, en bas, à gauche ou à droite du conteneur). Il fonctionne conjointement avec les options d’affichage pour contrôler la présentation de l’image.
- Dans l'éditeur 2.0 et en 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 de YouTube, Vimeo ou Dailymotion comme fond d'écran de votre site. Grâce à leur contenu animé, les arrière-plans vidéo captent l'attention des visiteurs et apportent une touche de modernité et d'élégance à votre site.
Pas à pas:
- Pour ajouter une vidéo en arrière-plan à votre site, obtenez l'URL YouTube, Vimeo ou Dailymotion que vous souhaitez utiliser.
- 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 .
- Cliquez sur l'onglet Vidéo . Vous avez les options suivantes :
- Cliquez sur « Importer une vidéo » et sélectionnez la vidéo à importer. Vous pouvez importer jusqu'à 200 Mo, quel que soit le format. Vous pouvez importer une vidéo depuis votre appareil, Facebook, Instagram, Dropbox, Google Drive ou enregistrer une vidéo 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 le champ URL YouTube, Vimeo ou Dailymotion.
- Cliquez sur « Importer une vidéo » et sélectionnez la vidéo à importer. Vous pouvez importer jusqu'à 200 Mo, quel que soit le format. Vous pouvez importer une vidéo depuis votre appareil, Facebook, Instagram, Dropbox, Google Drive ou enregistrer une vidéo avec votre webcam.
Considérations
- Les vidéos YouTube ne sont pas prises en charge sur mobile car elles ne se lancent pas automatiquement sur les appareils iOS.
- Les iPhones dont la batterie est en mode économie d'énergie ne lanceront pas automatiquement la lecture des vidéos sur un site et afficheront à la place un bouton de lecture.
- Les vidéos en arrière-plan ne diffuseront pas de son.
- Le chargement des vidéos peut prendre du temps, consommer de la bande passante et distraire les utilisateurs des liens ou textes importants de votre page ; utilisez donc les vidéos avec parcimonie.
- Envisagez de réduire l'opacité 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'indiquer que le lien direct vers la vidéo (et omettez le paramètre de playlist, qui ressemble à ceci : ?playlist=x1x2f3). Si l'URL de votre vidéo contient ce paramètre, supprimez-le.
- Par exemple : https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2 deviendrait https://www.dailymotion.com/video/x60ktex
Résolution de problèmes et FAQ
La vidéo ne se lance pas automatiquement sur mobile
Si vous utilisez un iPhone, le problème peut être dû au mode économie d'énergie. Désactiver ce mode pourrait le résoudre.
Une autre possibilité réside dans les paramètres du navigateur.
La vidéo est muette.
Par défaut, les vidéos d'arrière-plan sont muettes. Si votre vidéo nécessite du son, pensez à 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 format d'image ou de vidéo est différent de celui du conteneur.
Selon votre objectif, aborder ce problème peut s'avérer complexe. Si l'image ou la vidéo doit s'adapter à un conteneur dont la taille varie en fonction de l'écran, il n'existe pas de solution miracle pour éviter qu'elle ne soit tronquée. La partie visible de l'image ou de la vidéo variera donc en fonction de la taille de l'écran.
Si l’image n’a pas besoin de couvrir toute la surface, l’option Image pleine 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 ).
L'option « plein écran » n'est actuellement pas disponible pour les arrière-plans vidéo. Modifier le format d'image de la vidéo d'origine pourrait résoudre le problème.
Pour plus d'informations sur le format d'image, consultez Média : Directives et spécifications.
La vidéo ne s'affiche pas.
Si la vidéo est ajoutée via un lien, le problème peut être lié à ses paramètres de confidentialité. Pour le vérifier, essayez un autre lien. 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 d'hébergement de la vidéo, et son équipe d'assistance pourra peut-être vous aider.