The Testimonial Carousel Module for divi is enhanced with features like the child item, author bio & image, Carousel & Coverflow setting, item order, text area & author box background. Furthermore, there are many more attributes such as the brand logo, author box setting, quote icon & image, and custom spacing.
Global Content Tab
Add New Item: Add new item allows you to add the author bio and all the necessary information. Here, you’ll find dedicated spots to add the author’s name, job title, company information, and a description demonstrating the author’s credibility.
Child item
Each new item you add will work as a child item and contain three tabs.
Content Tab – Child Items
Content
- Author: Option to add author name.
- Job Title: This option allows you to add the author’s job title.
- Company: This option allows you to add your company name.
- Company URL: Option to add a company URL.
- Body: Add a testimonial from the author here.
Tips: You don’t need to add exact match information; you can add anything in any field. For example, you can write “works at” in the job title field, and the output will look like “works at company name.”
Images
- Author Image: Placeholder to add the author image here.
- Author Image Alt Text: Set Author image alt text here.
- Company Logo: This area is for adding a company logo.
- Company Logo Alt Text: Set Company Logo alt text here.
Tips: You can use the image field alternatively.
Settings
Some settings with rating and quote design options are here
- Enable Rating: Turning ON the function will add a 5-star rating.
- Image for Quote Icon: This feature allows you to add an image for the quote from your media library.
- Enable Quote Icon: Turning on this function allows you to add the divi’s default icon.
Link
You can add a link to the whole container from here.
Background
All the regular background options are available here for the child item you selected
Admin Label
Adjust the admin label if you need.
Design Tab Child Items
Tips: If you want the same design for your testimonials, keep the child items design and change the design from the global tab.
Font Style
- Name: Design the typography, color, etc., for the name text.
- Title: All the design options for name text are also available for the title.
- Company: All design options for the company’s name text are also available.
- Body: All the design options for name text are also available for the Body.
Spacing
This is a default feature provided by Divi for a particular item. In addition, you will find two expected margins and padding settings that work for all items individually.
Border
The Border feature allows you to round the corners of the border for the item. Furthermore, you can customize the design by changing the border width, style, and color.
Transform
The transform feature provides five different types of transform facilities. For instance, transform scale, translate, rotate, skew, and origin options. Implementing these functions on the specific item will give better control over the section.
Advanced Tab – Child Items
This document covers features from the Advanced tab.
Note: All features here are specific to the child item.
Global Content Tab Continues
Carousel settings
Carousel type: Choose a carousel type from two alternatives: “Slide” and “Coverflow.” By default, the carousel type is selected as “Slide.”
Max Slide Desktop: Here, you can define the number of items you want to show in the Desktop Viewport. By default, the maximum number of slides is set to 3 on the desktop.
Max Slide Tablet: To define the number of items to show on the tablet. The maximum slide on the tablet is set to 2.
Max Slide Mobile: Similar to mobile devices. The Max Slide is default set to 1 on mobile devices.
Spacing: Give spacing between the carousel items. By default, the spacing between the carousel’s items is set to 30px.
Speed (ms): You can change the carousel item’s rotation speed. This property is measured in milliseconds.
Centered Slides: Enabling this option will show the first item at the center of the testimonial carousel.
Loop: Enabling this option creates a loop effect for the carousel items. The carousel items will always continue if you click the navigation arrow.
Autoplay: Enabling this option makes the carousel items slide automatically. It will enable two more options to control autoplay. The options are Autoplay Speed and Pause On Hover.
Autoplay Speed: You can control the autoplay speed from here. By default, the autoplay speed is 2000 ms.
Pause On Hover: Enabling this option makes a pause when hovering over the carousel.
Arrow Navigation: Turn ON this option to show the navigation arrows.
Dot navigation: Turning ON this option will display dot navigation.
Equal Height Items: This feature makes all the carousel items equal in height.
Note: When the carousel Type is selected as Coverflow, the Coverflow Settings will be available.
Coverflow settings
Under Coverflow Settings, you will see the following options.
Enabling Slide Shadow: Enabling this option will create a shadow effect on the testimonial carousel slider. This feature consists of two different coloring methods: shadow color, dark & light. You can adjust the color as per your design. By default, it remains turned OFF.
Slide Rotate in degrees: Set the rotation between the sliders. The rotation amount is measured in degrees.
Stretch space between slides: Set the distance between the sliders.
Stredepth Offset: It moves the carousel items towards or further away from the viewer by the specified amount through the Z axis.
Effect multiplier: This feature multiplies the value of all the attributes included in the Coverflow carousel settings.
Items Order
The “Item Order” defines the module’s ingredients positions one by one from top to bottom. Increasing or decreasing the value will change the position. It is the same process for all components, including quotes, company logos, and rating orders.
Text Area Background
Set the background color, gradient, and image for the body text background.
Author Box Area Background
The Author Area Background works the same as the text area background feature. The only difference is that this feature applies to the entire author box.
Rating Container Background
Set the background color, gradient, and image for the ratings here.
Background
Set the background color, gradient color, image, video, pattern, and mask for the whole module.
Global Design Tab
Brand logo
If there is a Company logo on the individual item, you can set the logo’s alignment, Max Width, Rounded corners, Border width, Border style, Border color, and Box Shadow from here.
Author Image
Set the Author image max-width, border styles, color & width. Also, border corner rounding and various box-shadow effects from here.
Author Box Setting
You can set the author image position from this option between the top, left, right & bottom directions. The horizontal image alignment can be fixed from here. Author’s text alignment, rounded corners, border styles, border width, color, and box-shadow effect.
Font style
This option allows you to change the Author’s Name, Job Title, Company, and Body text typography from here.
Arrows
Here you can add custom styles for the arrow navigation.
Arrow Icon: Enabling this prev and next icon will allow you to select the arrow icons. You can browse many icons in the Divi Icon Library.
Icon Size: Change the icon size from here.
Arrow Icon Color & Background: Change the arrow icon color and background color from here.
Arrow Position, Alignment & Opacity: Change the Arrow position and alignment for different devices from here. It also changes the opacity level.
Circle Arrow: Enabling this option makes a circle shape of the navigation arrows.
Arrow Margin & Padding: Add margin and padding to the next and previous arrows from the Arrow Margin and Padding option.
Box Shadow: Option to set a box shadow for the navigation arrows.
Dots
Set the navigation dot’s alignment, color, and active dot color from here. You can also set the large active dot by enabling “Large Active Dot.”
Rating
Adjust the color, alignment, size, and space between the ratings.
Quote Icon & Image
You can set Quote Icon/image alignment, icon size, color, background color, image max-width, opacity, Z-index, and Box Shadow from these settings.
Custom spacing
Besides the Default Spacing option, Carousel has a Custom Spacing feature; you can set the margin and padding for the wrapper as well as all the module content.
Spacing, Sizing, Border & Box Shadow
These are features that are present in all Divi modules and work the same way for all.
Global Advanced Tab
The advanced tab is covered in the General Doc.
