Testimonial Particle

Testimonial Particle is an Gantry5 Particle which allows you to showcase testimonials on your website. See how Testimonial can be designed beautifully on Demo Page.
Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

Go to Template/Theme Settings > select the Layout to add Testimonial particle (i.e: Home) -> Layout tab -> Drag and drop the Testimonial Particle from Particles panel (left corner) to the section you want to display the Testimonial.


Content Tab – Items

Settings Description
Items List Testimonial items to display. You can add new items to the collection using the plus + icon
Style Select the testimonial style.

Items Click Items field to enable it, then you can add new items to the collection using the plus + icon

Settings Description
Name Customize the name.
Image An image field with an image picker.
Image ALT Enter the image’s alt attribute.
Position Customize the description for person position.
Description Enter the main testimonial description.
Link Specify the link for button.
Note: Scroll smoothly added automatically to internal link that contains a URL fragment to add the smooth scrolling behavior.
Target Open the link in a same or new window.
Background Settings Style settings for testimonial item
Background Color Select the background color
Inverse Color Inverse the color for light or dark backgrounds.

Grid Settings Common settings for grid layout

Settings Description
Enable Masonry The masonry effect creates a layout free of gaps even if grid cells have different heights.
Parallax The parallax effect moves single grid columns at different speeds while scrolling. Define the vertical parallax offset in pixels.
Gutter Set the grid gutter width and display dividers between grid cells.
Show dividers Display dividers between grid cells

Image Settings Common settings for Image

Settings Description
Margin Set the vertical margin.
Image Border Select the image’s border style.
Box Shadow Select the image’s box shadow size. This option won’t have any effect unless Card Style ‘None’ is selected.
Hover box shadow Select the image’s box shadow size on hover.
Image Alignment Align the image to the top,left, right or place it between the title and the content.
Width Enter the image’s width
Height Enter the image’s height
Grid width 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.
Grid gutter Select the gutter width between the image and content items. This option won’t have any effect unless Image Alignment ‘LEFT’ or ‘RIGHT’ is selected.
Grid breakpoint Set the breakpoint from which grid cells will stack. This option won’t have any effect unless Image Alignment ‘LEFT’ or ‘RIGHT’ is selected.
Vertical Alignment Vertically center grid cells. This option won’t have any effect unless Image Alignment ‘LEFT’ or ‘RIGHT’ is selected.

Columns settings Choose the columns on each devices for slider or grid content style.

Settings Description
Phone Portrait Set the number of grid columns for each breakpoint. Inherit refers to the number of columns on the next smaller screen size.
Phone Landscape
Tablet Landscape
Large Screens
CSS Classes CSS class name for the particle.
CSS ID Enter the ID for the particle without the hash (#) (ie. your-id). You can then reference the element via CSS as #your-id

Settings Tab

Settings Description
Content Style Present the content with slider mode or grid mode.
Set 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.
Center Center the active slide
Finite Disable infinite scrolling
Autoplay Enable autoplay for carousel items.
Interval Set the autoplay interval in seconds. Min 5 Max 15.
Navigation Select the navigation type.
Position Align the navigation’s items.
Margin Set the vertical margin.
Breakpoint Display the navigation only on this device width and larger.
Color Set light or dark color mode.
Slidenav Settings Like navigation settings but depends on the Content Style Slider is selected

Title/Meta/Content Settings Common settings for title/meta/content (provide multiple options for designing.)

General, Parallax and Parallax Background tab

Please take a look the documentation here for more detail about these tabs settings

Video Tutorial


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>