Testimonials Widget

What is the Testimonial widget?

The Testimonial widget lets you easily add testimonial sections to your website. You can use these sections to showcase feedback, reviews, or quotes from clients, customers, or users.

Additionally, the testimonial widget includes plenty of options to customize the appearance of the testimonial section, including the layout, style, and content, to match your website’s design and branding.

How to add a Testimonial widget

You need to create a new section, choose a grid layout and click adding a new element. By adding a new element, you will see a popup including all the widgets available.

Simply choose the Testimonials from the Widget list, then it'll be added to the layout's section where you want to add a Testimonial widget.

The Testimonials Widget consists of 4 main settings tabs:

• General Settings

• Design Settings

• Responsive Settings

• Menu Assignment

I. Testimonials General Settings

In the general settings, you will find many options for Testimonials items, Grid options, Card options, Slide options, Designation options, Name options, and Message options.

1. General

Here you can click on Add Item to add a new testimonial item.

Click "New Item" to add a new Testimonial item. You can input a name, designation, link, avatar image, message, and overlay text color.

2. Grid Options

In this part, you can adjust the number of columns of testimonials on different devices. (2X large screen, X large screen, Desktop, laptop, tablet, and mobile phone).

Use masonry: enable this option and you can effortlessly show testimonials in a masonry grid layout.

3. Card Options

This section allows you to configure the testimonials card style.

• Card style: Choose a card style from the drop-down list

• Card size: choose a card size from the drop-down list

• Card border-radius: choose an option defining the radius of the testimonial card's corners

• Enable grid match:

• Hover transition: Choose a hover transition

• Box shadow: Choose a box-shadow option

• Hover box-shadow: Choose a hover box-shadow

4. Slider Options

• Display article as a slider: Enable this option to show testimonials in the slider.

• Autoplay: Enable the option to make the slider automatically play.

• Navigation: Enable to show the navigation icons prev and next.

• Dot navigation: Enable this option to display the dot navigation.

5. Avatar Position

In this part, you can find options to configure the avatar image's position.

• Avatar position: Choose a position for the avatar

• Max width: Set the max width of the avatar

• Border options: Set the border size

• Boder style: choose an option for the border style from the list

• Border color: You can set the border color in light and dark mode

• Border radius: Set the border radius of the avatar

• Hover effect: Choose a hover effect when hovering the avatar image

• Hover transition: Choose a hover transition from the list

6. Name Options

In this part, you can see the customer's name-related options which allow you to adjust the name's style such as: font family, font weight, font size, letter spacing, line height, font color and so on.

7. Designation Options

This part allows you to adjust the style of testimonial designation.

8. Message Options

Here are options to configure the style of the testimonial messages.

II. Design Settings

• Element Visibility: Choose to set the element to be visible on "Current and all linked pages", or on "Current menu items only".

• Animation: Choose an animation for the widget from the drop-down list.

• Max Width: Set the Max Width for the widget.

• Max Width Breakpoint: Define the device width from which the element's max-width will apply.

• Block Alignment: Define the alignment in case the container exceeds the element's max-width.

• Block Alignment Breakpoint: Define the device width from which the alignment will apply.

• Text Alignment: Set the alignment of the text of the widget.

• Text Alignment Breakpoint: Choose a breakpoint at which the text alignment will change.

• Background Type: Select the background type for the widget from None, Color, Image, Video or even add a Gradient.

• Custom Color: Choose whether you want to enable or disable the custom colors for the widget. If you enable it then you have the option to set Text Color, Link Color & Link Hover Color of the element’s content.

Spacing

Add margin and padding values over the row to improve its appearance on different devices.

Custom css

Here in the design settings, you can also add custom CSS to customize the design of the element.

III. Responsive Settings

Device Visibility: Choose your preference for hiding or showing the section on different screens like:

• Hide on Extra Small Devices: Enable to hide the widget on mobile phones.

• Hide on Small Devices: Enable to hide the widget on tablets.

• Hide on Medium Devices: Enable to hide the widget on laptops.

• Hide on Large Devices: Enable to hide the widget on desktops.

• Hide on Extra Large Devices: Enable to hide the widget on extra-large screens.

IV. Widget's Menu Assignment

Since Astroid framework 3.0.12, the menu assignment feature has been introduced, which is applied to widgets available in Astroid's widget library.

You can choose between On all pages, No pages, Only on the pages selected from the List.

• On all pages: the widget will be visible on all pages of your website

• No pages: the widget will be invisible on all pages

• Only on the pages selected: "Menu Selection" will show with all the menu items on. You can assign the widget by selecting the menu links that you want the widget associated with on what pages the widget appears.