Countdown Particle Documentation

Countdown Gantry5 Particle offers many options to edit countdown like target date, countdown animation properties and its css styles. See how Countdown can be designed beautifully on Demo Page.

# Countdown Package contents

Files Description
jlcountdown.yaml Contains the Countdown particle settings.

jlcountdown.html.twig The Twig file to pull information, settings.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Requirements Countdown requires Uikit 3 for Gantry 5 Atom to be installed and enabled in your theme layout settings.

Go to Template/Theme Settings > select the Layout to add Countdown particle (i.e: Home) -> Layout tab -> Drag and drop the Countdown Particle from Particles panel (left corner) to the section you want to display the Countdown.

Settings

Settings Description
Date Enter a date for the countdown to expire. Use the ISO 8601 format: YYYY-MM-DDThh:mm:ssTZD, e.g. 2020-05-01T22:00:00+00:00 (UTC time).
Labels Enter labels for the countdown time (leave default if not needed)
Days Enter labels for the days
Hours Enter labels for the hours.
Minutes Enter labels for the minutes.
Seconds Enter labels for the seconds.
CSS Classes CSS class name for the particle.

Style Tab

Settings Description
Countdown Settings Common settings for Countdown
Grid Column Gap Set the size of the column gap between the numbers.
Grid Row Gap Set the size of the row gap between the numbers.
Show Separators Use this option to show the : separators
Label Style Settings Common settings for Label Style
Label Margin Set the margin between the coutdown and the label text.
Label Color Customize the label color.
Label Font Size Customize the label font size.
Transform The following options will transform text into uppercased, capitalized or lowercased characters.
Date Style Settings Common settings for Date
Date Color Customize the date color.
Date Font Size Customize the date font size.

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

JoomLead Gantry 5 Particles 2.1.3 released See what's new
Sale 30% OFF Cyber Monday. Use the discount code CM2019 during checkout Buy Now