Testimonial Module Guide for Drag and Drop Web Page Editor

This guide details the functions of the testimonial module, how to implement it, and how to update it.

How the Module Works

The testimonial module is a multi-card module with the ability to add text, the option to use an image of the testimonial giver, determine the timing of the testimonial rotation, determine the navigation display, and how many testimonials can appear at a given time.

This module can be added to templates and to drag and drop page builders. This article will focus on the drag and drop web pages.

How to Add the Testimonial Module to a Web Page in the Drag and Drop Editor

When opening a web page, for both pre-existing pages and creating new pages, a column appears in the left hand side with all the modules available to use in your account. When it first appears, it will look like this: 

Theme modules are from the design of your website. You can press on the drop-down arrow to collapse the theme modules to view common modules and all modules, as seen below.

The testimonial module will always reside in the all modules section because it is imported to your theme. An example of the slider is highlighted in yellow.

You can also use the search bar function to locate the testimonial module. Simply type in the name of the module and options will begin to appear. 

Once you've located the testimonial module, hover your mouse over the module. A hand will appear and let you drag it into the page by holding the left clicker. A blue line will appear to show where you can place the module. We recommend that you always place it in the line the spans across the whole page.

Once you release the left clicker, the module will appear on the page with the settings in the left-hand column.

The blue line box around the module is the editable area and where you will see new cards appear.

How to View and Confirm the Adjusted Settings in the Module

There are two setting menus for the module. The first settings menu is about the module as a whole:

The second menu is for each individual card. You can add more cards by pressing the +Add link on the right side of the testimonials section.

You can access this menu by hovering over the labeled card, finding the pencil icon, and pressing edit.

Once you click edit, the following menu appears:

This menu allows you to edit the testimonial card to your liking. You can add text, replace the image, and set the picture shape in this menu. Once you have made the changes, an orange button will appear at the bottom.

Press apply and the changes you made will appear on the testimonial.

If you'd like to return to the main menu, click the < Back to Testimonial Slider Test Slider at the top of the menu, below the smart rules section.

You can add more cards by pressing the +Add link on the right side of the testimonials section.

How to Create Standard Testimonial Cards

The standard for testimonials is to remove the image and only have card text. You start by navigating to the drop-down settings menu:

Note: When you first remove the image using the "No Image" checkbox, the testimonial slider will appear like this: 

To remove this arrow, you must return to the top of the settings menu. The first step is scroll up to section heading alignment and change it from Align Center to Choose Heading Alignment.

Press apply changes and the arrow will disappear for a single card. This is required whether or not you have the no image checkbox on or off. As a result, this disables the Section Heading setting and requires the use of a Rich Text module to add the Section Heading. Return to the main module column and drag the Rich Text module above the testimonial module.

This keeps the header and module together in a single section, which helps for section setting adjustments.

Section Adjustments

If you want to adjust the entire section, hover your mouse at any place in the section. If you hover outside the column, you will see the following: 

If you hover in the column, you will see this instead: 

Go to the buttons at the furthermost left side of the page and press the pencil icon. The section setting will appear on the left column.

By clicking open the alignment and spacing, you will see the following: 

Make sure you click the full width alignment. This will extend the testimonial module across the page.

This is the full width content alignment:

This is center content alignment:

This is no set content alignment:

You can also adjust the padding of the module in any alignment you choose. 

Note: For the center content alignment, there will be an option called Maximum content width. This should not be adjusted. It standardizes the module to other maximum content width settings across the site.

Once you have adjusted the alignment to your liking, you can navigate to the background section.

Select the type you would like to use. For color, the following will appear:

Simply select the color you would like to use for the section. You can also adjust the opacity of this section.

You can add an image as well to the background:

Note: The image you select should be large, something with dimensions like 3200 X 2200. This prevents the image from looking fuzzy.

The final option is gradient. Similar to the color background, you will have two color options. It will also display a menu of different directions the gradient can go.

If at any point you would like to reset alignment and background for the section, press the reset all styles button at the bottom of the settings menu.

Smart Rules

After you configured the desktop appearance, it's time to make the adjustments for mobile and tablet views. Back in the main settings of the module, the top has the following view:

Click the + Add button. A window will slide in on the right side, looking like this: 

Open up the drop down menu so you can select device type:

Once selected, press add under rules: 

You will add two rules for tablet and mobile. It will look like this: 

Once you are finished with adding smart rules, you will have the following view in smart rules:

By clicking the Default, you will receive the drop down for the other devices as well: 

Note: When making updates to the default view, they will NOT carry over to tablet and mobile view. Please ensure that adjustments made to the content itself are carried over.

The mobile and tablet settings should have the following settings: 

The editor will indicate at top that it is previewing as mobile or tablet views:

If the cards display across the page, you can collapse the editor panel on the left. It will expand the page across the screen and will properly display the settings for the testimonial.