TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

3

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

Оба виджета имеют следующие функции:

  • Добавляйте на любое количество страниц.
  • Полностью отзывчивый, автоматически подстраивается под ширину устройства просмотра.
  • Настройте как отдельный виджет или как отдельную страницу отзывов.
  • Добавляйте неограниченное количество отзывов.
  • Добавьте одну или две колонки.

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

Оба виджета, описанные в этой статье, содержат фотографии пользователей, поэтому первым делом нужно загрузить фотографии в разделе «Тема> Редактировать HTML / CSS > Ресурсы> Загрузить файл (ы)…». Путь к загруженным изображениям будет нравиться:

http://your-site-name.com/files/theme/testimonial-image1.jpg

Виджет простых отзывов

Простой виджет отзывов будет выглядеть, как показано ниже, и вы можете просмотреть живую демонстрацию здесь. Его можно разместить в полную ширину или в виде двух столбцов.

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

Виджет содержит следующие части, которые также выделены в CSS с помощью комментариев:

  • Содержание отзыва определяется с помощью класса .tm-content.
  • Стрелка вниз определяется с помощью: after псевдоэлемент «.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» без тегов, чтобы код был эффективен на уровне сайта.

<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 для виджета красочных отзывов

Ниже приведен единственный блок отзывов, который нужно добавить в элемент «Встроить код». Если вы добавите несколько блоков, отзывы будут автоматически выровнены в виде двух столбцов. Не забудьте заменить фиктивный контент своим.

<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>

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

Источник записи: webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее