TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere un widget FAQ in Weebly?

13

Le domande frequenti e la fisarmonica sono tipi di contenuto simili con più sezioni in un unico elemento. Ogni sezione contiene un’intestazione e un corpo per aggiungere dettagli. L’unica differenza tra questi due widget è che le FAQ consentono solo il contenuto di testo mentre la fisarmonica consente qualsiasi tipo di contenuto. Abbiamo spiegato CSS, jQuery e Bootstrap a fisarmonica contenitori nei nostri articoli precedenti. In questo articolo discutiamo come aggiungere il widget FAQ nel sito Weebly.

Ci sono 2 modi per aggiungere il widget FAQ in Weebly.

  • Utilizzo dell’app Weebly FAQ
  • Inserisci un widget FAQ personalizzato

Entrambi i metodi hanno i loro vantaggi e svantaggi. Puoi utilizzare il widget FAQ per aggiungere una sezione di domande e risposte su una singola pagina o creare una pagina dedicata alle domande frequenti.

1 app Weebly FAQ

Weebly offre un’app FAQ gratuita tramite il suo centro app.

  • Accedi al tuo account Weebly e vai all’editor del sito del sito che desideri aggiungere alle FAQ.
  • Vai alla scheda "App" per accedere al centro app.
  • Cerca "FAQ" e trova l’app Weebly FAQ.
  • Fai clic sull’app per visualizzare i dettagli e fai clic sul pulsante "Aggiungi" per collegare l’app al tuo sito.

App predefinita per le domande frequenti su Weebly

  • Conferma la richiesta facendo clic sull’opzione "Connetti".

Come aggiungere un widget FAQ in Weebly?

Aggiungi l’app Weebly FAQ

  • Vedrai un messaggio di successo come di seguito, una volta che l’app FAQ è stata installata con successo sul tuo sito.

Come aggiungere un widget FAQ in Weebly?

Aggiungi installato con successo

Ora vai alla scheda "Crea" e scorri verso il basso per vedere che l’app FAQ è disponibile nella sezione "App installate" nella barra laterale sinistra. Trascina e rilascia l’elemento per inserire una FAQ nella tua pagina.

Come aggiungere un widget FAQ in Weebly?

Inserisci la sezione FAQ in Weebly

L’app aggiungerà tre domande e risposte fittizie come FAQ. È possibile fare clic sull’elemento per visualizzare le opzioni disponibili. Puoi fare quanto segue con l’app Weebly FAQ predefinita:

  • Scegli il numero di elementi da aggiungere nella sezione Q&A
  • Seleziona layout in stile semplice, scatola o materiale
  • Imposta i colori di sfondo per titolo e contenuto
  • Personalizza i caratteri e i colori del testo

Sfortunatamente, l’app Weebly FAQ ti consente di aggiungere solo contenuto di testo per entrambe le sezioni del titolo e delle risposte. Non puoi trascinare altri elementi all’interno dell’elemento FAQ per mostrare l’immagine o la mappa. L’ultimo widget FAQ finito mostrerà qualcosa come sotto.

Come aggiungere un widget FAQ in Weebly?

Esempio di domande frequenti su Weebly

Sembra semplice aggiungere il widget FAQ, ma il problema più grande è che non puoi trascinare e riorganizzare le domande. Ciò rende questa app inutile a meno che tu non abbia fissato domande e risposte che non cambieranno mai. Dovresti aggiungere con attenzione le domande nella stessa sequenza di cui hai bisogno, altrimenti l’unico modo è eliminare e ricominciare dall’inizio.

2 Widget FAQ personalizzato per Weebly

Finché la funzione di trascinamento della selezione non è disponibile all’interno dell’app FAQ, ha senso modificare il contenuto offline e aggiungerlo alla pagina utilizzando l’ elemento di codice di incorporamento. Di seguito è riportato come apparirà il widget FAQ personalizzato, che è molto meglio dell’app FAQ di Weebly.

Come aggiungere un widget FAQ in Weebly?

Il widget personalizzato ha tre parti: script, CSS e HTML.

2.1. Script per widget FAQ

Aggiungi il seguente script nella sezione " Codice piè di pagina " della tua pagina Weebly. Puoi aggiungerlo su una singola pagina in "Pagine> Seleziona la tua pagina> Impostazioni SEO> Codice piè di pagina".

<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 per widget FAQ

Aggiungi il seguente CSS nella sezione "Pagine> Seleziona la tua pagina> Impostazioni SEO> Codice intestazione" della tua pagina 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 per il widget delle domande frequenti

Aggiungi il codice HTML sottostante all’interno dell’elemento del codice di incorporamento nella pagina. Il codice HTML di esempio ha tre domande e risposte, ricordati di sostituire il contenuto fittizio con il tuo. Puoi aggiungere più domande e risposte semplicemente aggiungendo ulteriori

tag.

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

Pubblica il tuo sito e guarda le FAQ dal vivo con i pulsanti "Mostra tutto" e "Nascondi tutto". Puoi personalizzare le FAQ offline riordinando le domande, cambiando i colori e regolando la dimensione del carattere.

Nota: il codice FAQ potrebbe essere in conflitto con altri codici sul tuo sito. Pertanto, ti consigliamo di aggiungere il codice a livello di pagina anziché a livello di sito nella sezione "Impostazioni > SEO > Codice intestazione/piè di pagina". Inoltre, usa una FAQ su una pagina, altrimenti potresti dover cambiare i nomi delle classi CSS per evitare di rovinare gli stili.

Fonte di registrazione: www.webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More