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

Personnalisez l'arrière-plan des éléments de votre site grâce à des designs créatifs qui s'harmonisent avec votre thème d'entreprise. Choisissez des images d'arrière-plan dans votre 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.

Modifier l'arrière-plan d'un élément

Suivez les étapes ci-dessous pour accéder à l'éditeur de conception et modifier l'arrière-plan d'un élément.

Pas à pas :

1. Cliquez avec le bouton droit sur l'élément, puis cliquez sur Modifier la conception.

   Si vous êtes en mode flexible ou dans l'Éditeur 2.0, sélectionnez Modifier la conception dans le menu flottant pour ouvrir le panneau de conception.

2. Accédez à la section Contexte.
3. Selon l'élément, sélectionnez Couleur, Image ou Vidéo.
4. Sélectionnez l'arrière-plan souhaité.
5. Pour créer un diaporama d'images, sélectionnez plusieurs images et cliquez sur Terminé.
   • 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.
   • 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 diaporama.
6. Facultatif : Si vous sélectionnez une seule image comme arrière-plan, activez l’option « Ne pas optimiser cette image » pour empêcher l’optimisation.

Configuration des images d'arrière-plan

Une fois l'image ou le diaporama configuré, des options de configuration supplémentaires apparaissent. Ces paramètres varient, mais les plus courants sont les suivants :

Styles d'affichage d'images

Ces options permettent de contrôler la manière dont une image s'ajuste, se répète ou s'étire à l'intérieur d'un conteneur :

• Couverture : Étire l’image pour couvrir toute la zone. Le rapport hauteur/largeur est conservé, mais certaines parties de l’image peuvent être coupées.
• Image complète : Affiche l’image en entier, sans la rogner. Des bandes noires peuvent alors apparaître autour de l’image, selon la taille du conteneur.
• Carreau : Répète l'image à sa taille originale selon un motif pour remplir la zone.
• Pas de répétition : Affiche l’image complète une seule fois, à sa taille d’origine.

Positionnement et effets

• Type de position de l'image : disponible dans l'éditeur 2.0 et en mode flexible. Sélectionnez Par défaut, Statique ou Parallaxe.
• Position : Détermine l’emplacement de l’image (centre, haut ou bas, par exemple). Dans l’Éditeur 2.0 et en mode flexible, vous devez définir la position pour chaque taille d’écran.

Utilisation d'arrière-plans vidéo

Utilisez des arrière-plans vidéo pour ajouter du mouvement depuis YouTube, Vimeo ou Dailymotion.

Limites

• Vidéos d'arrière-plan YouTube : les vidéos YouTube affichent le titre et le nom de l'auteur avant le début de la lecture. Comme il est impossible de les supprimer sans modifier manuellement le CSS, nous vous recommandons d'utiliser d'autres sources vidéo pour l'arrière-plan.
• Compatibilité mobile : les vidéos YouTube ne se lancent pas automatiquement sur les appareils iOS. Sur les iPhones en mode économie d’énergie, un bouton de lecture s’affiche à la place de la lecture automatique.
• Audio : Les vidéos d’arrière-plan sont muettes. Utilisez le widget vidéo si vous souhaitez ajouter du son.
• Performances : Les vidéos consomment davantage de bande passante et peuvent distraire les utilisateurs. Utilisez-les avec modération et envisagez de réduire leur opacité pour un effet subtil.
• Listes de lecture Dailymotion : Supprimez les paramètres de liste de lecture de l’URL. Utilisez uniquement le lien direct vers la vidéo. Par exemple, utilisez https://www.dailymotion.com/video/x60ktex au lieu d’un lien contenant ?playlist= .

Étapes :