Wie man Text und Zahl eines Countdown-Timers in einer Zeile anzeigt

Das Countdown-Timer-Element ist eines der beliebtesten Elemente in GemPages, um Dringlichkeit zu erzeugen und die Konversionsrate auf Shopify-Landingpages, Produktseiten und Werbekampagnen zu steigern.

Standardmäßig werden beim Hinzufügen des Countdown-Timer-Elements per Drag & Drop auf Ihre Seite die Zahl und der Text in zwei separaten Zeilen angezeigt:

• Die Zahl erscheint oben
• Die Textbezeichnung erscheint unten

In einigen Fällen möchten Sie möglicherweise, dass Text und Zahl in einer einzigen Zeile erscheinen, insbesondere für übersichtlichere Layouts, Ankündigungsleisten oder kompakte Werbeabschnitte.

Dieser Artikel zeigt Ihnen, wie Sie mit Hilfe von benutzerdefiniertem Code in GemPages den Countdown-Timer-Text und die Zahl in einer Zeile anzeigen können.

Informationen zum Countdown-Timer-Element in GemPages

Das Countdown-Timer-Element GemPages unterstützt Händler bei der Erstellung zeitkritischer Kampagnen, um die Dringlichkeit zu erhöhen und Kunden zu einem schnelleren Handeln zu bewegen.

Sie können es verwenden für:

• Flash-Verkäufe
• Produkteinführungen
• Zeitlich begrenzte Angebote
• Urlaubskampagnen
• Vorbestellungsaktionen

Wie man Text und Zahlen in einer Zeile anzeigt

Schritt 1: Öffnen Sie den Editor für benutzerdefinierten Code.

Im GemPages-Editor:

• Wählen Sie das Element „Countdown-Timer“ aus.
• Klicken Sie mit der rechten Maustaste auf das Element.
• Wählen Benutzerdefinierter Code

Dies ermöglicht es Ihnen, benutzerdefiniertes CSS speziell für dieses Element hinzuzufügen, ohne den Rest Ihrer Seite zu beeinträchtigen.

Schritt 2: Fügen Sie den benutzerdefinierten CSS-Code hinzu.

Fügen Sie den folgenden Code in den Abschnitt „Benutzerdefinierter Code“ ein:

classID div#section-countdown > div{

Anzeige: Flex;

Align-Items: Center;

Lücke: 5px;

}

Schritt 3: Ersetzen Sie die Klassen-ID.

Vor dem Speichern unbedingt Folgendes ersetzen:

Klassen-ID

mit der tatsächlichen Klassen-ID Ihres Countdown-Timer-Elements.

Schritt 4: Speichern und Veröffentlichen.

Nach Anwendung des Codes werden die Countdown-Zahl und die Textbezeichnung in einer einzigen horizontalen Zeile anstatt vertikal übereinander angezeigt.