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

FAQ и аккордеон – это похожие типы контента, содержащие несколько разделов в одном элементе. Каждый раздел содержит заголовок и текст для добавления деталей. Единственное различие между этими двумя виджетами состоит в том, что в FAQ разрешен только текстовый контент, а в Accordion – любой тип контента. Мы объяснили CSS, jQuery и Bootstrap аккордеонные переключатели в наших предыдущих статьях. В этой статье давайте обсудим, как добавить виджет FAQ на сайт Weebly.

Виджет часто задаваемых вопросов Weebly

Есть два способа добавить виджет FAQ в Weebly.

  • Использование приложения Weebly FAQ
  • Вставить пользовательский виджет FAQ

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

1. Приложение Weebly FAQ

Weebly предлагает бесплатное приложение с часто задаваемыми вопросами через центр приложений.

  • Войдите в свою учетную запись Weebly и перейдите в редактор сайта, на котором вы хотите добавить FAQ.
  • Перейдите на вкладку «Приложения», чтобы перейти в центр приложений.
  • Найдите «FAQ» и найдите приложение Weebly FAQ.
  • Щелкните приложение, чтобы просмотреть подробную информацию, и нажмите кнопку «Добавить», чтобы подключить приложение к вашему сайту.
Приложение Weebly FAQ по умолчанию
  • Подтвердите запрос, нажав на опцию «Подключиться».
Добавить приложение Weebly FAQ
Добавить приложение Weebly FAQ
  • Вы увидите сообщение об успешном выполнении, как показано ниже, после того, как приложение FAQ будет успешно установлено на вашем сайте.
Добавить успешно установлено
Добавить успешно установлено

Теперь перейдите на вкладку «Сборка» и прокрутите вниз, чтобы увидеть, что приложение часто задаваемых вопросов доступно в разделе «Установленные приложения» на левой боковой панели. Перетащите элемент, чтобы вставить FAQ на свою страницу.

Вставить раздел часто задаваемых вопросов в Weebly
Вставить раздел часто задаваемых вопросов в Weebly

Приложение добавит три фиктивных вопроса и ответа в виде FAQ. Вы можете щелкнуть элемент, чтобы увидеть доступные параметры. С помощью приложения Weebly FAQ по умолчанию вы можете сделать следующее:

  • Выберите количество элементов, которые нужно добавить в раздел вопросов и ответов.
  • Выберите макет в простом, блочном или материальном стиле
  • Установите цвета фона для заголовка и содержимого
  • Настроить шрифты и цвета текста

К сожалению, приложение Weebly FAQ позволяет добавлять только текстовый контент как для заголовка, так и для раздела ответов. Вы не можете перетаскивать другие элементы внутри элемента FAQ, чтобы показать изображение или карту. В финальном готовом виджете FAQ будет отображаться что-то вроде ниже.

Пример часто задаваемых вопросов Weebly
Пример часто задаваемых вопросов Weebly

Выглядит просто добавить виджет FAQ, но самая большая проблема в том, что вы не можете перетаскивать и переставлять вопросы. Это делает это приложение бесполезным, если у вас нет фиксированного вопроса и ответов, которые никогда не изменятся. Вы должны аккуратно добавлять вопросы в той же последовательности, которая вам нужна, иначе единственный способ – удалить и начать с самого начала.

Посмотреть живую демонстрацию приложений Weebly FAQ и Accordion Вот.

2. Пользовательский виджет FAQ для Weebly

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

Пользовательский виджет FAQ для Weebly

Пользовательский виджет состоит из трех частей – скрипта, CSS и HTML.

2.1. Скрипт для виджета FAQ

Добавьте следующий скрипт в раздел «Код нижнего колонтитула» своей страницы Weebly. Вы можете добавить это на отдельной странице в разделе «Страницы> Выберите страницу> Настройки SEO> Код нижнего колонтитула».

<script>
jQuery(function() {
var $ = jQuery;
var faqTitle = $( ".faq h3" );
var answerFaq = $(".response");
faqTitle.click(function(e) {
e.preventDefault();
$(this).toggleClass('titleopen').next().slideToggle().toggleClass('open-close');
});
$( "#showall" ).click(function(e) {
e.preventDefault();
faqTitle.addClass('titleopen');
answerFaq.slideDown().addClass('open-close');
});
$( "#hideall" ).click(function(e) {
e.preventDefault();
faqTitle.removeClass('titleopen');
answerFaq.slideUp().removeClass('open-close');
});
});
</script>

2.2. CSS для виджета FAQ

Добавьте приведенный ниже CSS в раздел «Страницы> Выберите страницу> Настройки SEO> Код заголовка» своей страницы Weebly.

<style>
.faq_container{
background: #f5f5f5;
padding: 20px;
border: 1px solid #e5e5e5;
border-radius: 10px;
}

#show_hide_wrap{
text-align: right;
}

#show_hide_wrap p{
font-size: 16px;
}

#showall, #hideall{
display: inline-block;
background: #fff;
border: 2px solid rgba(86, 77, 77, 0.18);
padding: 5px 5px;
line-height: 1.5;
margin-bottom: 20px;
font-weight: bold !important;
height: 25px;
}

#showall{
    margin-right: 20px;
}

#showall:hover, #hideall:hover{
background: #707070;
color: #fff;
}

.response{
display: none;
}

ul.faq, ul.faq li{
list-style: none !important;
}

.faq h3{
background: #fff;
padding: 10px 10px;
border: 1px solid #e5e5e5;
}

.faq h3:hover, .faq h3.titleopen{
background: #808080;
color: #fff;
}

.faq h3:after{
content: '+';
float: right
}

.faq h3.titleopen:after{
content: '-'
}

.faq_qtn{
cursor: pointer;
-webkit-transition: color .2s ease, background .2s ease;
-moz-transition: color .2s ease, background .2s ease;
-o-transition: color .2s ease, background .2s ease;
transition: color .2s ease, background .2s ease;
}

.para {
padding-top: 20px;
padding-right: 30px;
font-size: 18px;
text-align: justify;
line-height: 30px;
padding-left: 30px;
}
</style>

2.3. HTML для виджета FAQ

Добавьте приведенный ниже HTML-код в элемент кода для встраивания на страницу. В примере кода HTML есть три вопроса и ответа, не забудьте заменить фиктивный контент своим собственным. Вы можете добавить больше вопросов и ответов, просто добавив дополнительные теги

  • .

    <div class="faq_container">
    <div id="show_hide_wrap">
    <div id="showall" class="faq_qtn">SHOW ALL</div>
    <div id="hideall" class="faq_qtn">HIDE ALL</div>
    </div>
    <ul class="faq">
    <!-- This is the first Q&A -->    
    <li>
    <h3 class="faq_qtn">This is a first question of FAQ Module</h3>
    <div class="response">
    <p class="para">Here is the answer to the first question.</p>
    </div>
    </li>     
    <!-- This is the second Q&A -->
    <li>
    <h3 class="faq_qtn">Here goes your second question of FAQ Module</h3>
    <div class="response">
    <p class="para">Here is the answer to the second question.</p>
    </div>
    </li>     
    <!-- This is the third Q&A -->
    <li>
    <h3 class="faq_qtn">Here is a third question of FAQ Module and you can add as many as questions</h3>
    <div class="response">
    <p class="para">Here is the answer to the third question.</p>
    </div>
    </li>
    <!-- Add additional questions -->
    </ul>
    </div>

    Опубликуйте свой сайт и просматривайте часто задаваемые вопросы в реальном времени с помощью кнопок «Показать все» и «Скрыть все». Вы можете настроить FAQ в автономном режиме, переставив вопросы, изменив цвета и размер шрифта.

    Заметка: Код часто задаваемых вопросов может конфликтовать с другими кодами на вашем сайте. Следовательно, мы рекомендуем добавлять код на уровне страницы, а не на уровне сайта в разделе «Настройки> SEO> Код верхнего / нижнего колонтитула». Кроме того, используйте один FAQ на странице, иначе вам может потребоваться изменить имена классов CSS, чтобы избежать путаницы в стилях.

    Похожие записи

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *