Testimonial Slider Widget for Weebly Site

Testimonials boost the reliability of your Weebly site and increases the user’s confident to purchase the products offered on your site. Though the testimonials can be a separate page on your site, a widget will help you inserting the testimonials wherever you want with the links to a separate page. In this article we will explain how to create a testimonial slider widget for Weebly site.

Testimonials Slider Widget for Weebly Site

Below is how the CSS testimonial slider will look and we will discuss in detail how to create this slider. There are three slides shown in the example and users can click the bottom navigation bars to view the content of each slide.

Features of the Testimonial Slider

• Slider consists of three slides and rotate when you click on the tab.
• The tabs are highlighted showing the current slider.
• You can customize the colors as per your need and link to any pages

You need three images (which will be resized to the specific size in HTML code) and testimonial content to create this slider.

How to Add the Testimonial Widget?

The widget contains two parts – CSS and HTML code. If you want to add the testimonial widget to a single page then add the below CSS code under “Pages > Select the Page > SEO Settings > Header Code” section. If you want to add it on multiple pages then add the code in “main.less” under “Theme > Edit HTMl / CSS > Styles” section.

<style type="text/css">
*{
box-sizing:border-box;
}

.container_testimonial{
width:500px;
min-height:375px;
margin:0 auto;
position:relative;
padding-bottom:30px;
overflow:hidden;
background-color: #F0DCDC;
}

input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
border: 0;
clip: rect(0 0 0 0);
overflow: hidden;
}
label{
display:block;
width:32%;
border: 4px solid white;
position:absolute;
bottom:5px;
cursor: pointer;
transition: border-color 0.3s linear;
}

label.second{
left:34%;
}
label.third{
left:68%;
}

blockquote{
margin:0;
padding:30px;
width:500px;
background-color: #DB532B;
color:white;
box-shadow: 0 5px 2px rgba(0,0,0,0.1);
position:relative;
transition: background-color 0.6s linear;
border-left: 0px solid #ddd !important;
}

blockquote::before {
content: none !important;
}

blockquote:after { 
content: " "; 
height: 0; 
width: 0; 
position: absolute; 
top: 100%; 
border: solid transparent; 
border-top-color: #DA532B;
border-left-color:#DA532B;
border-width: 10px; 
left: 10%; 
} 
#second:checked ~ .two blockquote {
background-color:purple;
}
.two blockquote:after{
border: solid transparent; 
border-top-color: purple;
border-left-color:purple;
border-width: 10px;
}
#third:checked ~ .three blockquote{
background-color:#54885F;
}
.three blockquote:after{
border: solid transparent; 
border-top-color: #54885F;
border-left-color: #54885F;
border-width: 10px;
}
.quotes{
position:absolute;
color:rgba(255,255,255,0.5);
font-size:5em;
}
.leftq{
left:-5px;
}
.rightq{

right:5px;
}
img{
float:left;
margin-right: 20px;
}
.slide{
position:absolute;
left:-100%;
opacity:0;
transition: all 0.6s ease-in;
}

#first:checked ~ label.first {
border-width:6px;
border-color:#DB532B;
}
#second:checked ~ label.second {
border-width:6px; border-color:purple;
}
#third:checked ~ label.third {
border:6px solid #54885F;
}

#first:checked ~ div.one {
left:0;
opacity:1;
}
#second:checked ~ div.two {
left:0;
opacity:1;
}
#third:checked ~ div.three {
left:0;
opacity:1;
}

#content h2 {
margin: 10px !important;
}
</style>

HTML Code for the Widget

Drag and drop an “Embed Code” element and paste the below code inside. Modify the dummy text and the image URLs with your own. The images can be uploaded under “Theme > Edit HTML / CSS > Assets > Upload File(s)…” section and the URL of the uploaded image should be like: “http://yoursitename.com/files/theme/image-name.png“

<div class="container_testimonial">
<input type="radio" name="nav" id="first" checked/>
<input type="radio" name="nav" id="second" />
<input type="radio" name="nav" id="third" />

<label for="first" class="first"></label>
<label for="second" class="second"></label>
<label for="third" class="third"></label>

<div class="one slide">
<blockquote>
<span class="leftq quotes">&ldquo;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi... <span class="rightq quotes">&bdquo; </span>
</blockquote>
<img src="https://img.webnots.com/2015/08/Testimonial1.jpg" width="170" height="130" />
<h2>Christina Kruger</h2>
<h3>Executive Director</h3>
<h4>Web Design Studio</h4>
</div>

<div class="two slide">
<blockquote>
<span class="leftq quotes">&ldquo;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam quis nostrud exercitation... <a href="#"> read more</a><span class="rightq quotes">&bdquo; </span>
</blockquote>
<img src="https://img.webnots.com/2015/08/Testimonial2.jpg" width="170" height="130" />
<h2>Jenny Anderson</h2>
<h4>Marketing Manager</h4>
<h6>Web Design Studio</h6>
</div>

<div class="three slide">
<blockquote>
<span class="quotes leftq"> &ldquo;</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi... <span class="rightq quotes">&bdquo; </span>
</blockquote>
<img src="https://img.webnots.com/2015/08/Testimonial3.jpg" width="170" height="130" />
<h2>Robert Bruce</h2>
<h4>Founder & CEO</h4>
<h6>Web Design Studio</h6>
</div>
</div>

Important Points

Consider the below points before you add testimonials:

• Add testimonials only if you need.
• Use the real credentials and avoid using dummy content as shown in the demo.
• Do not use unknown pictures.