Тестимониалс (от англ. testimonial – рекомендация, свидетельство, отзыв) в веб-дизайне – это отображение отзывов и рекомендаций клиентов. Чаще всего такие отзывы размещают на главной странице и они включают в себя: название компании, ФИО и фотографию. Для одного из своих сайтов, я тоже создала такой дизайн, чтобы отзывы смотрелись гармонично и красиво.
HTML
Прежде всего рассмотрим HTML разметку самих отзывов:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <div class="testimonial t_grey grayimage tg-one"> <!--отзыв--> <div class="one"><div class="testimonial-wrap"><div class="testimonial-byline"> <!--Тут напишите ФИО--> <span class="author-desc"> <!--Тут замените SITE_COMPANY_LINK и COMPANY--> <a href="SITE_COMPANY_LINK" target="_blank" rel="nofollow"><b>COMPANY</b></a> </span></div><div class="testimonial-content clearfix"><div class="author-image"> <!--Тут ссылка на ФОТО замените: http://yoursite.com/people1.jpg--> <img title="author" alt="author" src="http://yoursite.com/people1.jpg"> </div><div class="testimonial-text"><p> ТУТ ТЕКСТ ОТЗЫВА </p></div></div></div></div><!--Конец отзыва--> <!--отзыв--> <div class="one"><div class="testimonial-wrap"><div class="testimonial-byline"> <!--Тут напишите ФИО--> <span class="author-desc"> <!--Тут замените SITE_COMPANY_LINK и COMPANY--> <a href="SITE_COMPANY_LINK" target="_blank" rel="nofollow"><b>COMPANY</b></a> </span></div><div class="testimonial-content clearfix"><div class="author-image"> <!--Тут ссылка на ФОТО замените: http://yoursite.com/people2.jpg--> <img title="author" alt="author" src="http://yoursite.com/people2.jpg"> </div><div class="testimonial-text"><p> ТУТ ТЕКСТ ОТЗЫВА </p></div></div></div></div><!--Конец отзыва--> </div> |
В этой разметке два отзыва. Скопируйте код между <!–отзыв–> <!–Конец отзыва–> столько раз, сколько отзывов необходимо разместить на странице.
Код отзыва нужно отредактировать и наполнить нужно информацией:
<!–Тут напишите ФИО–> – напишите ФИО человека, чей отзыв публикуете.
<!–Тут замените SITE_COMPANY_LINK и COMPANY–> – в строчке <a href=”SITE_COMPANY_LINK” target=”_blank” rel=”nofollow”><b>COMPANY</b></a> замените SITE_COMPANY_LINK на ссылку компании, а COMPANY на название компании.
<!–Тут ссылка на ФОТО замените: http://yoursite.com/people1.jpg–> – замените фото, укажите ссылку на нужное фото.
ТУТ ТЕКСТ ОТЗЫВА – напишите текст отзыва;
Все отзывы размещены внутри контейнера <div>, в котором заданы классы отзывов. Данный контейнер размещается на странице всего раз, а отзывы должны быть размещены внутри.
1 2 3 | <div class="testimonial t_grey grayimage tg-one"> </div> |
Классы контейнера определяют все стили отзывов. Их можно изменять.
Цвет
Стиль цвета, должен присутствовать обязательно, но его можно менять:
t_grey – серый;
t_red – красный;
t_blue – синий;
t_green – зеленый.
Фото
Фото может быть цветным или черно-белым. По умолчанию все фото цветные, но при добавлении класса grayimage в основной контейнер всех отзывов, фото становятся черно-белые.
Расположение
За расположение отвечает следующие классы:
tg-one – линейное отображение в одну колонку;
tg-one-half – две колонки;
tg-one-third – три колонки.
CSS
Теперь, чтобы все работало, осталось добавить стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | /* TESTIMONIAL ----------------------------------------------- */ .testimonial {margin-bottom: 20px;} /* Серый */ .t_grey div div.testimonial-wrap {background-color: #F8F8F8;} .t_grey div div div.testimonial-byline {background-color: #f0f0f0;} .t_grey div div div span.author-desc a {color: #696969;} /* Красный */ .t_red div div.testimonial-wrap {background-color: #ffe3e3;} .t_red div div div.testimonial-byline {background-color: #ffc2c2;} .t_red div div div span.author-desc a {color: #fd0202;} /* Синий */ .t_blue div div.testimonial-wrap {background-color: #c4c6fd;} .t_blue div div div.testimonial-byline {background-color: #9598fe;} .t_blue div div div span.author-desc a {color: #3901aa;} /* Зеленый */ .t_green div div.testimonial-wrap {background-color: #d5ecd4;} .t_green div div div.testimonial-byline {background-color: #8fd78e;} .t_green div div div span.author-desc a {color: #035a01;} .testimonial-wrap { border-radius: 5px; margin-right: 10px; min-height: 150px; } .testimonial-wrap p{ text-align: left; margin-bottom: 0px; font-style: italic; } .testimonial-content { padding: 12px 20px; } .author-image{ float: left; height: 80px; width: 80px; margin-right: 18px; margin-bottom: 8px; } .author-image img { border-radius: 50%; width: 80px;} .testimonial-byline{ padding: 10px 20px; border-radius: 0 0 3px 3px; font-size: 15pt; } .author-desc { float: right; } .author-desc a { text-decoration: none; } /* 1, 2,3, колонки ----------------------------------------------- */ .tg-one div.t_view {margin-bottom: 30px; } .tg-one-half div.t_view { width: 46.46625%;} .tg-one-third div.t_view { width: 30%; } .tg-one-fourth div.t_view{ width: 22.699387%; } .one-sixth div.t_view{ width: 14.110%; } .tg-one-half div.t_view, .tg-one-third div.t_view, .tg-one-fourth div.t_view, .one-fifth div.t_view, .one-sixth div.t_view{ float: left; margin-right: 3.067485%; margin-bottom: 30px; height: 220px; overflow: hidden; } /* END =1, 2,3, колонки ----------------------------------------------- */ .grayimage div div div div.author-image img{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); } /* END =TESTIMONIAL ----------------------------------------------- */ |
Примеры
Линейное отображение, серый цвет, черное-белое фото
Жизнь — это то, что происходит с нами, пока мы строим другие планы.
Life is what happens to us while we are making other plans.
Два столбика, цвет красный, цветные фото
Жизнь — это то, что происходит с нами, пока мы строим другие планы.
Life is what happens to us while we are making other plans.
Мы смотрели долго в небо,
Оказалось небо ниже.
Нам сказали — это небыль,
Это быль — я так услышал.
Три столбика, цвет синий, черное-белые фото
Жизнь — это то, что происходит с нами, пока мы строим другие планы.
Life is what happens to us while we are making other plans.
Мы смотрели долго в небо,
Оказалось небо ниже.
Нам сказали — это небыль,
Это быль — я так услышал.
Когда все так хорошо, что даже подозрительно, подозрения обычно оправдываются.