Spade
Mini Shell
| Directory:~$ /home/lmsyaran/public_html/j3/templates/g5_hydrogen/custom/particles/ |
| [Home] [System Details] [Kill Me] |
name: JL Feature Box
description: Display text with an image optionally styled like a card.
type: particle
icon: fa-rocket
configuration:
caching:
type: static
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: Enter Title
.icon:
type: input.icon
label: Icon
description: Pick an optional icon.
.meta:
type: input.text
label: Meta
description: Customize the Meta.
placeholder: Enter Meta
.subtitle:
type: textarea.textarea
label: Content
description: Customize the content.
placeholder: Enter Content
.image:
type: input.imagepicker
label: Image Icon
description: Select the image and use it as the icon.
.altimg:
type: input.text
label: Image ALT
description: Enter the image's alt attribute.
placeholder: Your beauty image
.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: Read more
.background_settings:
type: separator.note
class: alert alert-info
content: 'Background Settings'
.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
.item_class:
type: input.selectize
label: CSS Classes
description: Specify the CSS class name for item.
layout_info:
type: separator.note
class: alert alert-info
content: 'Layout Settings'
grid_type:
type: select.select
label: Layout Type
description: Present the content with slider mode or grid
mode.
default: grid
options:
slider: Slider
grid: Grid
card_settings:
type: separator.note
class: alert alert-info
content: 'Card Style'
card_style:
type: select.select
label: Style
description: Select one of the boxed card styles or a blank
panel.
default: blank
options:
blank: Blank
default: Card Default
primary: Card Primary
secondary: Card Secondary
hover: Card Hover
link_card:
type: input.checkbox
label: Link card
description: Link the whole card if a link exists. Support
Grid layout only.
default: false
cardsize:
type: select.select
label: Size
description: Define the card's size by selecting the
padding between the card and its content.
default: default
options:
default: Default
small: Small
large: Large
card_maxwidth:
type: select.select
label: Max Width
description: Set the maximum width.
default: none
options:
none: None
small: Small
medium: Medium
large: Large
xlarge: X-Large
xxlarge: XX-Large
grid_info:
type: separator.note
class: alert alert-info
content: 'Grid Settings'
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
grid_match_height:
type: input.checkbox
label: Match Height
description: To match the height of the direct child of each
cell.
default: true
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: 'Columns Settings'
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
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 carousel 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
tooltip:
type: input.checkbox
label: Enable Tooltip
description: Show tooltip title on hover.
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 only
description: Show the slide nav 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:
icon_settings:
type: separator.note
class: alert alert-info
content: 'Icon Settings'
icon_fontsize:
type: input.number
label: Icon Font Size
description: Enter the icon font size.
min: 0
placeholder: 30
icon_color:
type: input.colorpicker
label: Icon Color
description: Custom icon color.
image_settings:
type: separator.note
class: alert alert-info
content: 'Image/Icon Settings'
image_width:
type: input.number
label: Width
description: Set the width of the image.
min: 0
placeholder: auto
image_height:
type: input.number
label: Height
description: Set the height of the image.
min: 0
placeholder: auto
image_border:
type: select.select
label: Border
description: Select the image's border style.
default: none
options:
none: None
circle: Circle
rounded: Rounded
pill: Pill
link_image:
type: input.checkbox
label: Link image
description: Link the image if a link exists.
default: false
ic_alignment:
type: select.select
label: Alignment
description: Align the image to the top,left, right or place
it between the title and the content.
default: top
options:
top: Top
bottom: Bottom
left: Left
right: Right
between: Between
ic_grid_width:
type: select.select
label: Grid Width
description: Define the width of the image within the grid.
Choose between percent and fixed widths or expands columns to the width of
their content. This option won't have any effect unless Image
Alignment 'LEFT' or 'RIGHT' is selected.
default: auto
options:
auto: Auto
1-2: 50%
1-3: 33%
1-4: 25%
1-5: 20%
small: Small
medium: Medium
large: Large
xlarge: X-Large
xxlarge: XX-Large
image_grid_column_gap:
type: select.select
label: Grid Column Gap
description: Set the size of the gap between the image and
the content.
default: default
options:
small: Small
medium: Medium
default: Default
large: Large
collapse: None
image_grid_row_gap:
type: select.select
label: Grid Row Gap
description: Set the size of the gap if the grid items
stack.
default: default
options:
small: Small
medium: Medium
default: Default
large: Large
collapse: None
ic_grid_breakpoint:
type: select.select
label: Grid Breakpoint
description: Set the breakpoint from which grid cells will
stack. This option won't have any effect unless Image Alignment
'LEFT' or 'RIGHT' is selected.
default: m
options:
default: Always
s: Small (Phone Landscape)
m: Medium (Tablet Landscape)
l: Large (Desktop)
ic_vertical_alignment:
type: input.checkbox
label: Vertical Alignment
description: Vertically center grid cells. This option
won't have any effect unless Image Alignment 'LEFT' or
'RIGHT' is selected.
default: false
image_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.
This feature work if Alignment assigned to the Bottom or Between position
only.
default: default
options:
small: Small
default: Default
medium: Medium
large: Large
xlarge: X-Large
remove: None
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: default
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
link_title:
type: input.checkbox
label: Link title
description: Link the title if a link exists.
default: false
title_hover:
type: select.selectize
label: Hover Style
description: Set the hover style for a linked title. Enable
link title to use this option.
default: reset
selectize:
allowEmptyOption: true
options:
reset: None
heading: Heading
'': Default Link
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 predefined title 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: Custom Color
description: Customize the title color instead using
predefined title color mode. <br>You need to set the predefined color
to None before using the color customization.
customize_title_fontsize:
type: input.number
label: 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
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 text 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: Custom Color
description: Customize the meta color. <br>You need to
set the predefined color to None before using the color customization.
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_alignment:
type: select.select
label: Alignment
description: Align the meta text.
default: bottom
options:
top: Above Title
bottom: Below Title
content: Below Content
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: 'Content 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
content_text_color:
type: select.select
label: Predefined Color
description: Select the text color.
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: Custom Color
description: Customize the content color instead using
predefined text color. <br>You need to set the predefined color to
None before using the color customization.
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
link_settings:
type: separator.note
class: alert alert-info
content: 'Link'
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
link_text:
type: input.text
label: Text
description: Specify the button label.
placeholder: Read more
buttonclass:
type: select.select
label: 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
link_button_size:
type: select.select
label: Button Size
description: Set the button size.
default: default
options:
small: Small
default: Default
large: Large
link_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 Feature Box <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/feature-box-particle-documentation/"
target="_blank">Documentation</a>'