Testimonials Widget
Last updated
Was this helpful?
Last updated
Was this helpful?
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.
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
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.
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.
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.
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
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.
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
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.
This part allows you to adjust the style of testimonial designation.
Here are options to configure the style of the testimonial messages.
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.
Add margin and padding values over the row to improve its appearance on different devices.
Here in the design settings, you can also add custom CSS to customize the design of the element.
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.
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.
