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