Виджет слайдера отзывов для сайта Weebly

Отзывы повышают надежность вашего сайта Weebly и повышают уверенность пользователя в покупке продуктов, предлагаемых на вашем сайте. Хотя отзывы могут быть отдельной страницей на вашем сайте, виджет поможет вам вставить отзывы в любом месте со ссылками на отдельную страницу. В этой статье мы объясним, как создать виджет слайдера отзывов для сайта Weebly.

Виджет слайдера отзывов для сайта Weebly

Ниже показано, как будет выглядеть слайдер отзывов CSS, и мы подробно обсудим, как его создать. В примере показаны три слайда, и пользователи могут щелкнуть нижние панели навигации, чтобы просмотреть содержимое каждого слайда.

Особенности слайдера отзывов

  • Слайдер состоит из трех слайдов и вращается при нажатии на вкладку.
  • Вкладки подсвечиваются, показывая текущий ползунок.
  • Вы можете настроить цвета в соответствии с вашими потребностями и ссылаться на любые страницы

Для создания этого слайдера вам понадобятся три изображения (размер которых будет изменен до определенного размера в HTML-коде) и содержание отзыва.

Как добавить виджет отзывов?

Виджет состоит из двух частей – кода CSS и HTML. Если вы хотите добавить виджет отзывов на одну страницу, добавьте приведенный ниже код CSS в раздел «Страницы> Выберите страницу> Настройки SEO> Код заголовка” раздел. Если вы хотите добавить его на несколько страниц, добавьте код в «main.less” под “Тема> Изменить HTMl / CSS> Стили” раздел.

<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-код для виджета

Перетащите значок «Код для вставки”И вставьте внутрь приведенный ниже код. Измените фиктивный текст и URL-адреса изображений своими собственными. Изображения можно загрузить в разделе «Тема> Изменить HTML / CSS> Ресурсы> Загрузить файл (ы)…»И URL-адрес загруженного изображения должен быть таким:«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="https://www.webnots.com/add-testimonial-slider-in-weebly-site/#"> 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>

Важные точки

Прежде чем добавлять отзывы, примите во внимание следующие моменты:

Добавляйте отзывы только при необходимости.
Используйте настоящие учетные данные и избегайте использования фиктивного содержимого, как показано в демонстрации.
Не используйте неизвестные картинки.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *