TechBlogSD - Alt for WordPress- og WEB -utvikling
WEB- og WordPress -instruksjoner, nyheter, anmeldelser av temaer og plugins

Hvordan legge til widget for vanlige spørsmål i Weebly?

2

Vanlige spørsmål og trekkspill er lignende typer innhold som har flere seksjoner i et enkelt element. Hver seksjon inneholder en overskrift og brødtekst for å legge til detaljer. Den eneste forskjellen mellom disse to widgetene er at FAQ kun tillater tekstinnhold mens trekkspill tillater alle typer innhold. Vi har forklart CSS-, jQuery- og Bootstrap trekkspillvektcontainere i våre tidligere artikler. I denne artikkelen kan vi diskutere hvordan du legger til widget for vanlige spørsmål på Weebly -nettstedet.

Det er 2 måter du kan legge til widget for vanlige spørsmål i Weebly.

  • Bruker Weebly FAQ -appen
  • Sett inn egendefinert widget for vanlige spørsmål

Begge metodene har sine egne fordeler så vel som ulemper. Du kan bruke FAQ -widgeten for å legge til spørsmål og svar -delen på en enkelt side eller opprette en dedikert FAQ -side.

1 Weebly FAQ -app

Weebly tilbyr en gratis FAQ -app gjennom sitt appsenter.

  • Logg deg på Weebly -kontoen din og gå til nettstedredaktøren for nettstedet du vil legge til FAQ.
  • Gå til "Apper" -fanen for å navigere til appsenteret.
  • Søk etter "FAQ" og finn Weebly FAQ -appen.
  • Klikk på appen for å se detaljer, og klikk på "Legg til" -knappen for å koble appen til nettstedet ditt.

Standard Weebly FAQ -app

  • Bekreft ledeteksten ved å klikke på alternativet "Koble til".

Hvordan legge til widget for vanlige spørsmål i Weebly?

Legg til Weebly FAQ -app

  • Du vil se en suksessmelding som nedenfor, når FAQ -appen er installert på nettstedet ditt.

Hvordan legge til widget for vanlige spørsmål i Weebly?

Tillegget er installert

Gå nå til "Bygg" -fanen og rull ned for å se FAQ -appen er tilgjengelig under "Installerte apper" -delen på venstre sidefelt. Dra og slipp elementet for å sette inn en FAQ på siden din.

Hvordan legge til widget for vanlige spørsmål i Weebly?

Sett inn FAQ -delen i Weebly

Appen vil legge til tre dummy -spørsmål og svar som vanlige spørsmål. Du kan klikke på elementet for å se de tilgjengelige alternativene. Du kan gjøre følgende med standard Weebly FAQ -app:

  • Velg antall elementer som skal legges til i delen Spørsmål og svar
  • Velg enkelt layout, eske eller materialstil
  • Angi bakgrunnsfarger for tittel og innhold
  • Tilpass fonter og tekstfarger

Dessverre lar Weebly FAQ -appen deg bare legge til tekstinnhold for både tittel- og svarseksjoner. Du kan ikke dra andre elementer inne i FAQ -elementet for å vise bilde eller kart. Den siste ferdige FAQ -widgeten vil vise noe slikt som nedenfor.

Hvordan legge til widget for vanlige spørsmål i Weebly?

Eksempel på Weebly FAQ

Det ser enkelt ut å legge til widget for vanlige spørsmål, men det største problemet er at du ikke kan dra og omorganisere spørsmålene. Dette gjør denne appen ubrukelig med mindre du har faste spørsmål og svar som aldri vil endres. Du bør nøye legge til spørsmålene i samme sekvens du trenger, ellers er den eneste måten å slette og starte fra begynnelsen.

2 Tilpasset FAQ -widget for Weebly

Så lenge dra -og -slipp -funksjonen ikke er tilgjengelig i FAQ -appen, er det fornuftig å redigere innholdet frakoblet og legge til på siden ved å legge inn kodeelement. Nedenfor ser du hvordan den tilpassede FAQ -widgeten vil se ut, noe som er mye bedre enn Weeblys FAQ -app.

Hvordan legge til widget for vanlige spørsmål i Weebly?

Den tilpassede widgeten har tre deler – script, CSS og HTML.

2.1. Script for FAQ Widget

Legg til følgende skript under delen " Footer Code " på Weebly -siden din. Du kan legge dette til enten på én side under "Sider> Velg siden> SEO -innstillinger> bunntekst".

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

Legg til CSS nedenfor under "Sider> Velg siden din> SEO -innstillinger> Overskriftskode" -delen av Weebly -siden din.

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

Legg til HTML -koden nedenfor i kodeelementet på siden. Eksempel HTML -koden har tre spørsmål og svar. Husk å erstatte dummyinnholdet med ditt eget. Du kan legge til flere spørsmål og svar ved å legge til flere

tagger.

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

Publiser nettstedet ditt og se vanlige vanlige spørsmål med knappene "Vis alle" og "Skjul alle". Du kan tilpasse vanlige spørsmål uten nett ved å omorganisere spørsmålene, endre farger og justere skriftstørrelse.

Merk: FAQ -koden kan komme i konflikt med andre koder på nettstedet ditt. Derfor anbefaler vi å legge til koden på sidenivå i stedet for sidenivå under delen "Innstillinger> SEO> Topp-/bunntekst". I tillegg bruker du en FAQ på en side, ellers må du kanskje endre CSS -klassenavn for å unngå å rote opp stilene.

Opptakskilde: webnots.com
Leave A Reply

Dette nettstedet bruker informasjonskapsler for å forbedre din opplevelse. Vi antar at du er ok med dette, men du kan velge bort det hvis du ønsker det. jeg aksepterer Mer informasjon