If you have more testimonials you want to show on your website than using a carousel is a very good way. Because it will not overload your website with testimonials rather show them in a carousel manner. And to this make this implementation even easier, Qubely has a separate Testimonial Carousel block. Go to the add block section, click on the Testimonial Carousel and click on it to add it to your page.

Style

There are three prebuilt layouts you choose from. Each of them provides a sperate layout design for your Qubely Testimonial Carousel blocks.

Alignment: Select the alignment of the content on the testimonial carousel blocks. You can choose the alignment as left, middle, and right.

Number of Carousels: Choose the number of carousels you want to show using the slider. You can also select the number manually.

Number of Columns: Apply for the column number with the slider or manually set the column numbers. It is a responsive feature so you can set different numbers of columns for different types of devices.

Gutter: Set the gap distance between each of the testimonials in the Qubely Testimonial Carousel block.

Carousel Settings

This section of the block settings gives you the option to overall general settings of the Qubely Testimonial Carousel. From here you can

Show Arrow Navigation: Enabling this feature will show an arrow to both ends of the Testimonial Carousel. The user will be able to interact with the carousel with the arrow buttons if you enable them. Disabling this option will hide the arrow keys.

Show Dot Navigation: This toggle button lets you enable/disable the dot navigation option at the bottom of the Testimonial Carousel. The dot navigation shows the user which testimonial page they are currently viewing.

Draggable: You can let your users drag to the testimonial they want to view by enabling this toggle button. After enabling they will be able to click and drag to the testimonial both on forward and backward in the testimonial carousel.

Autoplay: This toggle button controls the autoplay feature for the Testimonial Carousel. Enabling it will collapse the advanced autoplay feature.

• Speed: Select the autoplay speed according to the millisecond. Use the slider to set the speed or manually set the speed.
• Interval: Set the interval in milliseconds using the slider or manually.

Centered Slides: Centered slides option lets you focus on a single testimonial in the carousel at a given time.

Fade Deactivated Items: Enabling this toggle button will give a fading animation to the other testimonials apart from the testimonial in focus.

Arrow Settings

Configure the arrow style and its settings from this section.

Arrow Style: There two types of navigation arrow styles you can choose from.

Vertical Position: Set the vertical position of the arrow keys with the slider.

Shape Size: Select the size of the arrow box size from here.

Arrow Size: Set the arrow size inside the box from here.

Note: Vertical Position, Shape Size, and Arrow Size all of these are responsive features so they can set according to different device types.

Normal/Hover: Configuration options for defining attributes for the normal state of the arrow. Please note the same configuration options can be set for when a user hovers over the arrow. You can set the color, background color and fill color.

• Arrow Color: Select any color from the wide color palette. Click on the clear button to undo any applied color.
• Fill: Selecting this option will fill the background specific to the text of the icon with a color. You are free to choose the color of the background from the Design section of the block settings.
• Background: If you would like to show a specific color to the background to the content of the team member details section you have the option to do that from here. You can choose 
  • Fill Color: Selecting this will only set a solid color for your image overlay. From the Fill Color option, you can choose from a wide range of colors.
  • Gradient Type – Linear: A linear gradient applies the gradient by an axis. It’s a linear line. The effect is applied with a Gradient Angel, which defines the starting point. And two colors applied at two ends. Color 1 starts at the defined angle point and Color 2 starts after the Color 1 endpoint.
  • Clear: Lets you reset the existing gradient effect. You can use it to start over.

• Border: Set a border around your content. Predefined borders include Solid, Dotted, Dashed and Double.
• Corner Radius: This slider lets you configure the corner radius of each post grid blocks. There is a global option to set every corner with the same value or you can select each individual corner with a separate value.

Dot Settings

These configuration settings let you set how you want to navigation dots to show in the Testimonial Carousel block. You will be able to set

Dot Width: Set the width of the navigation dot with the slider. You can also manually enter the dot width.

Dot Height: Select the height of the navigation dot from the slider or with manual input.

Dot Border Radius: Use the slider to set the radius of the navigation dot or set it manually.

Spacing: This feature lets you set the spacing distance value between the testimonial content and the dot navigations. Set the value with the slider or set it manually.

Note: All of the above-mentioned features are responsive so they can be set according to different device types.

Normal/Hover: You can different attributes depending on the state that they are in. In the normal state and when a user hovers above the dot navigations. You can set

• Dot Color: You will find the given options below.

• Color: Selecting this will only set a solid color for your image overlay. From the Fill Color option, you can choose from a wide range of colors.
• Gradient Type – Linear: A linear gradient applies the gradient by an axis. It’s a linear line. The effect is applied with a Gradient Angel, which defines the starting point. And two colors applied at two ends. Color 1 starts at the defined angle point and Color 2 starts after the Color 1 endpoint.
• Clear: Lets you reset the existing gradient effect. You can use it to start over.

Message

This set of options let you configure the message in the testimonial box in the Testimonial Carousel block.

Top Spacing: Set the spacing value between the top section and the message. Use the slider or set it manually.

Bottom Spacing: Controls the spacing between the bottom section and the testimonial message.

Typography: Select what typography you would like to use from these settings. 

• Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
• Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
• Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
• Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom typography.
  • Line Height: It’s the difference between lines, adjust it the way you want to.
  • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
  • Text Transform: Lets you apply your preferred capitalization format to the text.

Name

It provides the option to control the Name section attributes of the Testimonial Carousel. You can set

Spacing: Define the spacing value for the Name section with the testimonial. Use the slider or set it up manually.

Color: Set the color of the text from the wide color palette or click on the clear button to reverse any applied color.

Typography: Select what typography you would like to use from these settings. 

• Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
• Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
• Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
• Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom typography.
  • Line Height: It’s the difference between lines, adjust it the way you want to.
  • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
  • Text Transform: Lets you apply your preferred capitalization format to the text.

Designation

Control the designation section attributes of the Testimonial Carousel. You can set

Color: Set the color of the designation text from the wide color palette or click on the clear button to reverse any applied color.

Typography: Select what typography you would like to use from these settings. 

• Font Size: Define the size of the font. It is a responsive function, therefore, the size of the font can be customized according to the device type.
• Font Family: Choose your desired font to use from the list. Qubely has a collection of 900 fonts including the defaults that come with Gutenberg. 
• Weight: Set the font-weight. Normally the font-weight is the thickness of a font.
• Advanced Typography: If you click on the gear icon on the Advanced Typography you will be presented with advanced configuration options to set custom typography.
  • Line Height: It’s the difference between lines, adjust it the way you want to.
  • Letter Spacing: It controls the space in between letters, defines the gap the way you want to.
  • Text Transform: Lets you apply your preferred capitalization format to the text.

Avatar

If you want to show an avatar alongside the Testimonial providers name you need to enable this option. After switching on the toggle button you will find

Avatar Size: Set the avatar size small, medium, large or a custom size. The custom size option is responsive so you can set the different sizes according to the device type.

Radius: Use the slider to set the radius of the avatar area. You can set a global value or even use the custom option to set different radius values to different sections separately.

Border: Set a border around your content. Predefined borders include Solid, Dotted, Dashed and Double. There is also a clear button if you don’t want to apply a border.

Spacing: Define the spacing value for the avatar section with the Name attribute. Use the slider or set it up manually.

Rating

Enable this function to show ratings alongside your testimonials. To start showing ratings switch on the toggle button. After you enable this you will find

Ratings: You can set the rating for each testimonial separately.

Color: Choose the color of the ratings in the testimonial. Select any color you would like from the wide color palette.

Stars Size: Use the slider to define the size of the stars in the rating stars in the testimonial block.

Spacing: Choose the spacing value you want between the rating stars and the testimonial text content.

Design

It gives you the control option that lets you design the block area of the Testimonial Carousel block. You can select

Text Color: Select a text color from the color palette. For the content text of the testimonial block.

Background: Set the background color of the testimonial block from any color.

Border: Set a border around your content. Predefined borders include Solid, Dotted, Dashed and Double.

Padding: To set the Padding of the icon list, you can use the Padding function. You can apply the same value to all the corners by choosing the global option whereas selecting the Custom option will let you set a different value for each corner. Also, it’s a responsive feature that means you can apply different values for different device types.

Border Radius: Set the border radius of the testimonial block area using this slider. You can use the global settings or set corner radius for each corner separately. It is a responsive feature so you can set different radius values for each type of device.

Normal/Hover: You can enable Box Shadow for both normal state and while the user hovers over your testimonial content. In the Box Shadow, settings you will find

• Box-Shadow: You can apply shadow to the image using this feature. You can apply shadow for both Normal and Hover states. Enabling the feature will present you with the following options:
  • Color: Lets you choose the color of the shadow.
  • X: Lets you define the length of the shadow of X-axis.
  • Y: Lets you define the length of the shadow of Y-axis.
  • Blur: Lets you control the blurriness of the shadow.
  • Spread: Lets you control how far the shadow will spread.

Advanced

Animation

To make the block more interesting, you can add an animation effect. It is disabled by default, to enable this feature, choose an effect from the dropdown list. Once you choose your desired one, then start making modifications as you seem fit. The units are in milliseconds. Note: Duration is how long the animation will run and Dealy is the waiting time before the animation starts loading. The following effects are currently available.

• Fade: Selecting this will animate your Image block with a fading animation.
• Slide: Animate your Image block with a sliding animation.
• Bounce: If you want to animate your Image block with a bouncing animation then select this.
• Zoom: This option will animate your Image block with a Zooming animation.
• Flip: Animate your Image block with a Flipping animation using this option.
• Fold: Selecting this will animate your Image block with a sliding animation.
• Rotate: This will animate your Image block with a rotating animation.

Advanced

This section lets you override the current styling of this particular block.

Enable Custom Position: If you want to set the image block to a custom position then simply enable this option. After enabling you will find the following options

• From X-axis: Select from the slider what position you want the image block to be in according to the X-axis. The range limits from -2000 to 2000.
• From Y-axis: Select from the slider what position you want the image block to be in according to the X-axis. The range limits from -2000 to 2000.

Z – Index: If any of your blocks override another, then you can set a value here, the one with the higher value will appear before the other.

Hide on Tablet/Phone: Turn it on to hide this block in your desired device. The change will appear on the frontend.

Block Row CSS: In case you need to override current block settings, you can write down your own code followed by {{QUBELY}} to override the current settings.

Additional CSS Class: You might need to name a block in order to make custom modifications in the future, this is the field where you define the name.