Wie man Doppelpunkte zwischen Countdown-Zahlen einfügt

Standardmäßig zeigt das Countdown-Element in GemPages jede Zeiteinheit (Tage, Stunden, Minuten, Sekunden) separat ohne Trennzeichen an.

Wenn Sie möchten, dass Ihr Countdown-Timer übersichtlicher und professioneller aussieht, können Sie Doppelpunkte hinzufügen (:) zwischen den einzelnen Zahlen mithilfe eines kleinen benutzerdefinierten CSS-Codeausschnitts. Diese Anleitung zeigt Ihnen in wenigen Schritten, wie das geht.

Bevor du anfängst

Stellen Sie sicher, dass Sie bereits über ein Countdown-Element Wurde Ihrer Seite in GemPages hinzugefügt.

Diese Anpassung funktioniert mit dem Countdown-Element in GemPages und erfordert das Hinzufügen eines benutzerdefinierten CSS-Codeausschnitts.

Schritt 1: Öffnen Sie den benutzerdefinierten Codebereich des Countdown-Elements.

• Öffnen Sie den Seiteneditor in GemPages.
• Klicken Sie auf Ihre Countdown Element.
• Klicken Sie mit der rechten Maustaste auf das Element.
• Auswählen Benutzerdefinierter Code.

Dadurch öffnet sich das Feld für benutzerdefinierten Code, in dem Sie Ihr CSS hinzufügen können.

Schritt 2: Benutzerdefiniertes CSS hinzufügen

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

.ElementClass #section-countdown > div {

position: relative;

}

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

Inhalt: ':';

position: absolute;

rechts: -2.5px;

oben: 50%;

transformieren: translateY(-50%);

Zeilenhöhe: 1;

font-size: 16px;

Schriftdicke: fett;

Polsterung unten: 3px;

Farbe: #121212;

}

Nach dem Einfügen des Codes ersetzen Sie .ElementClass mit Ihrer tatsächlichen Elementklasse. 

Wichtiger Hinweis zum Abstand

Je nach Countdown-Layout, Schriftgröße, Zeilenabstand oder Designeinstellungen müssen Sie möglicherweise die Recht Wert, um den Dickdarm perfekt zu positionieren.

Beispielsweise:

rechts: -2.5px;

Sie können beispielsweise folgende Werte ausprobieren:

rechts: -1px;

rechts: -4px;

rechts: -6px;

bis die Abstände in Ihrem Entwurf stimmig aussehen.

Weitere Details finden Sie in dieser Videoanleitung: Webstuhl-Tutorial-Video

Schritt 3: Speichern und veröffentlichen

• Klicken Sie auf Gespeichert.
• Veröffentlichen oder aktualisieren Sie Ihre Seite.
• Sehen Sie sich die Seite in der Vorschau an, um die Formatierung des Countdowns zu überprüfen.

Ihr Countdown-Timer sollte nun Doppelpunkte zwischen den einzelnen Zahlenabschnitten anzeigen.