Section d'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 incluant vidéos, images et superpositions
Optimisation mobile et paramètres d'arrière-plan responsives
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 dans 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 mobiles responsives.
Fonctionnalités clés :
Prise en charge des arrière-plans vidéo avec images de secours
Superpositions en dégradé avec contrôle de l'opacité
Configurations séparées pour mobile et bureau
Animations et effets de transition
Plusieurs options de dimensionnement et de positionnement de l'arrière-plan
Chargement optimisé pour les performances
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
Cliquer sur Ajouter une section
Sélectionnez Arrière-plan 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 en couleur
Option d'arrière-plan couleur unie
Choisissez n'importe quelle valeur hexadécimale
Paramètres de couleur séparés 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
Plusieurs options de dimensionnement et de positionnement
Optimisation automatique pour le web
Arrière-plan vidéo
Téléchargez des fichiers vidéo MP4 pour des arrière-plans dynamiques
Remplacement automatique par une image sur mobile (pour la performance)
Contrôles de lecture en boucle et lecture automatique
Optimisé pour les performances 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ée 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échargez 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
Bouclage et muet automatiques
Paramètres d'arrière-plan pour mobile
Couleur d'arrière-plan mobile
Paramètre de couleur séparé 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 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 les performances sur les connexions lentes
Utilise la couleur d'arrière-plan comme secours
🎨 Superpositions et effets de dégradé
Superposition haute
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 séparés pour bureau et mobile
Opacité de la superposition haute
Contrôlez la transparence de la superposition haute (0-100%)
Bureau : opacité ajustable pour une flexibilité de design
Mobile : contrôle d'opacité séparé pour l'optimisation mobile
Superposition basse
Couleur inférieure de la superposition
Couleur de superposition en dégradé en bas
Crée des transitions de couleur fluides
Améliore la hiérarchie visuelle
Opacité de la superposition basse
Contrôlez la transparence de la superposition basse
Paramètres indépendants pour bureau et mobile
Permet des effets subtils ou dramatiques
📱 Optimisation mobile
Comportement réactif
Changement automatique pour mobile
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
Couleur, image et paramètres de superposition séparés
Tailles de fichiers optimisées pour l'affichage mobile
Considérations d'interaction adaptées au tactile
Optimisation des performances
Chargement paresseux pour les images d'arrière-plan
Fichiers vidéo compressés pour un chargement plus rapide
Sélection automatique du format en fonction du support du navigateur
⚙️ Personnalisation avancée
Dimensionnement de l'arrière-plan
Cover (Par défaut)
Met à l'échelle 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
Met à l'échelle pour s'adapter au conteneur
Affiche l'image/vidéo en entier
Peut laisser des espaces vides
Auto
Utilise la taille naturelle du média d'arrière-plan
Aucune mise à l'échelle appliquée
Idéal pour des exigences de design spécifiques
Position de l'arrière-plan
Centrer (Par défaut)
Centre l'arrière-plan dans l'espace disponible
Composition équilibrée
Alignement haut/bas
Alignez 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
🚀 Meilleures pratiques
Optimisation des performances
Arrière-plans vidéo
Gardez les fichiers vidéo sous 10 Mo
Utilisez l'encodage H.264 pour une meilleure compatibilité
Fournissez des images d'affiche 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 c'est 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 rapports de contraste pour l'accessibilité
Tenez compte des différentes conditions de visualisation des appareils
Fournissez des couleurs de secours pour les échecs de chargement
Expérience mobile
Priorisez la performance mobile sur les effets visuels
Testez sur de vrais appareils mobiles avec des connexions lentes
Considérez les implications de l'utilisation des données pour les utilisateurs
Fournissez des solutions de repli significatives
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 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 paramètres d'encodage appropriés
Testez sur différents navigateurs
Mauvaise performance mobile
Réduisez la taille des fichiers image
Activez les optimisations d'arrière-plan 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 : repli sur les 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