Как добавить виджет отзывов в Weebly? »WebNots
В нашей предыдущей статье мы обсудили, как добавить отзывы в форме слайдера, а в этой статье давайте обсудим, как добавить виджет отзывов на сайт Weebly с помощью простого CSS. Мы объясним два похожих примера, один с простым цветом, а другой с более ярким цветом, которые имеют следующие особенности:
- Добавляйте на любое количество страниц.
- Полностью отзывчивый, автоматически подстраивается под ширину устройства просмотра.
- Настройте как отдельный виджет или как отдельную страницу отзывов.
- Добавляйте неограниченное количество отзывов.
- Добавьте одну или две колонки.
Как добавить виджет отзывов в Weebly?
Оба виджета, описанные в этой статье, содержат фотографии пользователей, поэтому первым делом нужно загрузить фотографии в разделе «Тема> Изменить HTML / CSS> Ресурсы> Загрузить файл (ы)…». Путь к файлу загруженных изображений будет таким:
http://your-site-name.com/files/theme/testimonial-image1.jpg
Простой виджет отзывов
Простой виджет отзывов будет выглядеть, как показано ниже, и вы можете просмотреть живую демонстрацию здесь. Его можно разместить в полную ширину или в виде двух столбцов.
Виджет содержит следующие части, которые также выделены в CSS с помощью комментариев:
- Содержание отзыва определяется с помощью класса .tm-content.
- Стрелка вниз определяется с помощью: после псевдоэлемента «.tm-content: after»
- Изображение, имя и заголовок определяются с помощью класса «.tm-pic».
- Картинка определяется с помощью класса «.tm-pic photo»
- Имя определяется с помощью класса «.tm-pic p: nth-child (2)».
- Заголовок определяется с помощью класса «.tm-pic p: nth-child (3)».
CSS для простого виджета отзывов
Добавьте приведенный ниже код CSS в раздел «Код заголовка» своей страницы Weebly. Цвет фона отзыва определяется как # ebf3f5, который можно изменить на любой цвет по вашему желанию.
<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 для простого виджета отзывов
Добавьте приведенный ниже HTML-код в элемент «Встроить код», заменив фиктивное содержимое своим собственным. Код предназначен для одного блока отзывов, который будет отображаться во всю ширину, и вы можете добавить несколько отзывов, просто добавив код блока. Если вы хотите показать отзывы в двух столбцах, используйте элементы «Вставить код» рядом и вставьте блок кода HTML внутрь.
<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>
Виджет красочных отзывов
Второй виджет отзывов похож на первый с более яркими цветами, как показано ниже. Разница с этим виджетом состоит в том, что блок HTML-кодов будет автоматически выровнен в двухколоночном макете без необходимости использования нескольких элементов «Embed Code». Вот как это будет выглядеть, и вы можете просмотреть живую демонстрацию здесь.
Виджет содержит следующие части, которые также выделены в CSS с комментариями:
- Единичный блок — Обертка отзывов, определенная в классе «.testimonial-wrap».
- Контент — контент отзыва, определенный в классе «.testimonial».
- Имя и заголовок — данные отзыва, определенные в классе «.testimonial-info».
- Фотография — изображение пользователя, определенного в классе «.headshot».
- Стрелка — стрелка вниз, определенная в классе «.arrow-down».
CSS для виджета красочных отзывов
Добавьте приведенный ниже CSS в раздел «Код заголовка» своей страницы Weebly. Вы также можете добавить его в файл «main_style.css» без тегов