In our previous article we had discussed how to add testimonials in a slider form and in this article let us discuss how to add testimonials widget in Weebly site using simple CSS. We will explain two similar examples one with simple color and other with more bright color.
Testimonial Widgets
Both the widgets have the following features:
- Add to any number of pages.
- Fully responsive automatically fitting to the width of the viewing device.
- Setup as an individual widget or as a separate testimonial page.
- Add unlimited number of testimonials.
- Add in a single or two column.
How to Add Testimonials Widget in Weebly?
Both the widgets explained in this articles have photos of the users, hence the first step is to upload the photos under “Theme > Edit HTML / CSS > Assets > Upload File(s)…”. The file path of the uploaded images will be like:
http://your-site-name.com/files/theme/testimonial-image1.jpg
Simple Testimonials Widget
The simple testimonials widget will look like below and you can view the live demo here. It can be placed as a full width or in a two column layout.
The widget contains the following parts which are also highlighted in CSS using comments:
- Testimonial content is defined using “.tm-content” class
- Down arrow is defined using :after pseudo element “.tm-content:after”
- Picture, name and title are defined using “.tm-pic” class
- Picture is defined using “.tm-pic photo” class
- Name is defined using “.tm-pic p:nth-child(2)” class
- Title is defined using “.tm-pic p:nth-child(3)” class
CSS for Simple Testimonial Widget
Add the below CSS code under the “Header Code” section of your Weebly page. The background color of the testimonial is defined as #ebf3f5 which can be changed to any color as you need.
<style type="text/css">
/* Testimonial Content */
.tm-content {
background: #ebf3f5;
padding: 15px 20px 5px 15px;
border-radius: 5px;
margin-bottom: 30px;
}
/* Down Arrow */
.tm-content:after {
content: '';
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 18px 0 18px;
border-color: #ebf3f5 transparent transparent transparent;
position: relative;
top: 37px;
left: 20px;
}
/* Picture, Name and Title */
.tm-pic {
margin-left: 25px;
margin-bottom: 80px;
}
/* Testimonial Picture */
.tm-pic .photo {
background-color: #ccc;
border-radius: 100px;
width: 60px;
height: 60px;
float: left;
margin-right: 10px;
}
/* Name and Title Paragraph*/
.tm-pic p {
position: relative;
top: 5px;
text-transform: uppercase;
line-height:30px;
}
/* Name */
.tm-pic p:nth-child(2) {
font-size: 16px;
font-weight: 600;
margin-bottom: 0;
}
/* Title */
.tm-pic p:nth-child(3) {
font-size: 14px;
color: #777;
}
</style>
HTML for Simple Testimonial Widget
Add the below HTML code inside an “Embed Code” element by replacing the dummy content with your own. The code is for a single testimonials block which will be shown in full width and you can add multiple testimonials just by appending the block code. If you want to show the testimonials in two columns then use “Embed Code” elements side by side and paste the HTML code block inside.
<div class="tm-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p> </div> <div class="tm-pic"> <div class="photo"><img src="https://img.webnots.com/2015/08/Testimonial3.jpg" width=60px height=60px> </div> <p>Diana Mary</p> <p>Important person, some Company</p> </div>
Colorful Testimonials Widget
The second testimonials widget is similar to the first one with more bright colors as shown below. The difference with this widget is that the block of HTML codes will be automatically aligned in a two column layout without the need of using multiple “Embed Code” elements. Below is how it will look:
The widget contains the following parts which are also highlighted in CSS with comments:
- Single block – Testimonial wrapper defined in “.testimonial-wrap” class
- Content – Testimonial content defined in “.testimonial” class
- Name and Title – Testimonial Info defined in “.testimonial-info” class
- Photo – Picture of the user defined in “.headshot” class
- Arrow – Down arrow defined in “.arrow-down” class
CSS for Colorful Testimonial Widget
Add the below CSS under the “Header Code” section of your Weebly page, you can also add this under “main_style.css” file without the <style> tags for the code to be effective at site level.
<style type="text/css">
/* Testimonial Wrapper */
.testimonial-wrap {
padding:30px;
float:left;
}
/* Testimonial Content */
.testimonial {
background:#54acd2;
color:#fff;
font-size:32px;
padding:20px;
width:400px;
font-family:nixie one;
-webkit-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
}
/* Testimonial Info - Name and Title */
.testimonial-info {
font-family:sans-serif;
font-weight:bold;
margin-top:25px;
float:left;
}
.testimonial-info h4 {
font-size:18px;
margin:5px auto;
color:#333;
text-transform:uppercase;
}
.testimonial-info h4 span{
font-size:18px;
margin:5px auto;
color:#999;
text-transform:none;
}
.testimonial-info p {
font-size:14px;
color:#df0a81;
margin:0px;
}
/* Testimonial image */
.headshot {
width:100px;
height:100px;
background:#333;
float:left;
color:#fff;
margin-top:10px;
border:3px solid #ccc;
margin-right:20px;
-webkit-border-radius: 100px;
border-radius: 100px;
overflow:hidden;
}
.headshot img{
width:100%;
height:100%;
}
/* Down Arrow */
.arrow-down {
width: 0;
height: 0;
margin-left:35px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 15px solid #54acd2;
}
</style>
HTML for Colorful Testimonial Widget
Below is the single testimonial block to be added inside the “Embed Code” element. If you add multiple blocks then the testimonials will be automatically aligned in a two column layout. Don’t forget to replace the dummy content with your own.
<div class="testimonial-wrap"> <div class="testimonial"> “Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra.” </div> <div class="arrow-down"></div> <div class="headshot"> <img src="https://img.webnots.com/2015/08/Testimonial3.jpg"></div> <div class="testimonial-info"> <h4>Principal Van Kirk</h4> <p>Finger Lakes Christian School</p> </div> </div>
Note that the pictures used are only for demo purpose and do not indicate real users.
4 Comments
Leave your reply.