Note: Isotope Filters Elementor Widget is featured on the PRO version of this plugin.

Step 1: How to Add Widget:

To use this Testimonial Elementor Addon element, find the ‘Testimonial Isotope Layout‘ element from the ‘ELEMENTS‘ tab (or from the top search field). Simply just Drag & Drop the ‘Testimonial Isotope Layout’ into the ‘Drag widget here‘ or the ‘+’ section.

Step 2: How to Configure the Content Settings:

Under the ‘Content’ tab, you will be able to select various isotope filter layouts and customize the testimonial visual looks. Please check below.

2.1: Layout:

From the Layout Settings, you can choose your preferred isotope filters layout. You can also change the number of columns.

Select Layout: Choose your favorite layout. There are 6 predefined beautiful slider layouts.
Number of Columns: You can also define the number of columns to display on Desktop, Tablet, or mobile devices.

2.2: Query:

From the Query Settings, you can customize the query-related parameters that can include, exclude, limit and sort the testimonial posts.

Filtering: In this settings section, you can include/exclude or limit your testimonial posts.
Categories & Tags: You can also filter the testimonial posts using categories & tags.
Sorting: Use these settings to sort your testimonial posts by Menu Order / Name / ID / Date or Random.

2.3: Isotope Settings:

From the Isotope Settings, you can control various isotope filters functionalities as per your need.

Display ‘Show All’ Button: You can show/hide the ‘Show All’ button from here if you need.
Default Selected Button: You can change the default selected button (when the page loads) from here.
Display Search Filter: You can enable a search box in the top filter area from here.
Display Filter Button Tooltip: You can enable/disable the filter button tooltip from here.

2.4: Image:

From the Image Settings, you can customize the image size of the headshot images of testimonial authors.

Select Image Size: You can change the image size of the testimonial headshot images.
Custom Image Size: If you want to add your own image size, you can choose the ‘Custom Image Size’ Option. If you select the custom image size, you will need to add the custom width and height of the image, as well as the image crop settings. Please note that, if you enter the image size larger than the actual image itself, the image sizes will fall back to the default thumbnail dimension (150×150 px).
Default Preview Image: You can change the default preview image. The default preview image will show if there is no featured image. You can also choose SVG image here.

2.5: Pagination:

From the Pagination Settings, you can choose whether you need to show the pagination for testimonial isotope filters. It is helpful if you have lots of testimonials.

Show Pagination: You can enable the pagination from here.
Number of Testimonials Per Page: You can define the number of testimonials to display on each page from here.
Pagination Type: You can choose the type of pagination. There are two types of pagination to choose from:
Ajax Load More Button, Ajax Load More on Scroll.
Load More Button Text: The button text for the ‘Load More’ button (if you choose ‘Ajax Load More Button’ pagination).

2.6: Content Limit:

From the Content Limit Settings, you can limit/truncate the testimonial texts. It is helpful to control the height of the testimonial grids.

Limit Testimonial Content: You can enable the testimonial content limit from here.
Content Limit: You need to enter the number of letters you want to show in the testimonial texts. Please note that this letter truncation is intelligently limiting the texts and will not break any words.
Show Read More Button: You additionally can enable a read me button if you have a testimonials details page (single testimonial page) available.
Read More Button Text: The button text for the ‘Read More’ button.
Read More Button Type: You can choose the button element between inline or block type.

2.7: Content Visibility:

From the Content visibility Settings, you can show/hide different elements from the testimonial grids.

Show Author Name: Settings for show/hide Author Name.
Show Author Image: Settings for show/hide Author Image.
Show Testimonial Text: Settings for show/hide Testimonial Text.
Show Designation: Settings for show/hide Author Designation.
Show Company Name: Settings for show/hide Company Name.
Show Location Name: Settings for show/hide Location Name.
Show Rating: Settings for show/hide Rating.
Show Social Media: Settings for show/hide Social Media.
Show Social Share: Settings for show/hide Social Share.
Social Share Items: Settings for Social Share items to show.
Link to Details Page: Settings for enable/disable the Link to Details Page.

Step 3: How to Style Testimonial Isotope Filters Layout:

Switch to the ‘Style’ tab to style all the features of Testimonial Isotope Filters and get your desired result. Please check below.

3.1: Colors:

From the Colors Settings, you can change the colors and background colors of different elements to suit your needs.

Color Scheme: Choose your element colors from here. These color settings are pretty self-explanatory. Please note that the ‘Overlay color‘ settings will activate if you choose Isotope ‘Layout 4’.
Button Colors: You can also define the button colors. You can define colors for the normal, hover, and active state of the buttons. This settings section will be activated if you enable navigation arrow or pagination dots.
Read More Button: You can style your read more button colors. You can define colors for the normal and hover state of the buttons. This settings section will be activated if you enable the ‘Read More Button’.

3.2: Typography:

From the Typography Settings, you can change the typography, alignment, and spacing of different elements to suit your needs.

Author Name: Change the typography, alignment & spacing for the Author Name.
Author Bio: Change the typography, alignment & spacing for the Author Bio.
Rating: Change the typography, alignment, icon spacing & spacing for the Rating icon.
Testimonial Text: Change the typography, alignment & spacing for the Testimonial Text.
Social Media: Change the typography, alignment, icon spacing & spacing for the Social Media Icons.
Social Share: Change the typography, alignment, icon spacing & spacing for the Social Share Icons.

3.3: Image Style:

From the Image Style Settings, you can customize the testimonial headshot images border and spacing.

Border Type: Add a border to the image.
Alignment: Change the alignment of the image.
Spacing: Add spacing to the image.
Border Radius: Change the border radius in order to turn your image into a circle.

3.4: Gutter:

From the Gutter Settings, you can add a gutter to the various elements.

Grid Gutter/Padding: Control the gutter of each grid.
Content Padding: Control the content (testimonial text) gutter.
Button Gutter/Padding: Control the button gutter.
Read More Button Spacing: Control the read more button gutter.

This documentation is based on the PRO version so additional features are PRO features.

Step 1: How to Add Widget:

To use this Testimonial Elementor Addon element, find the ‘Testimonial Slider Layout‘ element from the ‘ELEMENTS‘ tab (or from the top search field). Simply just Drag & Drop the ‘Testimonial Slider Layout’ into the ‘Drag widget here‘ or the ‘+’ section.

Step 2: How to Configure the Content Settings:

Under the ‘Content’ tab, you will be able to select various slider layouts and customize the testimonial visual looks. Please check below.

2.1: Layout:

From the Layout Settings, you can choose your preferred slider layout. You can also change the number of columns.

Select Layout: Choose your favorite layout. There are 13 predefined beautiful slider layouts. The first two layouts are provided in the Free version, the rest of the layouts are featured in the Pro version.
Number of Columns: You can also define the number of columns to display on Desktop, Tablet, or mobile devices.

2.2: Query:

From the Query Settings, you can customize the query-related parameters that can include, exclude, limit and sort the testimonial posts.

Filtering: In this settings section, you can include/exclude or limit your testimonial posts.
Categories & Tags Pro: You can also filter the testimonial posts using categories & tags.
Sorting: Use these settings to sort your testimonial posts by Menu Order / Name / ID / Date or Random Pro.

2.3: Slider Settings:

From the Slider Settings, you can control various slider functionalities as per your need.

Controls: In this settings section, you can control the slider behavior. The settings are pretty self-explanatory. You can enable/disable loops, arrows, dots, dynamic heights, image lazy loads, and slide transition speed.
Autoplay: In this settings section, you can customize the slider autoplay behavior. You can enable/disable autoplay, pause on mouse hover functionality and slide autoplay delay.

2.4: Image:

From the Image Settings, you can customize the image size of the headshot images of testimonial authors.

Select Image Size: You can change the image size of the testimonial headshot images.
Custom Image Size Pro: If you want to add your own image size, you can choose the ‘Custom Image Size’ Option. If you select the custom image size, you will need to add the custom width and height of the image, as well as the image crop settings. Please note that, if you enter the image size larger than the actual image itself, the image sizes will fall back to the default thumbnail dimension (150×150 px).
Default Preview Image Pro: You can change the default preview image. The default preview image will show if there is no featured image. You can also choose SVG image here.

2.5: Content Limit:

From the Content Limit Settings, you can limit/truncate the testimonial texts. It is helpful to control the height of the testimonial sliders.

Limit Testimonial Content: You can enable the testimonial content limit from here.
Content Limit: You need to enter the number of letters you want to show in the testimonial texts. Please note that this letter truncation is intelligently limits the texts and will not break any words.
Show Read More Button Pro: You additionally can enable a read me button if you have a testimonials details page (single testimonial page) available.
Read More Button Text Pro: The button text for the ‘Read More’ button.
Read More Button Type Pro: You can choose the button element between inline or block type.

2.6: Content Visibility:

From the Content visibility Settings, you can show/hide different elements from the testimonial sliders.

Show Author Name: Settings for show/hide Author Name.
Show Author Image: Settings for show/hide Author Image.
Show Testimonial Text: Settings for show/hide Testimonial Text.
Show Designation: Settings for show/hide Author Designation.
Show Company Name: Settings for show/hide Company Name.
Show Location Name: Settings for show/hide Location Name.
Show Rating: Settings for show/hide Rating.
Show Social Media Pro: Settings for show/hide Social Media.
Show Social Share Pro: Settings for show/hide Social Share.
Social Share Items Pro: Settings for Social Share items to show.
Link to Details Page Pro: Settings for enable/disable the Link to Details Page.

Step 3: How to Style Testimonial Sliders:

Switch to the ‘Style’ tab to style all the features of Testimonial Sliders and get your desired result. Please check below.

3.1: Colors:

From the Colors Settings, you can change the colors and background colors of different elements to suit your needs.

Color Scheme: Choose your element colors from here. These color settings are pretty self-explanatory. Some color settings will be activated in the Pro version of the plugin. Please note that the ‘Overlay color‘ settings will activate if you choose Slider ‘Layout 9’.
Button Colors: You can also define the button colors. You can define colors for the normal, hover, and active state of the buttons. This settings section will be activated if you enable navigation arrow or pagination dots.
Read More Button Pro: You can style your read more button colors. You can define colors for the normal and hover state of the buttons. This settings section will be activated if you enable the ‘Read More Button’.

3.2: Typography:

From the Typography Settings, you can change the typography, alignment, and spacing of different elements to suit your needs.

Author Name: Change the typography, alignment & spacing for the Author Name.
Author Bio: Change the typography, alignment & spacing for the Author Bio.
Rating: Change the typography, alignment, icon spacing & spacing for the Rating icon.
Testimonial Text: Change the typography, alignment & spacing for the Testimonial Text.
Social Media Pro: Change the typography, alignment, icon spacing & spacing for the Social Media Icons.
Social Share Pro: Change the typography, alignment, icon spacing & spacing for the Social Share Icons.

3.3: Image Style:

From the Image Style Settings, you can customize the testimonial headshot images border and spacing.

Border Type: Add a border to the image.
Alignment Pro: Change the alignment of the image.
Spacing Pro: Add spacing to the image.
Border Radius: Change the border radius in order to turn your image into a circle.

3.4: Gutter Pro:

From the Gutter Settings, you can add a gutter to the various elements.

Grid Gutter/Padding: Control the gutter of each grid.
Content Padding: Control the content (testimonial text) gutter.
Button Gutter/Padding: Control the button gutter.
Read More Button Spacing: Control the read more button gutter.

This documentation is based on the PRO version so additional features are PRO features.

Step 1: How to Add Widget:

To use this Testimonial Elementor Addon element, find the ‘Testimonial Grid Layout‘ element from the ‘ELEMENTS‘ tab (or from the top search field). Simply just Drag & Drop the ‘Testimonial Grid Layout’ into the ‘Drag widget here‘ or the ‘+’ section.

Step 2: How to Configure the Content Settings:

Under the ‘Content’ tab, you will be able to select various layouts and customize the testimonial visual looks. Please check below.

2.1: Layout:

From the Layout Settings, you can choose your preferred layout. You can also change the number of columns and grid style.

Select Layout: Choose your favorite layout. There are 11 predefined beautiful grid layouts. The first two layouts are provided in the Free version, the rest of the layouts are featured in the Pro version.
Number of Columns: You can also define the number of columns to display on Desktop, Tablet, or mobile devices.
Grid Style Pro: You can switch between even or masonry grid layouts.

2.2: Query:

From the Query Settings, you can customize the query-related parameters that can include, exclude, limit and sort the testimonial posts.

Filtering: In this settings section, you can include/exclude or limit your testimonial posts.
Categories & Tags Pro: You can also filter the testimonial posts using categories & tags.
Sorting: Use these settings to sort your testimonial posts by Menu Order / Name / ID / Date or Random Pro.

2.3: Image:

From the Image Settings, you can customize the image size of the headshot images of testimonial authors.

Select Image Size: You can change the image size of the testimonial headshot images.
Custom Image Size Pro: If you want to add your own image size, you can choose the ‘Custom Image Size’ Option. If you select the custom image size, you will need to add the custom width and height of the image, as well as the image crop settings. Please note that, if you enter an image size larger than the actual image itself, the image sizes will fall back to the default thumbnail dimension (150×150 px).
Default Preview Image Pro: You can change the default preview image. The default preview image will show if there is no featured image. You can also choose SVG image here.

2.4: Pagination:

From the Pagination Settings, you can choose whether you need to show the pagination for testimonial grids. It is helpful if you have lots of testimonials.

Show Pagination: You can enable the pagination from here.
Number of Testimonials Per Page: You can define the number of testimonials to display in each page from here.
Pagination Type Pro: You can choose the type of pagination. There are four types of pagination to choose from:
Number Pagination Free, Ajax Number Pagination Pro, Ajax Load More Button Pro, Ajax Load More on Scroll Pro.
Load More Button Text Pro: The button text for the ‘Load More’ button (if you choose ‘Ajax Load More Button’ pagination).

2.5: Content Limit:

From the Content Limit Settings, you can limit/truncate the testimonial texts. It is helpful to control the height of the testimonial grids.

Limit Testimonial Content: You can enable the testimonial content limit from here.
Content Limit: You need to enter the number of letters you want to show in the testimonial texts. Please note that this letter truncation is intelligently limiting the texts and will not break any words.
Show Read More Button Pro: You additionally can enable a read me button if you have a testimonials details page (single testimonial page) available.
Read More Button Text Pro: The button text for the ‘Read More’ button.
Read More Button Type Pro: You can choose the button element between inline or block type.

2.6: Content Visibility:

From the Content visibility Settings, you can show/hide different elements from the testimonial grids.

Show Author Name: Settings for show/hide Author Name.
Show Author Image: Settings for show/hide Author Image.
Show Testimonial Text: Settings for show/hide Testimonial Text.
Show Designation: Settings for show/hide Author Designation.
Show Company Name: Settings for show/hide Company Name.
Show Location Name: Settings for show/hide Location Name.
Show Rating: Settings for show/hide Rating.
Show Social Media Pro: Settings for show/hide Social Media.
Show Social Share Pro: Settings for show/hide Social Share.
Social Share Items Pro: Settings for Social Share items to show.
Link to Details Page Pro: Settings for enable/disable the Link to Details Page.

Step 3: How to Style Testimonial Grids:

Switch to the ‘Style’ tab to style all the features of Testimonial Grids and get your desired result. Please check below.

3.1: Colors:

From the Colors Settings, you can change the colors and background colors of different elements to suit your needs.

Color Scheme: Choose your element colors from here. These color settings are pretty self-explanatory. Some color settings will be activated in the Pro version of the plugin. Please note that the ‘Overlay color’ settings will activate if you choose Grid ‘Layout 9’.
Button Colors: You can also define the button colors. You can define colors for the normal, hover, and active state of the buttons. This settings section will be activated if you enable pagination.
Read More Button Pro: You can style your read more button colors. You can define colors for the normal and hover state of the buttons. This settings section will be activated if you enable the ‘Read More Button’.

3.2: Typography:

From the Typography Settings, you can change the typography, alignment, and spacing of different elements to suit your needs.

Author Name: Change the typography, alignment & spacing for the Author Name.
Author Bio: Change the typography, alignment & spacing for the Author Bio.
Rating: Change the typography, alignment, icon spacing & spacing for the Rating icon.
Testimonial Text: Change the typography, alignment & spacing for the Testimonial Text.
Social Media Pro: Change the typography, alignment, icon spacing & spacing for the Social Media Icons.
Social Share Pro: Change the typography, alignment, icon spacing & spacing for the Social Share Icons.

3.3: Image Style:

From the Image Style Settings, you can customize the testimonial headshot images’ border and spacing.

Border Type: Add a border to the image.
Alignment Pro: Change the alignment of the image.
Spacing Pro: Add spacing to the image.
Border Radius: Change the border-radius in order to turn your image into a circle.

3.4: Gutter Pro:

From the Gutter Settings, you can add a gutter to the various elements.

Grid Gutter/Padding: Control the gutter of each grid.
Content Padding: Control the content (testimonial text) gutter.
Button Gutter/Padding: Control the button gutter.
Read More Button Spacing: Control the read more button gutter.

Now paste the shortcode in page

To create a Grid layout first need to select Layout Type = Slider then select a Carousel Slider Layout Style.

Step 1: Select Layout Type => Slider

Step 2: Layout Style => Select an Isotope Layout. 

Step 3: Now set the display per row of the column for desktop, tab & mobile view.

Step 4: Set Filter Selected item

Now set the other fields and tab as you need to follow the rest steps of the Shortcode Generator steps (1-4) that showed in above.

To create a Grid layout first need to select Layout Type = Slider then select a Carousel Slider Layout Style.

Step 1: Select Layout Type => Slider

Step 2: Layout Style => Select a Carousel Slider Layout. 

Step 3: Now set the display per row of the column for desktop, tab & mobile view.

Step 4: For Slider layout, you can set the slider property like autoplay, navigation, pagination, auto height, Lazy Load & RTL also set slider speed.

Now set the other fields and tab as you need to follow the rest steps of the Shortcode Generator steps (1-3) that showed in above.

To create a Grid layout first need to select Layout Type = Grid then select a Grid Layout Style.

Step 1: Select Layout Type => Grid

Step 2: Layout Style => Select any Grid layout. Note: Additional Layouts are Pro features

Step 3: Now set the display per row of the column for desktop, tab & mobile view.

Now set the other fields and tab as you need to follow Shortcode Generator steps (1-3) that showed in above.