Testimonial Sections

Testimonial

Each of our templates come with five predesigned testimonial sections that are defined by the class .testimonial-X, where X represents the testimonial section type (1-5) as shown below.

Example
								
									
...
CSS For Retina Displays

For testimonial sections that have a background image we serve a higher resolution background image by using the media queries below. Note: The CSS targeting below is just an example, refer to each individual feature section for exact CSS targeting.

								
									.testimonial-X{
										background-image:url(../images/slider/testimonial-bkg-image.jpg);
									}

									@media
									only screen and (-webkit-min-device-pixel-ratio: 2),
									only screen and (		min--moz-device-pixel-ratio: 2),
									only screen and (			-o-min-device-pixel-ratio: 2/1),
									only screen and (				min-device-pixel-ratio: 2),
									only screen and (					min-resolution: 192dpi),
									only screen and (						min-resolution: 2dppx) { 
											.testimonial-X{
												background-image:url(../images/slider/[email protected]);
											}
									}
								
							

Testimonial Section One

A single testimonial section. Target .testimonial-1 to set background color or image. Alternatively, for background use Timber background color classes.

testimonial example 1
Example
								
									

Quote... John Doe


Testimonial Section Two

A single, modern looking testimonial section. Target the .testimonial-2 class to set background color or image. Alternatively, for background use Timber background color classes.

testimonial example 2
Example
								
									
Customer Testimonial

Valley Park. Palo Alto, CA.

Quote... John Doe


Testimonial Section Three

This testimonial section employs the Timber content grid which means you can alternate the number of testimonials per row by changing the .content-grid-X class, where X represents the number of columns (2-6).

testimonial example 3
Example
								
									

Quote... John Doe

Quote... John Doe

Quote... John Doe


Testimonial Section Four

Like testimonial section three, this testimonial section employs the Timber content grid which means you can alternate the number of testimonials per row by changing the .content-grid-X class, where X represents the number of columns (2-6). This section also employs the equalize plugin for matching testimonial heights on a per row basis, making sure testimonial boxes look nice an even.

testimonial example 4
Example
								
									

Quote... John Doe

Quote... John Doe

Quote... John Doe


Testimonial Section Five

An elegant, full width testimonial slider. Testimonial slider settings can be found on line 299-312 of js/template-functions.js.

testimonial example 3
Example
								
									
  • Quote... John Doe

  • Quote... John Doe

  • Quote... John Doe