name: JL Testimonial 2
description: Design testimonials that drive social proof, trust & conversions.
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 testimonial item to display.
              value: name
              ajax: true
              fields:
                .title:
                  type: input.text
                  label: Name
                  description: Customize the name.
                  placeholder: Tony
                .image:
                  type: input.imagepicker
                  label: Image
                  description: An image field with an image picker.
                  placeholder: Pick an image
                .image_alt:
                  type: input.text
                  label: Image ALT
                  description: Enter the image's alt attribute.
                  placeholder: Your beauty image
                .meta:
                  type: input.text
                  label: Position
                  description: Customize the meta for person.
                  placeholder: Developer
                .subtitle:
                  type: textarea.textarea
                  label: Description
                  description: Enter the main testimonial description.
                .link:
                  type: input.text
                  label: Link
                  description: Specify the link for button.
                  placeholder: http://
                .target:
                  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
                .background_settings:
                  type: separator.note
                  class: alert alert-info
                  content: 'Background Settings'
                .bgcolor:
                  type: input.colorpicker
                  label: Background Color
                  description: Select the background color.
                .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.                      
            grid_type:
              type: select.select
              label: Content Layout
              description: Present the content layout with slider or grid mode.
              default: slider
              options:
                slider: Slider
                grid: Grid
            testimonial_style:
              type: select.select
              label: Style
              description: Select the testimonial style.
              default: default
              options:
                default: Default
                bubble: Bubble
            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: false
            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.'
            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: Settings
          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
            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: outside
              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:
            image_settings:
              type: separator.note
              class: alert alert-info
              content: 'Image Settings'
            author_container:
              type: select.select
              label: Author Container
              description: Select alignment for the author's Container.
              default: center
              options:
                center: Center
                left: Left
                right: Right
            image_border:
              type: select.select
              label: Image Border
              description: Select the image's border style.
              default: circle
              options:
                none: None
                circle: Circle
                rounded: Rounded
                pill: Pill
            box_shadow:
              type: select.select
              label: Box Shadow
              description: Select the image's box shadow size.
              default: none
              options:
                none: None
                small: Small
                medium: Medium
                large: Large
                xlarge: X-Large
            box_shadow_hover:
              type: select.select
              label: Hover Box Shadow
              description: Select the image's box shadow size on hover.
              default: none
              options:
                none: None
                small: Small
                medium: Medium
                large: Large
                xlarge: X-Large
            image_alignment:
              type: select.select
              label: Image Alignment
              description: Align the image to the top,left, right or place it between the title and the content.
              default: bottom
              options:
                top: Top
                bottom: Bottom
                left: Left
                right: Right
            image_width:
              type: input.number
              label: Width
              description: Set the width of the image.
              min: 0
              placeholder: 100
            image_height:
              type: input.number
              label: Height
              description: Set the height of the image.
              min: 0
              placeholder: 75
            image_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.
              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_gutter:
              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: Collapse
            image_grid_breakpoint:
              type: select.select
              label: Grid Breakpoint
              description: Set the breakpoint from which grid cells will stack.
              default: m
              options:
                default: Always
                s: Small (Phone Landscape)
                m: Medium (Tablet Landscape)
                l: Large (Desktop)
            image_vertical_alignment:
              type: input.checkbox
              label: Vertical Alignment
              description: Vertically center grid cells.
              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.
              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: 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: Custom Color
              description: Customize the title color instead using predefined title color mode.<br>Note:You need to set the predefined color to None to use the customize color option.
            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 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: Custom Color
              description: Customize the meta color. 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_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: small
              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 content 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: Custom Color
              description: Customize the description color instead using predefined text color. 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_padding:
              type: select.select
              label: Padding
              description: Set the padding for content.
              default: default
              options:
                default: Default
                small: Small
                remove: None
                large: Large
            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
        _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. Note: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. Note: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. Note: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. Note: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. Note: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%. Note: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%. Note: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 Testimonial 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/testimonial-particle-documentation/" target="_blank">Documentation</a>'