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

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

0

Часті запитання та акордеон – це подібні типи вмісту, що мають кілька розділів в одному елементі. Кожен розділ містить заголовок і текст для додавання деталей. Єдина відмінність між цими двома віджетами полягає в тому, що FAQ задає лише текстовий вміст, а акордеон – будь -який тип вмісту. Ми пояснювали контейнери перемикання гармошок CSS, jQuery та Bootstrap у наших попередніх статтях. У цій статті давайте обговоримо, як додати віджет FAQ на веб -сайт Weebly.

Додати віджет FAQ у Weebly можна двома способами.

  • За допомогою програми Weebly FAQ
  • Вставте спеціальний віджет FAQ

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

1 Додаток із поширеними запитаннями Weebly

Weebly пропонує безкоштовний додаток FAQ через центр додатків.

  • Увійдіть у свій обліковий запис Weebly і перейдіть до редактора сайту, на якому потрібно додати поширені запитання.
  • Перейдіть на вкладку «Додатки», щоб перейти до центру додатків.
  • Знайдіть "FAQ" та знайдіть додаток Weebly FAQ.
  • Натисніть на додаток, щоб переглянути подробиці, і натисніть кнопку «Додати», щоб підключити додаток до свого сайту.

Додаток із поширеними запитаннями Weebly за замовчуванням

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

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

Додайте додаток Weebly FAQ

  • Після успішного встановлення програми FAQ на вашому сайті ви побачите повідомлення про успіх, як показано нижче.

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

Додавання успішно встановлено

Тепер перейдіть на вкладку «Збірка» та прокрутіть униз, щоб побачити, що додаток поширених запитань доступний у розділі «Встановлені програми» на лівій бічній панелі. Перетягніть елемент, щоб вставити FAQ на свою сторінку.

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

Вставте розділ поширених запитань у Weebly

Додаток додасть три фіктивні запитання та відповіді як FAQ. Ви можете натиснути на елемент, щоб побачити доступні параметри. Ви можете зробити наступне за допомогою програми Weebly FAQ за замовчуванням:

  • У розділі запитань виберіть кількість елементів, які потрібно додати
  • Виберіть простий макет, коробку або матеріал
  • Встановіть кольори фону для заголовка та вмісту
  • Налаштуйте шрифти та кольори тексту

На жаль, програма Weebly FAQ дозволяє додавати лише текстовий вміст як для заголовків, так і для розділів відповідей. Ви не можете перетягнути інші елементи всередині елемента FAQ, щоб показати зображення або карту. Остаточний готовий віджет FAQ буде показувати щось на зразок нижче.

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

Приклад поширених запитань Weebly

Додати віджет поширених запитань виглядає просто, але найбільша проблема в тому, що ви не можете перетягувати та змінювати порядок питань. Це робить цей додаток марним, якщо у вас немає чітких запитань і відповідей, які ніколи не зміняться. Вам слід уважно додавати запитання в тій же послідовності, інакше єдиний спосіб – це видалити та розпочати з початку.

2 Спеціальний віджет FAQ для Weebly

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

Опублікуйте свій сайт і перегляньте поширені поширені запитання за допомогою кнопок "Показати все" та "Приховати все". Ви можете налаштувати поширені запитання в автономному режимі, переставляючи запитання, змінюючи кольори та змінюючи розмір шрифту.

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

Джерело запису: webnots.com
Залиште відповідь

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