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

Як додати віджет відгуків у Weebly?

1

У нашій попередній статті ми обговорювали, як додати відгуки у вигляді слайдера, і в цій статті давайте обговоримо, як додати віджет відгуків на веб -сайт Weebly за допомогою простого CSS. Ми пояснимо два подібних приклади: один із простим кольором, а інший – з більш яскравим кольором.

Обидва віджети мають такі функції:

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

Як додати віджет відгуків у Weebly?

Обидва віджети, описані в цих статтях, мають фотографії користувачів, тому першим кроком є ​​завантаження фотографій у розділі «Тема> Редагувати HTML / CSS > Активи> Завантажити файли (и)…». Шлях до завантажених зображень буде таким: подобається:

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

Віджет простих відгуків

Простий віджет відгуків буде виглядати, як показано нижче, і ви можете переглянути демо -версію тут. Його можна розмістити як на повну ширину, так і у макеті з двома стовпцями.

Як додати віджет відгуків у Weebly?

Віджет містить такі частини, які також виділяються в 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 -кодів буде автоматично вирівнюватися у макет з двома стовпцями без необхідності використання декількох елементів "Вставити код". Нижче, як це буде виглядати:

Віджет містить такі частини, які також виділені в 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
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі