Comment afficher le texte et le nombre d'un compte à rebours sur une seule ligne

Le Élément de compte à rebours est l'un des éléments les plus populaires de GemPages pour créer un sentiment d'urgence et booster les conversions sur les pages de destination, les pages produits et les campagnes promotionnelles Shopify.

Par défaut, lorsque vous faites glisser et déposez l'élément Compte à rebours sur votre page, le nombre et le texte s'affichent sur deux lignes distinctes :

• Le numéro apparaît en haut
• L'étiquette de texte apparaît ci-dessous

Dans certains cas, vous préférerez peut-être que le texte et le nombre apparaissent sur une seule ligne, notamment pour des mises en page plus épurées, des barres d'annonce ou des sections promotionnelles compactes.

Cet article vous montre comment afficher le texte et le nombre du compte à rebours sur une seule ligne à l'aide de code personnalisé dans GemPages.

À propos de l'élément de compte à rebours dans GemPages

Le Élément de compte à rebours GemPages aide les marchands à créer des campagnes à durée limitée pour accroître l'urgence et encourager les clients à agir plus rapidement.

Vous pouvez l'utiliser pour:

• Ventes flash
• Lancements de produits
• Offres à durée limitée
• Campagnes de vacances
• Promotions de précommande

Comment afficher du texte et un nombre sur une seule ligne

Étape 1 : Ouvrez l’éditeur de code personnalisé

Dans l'éditeur GemPages :

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

Cela vous permet d'ajouter du CSS personnalisé spécifiquement pour cet élément sans affecter le reste de votre page.

Étape 2 : Ajouter le code CSS personnalisé

Collez le code suivant dans la section Code personnalisé :

classID div#section-countdown > div{

affichage: flex;

align-items : center ;

écart : 5 px ;

}

Étape 3 : Remplacer l’identifiant de classe

Avant d'enregistrer, assurez-vous de remplacer :

classeID

avec l'identifiant de classe réel de votre élément Compte à rebours.

Étape 4 : Enregistrer et publier.

Après application du code, le nombre du compte à rebours et le texte s'afficheront sur une seule ligne horizontale au lieu d'être empilés verticalement.