TechBlogSD - Allt för WordPress- och WEB -utveckling
WEB- och WordPress - instruktioner, nyheter, recensioner av teman och plugins

Hur lägger jag till widget för vanliga frågor i Weebly?

9

Vanliga frågor och dragspel är liknande typer av innehåll som har flera sektioner i ett enda element. Varje avsnitt innehåller en rubrik och text för att lägga till detaljer. Den enda skillnaden mellan dessa två widgets är att FAQ endast tillåter textinnehåll medan dragspel tillåter vilken typ av innehåll som helst. Vi har förklarat CSS-, jQuery- och Bootstrap dragspelväxlar i våra tidigare artiklar. Låt oss i denna artikel diskutera hur du lägger till widgeten FAQ på Weebly -webbplatsen.

Det finns två sätt att lägga till widgeten FAQ i Weebly.

  • Använda appen Weebly FAQ
  • Infoga anpassad widget för vanliga frågor

Båda metoderna har sina egna fördelar såväl som nackdelar. Du kan använda widgeten Vanliga frågor och svar för att lägga till frågor och svar på en enda sida eller skapa en särskild FAQ -sida.

1 App för Weebly FAQ

Weebly erbjuder en gratis FAQ -app via sitt appcenter.

  • Logga in på ditt Weebly -konto och gå till webbplatsredigeraren för webbplatsen där du vill lägga till vanliga frågor.
  • Gå till fliken "Appar" för att navigera till appcentret.
  • Sök efter "FAQ" och hitta appen Weebly FAQ.
  • Klicka på appen för att se detaljer och klicka på knappen "Lägg till" för att ansluta appen till din webbplats.

Standard App för Weebly FAQ

  • Bekräfta uppmaningen genom att klicka på alternativet "Anslut".

Hur lägger jag till widget för vanliga frågor i Weebly?

Lägg till appen Weebly FAQ

  • Du kommer att se ett framgångsmeddelande som nedan, när FAQ -appen har installerats på din webbplats.

Hur lägger jag till widget för vanliga frågor i Weebly?

Tillägget har installerats

Gå nu till fliken "Bygg" och rulla ner för att se att FAQ -appen är tillgänglig under avsnittet "Installerade appar" i det vänstra sidofältet. Dra och släpp elementet för att infoga en FAQ på din sida.

Hur lägger jag till widget för vanliga frågor i Weebly?

Infoga FAQ -avsnitt i Weebly

Appen kommer att lägga till tre dummyfrågor och svar som vanliga frågor. Du kan klicka på elementet för att se de tillgängliga alternativen. Du kan göra följande med standardappen Weebly FAQ:

  • Välj antalet objekt som ska läggas till i avsnittet Frågor och svar
  • Välj enkel layout, box eller materialstil
  • Ställ in bakgrundsfärgerna för titel och innehåll
  • Anpassa teckensnitt och textfärger

Tyvärr låter Weebly FAQ -appen dig bara lägga till textinnehåll för både titel- och svarsavsnitt. Du kan inte dra andra element inuti FAQ -elementet för att visa bild eller karta. Den sista färdiga widgeten för vanliga frågor kommer att visa något liknande nedan.

Hur lägger jag till widget för vanliga frågor i Weebly?

Exempel på vanliga frågor om Weebly

Det ser enkelt ut att lägga till widgeten FAQ men det största problemet är att du inte kan dra och ordna frågorna. Detta gör denna app värdelös om du inte har fasta frågor och svar som aldrig kommer att förändras. Du bör noggrant lägga till frågorna i samma sekvens som du behöver, annars är det enda sättet att ta bort och börja från början.

2 Anpassad FAQ -widget för Weebly

Så länge dra -och -släpp -funktionen inte är tillgänglig i FAQ -appen, är det vettigt att redigera innehållet offline och lägga till på sidan med hjälp av inbäddningskodelement. Nedan ser hur den anpassade FAQ -widgeten kommer att se ut, vilket är mycket bättre än Weeblys FAQ -app.

Hur lägger jag till widget för vanliga frågor i Weebly?

Den anpassade widgeten har tre delar – skript, CSS och HTML.

2.1. Skript för FAQ -widget

Lägg till följande skript under avsnittet " Footer Code ” på din Weebly -sida. Du kan lägga till detta antingen på en sida under "Sidor> Välj din sida> SEO -inställningar> Sidfotskod".

<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

Lägg till CSS nedan under "Sidor> Välj din sida> SEO -inställningar> Rubrikkod" på din Weebly -sida.

<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

Lägg till nedanstående HTML -kod inuti inbäddningskodelementet på sidan. Exempel HTML -koden har tre frågor och svar, kom ihåg att ersätta dummyinnehållet med ditt eget. Du kan lägga till fler frågor och svar genom att lägga till ytterligare

taggar.

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

Publicera din webbplats och se de vanliga frågorna live med knapparna "Visa alla" och "Dölj alla". Du kan anpassa vanliga frågor och svar offline genom att ordna om frågorna, ändra färger och justera teckenstorlek.

Obs! FAQ -koden kan komma i konflikt med andra koder på din webbplats. Därför rekommenderar vi att du lägger till koden på sidnivå istället för på webbplatsnivå under avsnittet "Inställningar> SEO> Sidhuvud/sidfotskod". Dessutom kan du använda en vanligt förekommande fråga på en sida, annars kan du behöva ändra CSS -klassnamnen för att undvika att stilarna förstörs.

Inspelningskälla: www.webnots.com
Leave A Reply

Denna webbplats använder cookies för att förbättra din upplevelse. Vi antar att du är ok med detta, men du kan välja bort det om du vill. Jag accepterar Fler detaljer