Обязательный блок для идеального lendinga является faq ответы на вопросы, в котором рассмотрены все ключевые вопросы, которые интересуют покупателя.
Если покупатель сразу ответит на вопросы, то увеличится сила убеждения для совершения действия, то есть нажать на кнопку и заказать.
Структура будет состоять из секции с идентификатором #faq в одну колонку col-xs-12 с заголовком второго уровня с названием информация о товаре и двумя уточняющими предложениями.
Под заголовком будем использовать блок аккордеон из библиотеки bootstrap.
Этот блок копируем с официального сайта bootstrap и вставляем в index.html внутрь класс row с колонками col-xs-12.
Сразу появится аккордеон.
Весь текст у каждого блока обернем в тег p и каждое предложение с новой строки тегом br.
Добавим кнопку развернуть faq.
Так как вопросов может быть много, оставим несколько штук, которые будут видны.
Кто заинтересуется, нажмет на кнопку и откроется весь список.
Переходим на сайт bootstrap и чуть выше аккордеона есть пример кнопки.
Помимо добавления кнопки нам нужно обернуть все вопросы, которые будут скрыты в див с классом collapse и идентификатором как у кнопки allfaq.
Получился код в 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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<section id="faq"> <div class="container"> <div class="row"> <div class="col-xs-12 faq-hdr"> <p>Посмотри подробную</p> <h2>информацию отоваре</h2> <p>Кликни на название вопроса, чтобы посмотреть подробнее</p> </div> </div> <div class="row"> <div class="col-xs-12"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingOne"> <h4 class="panel-title"> <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Вопрос 1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. <bg>Города несколько, решила дорогу, маленькая продолжил моей пояс своих предупредила?</p> </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingTwo"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Вопрос 2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p> </div> </div> </div> <div class="collapse" id="allfaq"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="headingThree"> <h4 class="panel-title"> <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Вопрос 3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> <p>Далеко-далеко за словесными горами в стране.</p> </div> </div> </div> </div> <br> <button class="faq-btn" type="button" data-toggle="collapse" data-target="#allfaq" aria-expanded="false" aria-controls="collapseExample"> Развернуть полный список FAQ </button> </div> </div> </div> </div> </section> |
Установим стили к аккордеону.
- Заголовок faq-hdr делаем по центру text-align: center, делаем большой шрифт синего цвета.
- Для кнопки faq-btn сделаем свойство display: block, чтобы она занимала всю область по ширине в браузере, после этого подвинем на центр кнопку margin: 0 auto. Закруглим края. Чтобы у кнопки при фокусе &:focus не было синей линии вокруг, пропишем outline: none. Зададим кнопке размеры.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//section faq button, input &:focus outline: none .faq &-hdr text-align: center h2 font-family: "Flow-examle" font-weight: bold color: blue font-size: 2em text-transform: uppercase &-btn display: block margin: 0 auto margin-top: 1em background-color: blue color: #fff border: none border-radius: 10em width: 17em height: 3em |
Можно реализовать faq с помощью bootstrap табов.
Также заходим на сайт bootstrap и копируем код, примера, в файл index.html.
Меняем только заголовки tabs и текст в нутрии каждого tab.
Код.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<section id="faq"> <div class="container"> <div class="row"> <div class="col-xs-12 faq-tanbheader faq-hdr"> <p>Посмотри подробную</p> <h2>информацию отоваре</h2> <p>Кликни на название вопроса, чтобы посмотреть подробнее</p> </div> </div> <div> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Вопрос1</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Вопрос2</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Вопрос3</a></li> </ul> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home"><p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. <bg>Города несколько, решила дорогу, маленькая продолжил моей пояс своих предупредила?</p></div> <div role="tabpanel" class="tab-pane" id="profile"><p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты.</p></div> <div role="tabpanel" class="tab-pane" id="messages"><p>Далеко-далеко за словесными горами в стране.</p></div> </div> </div> </div> </section> |
