TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak dodać widżet FAQ w Weebly?

2

FAQ i akordeon to podobne rodzaje treści, które mają wiele sekcji w jednym elemencie. Każda sekcja zawiera nagłówek i treść, aby dodać szczegóły. Jedyną różnicą między tymi dwoma widżetami jest to, że FAQ pozwala tylko na treść tekstową, podczas gdy akordeon pozwala na dowolny rodzaj treści. Kontenery przełączania akordeonu CSS, jQuery i Bootstrap wyjaśniliśmy w naszych poprzednich artykułach. W tym artykule omówimy, jak dodać widżet FAQ w witrynie Weebly.

Istnieją 2 sposoby dodania widżetu FAQ w Weebly.

  • Korzystanie z aplikacji Weebly FAQ
  • Wstaw niestandardowy widżet FAQ

Obie metody mają swoje zalety i wady. Możesz użyć widżetu FAQ, aby dodać sekcję pytań i odpowiedzi na jednej stronie lub utworzyć dedykowaną stronę FAQ.

1 aplikacja Weebly z najczęściej zadawanymi pytaniami

Weebly oferuje bezpłatną aplikację z najczęściej zadawanymi pytaniami za pośrednictwem swojego centrum aplikacji.

  • Zaloguj się na swoje konto Weebly i przejdź do edytora witryny, do której chcesz dodać FAQ.
  • Przejdź do karty „Aplikacje", aby przejść do centrum aplikacji.
  • Wyszukaj „FAQ” i znajdź aplikację Weebly FAQ.
  • Kliknij aplikację, aby wyświetlić szczegóły i kliknij przycisk „Dodaj”, aby połączyć aplikację ze swoją witryną.

Domyślna aplikacja Weebly z najczęściej zadawanymi pytaniami

  • Potwierdź monit, klikając opcję „Połącz”.

Jak dodać widżet FAQ w Weebly?

Dodaj aplikację Weebly FAQ

  • Po pomyślnym zainstalowaniu aplikacji FAQ w Twojej witrynie zobaczysz komunikat o sukcesie, taki jak poniżej.

Jak dodać widżet FAQ w Weebly?

Dodaj pomyślnie zainstalowano

Teraz przejdź do zakładki "Buduj" i przewiń w dół, aby zobaczyć, że aplikacja FAQ jest dostępna w sekcji "Zainstalowane aplikacje" na lewym pasku bocznym. Przeciągnij i upuść element, aby wstawić FAQ na swojej stronie.

Jak dodać widżet FAQ w Weebly?

Wstaw sekcję FAQ w Weebly

Aplikacja doda trzy fałszywe pytania i odpowiedzi jako FAQ. Możesz kliknąć element, aby zobaczyć dostępne opcje. W domyślnej aplikacji Weebly FAQ możesz wykonać następujące czynności:

  • Wybierz liczbę pozycji do dodania w sekcji pytań i odpowiedzi
  • Wybierz układ w stylu prostym, pudełkowym lub materiałowym
  • Ustaw kolory tła dla tytułu i treści
  • Dostosuj czcionki i kolory tekstu

Niestety, aplikacja Weebly FAQ umożliwia dodawanie tylko treści tekstowych zarówno dla sekcji tytułu, jak i sekcji odpowiedzi. Nie możesz przeciągać innych elementów wewnątrz elementu FAQ, aby wyświetlić obraz lub mapę. Ostateczny, ukończony widżet FAQ pokaże coś takiego jak poniżej.

Jak dodać widżet FAQ w Weebly?

Przykład często zadawanych pytań dotyczących Weebly

Dodanie widżetu FAQ wydaje się proste, ale największym problemem jest to, że nie można przeciągać i zmieniać kolejności pytań. To sprawia, że ​​ta aplikacja jest bezużyteczna, chyba że masz ustalone pytania i odpowiedzi, które nigdy się nie zmienią. Powinieneś ostrożnie dodawać pytania w tej samej kolejności, w jakiej potrzebujesz, w przeciwnym razie jedynym sposobem jest usunięcie i rozpoczęcie od początku.

2 Niestandardowy widżet FAQ dla Weebly

Dopóki funkcja przeciągania i upuszczania nie jest dostępna w aplikacji FAQ, sensowne jest edytowanie treści w trybie offline i dodawanie na stronie za pomocą elementu kodu do umieszczenia na stronie. Poniżej znajduje się wygląd niestandardowego widżetu FAQ, który jest znacznie lepszy niż aplikacja FAQ Weebly.

Jak dodać widżet FAQ w Weebly?

Niestandardowy widżet składa się z trzech części – skryptu, CSS i HTML.

2.1. Skrypt dla widgetu FAQ

Dodaj następujący skrypt w sekcji „ Kod stopki ” na swojej stronie Weebly. Możesz dodać to albo na jednej stronie w „Strony > Wybierz swoją stronę > Ustawienia SEO > Kod stopki”.

<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 dla widżetu FAQ

Dodaj poniższy kod CSS w sekcji „Strony > Wybierz swoją stronę > Ustawienia SEO > Kod nagłówka” na swojej stronie 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 dla widżetu FAQ

Dodaj poniższy kod HTML w elemencie kodu do umieszczenia na stronie. Przykładowy kod HTML zawiera trzy pytania i odpowiedzi, pamiętaj, aby zastąpić fikcyjną treść własną. Możesz dodać więcej pytań i odpowiedzi, dołączając dodatkowe

Tagi.

<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>

Opublikuj swoją witrynę i zobacz na żywo FAQ za pomocą przycisków „Pokaż wszystko” i „Ukryj wszystko”. Możesz dostosować FAQ offline, zmieniając kolejność pytań, zmieniając kolory i dostosowując rozmiar czcionki.

Uwaga: kod często zadawanych pytań może powodować konflikty z innymi kodami w Twojej witrynie. Dlatego zalecamy dodanie kodu na poziomie strony zamiast na poziomie witryny w sekcji „Ustawienia > SEO > Kod nagłówka/stopki”. Ponadto użyj jednego FAQ na stronie, w przeciwnym razie może być konieczna zmiana nazw klas CSS, aby uniknąć bałaganu w stylach.

Źródło nagrywania: webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów