Personnalisez l'arrière-plan des éléments pour qu'il corresponde au thème de votre entreprise grâce à des designs accrocheurs et créatifs. Choisissez 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.
Remarque
Pour les arrière-plans de page, voir Thème d'arrière-plan.
Tout fichier (texte, image, vidéo, audio) importé sur le système est visible du public. Aucune information personnelle et/ou confidentielle ne doit être importée. Pour supprimer un fichier dans sa totalité, supprimez-le depuis le gestionnaire de médias.
Pour plus d'informations sur les lignes directrices relatives aux médias, voir Médias : Lignes directrices et spécifications.
Conseil
Dans le cas des vidéos YouTube en fond, le titre de la vidéo et la personne à l'origine du chargement s'affichent avant la lecture. Il est impossible de supprimer ces éléments sans modifier le CSS manuellement. C'est la raison pour laquelle les vidéos YouTube ne sont pas recommandées pour votre fond.
Pour modifier l'arrière-plan des éléments :
-
Accédez à la section Arrière-plan.
-
En fonction de l'élément, sélectionnez Couleur, Image ou Vidéo et choisissez l'arrière-plan souhaité.
-
Certains éléments offrent également la possibilité de faire défiler des images. Pour créer un curseur d'image, sélectionnez plusieurs images, puis cliquez sur Terminé. Pour plus d'informations sur les curseurs d'arrière-plan, voir Curseurs d'image d'arrière-plan.
-
Pour plus d'informations sur les options de couleur, reportez-vous à la section Sélecteur de couleurs.
-
-
(Facultatif) Lors de la sélection d'une image d'arrière-plan, cliquez sur l'option Ne pas optimiser cette image pour empêcher l'optimisation si une seule image est utilisée (ce paramètre apparaît après la sélection d'une image).
Certains conteneurs offrent la possibilité d'ajouter un curseur d'image de fond.
Pour créer un curseur d'arrière-plan :
-
Accédez à la section Arrière-plan.
-
Cliquez sur l'image.
-
Cliquez sur le signe + et sélectionnez plusieurs images plutôt qu'une seule dans le sélecteur d'images.
-
Cliquez sur Terminé.
-
(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 la ligne.
-
(Facultatif) Toutes les autres options d'image d'arrière-plan, telles que l'incrustation d'arrière-plan, le positionnement et le style d'affichage, peuvent être appliquées au curseur.
Une fois qu'une image ou un curseur d'image a été configuré, d'autres options de configuration sont disponibles.
Les options peuvent varier, mais les deux plus courantes sont les suivantes :
-
Styles d'affichage des images : il s'agit des différentes façons de contrôler l'affichage de l'image ou des images dans le conteneur. Ces options vous permettent d'ajuster la façon dont une image s'adapte, se répète ou s'étire pour couvrir la zone. Vous avez le choix entre quatre options :
-
Couvrir: L'image est étirée pour couvrir la totalité de la zone sans perdre ses proportions (étant donné qu'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 coupée, des barres peuvent apparaître de chaque côté ou au-dessus et au-dessous de l'image, en fonction de la taille du conteneur.
-
Carreau: Répète l'image complète à sa taille d'origine dans un motif de tuiles pour remplir la zone. Si l'image est plus grande que le conteneur, elle ne sera pas répétée.
-
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. Si l'image est plus petite que le conteneur, il y aura de l'espace autour de l'image.
-
-
Type de position de l'image (éditeur 2.0 et mode flex uniquement) : Sélectionnez Défaut, Statique ou Parallaxe.
-
Position: Ce paramètre détermine l'emplacement de l'image, par exemple au centre, en haut, en bas, à gauche ou à droite du conteneur. Le paramètre de position est associé aux options d'affichage de l'image pour contrôler la manière dont l'image est affichée.
-
Dans l'éditeur 2.0 et le mode flex, la position de l'image de fond est définie en fonction de la taille de l'écran.
-
Utilisez les arrière-plans vidéo pour ajouter rapidement une vidéo de YouTube, Vimeo ou Dailymotion. Les arrière-plans vidéo permettent d'attirer l'attention des visiteurs grâce à un contenu en mouvement et d'ajouter un aspect moderne et élégant à n'importe quel site.
Conseil
Dans le cas des vidéos YouTube en fond, le titre de la vidéo et la personne à l'origine du chargement s'affichent avant la lecture. Il est impossible de supprimer ces éléments sans modifier le CSS manuellement. C'est la raison pour laquelle les vidéos YouTube ne sont pas recommandées pour votre fond.
Pour ajouter un arrière-plan vidéo à un conteneur :
-
Ayez une vidéo prête à être téléchargée ou l'URL partageable d'une vidéo qui est téléchargée sur YouTube, Vimeo ou Dailymotion.
-
Cliquez avec le bouton droit de la souris sur l'élément auquel vous souhaitez ajouter cet arrière-plan, puis cliquez sur Modifier la conception.
-
Accédez à la section Arrière-plan.
-
Cliquez sur l'onglet Vidéo. vous disposez des options suivantes :
-
Cliquez sur Charger une vidéo et sélectionnez la vidéo que vous souhaitez charger. 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 destinée à l'URL YouTube, Vimeo ou Dailymotion.
Remarque
Les vidéos YouTube ne sont pas prises en charge sur mobile, car elles ne bénéficient pas de la lecture automatique sur les appareils iOS.
-
-
Les vidéos YouTube ne sont pas prises en charge sur mobile, car elles ne bénéficient pas de la lecture automatique sur les appareils iOS.
-
Les iPhones dont la batterie est en mode économie d'énergie ne liront pas automatiquement les vidéos sur un site et présenteront à la place un bouton de lecture.
-
Les vidéos d'arrière-plan n'émettent pas de son.
-
Le chargement des vidéos peut prendre du temps et nécessiter du débit, et celles-ci peuvent distraire les utilisateurs des liens ou textes importants sur votre page. Utilisez donc les vidéos avec parcimonie.
-
Envisagez d'ajouter une superposition avec une opacité plus élevée de l'arrière-plan de la vidéo pour rendre l'effet plus subtil.
-
Lorsque la vidéo Dailymotion que vous souhaitez ajouter fait partie d'une playlist, assurez-vous d'inclure uniquement le lien direct vers la vidéo et d'ignorer le paramètre de playlist (?playlist=x1x2f3 ou assimilé). Si ce paramètre est intégré dans l'URL de votre vidéo, supprimez-le. Par exemple, si le lien est https://www.dailymotion.com/video/x60ktex?playlist=x5x6f2, il doit devenir https://www.dailymotion.com/video/x60ktex.
Cela est dû au fait que le rapport d'aspect de l'image ou de la vidéo est différent de celui du conteneur.
En fonction de votre objectif, il peut s'agir d'un défi à relever. Si l'image ou la vidéo doit s'intégrer dans 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.
Si l'image ne doit pas couvrir toute la surface, vous pouvez utiliser l'option Image complète dans les options d'affichage de l'image (voir la section de cet article, Configuration de l'image d'arrière-plan).
Les arrière-plans vidéo ne disposent pas actuellement d'une option de vidéo complète. L'ajustement du rapport hauteur/largeur de la vidéo d'origine peut résoudre le problème.
Pour plus d'informations sur le rapport d'aspect, voir Rapport d'aspect et résolution.
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 le vérifier, 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 originale l'empêchent de s'afficher sur le site.
La solution dépendra de la plateforme qui héberge la vidéo, et son équipe d'assistance pourra vous aider.