Using Testimonial Isotope Filter Layout Widget
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.