Comment ajouter une couleur de fond à un compte à rebours

Cet article vous montre comment ajouter une couleur de fond à un élément de minuteur de compte à rebours dans GemPages.

Vous pouvez utiliser deux méthodes en fonction de votre configuration et de vos besoins de personnalisation :

• Option 1 : Ajoutez le compte à rebours à l’intérieur d’un élément Row et utilisez les paramètres d’arrière-plan de Row
• Option 2 : Ajouter un code CSS personnalisé directement au compte à rebours

Option 1 : Ajouter une couleur d’arrière-plan à l’aide d’un élément de ligne

Il s'agit de la méthode la plus simple et la plus recommandée si vous souhaitez styliser visuellement toute la section du compte à rebours sans utiliser de code.

Étape 1 : Placez le minuteur de compte à rebours à l’intérieur d’une rangée

• Ouvrez l'éditeur GemPages.
• Faites glisser un Rangée un élément dans votre mise en page.
• Faites glisser le Compte à rebours à l'intérieur de la rangée.

Cela permet au conteneur Row de contrôler le style d'arrière-plan.

Étape 2 : Définir la couleur d’arrière-plan de la ligne

• Cliquez sur le Rangée .
• Ouvrez le Paramètres panneau.
• Accédez à : Paramètres → Arrière-plan
• Choisissez votre couleur de fond préférée.

Vous pouvez également ajouter:

• Couleurs solides
• Arrière-plans dégradés
• Images d'arrière-plan

Pour plus de détails, consultez ce guide : Comment définir la couleur d'une image ou d'un arrière-plan dans GemPages ?

Option 2 : Ajouter une couleur de fond à l’aide de CSS personnalisé

Si vous souhaitez appliquer l'arrière-plan directement à l'élément Compte à rebours lui-même, vous pouvez utiliser du CSS personnalisé.

Étape 1 : Ouvrez la zone de code personnalisé du compte à rebours

• Cliquez sur l'élément Compte à rebours.
• Cliquez avec le bouton droit sur l'élément.
• Sélectionner Code personnalisé.

Cela ouvre l'éditeur de code personnalisé pour cet élément.

Étape 2 : Ajouter le code CSS

Collez le code suivant dans la zone Code personnalisé :

.ElementClass {

arrière-plan : #DFC4C4 !important ;

}

Remplacez ensuite :

• .ElementClass avec votre classe d'élément réelle
• #DFC4C4 avec votre code couleur préféré

Astuce : Comment obtenir un code couleur

GemPages prend en charge les codes de couleur HEX standard.

Exemple :

#000000 → Noir

#FFFFFF → Blanc

#FF0000 → Rouge

#DFC4C4 → Rose tendre

Vous pouvez utiliser ces sites web pour choisir et générer des codes couleur :

• Codes de couleur HTML
• Générateur de palettes de couleurs Coolors
• Adobe Color
• Chasse aux couleurs

Ces outils vous aident :

• Choisir les couleurs visuellement
• Générer des palettes correspondantes
• Copiez facilement les codes couleur HEX

Étape 3 : Enregistrer et publier

• Cliquez à nouveau Enregistrer.
• Publiez ou mettez à jour votre page.
• Prévisualisez votre page pour vérifier le style d'arrière-plan.

Votre compte à rebours devrait maintenant s'afficher avec la couleur de fond sélectionnée.