One of the most effective ways to inspire consumer confidence on a website is to display testimonials. Nine out of every ten, or 90%, of consumers admit that online reviews impact their buying decisions. When a customer comes to your Squarespace site, you want to be sure that you include testimonials so that your users know that you are good at what you do.
A popular way to display user testimonials is to have them on a slider. This allows for the testimonials to be shown on the home page without taking up too much room. In Squarespace 7, we are currently limited to the quote block to create testimonials. Unfortunately, the quote block does not have a way to slide! By following this tutorial, you will be able to make a sliding testimonial in a code block with the same aesthetics as a Squarespace quote.
The first step we want to take is to add a little bit of simple code. First, from the Home menu your Squarespace site, click Settings → Advanced → Code Injection. Once on the Code Injection menu, paste the following code into the textbox titled Header:
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
The next thing we want to do is determine the page that we want to post the testimonials on. On the page you choose, click the settings icon and then switch to the Advanced tab. In the box entitled Page Header Code Injection, enter the following code:
<script src="//cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".rslides").responsiveSlides({
timeout: 5000,
pager: true
});
$('.rslides_tabs li a').css('background-color', $('figcaption.source').css('color'));
var elementHeights = $('.rslides li').map(function() {
return $(this).height();
}).get();
var maxHeight = Math.max.apply(null, elementHeights);
$('.rslides li').height(maxHeight);
});
</script>
You can edit the above code to customize how your slider works. To change the time that each slide stays, increase or decrease the number next to timeout (measured in milliseconds). To remove the dots from under the screen, switch pager from true to false.
Once that is in, we will put in the Custom CSS. By putting the CSS, the slider will look right once we put our information in. To do this, head to the main menu, then go to Design → Custom CSS. In the box, paste in the following code:
.testimonialSlider {
position: relative;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
&:first-child {
position: relative;
display: block;
float: left;
}
}
img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
}
.rslides_tabs {
list-style: none;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-padding-start: 0;
padding: 0;
text-align: center;
li {
display: inline;
padding: 0 10px;
a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0,0,0, .2);
display: inline-block;
_display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
width: 6px;
height: 6px;
}
}
.rslides_here a {
background-color: #222;
}
}
Now that the styling is in, all that is left is for you to enter your testimonials. First, create a code block. Using the code below, enter your testimonials in place of ‘Your Text Here’ and your sources in place of ‘Your Source Here’. If you want to enter more than 4 testimonials, simply follow the pattern and copy and paste the information with the <li></li> tags (including the li). If you want to enter less, just delete the <li> sections that you are not using.
<div class="testimonialSlider">
<ul class="rslides">
<li>
<div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block">
<div class="sqs-block-quote-content sqs-block-content">
<figure>
<blockquote>
<span>“</span> Your Text Here
<span>”</span>
</blockquote>
<figcaption class="source">— Your source here
</figcaption>
</figure>
</div>
</div>
</li>
<li>
<div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block">
<div class="sqs-block-quote-content sqs-block-content">
<figure>
<blockquote>
<span>“</span> Your Text Here
<span>”</span>
</blockquote>
<figcaption class="source">— Your source here
</figcaption>
</figure>
</div>
</div>
</li>
<li>
<div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block">
<div class="sqs-block-quote-content sqs-block-content">
<figure>
<blockquote>
<span>“</span> Your Text Here
<span>”</span>
</blockquote>
<figcaption class="source">— Your source here
</figcaption>
</figure>
</div>
</div>
</li>
<li>
<div class="sqs-widget sqs-block-modelsync sqs-block-quote sqs-block quote-block">
<div class="sqs-block-quote-content sqs-block-content">
<figure>
<blockquote>
<span>“</span> Your Text Here
<span>”</span>
</blockquote>
<figcaption class="source">— Your source here
</figcaption>
</figure>
</div>
</div>
</li>
</ul>
</div>
Important: When you drag the block or edit the code in any way, the dots under will disappear because the script has to reinitialize. Once you refresh the page, the dots will be back.
And there you have it!! Your testimonials are done. You can drag this block anywhere you want, and it will still work responsively.
Leave a Reply