Дизайн отзывов, рекомендаций – тестимониал (testimonial) для сайта

Тестимониалс (от англ. testimonial – рекомендация, свидетельство, отзыв) в веб-дизайне – это отображение отзывов и рекомендаций клиентов. Чаще всего такие отзывы размещают на главной странице и они включают в себя: название компании, ФИО и фотографию. Для одного из своих сайтов, я тоже создала такой дизайн, чтобы отзывы смотрелись гармонично и красиво.

✪ DEMO⇊ СКАЧАТЬ

HTML

Прежде всего рассмотрим HTML разметку самих отзывов:

<div class="testimonial t_grey grayimage tg-one"> 
 <!--отзыв-->
  <div class="one"><div class="testimonial-wrap"><div class="testimonial-byline">
      
      <!--Тут напишите ФИО-->
            
      <span class="author-desc">
      
      <!--Тут замените SITE_COMPANY_LINK и COMPANY-->
      <a href="SITE_COMPANY_LINK" target="_blank" rel="nofollow"><b>COMPANY</b></a>
       
       </span></div><div class="testimonial-content clearfix"><div class="author-image">

       <!--Тут ссылка на ФОТО   замените: http://yoursite.com/people1.jpg-->
      <img  title="author" alt="author" src="http://yoursite.com/people1.jpg">
      
      </div><div class="testimonial-text"><p>
      
            
      ТУТ ТЕКСТ ОТЗЫВА

                  
      </p></div></div></div></div><!--Конец отзыва-->   
  
  
 <!--отзыв-->   
  <div class="one"><div class="testimonial-wrap"><div class="testimonial-byline">
      
      <!--Тут напишите ФИО-->
            
      <span class="author-desc">
      
      <!--Тут замените SITE_COMPANY_LINK и COMPANY-->
      <a href="SITE_COMPANY_LINK" target="_blank" rel="nofollow"><b>COMPANY</b></a>
       
       </span></div><div class="testimonial-content clearfix"><div class="author-image">

       <!--Тут ссылка на ФОТО   замените: http://yoursite.com/people2.jpg-->
      <img  title="author" alt="author" src="http://yoursite.com/people2.jpg">
      
      </div><div class="testimonial-text"><p>
      
            
      ТУТ ТЕКСТ ОТЗЫВА

                  
      </p></div></div></div></div><!--Конец отзыва-->   
</div>      

В этой разметке два отзыва. Скопируйте код между <!–отзыв–> <!–Конец отзыва–> столько раз, сколько отзывов необходимо разместить на странице.

Код отзыва нужно отредактировать и наполнить нужно информацией:

<!–Тут напишите ФИО–> – напишите ФИО человека, чей отзыв публикуете.
<!–Тут замените SITE_COMPANY_LINK и COMPANY–> – в строчке <a href=”SITE_COMPANY_LINK” target=”_blank” rel=”nofollow”><b>COMPANY</b></a> замените SITE_COMPANY_LINK на ссылку компании, а COMPANY на название компании.
<!–Тут ссылка на ФОТО замените: http://yoursite.com/people1.jpg–> – замените фото, укажите ссылку на нужное фото.
ТУТ ТЕКСТ ОТЗЫВА – напишите текст отзыва;

Все отзывы размещены внутри контейнера <div>, в котором заданы классы отзывов. Данный контейнер размещается на странице всего раз, а отзывы должны быть размещены внутри.

<div class="testimonial t_grey grayimage tg-one"> 

</div>

Классы контейнера определяют все стили отзывов. Их можно изменять.

Цвет

Стиль цвета, должен присутствовать обязательно, но его можно менять:
t_grey – серый;
t_red – красный;
t_blue – синий;
t_green – зеленый.

Фото

Фото может быть цветным или черно-белым. По умолчанию все фото цветные, но при добавлении класса grayimage в основной контейнер всех отзывов, фото становятся черно-белые.

Расположение

За расположение отвечает следующие классы:
tg-one – линейное отображение в одну колонку;
tg-one-half – две колонки;
tg-one-third – три колонки.

CSS

Теперь, чтобы все работало, осталось добавить стили:

/* TESTIMONIAL 
----------------------------------------------- */.testimonial {margin-bottom: 20px;}

/* Серый */.t_grey div div.testimonial-wrap {background-color: #F8F8F8;}
.t_grey div div div.testimonial-byline {background-color: #f0f0f0;}
.t_grey div div div span.author-desc a {color: #696969;}

/* Красный */.t_red div div.testimonial-wrap {background-color: #ffe3e3;}
.t_red div div div.testimonial-byline {background-color: #ffc2c2;}
.t_red div div div span.author-desc a {color: #fd0202;}


/* Синий */.t_blue div div.testimonial-wrap {background-color: #c4c6fd;}
.t_blue div div div.testimonial-byline {background-color: #9598fe;}
.t_blue div div div span.author-desc a {color: #3901aa;}

/* Зеленый */.t_green div div.testimonial-wrap {background-color: #d5ecd4;}
.t_green div div div.testimonial-byline {background-color: #8fd78e;}
.t_green div div div span.author-desc a {color: #035a01;}


.testimonial-wrap {
 border-radius: 5px;
 margin-right: 10px;
 min-height: 150px;
 }
.testimonial-wrap p{
 text-align: left;
 margin-bottom: 0px;
 font-style: italic;
 }
.testimonial-content {
 padding: 12px 20px;
 }

.author-image{
 float: left;
 height: 80px;
 width: 80px;
 margin-right: 18px;
 margin-bottom: 8px;
}
.author-image img {
 border-radius: 50%; width: 80px;}
 
 
.testimonial-byline{
  padding: 10px 20px;
 border-radius: 0 0 3px 3px;
 font-size: 15pt;
}
.author-desc {
 float: right;
}

.author-desc a {
 text-decoration: none;
 
}



/* 1, 2,3, колонки
----------------------------------------------- */
.tg-one div.t_view {margin-bottom: 30px; }
.tg-one-half div.t_view { width: 46.46625%;}
.tg-one-third div.t_view { width: 30%; }
.tg-one-fourth div.t_view{ width: 22.699387%; }
.one-sixth div.t_view{ width: 14.110%; }

.tg-one-half div.t_view,
.tg-one-third div.t_view,
.tg-one-fourth div.t_view,
.one-fifth div.t_view,
.one-sixth div.t_view{
 float: left;
 margin-right: 3.067485%;
margin-bottom: 30px;
height: 220px; 
 overflow: hidden;
}


/* END =1, 2,3, колонки
----------------------------------------------- */
.grayimage div div div div.author-image img{
 -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* END =TESTIMONIAL 
----------------------------------------------- */

Примеры

Линейное отображение, серый цвет, черное-белое фото

Два столбика, цвет красный, цветные фото

Три столбика, цвет синий, черное-белые фото