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

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

17

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

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

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

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

1 приложение Weebly FAQ

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

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

Приложение Weebly FAQ по умолчанию

  • Подтвердите запрос, щелкнув опцию «Подключиться».

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

Добавить приложение Weebly FAQ

  • Вы увидите сообщение об успешном выполнении, как показано ниже, после того, как приложение FAQ будет успешно установлено на вашем сайте.

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

Добавить успешно установлено

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

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

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

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

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

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

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

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

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

2 Пользовательский виджет часто задаваемых вопросов для Weebly

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

Как добавить виджет 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, чтобы избежать путаницы в стилях.

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

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