Using Testimonial Slider 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 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.