Pourquoi changer l’arrière-plan de la page ?
Parfois, vous souhaiterez peut-être modifier la couleur d'arrière-plan d'une page entière pour correspondre à vos objectifs de conception.
Par exemple, si votre thème utilise un arrière-plan blanc par défaut, vous souhaiterez peut-être le remplacer par du noir pour un look audacieux et moderne qui correspond à l'image de votre marque.
Comment changer l'arrière-plan de la page avec GemPages ?
Étant donné que GemPages n'offre pas actuellement de paramètre direct pour modifier l'arrière-plan, vous devez suivre ces étapes pour l'utiliser code personnalisé:
Étape 1 : ajouter un élément de code personnalisé
- Ouvrez la page que vous souhaitez modifier dans GemPages.
- Glissez et déposez le Code personnalisé élément sur la page.
- Cliquez sur l'élément pour ouvrir ses paramètres.
- Dans la barre latérale gauche, sélectionnez «Ajouter ...bouton " sous le Code personnalisé .
Étape 2 : Insérer et personnaliser le code
Vous êtes maintenant situé dans le panneau de l'éditeur de code.
- Sélectionnez le CSS, puis collez le code suivant dans la boîte.
body {
background: #3355ff !important;
}
L' !important garantit que la couleur d'arrière-plan est appliquée de manière cohérente sur toute la page, remplaçant ainsi tous les styles conflictuels.
- remplacer
#3355ffavec le code couleur hexadécimal de votre choix.
Par exemple: Utilisation #000000 pour le noir, #ffffff pour le blanc, ou tout autre code hexadécimal correspondant à vos préférences de conception, telles que :
#f5f5f5 pour gris clair (fond neutre)
#ff6f61 pour le corail chaud (énergique, accrocheur)
#1a1a1a pour charbon foncé (look moderne)
#f9fafb pour un blanc cassé doux (propre et minimaliste)
- Frappe le Enregistrer bouton pour enregistrer vos modifications.
Résultat
En suivant ces étapes, vous pouvez facilement personnaliser la couleur d’arrière-plan de votre page et créer un design qui correspond à votre vision et à votre image de marque.
Si vous avez besoin d'aide pour changer la couleur d'arrière-plan de votre page, veuillez contacter notre Équipe de soutien.
Erreurs courantes lors du changement de la couleur de fond de la page
Lors de la mise à jour de l'arrière-plan de la page à l'aide de CSS personnalisé, quelques erreurs courantes peuvent entraîner un comportement inattendu de la couleur d'arrière-plan ou un conflit avec votre schéma de couleurs global.
1. La couleur de fond ne correspond pas au thème de couleurs de votre site.
Choisir une couleur de fond qui ne correspond pas à la charte graphique de votre site peut donner l'impression que la page est déconnectée du reste de votre boutique. Vérifiez toujours votre code couleur hexadécimal pour vous assurer qu'il respecte vos chartes graphiques et votre identité visuelle.
2. Oublier d'utiliser !important dans le CSS
Sans !importantLa couleur d'arrière-plan peut être remplacée par les styles par défaut de votre thème ou par d'autres règles CSS, notamment lorsque votre thème définit son propre schéma de couleurs au niveau du corps.
3. Utilisation d'un code couleur hexadécimal invalide ou incorrect
Une valeur hexadécimale incorrecte peut empêcher l'affichage correct de l'arrière-plan. Assurez-vous que le code couleur respecte le format correct (par exemple, #ffffff or #000000) et reflète le schéma de couleurs prévu.
4. On s'attend à ce que la modification s'applique à toutes les pages
L'arrière-plan personnalisé s'applique uniquement à la page où l'élément de code personnalisé est ajouté. Si d'autres pages utilisent des schémas de couleurs différents, ces derniers resteront inchangés, sauf si vous ajoutez le même code à ces pages.
5. Négliger le contraste et la lisibilité
Lorsque vous optez pour des fonds sombres ou colorés, veillez à ce que le texte et les boutons conservent un contraste suffisant. Une couleur de fond esthétique en soi peut nuire à la lisibilité si elle entre en conflit avec votre palette de couleurs actuelle.
FAQ sur la modification de la couleur d'arrière-plan de la page
1. Pourquoi ma couleur d'arrière-plan ne change-t-elle pas après avoir ajouté le code ?
Vérifiez que le code est placé dans un Élément de code personnalisé et que vous avez sélectionné CSS dans l'éditeur. Assurez-vous également que le code hexadécimal est correct (par exemple, #000000 pour le noir).
2. Puis-je utiliser une image comme arrière-plan au lieu d'une couleur ?
Oui. Remplacez le CSS par :
body {
background-image: url("YOUR_IMAGE_LINK_HERE") !important;
background-size: cover;
background-repeat: no-repeat;
}
Assurez-vous que l’URL de l’image est accessible.
3. La modification de l’arrière-plan de la page affecte-t-elle uniquement une page ou toutes les pages ?
La modification de l'arrière-plan s'applique uniquement à la page sur laquelle vous avez ajouté l'élément de code personnalisé. Les autres pages restent inchangées.
4. Comment supprimer la couleur de fond d'une page ?
corps { arrière-plan : transparent !important; }
Merci pour vos commentaires