Testimonials

Overview

Any number of testimonials can be displayed within a testimonial grid. You can also choose how many grid columns you want to display (minimum: 1, maximum: 4).

Example of a testimonial element.

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode 

[av_testimonials style='grid' columns='2' grid_style='' interval='5' font_color='' custom_title='' custom_content='' custom_class='' admin_preview_bg='' av_uid='av-3xtvz0']
[av_testimonial_single name='Name' subtitle='' check='is_empty' src='' link='http://' linktext='' av_uid='av-3ouclg'][/av_testimonial_single]


[/av_testimonials]

CSS Reference

CSS class name reference for each part that makes up the testimonial element.

/*----------------------------------------
// CSS - /* Testimonial CSS reference 
//--------------------------------------*/

/* Testimonial container */
#top .avia-testimonial {

	/* YOUR STYLE HERE */
}

/* Testimonial Image */
#top .testimonial-image-shape .avia-testimonial-image,
#top .testimonial-image-shape .avia-testimonial-image img{
	
	/* YOUR STYLE HERE */
}

/* Testimonial content */
#top .avia-testimonial-content {

	/* YOUR STYLE HERE */
}

/* Large slider testimonial content */
#top .av-large-testimonial-slider .avia-testimonial-content {

	/* YOUR STYLE HERE */
}

/* Testimonial meta */
#top .avia-testimonial-meta-mini {

	/* YOUR STYLE HERE */
}

/* Name */
#top .avia-testimonial-name {

	/* YOUR STYLE HERE */
}

/* Sub title */
#top .avia-testimonial-subtitle {

	/* YOUR STYLE HERE */
}

/* Link */
#top .avia-testimonial-meta a.avia-testimonial-link {

	/* YOUR STYLE HERE */
}

/* Slider arrows */
#top .av-large-testimonial-slider .avia-slideshow-arrows a:before {

		/* YOUR STYLE HERE */
}

Customization

Testimonial Image shape

By default, testimonial images are round in shape. If you like the testimonial images to be square or rounded corners please use the CSS below.

Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.

In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.

 /*----------------------------------------
// CSS - Testimonial 
//--------------------------------------*/

/* Image shapre*/

#top .avia-testimonial-image,
#top .avia-testimonial-image img{
	border-radius: 2px!important;
}

Testimonial image on top

To move the testimonial meta info to the top, please add the below code to your functions.php

//------------------------------
// php -  Testimonial image on top
//------------------------------

function add_custom_script(){
?>
<script>
window.addEventListener('DOMContentLoaded', function() {
(function($) {
    $(".avia-testimonial-meta").each(function(){
        $(this).closest('.avia-testimonial_inner').prepend($(this));
    });
}(jQuery)); 
 });
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

Resource

Contributed video:

Testimonial Element Tutorial