Section arrière-plan dynamique
Pour Plain Jane et Plain Jane Interactive
Ce que vous apprendrez
Comment ajouter et configurer des sections d'arrière-plan dynamiques
Options avancées d'arrière-plan comprenant vidéos, images et superpositions
Optimisation mobile et paramètres d'arrière-plan réactifs
Animations et effets de transition
🎯 Qu'est-ce que la section d'arrière-plan dynamique ?
Le Section d'arrière-plan dynamique est un système d'arrière-plan puissant et flexible de Plain Jane v3.1 qui vous permet de créer des arrière-plans de page immersifs avec des options de personnalisation avancées. Contrairement aux arrière-plans statiques, cette section prend en charge les arrière-plans vidéo, les superpositions d'images, les dégradés et les configurations réactives pour mobiles.
Fonctionnalités clés :
Prise en charge des arrière-plans vidéo avec images de secours
Superpositions en dégradé avec contrôles d'opacité
Configurations distinctes pour mobile et bureau
Animations et effets de transition
Multiples options de dimensionnement et de positionnement de l'arrière-plan
Chargement optimisé pour la performance
Disponible dans :
✅ Plain Jane v3.1+
✅ Plain Jane Interactive v2+
🔧 Comment ajouter une section d'arrière-plan dynamique
Aller à Boutique en ligne > Thèmes > Personnaliser
Accédez à la page où vous souhaitez ajouter l'arrière-plan
Cliquez sur Ajouter une section
Sélectionnez Fond dynamique
Configurez les paramètres d'arrière-plan dans la barre latérale
💡 Remarque: Cette section est souvent utilisée sur les pages d'accueil, les pages de destination et les pages promotionnelles spéciales.
🖼️ Options de configuration de l'arrière-plan
Style d'arrière-plan
Arrière-plan coloré
Option d'arrière-plan en couleur unie
Choisissez n'importe quelle valeur hexadécimale
Paramètres de couleur distincts pour bureau et mobile
Idéal pour les designs minimalistes
Arrière-plan image
Téléchargez des images d'arrière-plan personnalisées
Prise en charge des images haute résolution
Multiples options de dimensionnement et de positionnement
Optimisation automatique pour le web
Arrière-plan vidéo
Téléversez des fichiers vidéo MP4 pour des arrière-plans dynamiques
Basculement automatique vers une image sur mobile (pour la performance)
Contrôles de lecture en boucle et de lecture automatique
Optimisé pour la performance et l'utilisation des données
Paramètres d'arrière-plan pour bureau
Couleur d’arrière-plan
Couleur d'arrière-plan principale pour le bureau
Par défaut :
#ffffff(blanc)Utilisé comme secours lorsque les images/vidéos ne se chargent pas
Image d'arrière-plan
Téléchargez une image d'arrière-plan spécifique au bureau
Taille minimale recommandée : 1920x1080px
Prend en charge les formats JPG, PNG, WebP
Vidéo d'arrière-plan
Téléversez une vidéo d'arrière-plan pour le bureau
Format MP4 recommandé
Gardez la taille du fichier sous 10 Mo pour des performances optimales
Paramètres de boucle et de mise en sourdine automatiques
Paramètres d'arrière-plan pour mobile
Couleur d'arrière-plan pour mobile
Paramètre de couleur distinct pour les appareils mobiles
Souvent différent du bureau pour une meilleure expérience mobile
Optimisé pour les écrans plus petits
Image d'arrière-plan pour mobile
Image d'arrière-plan spécifique au mobile
Taille recommandée : 800x1200px (orientation portrait)
Remplace automatiquement les arrière-plans vidéo sur mobile
Afficher l'image d'arrière-plan sur mobile
Basculer pour activer/désactiver les images sur mobile
Améliore la performance sur les connexions lentes
Utilise la couleur d'arrière-plan comme secours
🎨 Superpositions et effets de dégradé
Superposition supérieure
Couleur supérieure de la superposition
Couleur de superposition en dégradé en haut de l'arrière-plan
Crée de la profondeur et améliore la lisibilité du texte
Paramètres distincts pour bureau et mobile
Opacité de la superposition supérieure
Contrôle la transparence de la superposition supérieure (0-100%)
Bureau : opacité réglable pour la flexibilité du design
Mobile : contrôle d'opacité séparé pour l'optimisation mobile
Superposition inférieure
Couleur inférieure de la superposition
Couleur de superposition en dégradé en bas
Crée des transitions de couleur en douceur
Renforce la hiérarchie visuelle
Opacité de la superposition inférieure
Contrôlez la transparence de la superposition inférieure
Paramètres indépendants pour bureau et mobile
Permet des effets subtils ou dramatiques
📱 Optimisation mobile
Comportement responsive
Basculement mobile automatique
Les vidéos basculent automatiquement vers des images sur mobile
Optimisé pour l'utilisation des données mobiles
Maintient la cohérence visuelle entre les appareils
Paramètres spécifiques au mobile
Paramètres distincts pour la couleur, l'image et la superposition
Tailles de fichiers optimisées pour la consultation mobile
Considérations d'interaction adaptées au toucher
Optimisation des performances
Chargement paresseux (lazy loading) pour les images d'arrière-plan
Fichiers vidéo compressés pour un chargement plus rapide
Sélection automatique du format en fonction de la prise en charge du navigateur
⚙️ Personnalisation avancée
Dimensionnement de l'arrière-plan
Cover (Par défaut)
Redimensionne l'arrière-plan pour couvrir toute la zone
Peut recadrer des parties de l'image/vidéo
Idéal pour les effets en plein écran
Contain
Redimensionne pour s'adapter au conteneur
Montre l'image/vidéo en entier
Peut laisser des espaces vides
Auto
Utilise la taille naturelle du média d'arrière-plan
Aucun redimensionnement appliqué
Idéal pour des exigences de conception spécifiques
Position de l'arrière-plan
Centre (Par défaut)
Centre l'arrière-plan dans l'espace disponible
Composition équilibrée
Alignement haut/bas
Aligne en haut ou en bas du conteneur
Utile pour des points focaux spécifiques
Alignement gauche/droite
Contrôle du positionnement horizontal
Possibilités de mise en page créatives
🚀 Bonnes pratiques
Optimisation des performances
Arrière-plans vidéo
Gardez les fichiers vidéo sous 10 Mo
Utilisez le codage H.264 pour une compatibilité optimale
Fournissez des images poster de haute qualité comme secours
Testez sur différentes vitesses de connexion
Optimisation des images
Compressez les images sans perte de qualité
Utilisez le format WebP lorsque possible
Fournissez des tailles appropriées pour le bureau et le mobile
Considérez l'impact de la taille des fichiers sur les temps de chargement
Considérations de conception
Lisibilité du contenu
Utilisez des superpositions pour garantir la lisibilité du texte
Testez les ratios de contraste pour l'accessibilité
Tenez compte des différentes conditions de visualisation selon les appareils
Fournissez des couleurs de secours en cas d'échec de chargement
Expérience mobile
Priorisez la performance mobile plutôt que les effets visuels
Testez sur de vrais appareils mobiles avec des connexions lentes
Considérez les implications de consommation de données pour les utilisateurs
Fournissez des secours pertinents
Accessibilité
Sensibilité au mouvement
Fournissez des options pour désactiver les arrière-plans vidéo
Respectez les préférences de mouvement de l'utilisateur
Utilisez des animations subtiles lorsque possible
Testez avec des outils d'accessibilité
Contraste des couleurs
Assurez un contraste suffisant pour la lisibilité du texte
Testez avec diverses combinaisons d'arrière-plans
Tenez compte des utilisateurs daltoniens
Utilisez les dégradés de superposition de manière stratégique
🔧 Dépannage
Problèmes courants
Vidéo ne se lit pas
Vérifiez le format du fichier vidéo (MP4 recommandé)
Vérifiez que la taille du fichier est inférieure aux limites
Assurez-vous des bons paramètres d'encodage
Testez sur différents navigateurs
Mauvaise performance mobile
Réduisez la taille des fichiers image
Activez les optimisations d'arrière-plan pour mobile
Testez sur de vrais appareils mobiles
Envisagez de désactiver la vidéo sur mobile
Problèmes de chargement
Optimisez les tailles des fichiers image et vidéo
Vérifiez les exigences de connexion Internet
Vérifiez que les formats de fichiers sont pris en charge
Testez avec différents paramètres de mise en cache du navigateur
Compatibilité des navigateurs
Prise en charge vidéo
Navigateurs modernes : prise en charge complète
Navigateurs plus anciens : basculement vers des images
Navigateurs mobiles : remplacement par des images pour la performance
Formats d'image
WebP : Meilleure compression, prise en charge par les navigateurs modernes
JPEG : Compatibilité universelle
PNG : Idéal pour les graphiques avec transparence
Mis à jour