Testimonial Element in Funnel and Website Builder
The testimonial element allows you to easily display testimonials in columns in an easy to style consistent way.
In This Article:
To add a testimonial element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Find the Media section, select the Testimonials element and drag it to the desired location on the page.
General Options
When you first add the testimonial element, a group of placeholder testimonials will be pre-loaded and shown in a list like shown above. From this area you can move, edit, delete or add testimonials.
- To move a testimonial, click on the two horizontal lines next to the testimonial image and drag the testimonial to a new place in the list.
- To edit a testimonial, click the pencil icon to the right of the person's name in the list. More information about editing testimonials is in the next section.
- To delete a testimonial, click the trash can icon to the right of the testimonial name.
- To add a testimonial, click the Add Testimonial button under the list.
Under the Testimonial List, there are testimonial settings. From here, you can check and uncheck the parts of the testimonial that you want to show and hide. Checked means that it will be visible, unchecked means that it will be hidden.
Adding/Editing Testimonials
To edit one of the placeholder testimonials, click the pencil icon next to the name. Once you do so, the list will be replaced by the options to edit the testimonial. When you have finished editing the testimonial, click the blue Done text next to Edit Testimonial to return to the list.
- The content is the actual testimonial text.
- You can change the number of starts showing in the testimonial. Only full stars are allowed for the testimonial rating.
- You can change the name of the person giving the testimonial.
- The caption allows you to give a bit more context about the person giving the testimonial, like their title or company.
- The date allows you to add the date of the testimonial.
- The profile picture is the photo of the person giving the testimonial. In addition to the profile photo, you can add a profile URL that people can go to if they click on the profile photo.
- You can also add a business logo URL to include with the testimonial and a link the testimonial leads to.
Layout
There are three options for the layout of your testimonials:
- Grid shows multiple columns and multiple rows with a consistent width and height so all boxes appear to be the same size.
- Vertical masonry also shows multiple columns and multiple rows, but the height of each card differs depending on content, so the column layout will be based on the length of the testimonial and the following rows will not line up.
- Carousel has multiple columns but only one row. You can scroll through the remaining using either arrows or pagination (described more in the additional options section).
All three options allow you to set the number of columns in a row and the spacing between cards.
Card Style
You can also choose different layouts for the content within the card. There are 4 different layouts.
- Default - This has the rating and testimonial text at the top with the photo, name, caption and company details below the testimonial text going horizontally across.
- Reverse Center - Reverse center has all of it's pieces stacked on top of each other. It places the profile photo, name, caption and date first. This is followed by the business logo. Then the rating and testimonial follow.
- Vertical Center - Vertical center has all of it's pieces stacked on top of each other. It places the rating and testimonial first. Then the profile photo, name, caption, date and business logo follow.
- Horizontal - Horizontal places all items across in one row and multiple columns within the card. The rating is furthest to the left, followed by the testimonial text, with the right most column having the profile photo, name, caption, date and business logo.
From within the card layout, you can also set a corner radius on the card to round the corners, change the size of the stars from rating size, set the font size and font type as well as choose whether the testimonial should be italicized.
Additional General Options
From below the card styles, you can set how wide you want the testimonial element to be in it's container.
There are also a number of color options to allow you to style your testimonials to match your brand.
If you have chosen the carousel layout, you will have the following options:
- The carousel can include arrows to show the visitor how to navigate, pagination under the element or both.
- The arrow styles allow you to turn arrows on and off, set the arrow color and specify if any animation should be applied to the arrows.
- The pagination styles allow you to choose whether the pagination should show, the shape that it should be displayed (circle, box, oval), the color that the active (currently visible) page icon should be, the color of the icon for the non-active pages and the size of the icons.
- You can also set the animation effects to dictate how the slides should change.
- You can set how the slides should appear when they change with the animation effect.
- Whether they should auto change or just change when the visitor interacts with the arrows or pagination (auto-animate slides). If they do auto-animate, you will be able to choose how often they should change.
- You can choose whether they should just keep looping infinitely or stop after getting to the end of the slides the first time.
- Pause on hover allows you to stop the ticker when a visitor hovers over the element.
Styles Options
- Margin and Padding: There is a setting to manage the margin and padding for spacing adjustments. Margin will add spacing outside of the element, so outside of the orange outline, whereas padding adds space inside the element or inside the orange outline.
- Border: Set a border for the entire testimonial element. You can set the border width, color, whether the border has rounded corners (corner radius) and your border style.
- Box Shadow: You can set a box shadow on the element for depth.
- Visibility: Turn on or off visibility on mobile or desktop. Blue icons means that it is visible on that device, whereas gray icons means that it is hidden on that device.
- Classes and CSS: Custom class and CSS selector allow you to make CSS adjustments that target this element.