Spade
Mini Shell
| Directory:~$ /home/lmsyaran/public_html/j3/templates/g5_hydrogen/custom/particles/ |
| [Home] [System Details] [Kill Me] |
name: JL Pricing Table
description: Pricing Tables allows you to display not just the cost, but
also the features you wish to portray.
type: particle
icon: fa-money
form:
overrideable: false
fields:
enabled:
type: input.checkbox
label: Enabled
description: Globally enable to the particles.
default: true
_tabs:
type: container.tabs
fields:
_tab_content:
label: Content
fields:
items:
overridable: false
type: collection.list
array: true
label: Items
description: Create each item to appear in the content row.
value: name
ajax: true
fields:
.title:
type: input.text
label: Title
description: Customize the Title.
placeholder: Basic
.meta:
type: input.text
label: Meta
description: Customize the description for title
(optional).
placeholder: Free trial 30 days.
.price:
type: input.number
label: Price
description: Customize the price.
placeholder: 50
min: 0
.price_symbol:
type: input.text
label: Symbol
description: Customize the price symbol.
placeholder: $
.subtitle:
type: textarea.textarea
label: Description
description: Customize the description for price
(optional).
placeholder: Billed Yearly
.details:
type: collection.list
array: true
label: List Features
description: Create the feature list for pricing table
you wish to portray.
value: title
ajax: true
fields:
.icon:
type: input.icon
label: Icon
description: Pick an optional icon.
.text:
type: input.text
label: Feature Title
description: Create the feature title for your
pricing.
placeholder: Core Values
.featured_text:
type: input.text
label: Featured Text
description: Enter the Featured label for the table.
placeholder: Popular
.buttonlink:
type: input.text
label: Link
description: Specify the link for button.
placeholder: http://
.buttontext:
type: input.text
label: Link Text
description: Enter the text for the link.
placeholder: Purchase Now
.buttontarget:
type: select.selectize
label: Target
description: Open the link in a same or new window.
placeholder: 'Select...'
default: _self
options:
_self: Self
_blank: New Window
.buttonclass:
type: select.select
label: Button Style
description: Set the button style.
default: default
options:
default: Button Default
primary: Button Primary
secondary: Button Secondary
danger: Button Danger
text: Button Text
link: Link
link-muted: Link Muted
link-text: Link Text
.background_settings:
type: separator.note
class: alert alert-info
content: 'Head Background'
.bgimage:
type: input.imagepicker
label: Background Image
description: An image field with an image picker.
placeholder: Upload a background image.
.bgcolor:
type: input.colorpicker
label: Background Color
description: Select the background color.
.background_size:
type: select.select
label: Background Size
description: Determine whether the image will fit the
section dimensions by clipping it or by filling the empty areas with the
background color.
default: cover
options:
auto: Auto
cover: Cover
contain: Contain
.background_position:
type: select.select
label: Background Position
description: Set the initial background position,
relative to the section layer.
default: center-center
options:
top-left: Top Left
top-center: Top Center
top-right: Top Right
center-left: Center Left
center-center: Center Center
center-right: Center Right
bottom-left: Bottom Left
bottom-center: Bottom Center
bottom-right: Bottom Right
.background_blendmode:
type: select.select
label: Blend Mode
description: Determine how the image will blend with the
background color.
default: inherit
options:
inherit: Normal
multiply: Multiply
screen: Screen
overlay: Overlay
darken: Darken
lighten: Lighten
color-dodge: Color-dodge
color-burn: Color-burn
hard-light: Hard-light
soft-light: Soft-light
difference: Difference
exclusion: Exclusion
hue: Hue
saturation: Saturation
color: Color
luminosity: Luminosity
.inverse:
type: select.select
label: Inverse Color
description: Inverse the color for light or dark
backgrounds.
default: default
options:
default: None
light: Light
dark: Dark
.body_note:
type: separator.note
class: alert alert-info
content: 'Body Background'
.body_color:
type: input.colorpicker
label: Background Color
description: Select the body background color.
.body_inverse:
type: select.select
label: Inverse Color
description: Inverse the color for light or dark for body
backgrounds.
default: default
options:
default: None
light: Light
dark: Dark
.item_class:
type: input.selectize
label: CSS Classes
description: Specify the CSS class name for item.
layout_settings:
type: separator.note
class: alert alert-info
content: 'Layout'
grid_type:
type: select.select
label: Content Layout
description: Present the content with slider mode or grid
mode.
default: grid
options:
slider: Slider
grid: Grid
grid_info:
type: separator.note
class: alert alert-info
content: 'Grid Settings: Depends on the Content Style
Grid is selected'
grid_masonry:
type: input.checkbox
label: Enable Masonry
description: The masonry effect creates a layout free of gaps
even if grid cells have different heights.
default: false
grid_parallax:
type: input.number
label: Parallax
description: The parallax effect moves single grid columns at
different speeds while scrolling. Define the vertical parallax offset in
pixels.
min: 0
max: 600
placeholder: 300
grid_column_gap:
type: select.select
label: Column Gap
description: Set the size of the gap between the grid
columns.
default: default
options:
small: Small
medium: Medium
default: Default
large: Large
collapse: None
grid_row_gap:
type: select.select
label: Row Gap
description: Set the size of the gap between the grid rows.
default: default
options:
small: Small
medium: Medium
default: Default
large: Large
collapse: None
center_columns:
type: input.checkbox
label: Center columns
default: false
center_rows:
type: input.checkbox
label: Center rows
default: false
grid_divider:
type: input.checkbox
label: Dividers
description: Display dividers between grid cells
default: false
column_settings:
type: separator.note
class: alert alert-info
content: 'Column Settings for Grid or Slider
Layout'
phone_portrait:
type: select.select
label: Phone Portrait
description: Set the number of grid columns for each
breakpoint. Inherit refers to the number of columns on the next smaller
screen size.
default: 1
options:
1: 1 Column
2: 2 Columns
3: 3 Columns
4: 4 Columns
5: 5 Columns
6: 6 Columns
phone_landscape:
type: select.select
label: Phone Landscape
description: Set the number of grid columns for each
breakpoint. Inherit refers to the number of columns on the next smaller
screen size.
default: inherit
options:
inherit: Inherit
1: 1 Column
2: 2 Columns
3: 3 Columns
4: 4 Columns
5: 5 Columns
6: 6 Columns
tablet_landscape:
type: select.select
label: Tablet Landscape
description: Set the number of grid columns for each
breakpoint. Inherit refers to the number of columns on the next smaller
screen size.
default: 3
options:
inherit: Inherit
1: 1 Column
2: 2 Columns
3: 3 Columns
4: 4 Columns
5: 5 Columns
6: 6 Columns
desktop:
type: select.select
label: Desktop
description: Set the number of grid columns for each
breakpoint. Inherit refers to the number of columns on the next smaller
screen size.
default: inherit
options:
inherit: Inherit
1: 1 Column
2: 2 Columns
3: 3 Columns
4: 4 Columns
5: 5 Columns
6: 6 Columns
large_desktop:
type: select.select
label: Large Screens
description: Set the number of grid columns for each
breakpoint. Inherit refers to the number of columns on the next smaller
screen size.
default: inherit
options:
inherit: Inherit
1: 1 Column
2: 2 Columns
3: 3 Columns
4: 4 Columns
5: 5 Columns
6: 6 Columns
match_height:
type: input.checkbox
label: Match Height
description: To match the height of the direct child of each
cell.
default: true
class:
type: input.selectize
label: CSS Classes
description: CSS class name for the particle.
_tab_settings:
label: Slider
overridable: false
fields:
_info:
type: separator.note
content: 'If you set the <i>Grid</i> for
Content Layout, all the Slider settings stated below will be
ignored.'
slider_animation_info:
type: separator.note
class: alert alert-info
content: 'Slider Animation'
slider_animation_set:
type: select.select
label: Set
description: Slide all visible items at once. Group items
into sets. The number of items within a set depends on the defined item
width, e.g. 33% means that each set contains 3 items.
default: disabled
options:
enabled: Enable
disabled: Disable
slider_animation_center:
type: select.select
label: Center
description: Center the active slide.
default: disabled
options:
enabled: Enable
disabled: Disable
slider_animation_finite:
type: select.select
label: Finite
description: Disable infinite scrolling.
default: disabled
options:
enabled: Enable
disabled: Disable
slider_velocity:
type: input.number
label: Velocity
description: Set the velocity in pixels per millisecond. Min
20, Max 300
min: 20
max: 300
slider_animation_autoplay:
type: select.select
label: Autoplay
description: Enable autoplay for slider items.
default: disabled
options:
enabled: Enable
disabled: Disable
slider_pause_onhover:
type: select.select
label: Pause On Hover
description: Pause autoplay on hover.
default: enabled
options:
enabled: Enable
disabled: Disable
slider_animation_interval:
type: input.number
label: Interval
description: Set the autoplay interval in seconds. Min 5 Max
15.
min: 5
max: 15
placeholder: 7
navigation_info:
type: separator.note
class: alert alert-info
content: 'Navigation Settings'
navigation:
type: select.select
label: Navigation
description: Select the navigation type.
default: enabled
options:
enabled: Enable
disabled: Disable
navigation_position:
type: select.select
label: Position
description: Align the navigation's items.
default: center
options:
left: Left
center: Center
right: Right
navigation_margin:
type: select.select
label: Margin
description: Set the vertical margin.
default: top
options:
small-top: Small
top: Default
medium-top: Medium
navigation_breakpoint:
type: select.select
label: Breakpoint
description: Display the navigation only on this device width
and larger.
default: s
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
navigation_color:
type: select.select
label: Color
description: Set light or dark color mode.
default: default
options:
default: None
light: Light
dark: Dark
slidenav_info:
type: separator.note
class: alert alert-info
content: 'Slidenav Settings'
slidenav_position:
type: select.select
label: Position
description: Select the position of the slidenav.
default: default
options:
none: None
default: Default
outside: Outside
top-left: Top Left
top-right: Top Right
center-left: Center Left
center-right: Center Right
bottom-left: Bottom Left
bottom-center: Bottom Center
bottom-right: Bottom Right
slidenav_hover:
type: select.select
label: Show On Hover
description: Show on hover only.
default: disabled
options:
enabled: Enable
disabled: Disable
larger_slidenav:
type: input.checkbox
label: Larger style
description: To increase the size of the slidenav icons.
default: false
slidenav_margin:
type: select.select
label: Margin
description: Apply a margin between the slidenav and the
slider container.
default: medium
options:
none: None
small: Small
medium: Medium
large: Large
slidenav_breakpoint:
type: select.select
label: Breakpoint
description: Display the slidenav only on this device width
and larger.
default: s
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
slidenav_color:
type: select.select
label: Color
description: Set light or dark color mode.
default: default
options:
default: None
light: Light
dark: Dark
slidenav_outsite_breakpoint:
type: select.select
label: Outside Breakpoint
description: Display the slidenav only outside on this device
width and larger. Otherwise it will be displayed inside.
default: xl
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
slidenav_outside_color:
type: select.select
label: Outside Color
description: Set light or dark color if the slidenav is
outside of the slider.
default: default
options:
default: None
light: Light
dark: Dark
slidenav_icon_info:
type: separator.note
class: alert alert-info
content: 'Custom previous/next icons'
slidenav_icon_left:
type: input.icon
label: Previous Icon
slidenav_icon_right:
type: input.icon
label: Next Icon
_tab_style:
label: Style
overridable: false
fields:
featured_settings:
type: separator.note
class: alert alert-info
content: 'Featured Settings'
featured_bgcolor:
type: input.colorpicker
label: Featured Background
description: Select the background color for featured text.
featured_color:
type: input.colorpicker
label: Featured Color
description: Select the color for featured text.
title_settings:
type: separator.note
class: alert alert-info
content: 'Title Settings'
title_style:
type: select.select
label: Style
description: Title styles differ in font-size but may also
come with a predefined color, size and font.
default: h3
options:
default: None
heading-2xlarge: 2XLarge
heading-xlarge: XLarge
heading-large: Large
heading-medium: Medium
heading-small: Small
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
title_decoration:
type: select.select
label: Decoration
description: Decorate the headline with a divider, bullet or
a line that is vertically centered to the heading.
default: none
options:
none: None
divider: Divider
bullet: Bullet
line: Line
title_color:
type: select.select
label: Predefined Color
description: Select the text color. If the Background option
is selected, styles that don't apply a background image use the
primary color instead.
default: default
options:
default: None
muted: Muted
emphasis: Emphasis
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
background: Background
customize_title_color:
type: input.colorpicker
label: Title Color
description: Customize the title color instead using
predefined title color mode.<br> You need to set the predefined color
to None to use the customize color option.
customize_title_fontsize:
type: input.number
label: Title Font Size
min: 0
description: Customize the title text font size.
title_text_transform:
type: select.select
label: Transform
description: The following options will transform text into
uppercased, capitalized or lowercased characters.
default: ''
options:
'': Inherit
uppercase: Uppercase
capitalize: Capitalize
lowercase: Lowercase
title_element:
type: select.select
label: HTML Element
description: Choose one of the elements to fit your semantic
structure.
default: h3
options:
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
div: div
title_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
header_settings:
type: separator.note
class: alert alert-info
content: 'Header Padding'
header_padding_top:
type: input.number
label: Padding Top
description: Set the padding top value to add spacing between
top container and their content
min: 0
default: 20
placeholder: 20
header_padding_bottom:
type: input.number
label: Padding Bottom
description: Set the padding bottom value to add spacing
between bottom container and their content
min: 0
default: 20
placeholder: 20
header_padding_left:
type: input.number
label: Padding Left
description: Set the padding left value to add spacing
between left container and their content
min: 0
default: 25
placeholder: 25
header_padding_right:
type: input.number
label: Padding Right
description: Set the padding right value to add spacing
between right container and their content
min: 0
default: 25
placeholder: 25
body_settings:
type: separator.note
class: alert alert-info
content: 'Body'
body_padding_top:
type: input.number
label: Padding Top
description: Set the padding top value to add spacing between
top container and their content
min: 0
default: 0
placeholder: 20
body_padding_bottom:
type: input.number
label: Padding Bottom
description: Set the padding bottom value to add spacing
between bottom container and their content
min: 0
default: 0
placeholder: 20
body_padding_left:
type: input.number
label: Padding Left
description: Set the padding left value to add spacing
between left container and their content
min: 0
default: 25
placeholder: 25
body_padding_right:
type: input.number
label: Padding Right
description: Set the padding right value to add spacing
between right container and their content
min: 0
default: 25
placeholder: 25
list_style:
type: select.select
label: Feature List Style
description: Select the list style and add larger padding
between items.
default: default
options:
default: None
divider: Divider
striped: Striped
bullet: Bullet
large_padding:
type: input.checkbox
label: Larger padding
default: false
feature_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
price_settings:
type: separator.note
class: alert alert-info
content: 'Price Settings'
price_style:
type: select.select
label: Style
description: Heading styles differ in font-size but may also
come with a predefined color, size and font.
default: h3
options:
default: None
heading-2xlarge: 2XLarge
heading-xlarge: XLarge
heading-large: Large
heading-medium: Medium
heading-small: Small
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
price_color:
type: select.select
label: Predefined Color
description: Select the text color. If the Background option
is selected, styles that don't apply a background image use the
primary color instead.
default: default
options:
default: None
muted: Muted
emphasis: Emphasis
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
background: Background
price_title_color:
type: input.colorpicker
label: Price Color
description: Customize the title color instead using
predefined title color mode.<br> You need to set the predefined color
to None to use the customize color option.
price_title_fontsize:
type: input.number
label: Price Font Size
min: 0
description: Customize the title text font size.
symbol_fontsize:
type: input.number
label: Symbol Font Size
min: 0
description: Customize the symbol text font size.
symbol_color:
type: input.colorpicker
label: Symbol Color
description: Customize the symbol color.
price_margin:
type: select.select
label: Price Margin
description: Set the vertical margin.
default: small
options:
default: Default
small: Small
remove: None
price_element:
type: select.select
label: HTML Element
description: Choose one of the elements to fit your semantic
structure.
default: h3
options:
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
div: div
meta_settings:
type: separator.note
class: alert alert-info
content: 'Meta Settings'
meta_style:
type: select.select
label: Style
description: Select a predefined meta text style, including
color, size and font-family.
default: text-meta
options:
default: None
text-meta: Meta
heading-2xlarge: 2XLarge
heading-xlarge: XLarge
heading-large: Large
heading-medium: Medium
heading-small: Small
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
pre_meta_color:
type: select.select
label: Predefined Color
description: Select the predefined meta color.
default: default
options:
default: None
muted: Muted
emphasis: Emphasis
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
meta_color:
type: input.colorpicker
label: Meta Color
description: Customize the meta color.
meta_fontsize:
type: input.number
label: Font Size
min: 0
description: Customize the meta text font size
meta_text_transform:
type: select.select
label: Transform
description: The following options will transform text into
uppercased, capitalized or lowercased characters.
default: ''
options:
'': Inherit
uppercase: Uppercase
capitalize: Capitalize
lowercase: Lowercase
meta_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
content_settings:
type: separator.note
class: alert alert-info
content: 'Description Settings'
content_style:
type: select.select
label: Style
description: Select a predefined meta text style, including
color, size and font-family.
default: default
options:
default: None
lead: Lead
meta: Meta
content_text_color:
type: select.select
label: Predefined Color
description: Select the text color. If the Background option
is selected, styles that don't apply a background image use the
primary color instead.
default: default
options:
default: None
muted: Muted
emphasis: Emphasis
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
customize_content_color:
type: input.colorpicker
label: Customize Color
description: Customize the description color instead using
predefined text color. <br> You need to set the predefined color to
None to use the customize color option.
customize_content_fontsize:
type: input.number
label: Font Size
min: 0
description: Customize the content text font size.
content_text_transform:
type: select.select
label: Transform
description: The following options will transform text into
uppercased, capitalized or lowercased characters.
default: ''
options:
'': Inherit
uppercase: Uppercase
capitalize: Capitalize
lowercase: Lowercase
content_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
button_settings:
type: separator.note
class: alert alert-info
content: 'Button Padding'
button_padding_top:
type: input.number
label: Padding Top
description: Set the padding top value to add spacing between
top container and their content
min: 0
default: 20
placeholder: 20
button_padding_bottom:
type: input.number
label: Padding Bottom
description: Set the padding bottom value to add spacing
between bottom container and their content
min: 0
default: 20
placeholder: 20
button_padding_left:
type: input.number
label: Padding Left
description: Set the padding left value to add spacing
between left container and their content
min: 0
default: 25
placeholder: 25
button_padding_right:
type: input.number
label: Padding Right
description: Set the padding right value to add spacing
between right container and their content
min: 0
default: 25
placeholder: 25
link_button_size:
type: select.select
label: Button Size
description: Set the button size. Button size not working
with Link button style like Link, Link Muted, Link Text and Button text.
default: default
options:
small: Small
default: Default
large: Large
fullwidth:
type: input.checkbox
label: Full Width Button
default: false
button_margin_top:
type: select.select
label: Margin Top
description: Set the top margin. Note that the margin will
only apply if the content field immediately follows another content field.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
_tab_general:
label: General
overridable: false
fields:
particle_title_info:
type: separator.note
class: alert alert-info
content: 'Particle Title Style'
particle_title:
type: input.text
label: Title
description: Add an optional particle title.
placeholder: Enter particle title
particle_title_style:
type: select.select
label: Style
description: Title styles differ in font-size but may also
come with a predefined color, size and font.
default: h3
options:
default: None
heading-2xlarge: 2XLarge
heading-xlarge: XLarge
heading-large: Large
heading-medium: Medium
heading-small: Small
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
particle_title_decoration:
type: select.select
label: Decoration
description: Decorate the headline with a divider, bullet or
a line that is vertically centered to the heading.
default: none
options:
none: None
divider: Divider
bullet: Bullet
line: Line
particle_title_align:
type: select.select
label: Alignment
description: Center, left and right alignment for Particle
title.
default: inherit
options:
inherit: Inherit
left: Left
center: Center
right: Right
justify: Justify
particle_predefined_color:
type: select.select
label: Predefined Color
description: Select the text color. If the Background option
is selected, styles that don't apply a background image use the
primary color instead.
default: default
options:
default: None
muted: Muted
emphasis: Emphasis
primary: Primary
secondary: Secondary
success: Success
warning: Warning
danger: Danger
particle_title_color:
type: input.colorpicker
label: Custom Color
description: Customize the title color instead using
predefined color mode. Set the Predefined color to None before using this
color customization mode.
particle_title_fontsize:
type: input.number
label: Font Size
description: Customize the particle title font size.
min: 0
particle_title_element:
type: select.select
label: HTML Element
description: Choose one of the elements to fit your semantic
structure.
default: h3
options:
h1: H1
h2: H2
h3: H3
h4: H4
h5: H5
h6: H6
div: div
general_content_info:
type: separator.note
class: alert alert-info
content: 'General Settings'
align:
type: select.select
label: Text Alignment
description: Center, left and right alignment may depend on a
breakpoint and require a fallback.
default: inherit
options:
inherit: None
left: Left
center: Center
right: Right
justify: Justify
breakpoint:
type: select.select
label: Alignment Breakpoint
description: Define the device width from which the alignment
will apply.
default: always
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
fallback:
type: select.select
label: Alignment Fallback
description: Define an alignment fallback for device widths
below the breakpoint.
default: inherit
options:
inherit: None
left: Left
center: Center
right: Right
justify: Justify
g_maxwidth:
type: select.select
label: Max Width
description: Set the maximum content width.
default: inherit
options:
inherit: None
small: Small
medium: Medium
large: Large
xlarge: X-Large
xxlarge: XX-Large
g_maxwidth_alignment:
type: select.select
label: Max Width Alignment
description: Define the alignment in case the container
exceeds the element's max-width.
default: left
options:
left: Left
center: Center
right: Right
g_maxwidth_breakpoint:
type: select.select
label: Max Width Breakpoint
description: Define the device width from which the
element's max-width will apply.
default: always
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
margin:
type: select.select
label: Margin
description: Set the vertical margin.
default: inherit
options:
inherit: Keep existing
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove-vertical: None
visibility:
type: select.select
label: Visibility
description: Display the element only on this device width
and larger.
default: inherit
options:
inherit: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
general_animation_info:
type: separator.note
class: alert alert-info
content: 'Animation Settings'
animation:
type: select.select
label: Animation
description: Apply an animation to particles once they enter
the viewport.
default: inherit
options:
inherit: None
fade: Fade
scale-up: Scale Up
scale-down: Scale Down
slide-top-small: Slide Top Small
slide-bottom-small: Slide Bottom Small
slide-left-small: Slide Left Small
slide-right-small: Slide Right Small
slide-top-medium: Slide Top Medium
slide-bottom-medium: Slide Bottom Medium
slide-left-medium: Slide Left Medium
slide-right-medium: Slide Right Medium
slide-top: Slide Top 100%
slide-bottom: Slide Bottom 100%
slide-left: Slide Left 100%
slide-right: Slide Right 100%
parallax: Parallax
animation_delay:
type: input.number
label: Delay
description: Set the delay animations for particle. Delay
time in ms.
min: 0
placeholder: 200
animation_repeat:
type: select.select
label: Repeat
description: Repeat an animation to particle once it enter
the viewport.
default: disabled
options:
enabled: Enable
disabled: Disable
delay_element_animations:
type: input.checkbox
label: Delay Element
description: Delay element animations so that animations are
slightly delayed and don't play all at the same time. Slide animations
can come into effect with a fixed offset or at 100% of the element’s own
size.
default: false
_tab_parallax_animation:
label: Parallax
overridable: false
fields:
parallax_info:
type: separator.note
class: alert alert-info
content: 'To configure a parallax animation, make sure
to set the Animation to Parallax in the <i>General</i> tab.
<a
href="https://joomlead.com/gantry-5-particles/particles-documentation/#parallax-settings"
target="_blank">Learn more</a>'
pa_horizontal_start:
type: input.number
label: Horizontal Start
description: Animate the horizontal position (translateX) in
pixels. Min -600 and Max 600.
min: -600
max: 600
placeholder: 0
pa_horizontal_end:
type: input.number
label: Horizontal End
description: Animate the horizontal position (translateX) in
pixels. Min -600 and Max 600.
min: -600
max: 600
placeholder: 0
pa_vertical_start:
type: input.number
label: Vertical Start
description: Animate the vertical position (translateY) in
pixels. Min -600 and Max 600.
min: -600
max: 600
placeholder: 0
pa_vertical_end:
type: input.number
label: Vertical End
description: Animate the vertical position (translateY) in
pixels. Min -600 and Max 600.
min: -600
max: 600
placeholder: 0
scale_start:
type: input.number
label: Scale Start
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Min 50 and Max 200
min: 50
max: 200
placeholder: 100
scale_end:
type: input.number
label: Scale End
description: Animate the scaling. 100 means 100% scale, 200
means 200% scale, and 50 means 50% scale. Min 50 and Max 200
min: 50
max: 200
placeholder: 100
rotate_start:
type: input.number
label: Rotate Start
description: Animate the rotation clockwise in degrees. Min 0
and Max 360
min: 0
max: 360
placeholder: 0
rotate_end:
type: input.number
label: Rotate End
description: Animate the rotation clockwise in degrees. Min 0
and Max 360
min: 0
max: 360
placeholder: 0
opacity_start:
type: input.number
label: Opacity Start
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Min 0 and Max 100
min: 0
max: 100
placeholder: 100
opacity_end:
type: input.number
label: Opacity End
description: Animate the opacity. 100 means 100% opacity, 0
means 0% opacity and 50 means 50%. Min 0 and Max 100
min: 0
max: 100
placeholder: 100
easing:
type: input.number
label: Easing
description: Determine how the speed of the animation behaves
over time. A value below 100 is faster in the beginning and slower towards
the end while a value above 100 behaves inversely. Min 10 and Max 200
min: 10
max: 200
placeholder: 10
pa_viewport:
type: input.number
label: Viewport
description: Set the animation end point relative to viewport
height, e.g. 50 for 50% of the viewport. Min 10 and Max 100
min: 10
max: 100
placeholder: 50
pa_breakpoint:
type: select.select
label: Breakpoint
description: Display the parallax effect only on this device
width and larger.
default: always
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
_tab_parallax:
label: Parallax Background
overridable: false
fields:
parallax_bg_info:
type: separator.note
class: alert alert-info
content: 'The Parallax Background settings allow you to
animate a background image depending on the scroll position of the
document. <a
href="https://joomlead.com/gantry-5-particles/particles-documentation/#parallax-background-settings"
target="_blank">Learn more</a>'
parallax_image:
type: input.imagepicker
label: Background Image
description: Select parallax background image for particle.
placeholder: Pick an image
background_image_size:
type: select.select
label: Image Size
description: Determine whether the image will fit the section
dimensions by clipping it or by filling the empty areas with the background
color.
default: auto
options:
auto: Auto
cover: Cover
contain: Contain
background_image_position:
type: select.select
label: Image Position
description: Set the initial background position, relative to
the section layer.
default: center-center
options:
top-left: Top Left
top-center: Top Center
top-right: Top Right
center-left: Center Left
center-center: Center Center
center-right: Center Right
bottom-left: Bottom Left
bottom-center: Bottom Center
bottom-right: Bottom Right
parallax_bg_breakpoint:
type: select.select
label: Parallax Breakpoint
description: Display the parallax effect only on this device
width and larger.
default: always
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
parallax_bg_visibility:
type: select.select
label: Image Visibility
description: Display the image only on this device width and
larger.
default: always
options:
always: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
xl: X-Large (Large Screens)
parallax_bg_color:
type: input.colorpicker
label: Background Color
description: Use the background color in combination with
blend modes, a transparent image or to fill the area, if the image
doesn't cover the whole section.
blendmode:
type: select.select
label: Blend Mode
description: Determine how the image will blend with the
background color.
default: inherit
options:
inherit: Normal
multiply: Multiply
screen: Screen
overlay: Overlay
darken: Darken
lighten: Lighten
color-dodge: Color-dodge
color-burn: Color-burn
hard-light: Hard-light
soft-light: Soft-light
difference: Difference
exclusion: Exclusion
hue: Hue
saturation: Saturation
color: Color
luminosity: Luminosity
parallax_bg_overlay:
type: input.colorpicker
label: Overlay Color
description: Set an additional transparent overlay to soften
the image.
horizontal_start:
type: input.number
label: Horizontal Start
description: Animate the horizontal position (translateX) in
pixels. Min -600 and Max 600.
min: -600
max: 600
default: 0
horizontal_end:
type: input.number
label: Horizontal End
description: Animate the horizontal position (translateX) in
pixels. Min -600 and Max 600.
min: -600
max: 600
default: 0
vertical_start:
type: input.number
label: Vertical Start
description: Animate the vertical position (translateY) in
pixels. Min -600 and Max 600.
min: -600
max: 600
default: 0
vertical_end:
type: input.number
label: Vertical End
description: Animate the vertical position (translateY) in
pixels. Min -600 and Max 600.
min: -600
max: 600
default: 0
parallax_easing:
type: input.number
label: Parallax Easing
description: Set the animation easing. Zero transitions at an
even speed, a positive value starts off quickly while a negative value
starts off slowly. Min -20 Max 20
min: -20
max: 20
container_maxwidth:
type: select.select
label: Max Width
description: Set the Fullwidth (Flushed Content) for parent
section then use this option to define the container width for the
particles inside this section.
default: default
options:
default: Default
xsmall: X-Small
small: Small
large: Large
xlarge: X-Large
expand: Expand
none: None
viewport_height:
type: select.select
label: Height
description: Enabling viewport height on a section that
directly follows the header will subtract the header's height from it.
On short pages, a section can be expanded to fill the browser window.
default: none
options:
none: None
full: Viewport
percent: Viewport (Minus 20%)
section: Viewport (Minus 50%)
expand: Expand
padding:
type: select.select
label: Padding
description: Set the vertical padding.
default: default
options:
default: Default
xsmall: X-Small
small: Small
large: Large
xlarge: X-Large
none: None
vertical_alignment:
type: select.select
label: Vertical Alignment
description: Align the section content vertically, if the
section height is larger than the content itself.
default: none
options:
none: Top
middle: Middle
bottom: Bottom
parallax_text_color:
type: select.select
label: Inverse Color
description: Set light or dark color mode for text, buttons
and controls.
default: default
options:
default: None
light: Light
dark: Dark
copyright:
type: separator.note
class: alert alert-success
content: 'JL Pricing Table 2 <strong>Version:
2.1.3</strong> Copyright (C) <a
href="https://joomlead.com/"
target="_blank">https://joomlead.com</a> | <a
href="https://joomlead.com/g5/docs/pricing-table-2-documentation/"
target="_blank">Documentation</a>'