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.
