Testimonial Slider

Inserting a Testimonial Slider

A testimonial slider that offer four different testimonial styles, namely, simple, with border, with icon or with avatar.

Step 1: Switch To Backend Editor

To insert a Testimonial Slider section, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Slider

Click "Testimonial Slider" in the Visual Composer Modal to insert a Testimonial Slider section, for example:

Select Testimonial Slider
Step 3: Edit Testimonial Slider Section Settings

Once the Testimonial Slider section element has been inserted click the Edit Link(pen icon) of the Testimonial Slider section wrapper, for example:

Testimonial Slider Section Settings

Here is an overview of available slider section options:

  • Full Width

    Forces the row to become full width.

  • Minimum Height

    Determines the height beyond which the slider will not scale.

  • ID

    Give this section a unique ID. This is useful if you want to initiate scroll or link to this section.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Advance Automatically

    Determines whether the slider should auto advance from slide to slide i.e. slideshow.

  • Auto Advance Interval

    Determines the interval at which the slider will auto advance.

  • Pause On Hover

    Determines whether auto advancing should pause upon hover.

  • Progress Bar

    Determines whether the interval progress bar should be shown.

  • Use Pagination

    Determines whether the slider should have pagination bullets.

  • Show Navigation on Hover

    Determines whether the slider navigation arrows and pagination should only appear upon mouse hover.

  • Pagination Color 1

    Sets the default pagination color of the slider.

  • Slider Transition Easing

    Determines the easing type of the slider transitions.

  • Slider Transition Speed

    Determines the transition speed of slide transition.

Step 4: Edit Slides

Once you have edited the slider wrapper settings, click the Edit Link(pen icon) of the slide you wish to edit, for example:

Edit Slides

Here is an overview of available slide options:

  • Client Name

    Enter the client name.

  • Column Width

    Determines the column width. Values range from 1 - 12 columns (full width).

  • Column Offset

    Determines the number of columns to offset the testimonial by.

  • Quote

    Enter the quote here.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Slide Background Color

    Determines the slider background color.

  • Blockquote Type

    Determines what type of blockquote to use, none (simply text), with icon, with border or with avatar.

  • Avatar Image

    Choose where the image should be loaded from.

  • Uploaded Image

    Upload avatar image. Avatar will only be displayed if Blockquote Type is set to with Avatar.

  • Text size

    Determines whether quote text should be left, center, or right aligned.

  • Quote Color

    Determines the quote text color.

  • Cite Color

    Determines the cite text color.

Can't find what you're looking for? Submit a request in our forum.