The DiviFlash testimonial carousel module for Divi is a powerful tool designed to showcase positive feedback and testimonials from satisfied customers. It presents testimonials in a visually appealing carousel format, allowing for easy navigation and a seamless user experience.
Content
Add New Item
To add a new testimonial to the carousel, click the plus (+) icon labeled “Add New Item.” This will open the “Testimonial Carousel Item Settings” where you can enter the content for the testimonial slider.
To learn more about adding content to the testimonial sliders to the carousel, click here.
Carousel Settings
- Carousel Type: Choose the type of the carousel you want to use. You have two options: Slide or Coverflow. The slide is the traditional carousel type whereas coverflow is for a more modern, 3D look.
- Max Slide Desktop: Choose the number of carousel items you want to display on desktop devices.
- Max Slide Tablet: Choose the number of carousel items you want to display on tablets.
- Max Slide Mobile: Choose the number of carousel items you want to display on mobile devices.
- Spacing: Adjust the space between the carousel items.
- Speed: Define the slide speed for the carousel items.
- Centered Slides: The first slide will be placed at the center when this option is toggled on.
- Loop: Enable this option to add a loop effect to the testimonial carousel.
- Autoplay: Enable this option to have the sliders rotate automatically.
- Autoplay Speed: Define the speed of the autoplay effect. Only available when autoplay is enabled.
- Pause on Hover: When enabled, the auto-playing slide will pause when hovered. Only available when autoplay is enabled.
- Arrow Navigation: Turn on to enable arrows to navigate the testimonial sliders.
- Dot Navigation: Turn on to enable dots to navigate the testimonial sliders.
- Equal Height Item: Enable this to make all the testimonial sliders equal in height.
Coverflow Settings
If you select “Coverflow” as the “Carousel Type,” you’ll gain access to coverflow slider customization settings.
- Enables Slides Shadows: Turn on to add a shadow effect to the coverflow sliders.
- Slide Rotate in Degrees: Adjust the angle of the carousel items.
- Stretch Space Between the Slides: Adjust the gap between the slides.
- Depth Offset: Adjust the depth of the carousel items.
- Effect Multiplier: Determines how many times the carousel items will slide or rotate.
- Shadow Color Dark: Choose the darker shade for the shadow effect.
- Shadow Color Light: Choose the lighter shade for the shadow effect.
Note: The shadow color options are only available if the “Enables Slides Shadows” option is enabled.
Items Order
From this section, you can set the order of all the testimonial carousel content. There are 5 components of the testimonial carousel: Quote, Company Logo, Testimonial Content, Author Box, and Rating. You can assign each component a number from 1 to 5 and they will appear in that order.
For example, we have used this ordering, and here’s how it turned out
Textarea Background
Add a background color, gradient, or an image to all the testimonial sliders’ textarea.
Author Box Background
Add a background color, gradient, or image to all the testimonial sliders’ author boxes.
Rating Container Background
Add a background color, gradient, or image to all the testimonial sliders’ ratings.
Background
Add a background color, gradient, image, and more to all the carousel items.
Admin Label
Change the module name or label if required which will only be visible to you.
Design
Brand Logo
- Alignment: Change the placement of the company logo in the testimonial slider.
- Max Width: Limit the maximum width of the company logo.
The next options are for customizing the border of the company logo which includes changing the border style, color, width, sharpness, and more.
Author Image
- Author Image Max Width: Set a maximum width for the author image.
The next options are for customizing the border of the author’s image which includes changing the border style, color, width, sharpness, and more.
Author Box Settings
- Author Image Position: Change the position of the author box relative to the testimonial content.
- Horizontal Alignment: Move the author box (which contains the author name, job title, and company) to the left, right, or center within the testimonial slider.
- Text Alignment: Change the placement of the author name, job title, and company name respective to the author image.
The next options are for customizing the border of the author box which includes changing the border style, color, width, sharpness, and more.
Font Style
Different sets of typography options for the author name, job title, company name, and testimonial content.
Arrows
Keep the arrow navigation on to use those design options described below-
- Arrow Prev Icon: Toggle on to use a custom icon for the previous button.
- Arrow Next Icon: Toggle on to use a custom icon for the next button.
- Arrow Icon Color: Pick a color for the arrow navigation icons.
- Arrow Background: Pick a background color for the arrow navigation icons.
- Arrow Position: Change the vertical position of the arrow buttons relative to the testimonial sliders.
- Arrow Alignment: Change the horizontal position of the arrow buttons.
Note: When selecting any alignment option other than justified, the arrows will come together, while choosing justified will maintain their separation, with one arrow on each side of the carousel.
- Circle Arrow: Enable to make the arrow buttons circular.
- Opacity: Adjust the transparency of the arrow buttons.
- Spacing: Add custom margin and padding to the arrow buttons.
- Box Shadow: Add a shadow effect to the arrows.
Dots
Keep the dot navigation on to use those design options described below-
- Alignment: Change the horizontal position of the dots relative to the testimonial sliders.
- Large Active Dot: Make the active dot larger than the rest.
- Dots Color: Pick a color for the dots.
- Active Dots: Pick a separate color for the active dot.
Rating
Change the rating icon’s color, horizontal position, icon size, and the space between the icons.
Quote Icon and Image
- Alignment: Change the horizontal position of the quote icon or image respective to the testimonial content.
- Icon Size: Adjust the size of the quote icons.
- Icon Color: Change the color of the quote icons.
- Icon Background Color: Add a color to the quote icons’ background.
- Image Max Width: Set the maximum width of the quote images.
- Opacity: Adjust the transparency of the quote icons and images.
- Quote Z-index: Increase the z-index to make the quote icons or images appear over the testimonial content and vice versa.
- Box Shadow: Apply a shadow effect to the quote icons or images.
Custom Spacing
Add custom margin and padding to each item of the carousel, including testimonial content, author’s name, brand logo, and more.
Sizing
Adjust the width, height, and alignment of the entire module.
Spacing
Add custom margins and padding to the whole module.
Border
Border customization options for all the testimonial sliders. You have the option to style each border individually or all the borders together.
Box Shadow
Apply a box shadow effect to the carousel.
Advanced
The default tab for all Divi modules is used to add custom CSS code, conditions, visibilities, etc.
Testimonial Carousel Item Settings
From here, you can add content and style each testimonial slider separately. Any customization you make here will override the settings you make in the “Testimonial Carousel Settings.”
Content
Content
Add content to the testimonial slider, such as author name, job title, company name, testimonial, and more.
Images
Add the author image, company logo, and their respective alt text.
Settings
- Enable Rating: Turn on to show ratings in the testimonial slider.
- Rating Scale Type: Choose between a 5-star or a 10-star rating type.
- Rating Value: Adjust the star rating to your desired score.
- Enable Quote Icon: Enable to use of an icon to denote the testimonial quote.
Link
Comes by default with Divi. No real use case.
Background
Add a background color, gradient, image, and more to the carousel items separately.
Admin Label
Change the module name or label if required which will only be visible to you.
Design
The sections available here offer functionalities similar to those of their counterparts in the “Testimonial Carousel Settings.”
Advanced
The default tab for all Divi modules is used to add custom CSS code, conditions, visibilities, etc.
Do You Still Have Questions?
If you still have questions, then contact our support team at support@diviflash.com
