Testimonials

This shortcode allows adding a section with testimonials to the page.

How To Add Testimonials Widget To Your Page

  1. Click the   icon to create a Section.
  2. Set your Column structure.
  3. Right-click to Edit, Duplicate, Copy, Delete, etc.
  4. Insert Widget using drag and drop inside your Columns.

5. Choose Widget style (Testimonials 21, Testimonials 20) in the  Layout section.

Testimonials 21 Layout:

Testimonials 20 Layout:

6. Customize widget and add content in  Content Section.  Here you can also customize content Typography.

Content Settings:

1. Testimonials 21 Layout

Background text - Here you can enter the background text for the testimonial section.

Use custom font for position? - Turn on the switcher if you want to customize the position text typography.

Use custom font for testimonials? - Turn on the switcher if you want to customize the testimonials text typography.

Use custom font for Name? - Turn on the switcher if you want to customize the name text typography.

Enable dark version - Turn on the switcher if you want to display the dark version of the testimonials.

Add item - Here you can add the testimonial item.

Item Settings:

  • Display Image - Here you can choose the image position.
  • Name - Please, enter the author's name.
  • Position - Here you can add the author position.
  • Testimonial - Please, enter the testimonial text.

Use custom font for background text? - Turn on the switcher if you want to customize the background text typography.

Swiper Options

Change swiper options? - Turn on switcher if you want to change the following swiper options:

  • Arrows - Turn on the switcher to display swiper in arrows style .
  • Pagination - Turn on the switcher to display the sliders pagination.
  • Loop - Turn on the switcher to display the loop effect.
  • Simulate Touch - Turn on the switcher to display the simulate touch.
  • Autoplay - Please, enter autoplay speed(in ms). 0 - autoplay off.
  • Speed - Please, enter speed(in ms).
  • Number of slides - here you can enter the number of slides by default.
  • Number of slides (lg) - Here you can enter the number of default slides on devices width <1200px.
  • Slide count (md) - Here you can enter the default slider count for devices with a width of <991px.
  • Number of slides (cm) - Here you can enter the default number of slides on devices with a width of <768px.
  • Number of slides (xs) - Here you can enter the default number of slides on devices with a width of <480px.
  • Slide spaces - Here you can enter the spaces between the default slides.
  • Spaces (lg) - Here you can enter spaces between slides on devices with a width of <1200px.
  • Spaces (md) - Here you can enter spaces between slides on devices with a width of <991px.
  • Spaces (cm) - Here you can enter spaces between slides on devices with a width of <768px.
  • Spaces (xs) - Here you can enter slides between devices on widths <480px.

How to customize typography you can check in Typography Settings Category:

2. Testimonials 20 Layout

Use custom font for position? - Turn on the switcher if you want to customize the font of the position.

Add item - Here you can add a new item by clicking on the button.

Testimonials:

  • Blockquote - 
  • Testimonial - Please, enter the text for the testimonial. 
  • Display Image - Here you can add the image for the section.
  • Name - Here you can add the name of the author.
  • Position - Please, enter the text for the author position.

Use custom font for blockquote? - Turn on the switcher if you want to customize the font of the blockquote.

Outsourceo Blockquote Background Color - Here you can select the color of the blockquote background from the color palette.

Outsourceo Blockquote Border Color - Here you can select the color of the blockquote border from the color palette.

Use custom font for testimonials? - Turn on the switcher if you want to customize the font of the testimonials.

Use custom font for Name? - Turn on the switcher if you want to customize the font of the name.

Slider Options

Change slider options? - Turn on switcher if you want to change the following swiper options:

  • Arrows - Turn on the switcher to display swiper in arrows style .
  • Pagination - Turn on the switcher to display the sliders pagination.
  • Loop - Turn on the switcher to display the loop effect.
  • Simulate Touch - Turn on the switcher to display the simulate touch.
  • Autoplay - Please, enter autoplay speed(in ms). 0 - autoplay off.
  • Speed - Please, enter speed(in ms).
  • Number of slides - here you can enter the number of slides by default.
  • Number of slides (lg) - Here you can enter the number of default slides on devices width <1200px.
  • Slide count (md) - Here you can enter the default slider count for devices with a width of <991px.
  • Number of slides (cm) - Here you can enter the default number of slides on devices with a width of <768px.
  • Number of slides (xs) - Here you can enter the default number of slides on devices with a width of <480px.
  • Slide spaces - Here you can enter the spaces between the default slides.
  • Spaces (lg) - Here you can enter spaces between slides on devices with a width of <1200px.
  • Spaces (md) - Here you can enter spaces between slides on devices with a width of <991px.
  • Spaces (cm) - Here you can enter spaces between slides on devices with a width of <768px.
  • Spaces (xs) - Here you can enter slides between devices on widths <480px.

How to customize typography you can check in Typography Settings Category:

Advanced Settings:

  1. Margin: Set the section Margin.
  2. Padding: Set the section Padding.
  3. Z-index: Set the Z-Index. 
  4. CSS ID: Set a CSS ID for your section.
  5. CSS Classes: Set CSS Classes for your section.

Motion Effects

  1. Sticky (Pro only): Set your section as Sticky, and choose between Top or Bottom. 
  2. Scrolling Effects (Pro only): Set Scrolling Effects to On to choose from a variety of animations and interactions that can occur when the user scrolls through the page. 
  3. Entrance Animation: Click the dropdown to choose an animation.

Background

The following options can be set independently for both the normal and hover states.

  1. Background Type: Choose between Classic or Gradient

Border

The following options can be set independently for both the normal and hover states.

  1. Border Type: Select the type of border, choosing from none, solid, double, dotted, dashed, or grooved
  2. Border Radius: Set the border-radius to control corner roundness
  3. Box Shadow: Adjust box-shadow options

Positioning

  1. Width: Select the width of the element, choosing from Full Width (100%), Inline (auto), or Custom. 
  2. Custom Width: Only available if Custom is chosen. Use the slider to adjust the width of the element within the column.
  3. Vertical Align: Only available if Full Width (100%) or Inline (auto) is chosen. Select to display the element at the Start, Center, or End.
  4. Position: Select the position of the element, choosing either Default, Absolute, Fixed, or Custom. Absolute positions an element absolutely to its first positioned parent. Fixed positions an element relative to the user’s viewport. 

If either Absolute or Fixed is selected, the following options also become available.

  1. Horizontal Orientation: Sets the horizontal reference point for the absolute positioning, with choices of either Start or End.
  2. Offset: Changes the horizontal reference point by the amount of the offset
  3. Vertical Orientation: Sets the vertical reference point for the absolute positioning, with choices of either Start or End.
  4. Offset: Changes the vertical reference point by the amount of the offset

Responsive

  1. Reverse Columns: Slide to reverse the order of your columns (Great for Mobile).
  2. Visibility: Show or Hide your section on Desktop, Tablet, or Mobile