Testimonial Carousel Overview

Getting Started

Placing a testimony on the website is an excellent way to be trustworthy among visitors. Creating one is no longer difficult with the divi testimonial carousel module. This module’s exclusive features make the process very fast and more accessible than ever before. The most notable features are the child item, author bio & image, carousel & Coverflow setting, item order, text area & author box background. Moreover, many more attributes like the brand logo, author box setting, quote icon & image, custom spacing, and suchlike are available to fabricate a better design. Now Let’s reveal all the feature’s work procedures and abilities in detail.

Child Item

Before walking into the detailed discussion of testimonial Carousel global features, let’s achieve a proper guideline about the Child Item features activities. Child Item, written as Add New Item, has a couple of fascinating features that only apply to certain carousel items. The design attributes of the child item are separated into three categories,

+ Content Option

+ Design Option

+ Advanced Option

Child Item Content Tab

The basement of the Divi testimonial carousel is the child item content tab, a super combination of fundamental features. The integrated features are the content, images, setting, link, background, and admin label. Read the instruction below about all the functionalities in detail. Don’t be afraid of the customizing process; it’s easier than you thought.

Content

The Child item content tab’s Content attribute represents 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 that demonstrates the author’s credibility.

Image 

The image feature helps a designer to place the author’s image and company logo easily.

Setting

Two types of attributes are deployed under the Setting feature; the enable rating and quote functions. The enable rating is dedicated to bringing the rating option to the module. The enable quote icon is placed to set up a quote image or icon in the child item. 

Link

The link feature has been presented considering taking visitors from the child item to another page. The child item link feature allows a designer to provide a custom link to the item. The divi testimonial carousel is discovered along with all the features that are generally required.

Background

The background features of the child Items Content tab have multiple attributes to apply for a better layout view. Such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desire. Note, this background is applied to the entire item as the divi default feature.

Admin Label

Admin Label of Divi Module provides the opportunity to modify the module name as you wanted. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.

Child Item Design Tab

The Design tab is responsible for taking care of the decoration part of all the ingredients. Here, a designer can adorn the font style of the author name, job title, company name, and description. Moreover, the spacing, border, and transform features are included under the design tab.

Font Style

Font Style has four purposes: embellishing the author name, job title, company name, and body text. This feature authorizes you to modify the author name font-weight, style & color. Also, the name text size, letter spacing & line-height can be fixed here. All these features are available for the job title, company name & body text.

Spacing 

The spacing setting 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 the items individually.

Border 

The Border feature of the child item can provide a designer a border corner rounding effect for the item. Also, designers can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see it’s easier than you thought.

Transform

The transform feature of the child item provides a designer with 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.

Child Item Advanced Tab

The content and design tab makes a designer satisfied with all the achievements that they ever wanted. Yet, if a designer seeks to go beyond the limitation, the advanced tab of the child item is here to help. This tab brings custom CSS code, visibility, transitions, position, and scroll effects to play precisely with each element. So, work fluently and comes out with some extraordinary designs.

Note Down: All the features and effects you get here apply individually to each child item of the Testimonial Carousel module.

Global Features of Divi Testimonial Carousel Module

Now, it’s time to discover how the global features of the Divi Testimonial Carousel module work? Unlike any other Divi modules, the Diviflash Testimonial Carousel features are split into three categories,

+ Content Tab

+ Design Tab

+ Advanced Tab

Divi Testimonial Carousel Content Tab

The most crucial and exciting features are included in the divi testimonial content tab. The carousel & Coverflow settings, item order, text area & author box, and rating container background are notable features. So let’s start the journey of learning how all the features work here.

Carousel Setting

The Carousel setting is being great support considering the uniqueness and beauty of the Diviflash testimonial carousel. In addition, this setting is giving favor by introducing advanced features like the carousel type, max slide desktop, tablet & Mobile, spacing, Speed, etc. Now, it’s time to step forward to learn the carousel setting deeply.

Carousel Type

The carousel Type feature of the Carousel Setting allows designers to define the type of carousel imported in the module. And as a designer, you have two options: the Slide & Coverflow type of carousel. So choose one as the design demands.

Max Slide Desktop, Tablet & Mobile

The Max Slide feature for the Desktop, Tablet & Mobile is the precious beauty of this module. Creating a different viewport for these three different devices is just a matter of a click under the max slide attribute, as you are aware that the mobile and tablet screens are smaller in comparison to the desktop. Here, you can easily determine the number of slides displayed on the screen of several devices. So, this feature is proven as super supportive in such circumstances. In other words, you can define these features as the responsive power of the testimonial carousel module.

Spacing (px)

You may already get the answer to why the Spacing Px feature is used for? Yes, you guessed it, this feature lets you set a perfect distance between the testimonial carousel images. This property is measured in pixels.

Speed (ms)

The Speed is a feature used to determine the time that it takes for an item to appear in the middle of the content’s carousel slides while clicking the arrow navigation. This property is measured in milliseconds.

Centered Slides & Loop Effect

Centered slides help you start showing images from the center of testimonial carousel slides. On the other hand, the Loop effect creates an endless spherical image exhibition of the testimonial carousel module.

Autoplay

The Testimonial Carousel Autoplay feature is responsible for inventing an auto slider for carousel slides. Under this feature, a designer can specify the time required for the sliders to slide automatically. Also, designers are allowed to activate the feature called push on hover. This feature allows slider autoplay to be turned off while hovering.

Arrow & Dot Navigation

Activating the Arrow Navigation feature of the carousel setting produces the arrow sliders on the left & right sides of the testimonial carousel module. On the other hand, create a dot slider for each item at the bottom of the module by turning on the Dot navigation feature.

Equal Height Item

The Equal Height item is a super supportive attribute when it comes to using different-sized images. This feature is for you to equalize the height of all images. 

Coverflow Setting

Coverflow brings a list of features combined with each other for a professional design. These attributes are not self-reliant, the interaction is required within each attribute for perfection. The list of these interesting is demonstrated below; take a look at the most straightforward process and be efficient.

Enable Slide Shadow 

The enable slide shadow is a splendid way to provide a shadow effect to the testimonial carousel slider. This feature consists of two different coloring methods, such as shadow color dark & light.

Slide Rotate in Degree

In many cases, designers seek to implement a compatible rotate effect on the carousel slider. In such cases, the Slide Rotate feature will be worthy enough to meet designers’ requirements. Therefore, the Slide Rotate property is measured by degree.

Stretch Space Between Slide

You might already understand what and how this feature of advanced settings works? Yes, the name of this feature represents its task. For example, the Stretch Space Between Slides allows you to give an appropriate distance among the carousel sliders.  

Stredepth Offset

The Stredepth Offset feature is used for defining a compatible depth of the Coverflow carousel effect. Unless you try and see the difference while changing the value of this feature, it might be hard to understand. So, apply it and get what you deserve.  

Effect Multiplier 

Here we come to an exciting feature of the Coverflow settings, the Effect Multiplier. The responsibility of this feature is to multiple the value of all the attributes included in the Coverflow carousel settings. So let’s make it more clear; if you set the value two here, it will double the normal values of all the features. 

Please note down, every feature under this setting is related to each other and requires a proper combination of values of all attributes. And be aware the Coverflow setting is only available for the Coverflow carousel type.  

Item Order

The “Item Order” is a great feature to define module ingredients position one by one from the top to bottom. Let me make it easier for you to understand; there is a moment when you seek to display the testimonial content below the author box, right? Here, you got the solution “the Item Order setting” to change to order values. The process is the same for all components like the quote, company logo, and rating orders.

Text Area Background

It is a common desire of designers to look for more opportunities to embellish designs. The Diviflash testimonial carousel helps designers to go beyond the limitation. Text Area Background lets you apply a background color, gradient, and image to the body text background.  

Author Box Area Background

The Author Area Background almost works the same as the text area background feature. The only difference is this feature applies to the entire author box.    

Rating Container Background

The Rating Container Background almost works the same as the text area background feature. But this feature is only achievable in the rating area.  

Background 

The background setting of the Divi testimonial carousel content tab has multiple facilities to implement for a better layout. Such as background color, gradient color, image, and video features. And on top of these features, there are some settings to make each adjustment as you desire. Note, this background will apply to the whole module.

Admin Label 

Admin Label of Divi Testimonial Carousel Module provides the opportunity to modify the module name as you wanted. So, it doesn’t have to be the module’s actual name that generally shows on the wireframe view.

Divi Testimonial Carousel Module Design Tab

After you are done with the content tab, the Testimonial carousel Design tab comes to satisfy you alongside more attractive features. The design tab is dedicated only to decorating all the elements that got placed by other settings. Now, let’s discover what a designer is capable of accomplishing under this tab?

Brand Logo

As a designer, you may already put a logo in the child item setting if you have come this along. The Brand Logo feature is imported here to polish the logo by changing its alignment, width & corner rounding effect, border width, color & style over various shadow effects.  

Author Image

The Author Image feature is a place from where you can control the author image max-width, border style, color & width. Also, a border corner rounding and various box-shadow effects can be given here.  

Author Box Setting 

Under the Author Box Setting, a designer can move the author image position between top, left, right & bottom directions. Also, the horizontal image alignment can be fixed from here. The author box setting is responsible for modifying the author’s typography alignment. Nevertheless, this feature lets you play with the author box border color, style & width over border corner rounding, and multiple shadow effects.   

Font Style

Font Style has four different purposes: embellishing each CSS input box There the author name, job title, company name, and body text. This feature authorizes you to modify the author name font-weight, style & color. Also, the name text size, letter spacing & line-height can be fixed here. All these features are available for the job title, company name & body text. Remember, this setting of global features affects the entire module at once. 

Arrows

The Arrow feature allows designers to transform the arrow icon into a stylish look by decorating each ingredient part by part.  

Arrow Icon

Under Arrow Settings, you will have the opportunity to select your preferred icon for the arrow previous and next icons. 

Arrow Icon Color & Background 

The Arrow icon color attribute is imported to change the arrow color. Meanwhile, the background feature is to modify the arrow background color.

Arrow Position, Alignment & Opacity 

The Arrow feature of the testimonial carousel has a different attribute to adjust the arrow position, alignment & opacity level. 

Circle Arrow

The Circle Arrow feature provides an excellent circle shape for the Arrow.     

Arrow Margin & Padding

The Arrow is considered a self-sufficient feature when it comes to the embellishment of an arrow icon. This feature provides two different margin & padding facilities for the previous and next Arrow icon.

Dots

The Dots feature is of the design tab embellish the dots icon by placing the alignment & various colors effect. Also, you can change the color of the active dot icon by the active dot color features.

Ratting 

The rating attribute of the Diviflash testimonial design tab modifies the rating icons. This setting can define the correct color, alignment & size of the rating icons. However, you get the way to fix a perfect space between the rating icons as well. 

Quote Icon & Image 

The quote & image option brings you the features to define the quote & image alignment, size, icon color, and background. Nevertheless, you get the opportunity to provide image max-width and opacity level, including the box-shadow effects.

Quote Z index and box-shadow

The Quote Icon & Image is a fantastic invention amid other features dedicated to designing the Quote icon & image. This feature helps you to provide a splendid look to the icon & image by changing the alignment, size, icon color & background, image max-width & opacity. Moreover, it is just a matter of clicking under these settings to identify the appropriate value of the quote z index attribute with a few box-shadow effects.

Custom Spacing 

The Diviflash testimonial carousel Custom Spacing feature doesn’t work like the divi default spacing attribute. However, it is considered the most prominent and crucial setting for defining a compatible distance between module ingredients. So let’s go deeper into this setting; two different types of spacing attributes are presented here.

Wrapper spacing 

The wrapper spacing attribute lets you provide the wrapper margin & padding on the item, author box & quote. Moreover, here, you have the common wrapper margin & padding that hit the entire module.

Content spacing

On the other hand, the Content spacing allows designers to put margin and padding in all the directions for the ratting, text, & quote separately. Also, you are authorized to apply only the margin on the brand logo & author image.

Sizing 

You would love to control the Testimonial Carousel module’s alignment, width, and height as a designer. Here, the sizing feature stands in your favor to increase or decrease your container’s width and height. Even you can set a min or max-height & width of the testimonial carousel.

Spacing

Divi makes the spacing setting a default feature for the whole module. Therefore, you will find two expected margins and padding settings that work the same for all Divi modules in this function. 

Border

The Border feature of the Diviflash Testimonial Carousel module can provide you with a border corner rounding effect for the container. Also, you can customize the design by changing the border width, style, and color under it. However, don’t feel confused by just reading; try once and see it’s easier than you thought.

Box Shadow

This Box shadow affects the entire Divi Testimonial Carousel module and has six distinct shadow effect styles.

Divi Testimonial Carousel Advanced Tab

All you seek to design is possible under the Content and Design tab, so take the convenience as much as possible. However, Divi Testimonial Carousel Module Advanced Tab intends to quench the designer’s thirst to have direct control over the module. Designers can precisely play with each module element by implementing CSS ID & Classes and other Custom CSS code. Further, The visibility, transitions, position, and scroll effects settings are included to work fluently. 

CSS ID & Classes

CSS ID: The only purpose of the CSS ID section is to identify the ingredient separately while linking, scripting, or styling the module.

CSS Class: Assign any number of CSS classes to the element, separated by spaces, which can be used to assign custom CSS style from within your child’s theme or from Divi’s custom CSS inputs.

Custom CSS

There are three different custom CSS areas in the Diviflash Testimonial Carousel module, and here you can target and set your custom CSS code. A sign “?” in each CSS input box will tell you which class has been targeted.

Visibility 

The advanced setting’s visibility option allows designers to hide the testimonial carousel section for a particular device.

Transitions

You have features like Transition duration, Delay, and Curve Speed for better customization under the transition setting. 

Position

Here you have complete control over the relative, absolute, and fixed positions. This option is also available in every Divi module and works almost the same for all.

Scroll Effects

If you wish to give a scroll effect to your testimonial carousel module, here you have the opportunity to achieve it with the scroll effect setting. Under this setting, you get a Sticky position, Scroll Transform effects, enable vertical motion, and motion effect trigger functions.

NOTE:

Mobile: Any setting that has a mobile icon will allow you to customize according to devices. You can select different settings for desktop, tablet & Mobile.

Mouse: A mouse pointer in the setting will allow you to set a hover effect on this element.

Submit a Comment

Your email address will not be published.