Материалы

Блок "Отзывы" на сайте uCoz

Многие сайты размещают у себя блок отзывов. У него может быть много названий, например: "О нас говорят...", "Наши клиенты говорят" или просто "Отзывы". Данный блок является позитивным дополнением на Ваш сайт, так как дает возможность высказать свои негодования, предложения или восхищения ресурсом, что в свою очередь даст Вам шанс использовать данные знание в правильном русле.
Ниже будет представлен сам блок и пошаговая инструкция установки блока отзывов на Ваш ресурс. Удачи и делимся данным уроком.
 

Установка


1. Первым делом нам надо установить каркас виджета. Для этого, в место, где хотим видеть блок отзывов вставляем:
<div class="cd-testimonials-wrapper cd-container">  
<ul class="cd-testimonials">  
<li>  
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
<div class="cd-author">  
<img src="img/avatar-1.jpg" alt="Фотография автора">  
<ul class="cd-author-info">  
<li>Иванов Иван</li>  
<li>CEO, uCozбург</li>  
</ul>  
</div>  
</li>  
<li>  
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
<div class="cd-author">  
<img src="img/avatar-1.jpg" alt="Фотография автора">  
<ul class="cd-author-info">  
<li>Иванов Иван</li>  
<li>CEO, uCozбург</li>  
</ul>  
</div>  
</li>  
</ul>  

<a href="#0" class="cd-see-all">Читать все отзывы</a>  
  </div>

2. Далее необходимо добавить CSS-стили. В конец таблицы стилей CSS вставляем:
.cd-testimonials-wrapper {  
position: relative;  
width: 90%;  
max-width: 768px;  
background-color: #39393c;  
margin: 1em auto 2em;  
-webkit-font-smoothing: antialiased;  
-moz-osx-font-smoothing: grayscale;  
padding: 20px 40px 70px;  
z-index: 1;  
  }  
  .cd-testimonials-wrapper::after {  
content: '\201C';  
position: absolute;  
top: 10px;  
left: 0;  
width: 50px;  
height: 50px;  
padding-top: 8px;  
margin-left: -25px;  
background: rgba(32, 32, 34, 0.9);  
font-family: "Georgia", serif;  
color: white;  
font-size: 70px;  
font-size: 4.375rem;  
text-align: center;  
display: none;  
  }  
  @media only screen and (min-width: 768px) {  
.cd-testimonials-wrapper {  
margin: 1em auto 4em;  
padding: 64px 50px 114px;  
}  
  }  
  @media only screen and (min-width: 1170px) {  
.cd-testimonials-wrapper::after {  
display: block;  
}  
  }  

  .cd-testimonials {  
color: white;  
text-align: center;  
  }  
  .cd-testimonials:after {  
content: "";  
display: table;  
clear: both;  
  }  
  .cd-testimonials > li {  
position: absolute;  
opacity: 0;  
  }  
  .cd-testimonials > li:first-child {  
position: relative;  
opacity: 1;  
  }  
  .cd-testimonials p {  
font-family: "Georgia", serif;  
font-style: italic;  
line-height: 1.4;  
margin-bottom: 1em;  
padding: 0 14px;  
  }  
  @media only screen and (min-width: 768px) {  
.cd-testimonials p {  
font-size: 22px;  
font-size: 1.375rem;  
}  
  }  
  @media only screen and (min-width: 1170px) {  
.cd-testimonials p {  
font-size: 26px;  
font-size: 1.625rem;  
line-height: 1.6;  
}  
  }  

  .cd-author img, .cd-author .cd-author-info {  
display: inline-block;  
vertical-align: middle;  
  }  
  .cd-author img {  
width: 32px;  
height: 32px;  
border-radius: 50%;  
margin-right: 5px;  
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);  
  }  
  .cd-author .cd-author-info {  
text-align: left;  
line-height: 1.2;  
  }  
  .cd-author .cd-author-info li:first-child {  
font-size: 14px;  
font-size: 0.875rem;  
  }  
  .cd-author .cd-author-info li:last-child {  
font-size: 12px;  
font-size: 0.75rem;  
color: #6b6b70;  
  }  
  @media only screen and (min-width: 768px) {  
.cd-author img {  
width: 50px;  
height: 50px;  
}  
.cd-author .cd-author-info {  
line-height: 1.4;  
}  
.cd-author .cd-author-info li:first-child {  
font-size: 16px;  
font-size: 1rem;  
}  
.cd-author .cd-author-info li:last-child {  
font-size: 14px;  
font-size: 0.875rem;  
}  
  }  

  .flex-direction-nav li {  
position: absolute;  
height: 100%;  
width: 40px;  
top: 0;  
  }  
  .flex-direction-nav li:first-child {  
left: 0;  
  }  
  .flex-direction-nav li:last-child {  
right: 0;  
  }  
  .flex-direction-nav li a {  
display: block;  
height: 100%;  
width: 100%;  
overflow: hidden;  
text-indent: 100%;  
white-space: nowrap;  
-webkit-transition: background-color 0.2s;  
-moz-transition: background-color 0.2s;  
transition: background-color 0.2s;  
  }  
  .no-touch .flex-direction-nav li a:hover {  
background-color: #323234;  
  }  
  .flex-direction-nav li a::before, .flex-direction-nav li a::after {  
content: '';  
position: absolute;  
left: 50%;  
top: 50%;  
width: 2px;  
height: 13px;  
background-color: white;  
  }  
  .flex-direction-nav li a::before {  
-webkit-transform: translateY(-35px) rotate(45deg);  
-moz-transform: translateY(-35px) rotate(45deg);  
-ms-transform: translateY(-35px) rotate(45deg);  
-o-transform: translateY(-35px) rotate(45deg);  
transform: translateY(-35px) rotate(45deg);  
  }  
  .flex-direction-nav li a::after {  
-webkit-transform: translateY(-27px) rotate(-45deg);  
-moz-transform: translateY(-27px) rotate(-45deg);  
-ms-transform: translateY(-27px) rotate(-45deg);  
-o-transform: translateY(-27px) rotate(-45deg);  
transform: translateY(-27px) rotate(-45deg);  
  }  
  .flex-direction-nav li:last-child a::before {  
-webkit-transform: translateY(-35px) rotate(-45deg);  
-moz-transform: translateY(-35px) rotate(-45deg);  
-ms-transform: translateY(-35px) rotate(-45deg);  
-o-transform: translateY(-35px) rotate(-45deg);  
transform: translateY(-35px) rotate(-45deg);  
  }  
  .flex-direction-nav li:last-child a::after {  
-webkit-transform: translateY(-27px) rotate(45deg);  
-moz-transform: translateY(-27px) rotate(45deg);  
-ms-transform: translateY(-27px) rotate(45deg);  
-o-transform: translateY(-27px) rotate(45deg);  
transform: translateY(-27px) rotate(45deg);  
  }  
  @media only screen and (min-width: 768px) {  
.flex-direction-nav li {  
width: 50px;  
}  
  }  
  @media only screen and (min-width: 1170px) {  
.flex-direction-nav li a::before, .flex-direction-nav li a::after {  
background-color: #5e5e63;  
-webkit-transition: background-color 0.2s;  
-moz-transition: background-color 0.2s;  
transition: background-color 0.2s;  
}  
.flex-direction-nav li a:hover::before, .flex-direction-nav li a:hover::after {  
background-color: white;  
}  
  }  

  .cd-see-all {  
position: absolute;  
z-index: 1;  
left: 0;  
bottom: 0;  
width: 100%;  
height: 50px;  
line-height: 50px;  
background-color: #252527;  
text-align: center;  
text-transform: uppercase;  
color: #6b6b70;  
font-weight: 700;  
font-size: 12px;  
font-size: 0.75rem;  
-webkit-transition: color, 0.2s;  
-moz-transition: color, 0.2s;  
transition: color, 0.2s;  
  }  
  .no-touch .cd-see-all:hover {  
color: #79b6e4;  
  }  

  .cd-testimonials-all {  
position: fixed;  
top: 0;  
left: 0;  
height: 100%;  
width: 100%;  
background-color: white;  
z-index: 2;  
visibility: hidden;  
opacity: 0;  
-webkit-transition: opacity .3s 0s, visibility 0s .3s;  
-moz-transition: opacity .3s 0s, visibility 0s .3s;  
transition: opacity .3s 0s, visibility 0s .3s;  
  }  
  .cd-testimonials-all .cd-testimonials-all-wrapper {  
position: absolute;  
left: 0;  
top: 0;  
height: 100%;  
width: 100%;  
overflow: auto;  
  }  
  .cd-testimonials-all .cd-testimonials-all-wrapper > ul {  
width: 90%;  
max-width: 1170px;  
margin: 4em auto;  
  }  
  .cd-testimonials-all .cd-testimonials-all-wrapper > ul:after {  
content: "";  
display: table;  
clear: both;  
  }  
  .cd-testimonials-all .cd-testimonials-item {  
margin-bottom: 2em;  
opacity: 0;  
-webkit-transform: translate3d(0, 0, 0) scale(0.4);  
-moz-transform: translate3d(0, 0, 0) scale(0.4);  
-ms-transform: translate3d(0, 0, 0) scale(0.4);  
-o-transform: translate3d(0, 0, 0) scale(0.4);  
transform: translate3d(0, 0, 0) scale(0.4);  
-webkit-backface-visibility: hidden;  
backface-visibility: hidden;  
-webkit-transition: -webkit-transform .3s, opacity .3s;  
-moz-transition: -moz-transform .3s, opacity .3s;  
transition: transform .3s, opacity .3s;  
  }  
  .cd-testimonials-all p {  
position: relative;  
background: #79b6e4;  
color: white;  
padding: 2em;  
-webkit-font-smoothing: antialiased;  
-moz-osx-font-smoothing: grayscale;  
line-height: 1.4;  
border-radius: 0.25em;  
margin-bottom: 1em;  
  }  
  .cd-testimonials-all p::after {  
content: '';  
position: absolute;  
top: 100%;  
left: 2em;  
height: 0;  
width: 0;  
border: 8px solid transparent;  
border-top-color: #79b6e4;  
  }  
  .cd-testimonials-all .cd-author {  
text-align: left;  
margin-left: 1.5em;  
  }  
  .cd-testimonials-all .cd-author img {  
box-shadow: 0 0 0 transparent;  
  }  
  .cd-testimonials-all.is-visible {  
visibility: visible;  
opacity: 1;  
-webkit-transition: opacity .3s 0s, visibility 0s 0s;  
-moz-transition: opacity .3s 0s, visibility 0s 0s;  
transition: opacity .3s 0s, visibility 0s 0s;  
  }  
  .cd-testimonials-all.is-visible .cd-testimonials-all-wrapper {  
-webkit-overflow-scrolling: touch;  
  }  
  .cd-testimonials-all.is-visible .cd-testimonials-item {  
opacity: 1;  
-webkit-transform: translate3d(0, 0, 0) scale(1);  
-moz-transform: translate3d(0, 0, 0) scale(1);  
-ms-transform: translate3d(0, 0, 0) scale(1);  
-o-transform: translate3d(0, 0, 0) scale(1);  
transform: translate3d(0, 0, 0) scale(1);  
  }  
  @media only screen and (min-width: 768px) {  
.cd-testimonials-all .cd-testimonials-item {  
width: 46%;  
margin: 0 2% 3em;  
}  
.cd-testimonials-all .cd-author {  
margin-left: 1em;  
}  
  }  
  @media only screen and (min-width: 1170px) {  
.cd-testimonials-all .cd-testimonials-item {  
width: 30%;  
margin: 0 1.6666% 3em;  
}  
  }  

  .close-btn {  
position: fixed;  
display: block;  
width: 40px;  
height: 40px;  
top: 10px;  
right: 5%;  
overflow: hidden;  
text-indent: 100%;  
white-space: nowrap;  
  }  
  .close-btn::before, .close-btn::after {  
content: '';  
position: absolute;  
display: inline-block;  
width: 2px;  
height: 24px;  
top: 8px;  
left: 19px;  
background-color: #39393c;  
  }  
  .close-btn::before {  
-webkit-transform: rotate(45deg);  
-moz-transform: rotate(45deg);  
-ms-transform: rotate(45deg);  
-o-transform: rotate(45deg);  
transform: rotate(45deg);  
  }  
  .close-btn::after {  
-webkit-transform: rotate(-45deg);  
-moz-transform: rotate(-45deg);  
-ms-transform: rotate(-45deg);  
-o-transform: rotate(-45deg);  
transform: rotate(-45deg);  
  }

3. Скачиваем с сайта архив с файлами виджета. Папку "js" и ее содержимое заливаем в корень своего сайта. 
4. Последним пунктом является подключение скриптов. Открываем ПУ сайта и переходим во вкладку "Дизайн" — "Быстрая замена участков шаблонов". Выбираем многострочный режим замены. В "Что заменить" указываем:
</body>
В "На что заменить" вставляем:
<script src="/js/otzivy.js"></script>  
  <script>  
$('.cd-testimonials-wrapper').flexslider({  
selector: ".cd-testimonials > li",  
animation: "slide",  
controlNav: false,  
slideshow: false,  
smoothHeight: true,  
start: function(){  
$('.cd-testimonials').children('li').css({  
'opacity': 1,  
'position': 'relative'  
});  
}  
});  
$('.cd-testimonials-all-wrapper').children('ul').masonry({  
itemSelector: '.cd-testimonials-item'  
});  
  </script>

Установка завершена! 
 

Как изменить содержание отзывов?


Каждый отзыв имеет одинаковый код:
<li>  
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>  
<div class="cd-author">  
<img src="img/avatar-1.jpg" alt="Фотография автора">  
<ul class="cd-author-info">  
<li>Иванов Иван</li>  
<li>CEO, uCozбург</li>  
</ul>  
</div>  
</li>

Чтобы изменить, например, текст отзыва, вместо "Lorem ipsum dolor..." пишем нужный текст.

Советуем к просмотру:

Сохраните в социальную сеть
Прикрипления

Комментарии
Комментариев пока нет, вы можете оставить комментарий первым.
Оставить комментарий
avatar