Comment ajouter des deux-points entre les nombres d'un compte à rebours

Par défaut, l'élément Compte à rebours dans GemPages affiche chaque unité de temps (jours, heures, minutes, secondes) séparément, sans séparateurs entre elles.

Si vous souhaitez que votre compte à rebours ait une apparence plus propre et plus professionnelle, vous pouvez ajouter des deux-points (:) entre chaque nombre à l'aide d'un petit extrait CSS personnalisé. Ce guide vous montrera comment faire cela en quelques étapes seulement.

Avant de commencer

Assurez-vous que vous avez déjà un Élément de compte à rebours ajouté à votre page dans GemPages.

Cette personnalisation fonctionne avec l'élément Countdown dans GemPages et nécessite l'ajout d'un extrait de code CSS personnalisé.

Étape 1 : Ouvrez la zone de code personnalisé de l’élément de compte à rebours

• Ouvrez l'éditeur de page dans GemPages.
• Cliquez sur votre Compte à rebours .
• Cliquez avec le bouton droit sur l'élément.
• Sélectionner Code personnalisé.

Cela ouvrira le panneau de code personnalisé où vous pourrez ajouter votre CSS.

Étape 2 : Ajouter le CSS personnalisé

Collez le code suivant dans la zone Code personnalisé :

.ElementClass #section-countdown > div {

position: relative;

}

.ElementClass #section-countdown > div:not(:last-child):after {

contenu: ':';

position: absolue;

à droite: -2.5px;

haut : 50 % ;

transformer : translateY(-50 % );

hauteur de ligne: 1;

font-size: 16px;

font-weight: bold;

padding-bottom: 3px;

couleur: #121212;

}

Après avoir collé le code, remplacez .ElementClass avec votre classe d'élément réelle. 

Note importante concernant l'espacement

En fonction de la mise en page de votre compte à rebours, de la taille de la police, de l'espacement ou de la configuration de votre design, vous devrez peut-être ajuster les paramètres suivants : bien valeur pour positionner parfaitement le côlon.

Par exemple :

à droite: -2.5px;

Vous pouvez essayer des valeurs comme :

à droite: -1px;

à droite: -4px;

à droite: -6px;

jusqu'à ce que l'espacement vous semble correct sur votre dessin.

Vous pouvez suivre ce tutoriel vidéo pour plus de détails : Tutoriel vidéo sur le métier à tisser

Étape 3 : Enregistrer et publier

• Cliquez à nouveau Enregistrer.
• Publiez ou mettez à jour votre page.
• Prévisualisez la page pour vérifier le style du compte à rebours.

Votre compte à rebours devrait maintenant afficher des deux-points entre chaque série de chiffres.