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 |
|---|---|
| Content | Basic content and configuration settings for the countdown component. |
| Date | Enter a date for the countdown to expire. |
| Labels | Customize the text labels for time units. |
| Days | Label text for days unit. |
| Hours | Label text for hours unit. |
| Minutes | Label text for minutes unit. |
| Seconds | Label text for seconds unit. |
| CSS Classes | CSS class name for the particle. |
Style Tab
| Settings | Description |
|---|---|
| Style Settings | General styling options for the countdown layout. |
| Column Gap | Set the size of the column gap between the numbers. |
| Row Gap | Set the size of the row gap between the numbers. |
| Show Separators | Display separators between countdown units. |
| Label Style | Styling options for the countdown unit labels. |
| Label Style | Title styles differ in font-size but may also come with a predefined color, size and font. |
| Label Font Size | Customize the date font size. |
| Label Margin | Set the margin between the coutdown and the label text. |
| Label Predefined Color | Select a predefined text color. |
| Label Custom Color | Customize the date color. |
| Label Transform | The following options will transform text into uppercased, capitalized or lowercased characters. |
| Date Style | Styling options for the countdown numbers. |
| Date Predefined Color | Select a predefined text color. |
| Date Custom Color | Customize the date color. |
| Date Style | Date styles differ in font-size but may also come with a predefined color, size and font. |
| 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