TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie füge ich ein FAQ-Widget in Weebly hinzu?

21

FAQ und Akkordeon sind ähnliche Inhaltstypen mit mehreren Abschnitten in einem einzigen Element. Jeder Abschnitt enthält eine Überschrift und einen Textkörper, um Details hinzuzufügen. Der einzige Unterschied zwischen diesen beiden Widgets besteht darin, dass FAQ nur Textinhalte zulässt, während Akkordeon jede Art von Inhalt zulässt. Wir haben CSS, jQuery und Bootstrap Accordion Toggle Container in unseren vorherigen Artikeln erklärt. In diesem Artikel erfahren Sie, wie Sie ein FAQ-Widget zur Weebly-Site hinzufügen.

Es gibt 2 Möglichkeiten, wie Sie ein FAQ-Widget in Weebly hinzufügen können.

  • Verwendung der Weebly FAQ-App
  • Benutzerdefiniertes FAQ-Widget einfügen

Beide Methoden haben ihre eigenen Vor- und Nachteile. Sie können das FAQ-Widget verwenden, um einen Q&A-Bereich auf einer einzelnen Seite hinzuzufügen oder eine spezielle FAQ-Seite erstellen.

1 Weebly FAQ-App

Weebly bietet über sein App-Center eine kostenlose FAQ-App an.

  • Melden Sie sich bei Ihrem Weebly-Konto an und gehen Sie zum Site-Editor der Site, der Sie FAQ hinzufügen möchten.
  • Gehen Sie zum Tab "Apps", um zum App-Center zu navigieren.
  • Suchen Sie nach „FAQ” und finden Sie die Weebly FAQ-App.
  • Klicken Sie auf die App, um Details anzuzeigen, und klicken Sie auf die Schaltfläche "Hinzufügen", um die App mit Ihrer Site zu verbinden.

Standard-FAQ-App von Weebly

  • Bestätigen Sie die Abfrage mit einem Klick auf die Option „Verbinden”.

Wie füge ich ein FAQ-Widget in Weebly hinzu?

Weebly FAQ-App hinzufügen

  • Sie sehen eine Erfolgsmeldung wie unten, sobald die FAQ-App erfolgreich auf Ihrer Website installiert wurde.

Wie füge ich ein FAQ-Widget in Weebly hinzu?

Erfolgreich installiert hinzufügen

Gehen Sie nun zur Registerkarte „Build” und scrollen Sie nach unten, um zu sehen, dass die FAQ-App im Abschnitt „Installierte Apps” in der linken Seitenleiste verfügbar ist. Ziehen Sie das Element per Drag & Drop, um eine FAQ auf Ihrer Seite einzufügen.

Wie füge ich ein FAQ-Widget in Weebly hinzu?

FAQ-Bereich in Weebly einfügen

Die App fügt drei Dummy- Fragen und Antworten als FAQ hinzu. Sie können auf das Element klicken, um die verfügbaren Optionen anzuzeigen. Mit der Standard-FAQ-App von Weebly können Sie Folgendes tun:

  • Wählen Sie die Anzahl der hinzuzufügenden Elemente im Q&A-Bereich
  • Wählen Sie einfaches Layout, Box- oder Materialstil-Layout
  • Legen Sie die Hintergrundfarben für Titel und Inhalt fest
  • Schriftarten und Textfarben anpassen

Leider können Sie mit der Weebly FAQ-App nur Textinhalte für Titel- und Antwortabschnitte hinzufügen. Sie können keine anderen Elemente in das FAQ-Element ziehen, um ein Bild oder eine Karte anzuzeigen. Das fertige FAQ-Widget wird in etwa wie folgt angezeigt.

Wie füge ich ein FAQ-Widget in Weebly hinzu?

Beispiel für Weebly FAQ

Es sieht einfach aus, das FAQ-Widget hinzuzufügen, aber das größte Problem ist, dass Sie die Fragen nicht ziehen und neu anordnen können. Dies macht diese App nutzlos, es sei denn, Sie haben feste Fragen und Antworten, die sich nie ändern werden. Sie sollten die Fragen sorgfältig in der gleichen Reihenfolge hinzufügen, die Sie benötigen, andernfalls besteht die einzige Möglichkeit darin, sie zu löschen und von vorne zu beginnen.

2 Benutzerdefiniertes FAQ-Widget für Weebly

Solange die Drag-and-Drop-Funktion innerhalb der FAQ-App nicht verfügbar ist, ist es sinnvoll, den Inhalt offline zu bearbeiten und mit dem Embed-Code-Element auf der Seite hinzuzufügen. Unten sehen Sie, wie das benutzerdefinierte FAQ-Widget aussehen wird, das viel besser ist als die FAQ-App von Weebly.

Wie füge ich ein FAQ-Widget in Weebly hinzu?

Das benutzerdefinierte Widget besteht aus drei Teilen – Skript, CSS und HTML.

2.1. Skript für FAQ-Widget

Fügen Sie das folgende Skript im Abschnitt „ Fußzeilencode ” Ihrer Weebly-Seite hinzu. Sie können dies entweder auf einer einzelnen Seite unter „Seiten > Wählen Sie Ihre Seite > SEO-Einstellungen > Fußzeilencode” hinzufügen.

<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 für FAQ-Widget

Fügen Sie das folgende CSS im Abschnitt "Seiten > Wählen Sie Ihre Seite > SEO-Einstellungen > Header-Code" auf Ihrer Weebly-Seite hinzu.

<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 für FAQ-Widget

Fügen Sie den folgenden HTML-Code in das Einbettungscodeelement auf der Seite ein. Der HTML-Beispielcode enthält drei Fragen und Antworten. Denken Sie daran, den Dummy-Inhalt durch Ihren eigenen zu ersetzen. Sie können weitere Fragen und Antworten hinzufügen, indem Sie einfach zusätzliche anhängen

Stichworte.

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

Veröffentlichen Sie Ihre Website und sehen Sie sich die Live-FAQ mit den Schaltflächen "Alle anzeigen" und "Alle ausblenden" an. Sie können die FAQ offline anpassen, indem Sie die Fragen neu anordnen, die Farben ändern und die Schriftgröße anpassen.

Hinweis: Der FAQ-Code kann mit anderen Codes auf Ihrer Website in Konflikt geraten. Daher empfehlen wir, den Code auf Seitenebene statt auf Seitenebene im Abschnitt „Einstellungen > SEO > Kopf-/Fußzeilencode” hinzuzufügen. Verwenden Sie außerdem eine FAQ auf einer Seite, andernfalls müssen Sie möglicherweise die CSS-Klassennamen ändern, um die Stile nicht durcheinander zu bringen.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen