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