TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä UKK -widget Weeblyyn?

14

Usein kysytyt kysymykset ja harmonikka ovat samanlaisia ​​sisältöjä, joissa on useita osioita yhdessä elementissä. Jokaisessa osassa on otsikko ja teksti lisättäviksi. Ainoa ero näiden kahden widgetin välillä on, että usein kysytyt kysymykset sallivat vain tekstisisällön, kun taas harmonikka sallii kaikenlaisen sisällön. Olemme selittäneet aiemmissa artikkeleissamme CSS-, jQuery- ja Bootstrap -harmonikka -vaihtosäiliöitä. Tässä artikkelissa keskustelemme kuinka lisätä FAQ -widget Weebly -sivustoon.

Voit lisätä FAQ -widgetin Weeblyyn kahdella tavalla.

  • Weebly FAQ -sovelluksen käyttäminen
  • Lisää mukautettu FAQ -widget

Molemmilla menetelmillä on omat etunsa ja haittansa. Voit lisätä usein kysyttyjä kysymyksiä -widgetin avulla Q & A -osion yhdelle sivulle tai luoda oman FAQ -sivun.

1 Weebly FAQ -sovellus

Weebly tarjoaa ilmaisen UKK -sovelluksen sovelluskeskuksensa kautta.

  • Kirjaudu Weebly -tiliisi ja siirry sen sivuston editoriin, jonka haluat lisätä.
  • Siirry Sovellukset -välilehdelle navigoidaksesi sovelluskeskukseen.
  • Hae "FAQ" ja etsi Weebly FAQ -sovellus.
  • Napsauta sovellusta nähdäksesi tiedot ja yhdistä sovellus sivustoosi napsauttamalla Lisää -painiketta.

Weebly FAQ -sovellus

  • Vahvista kehote napsauttamalla "Yhdistä" -vaihtoehtoa.

Kuinka lisätä UKK -widget Weeblyyn?

Lisää Weebly FAQ -sovellus

  • Näet alla olevan menestysviestin, kun UKK -sovellus on asennettu onnistuneesti sivustollesi.

Kuinka lisätä UKK -widget Weeblyyn?

Lisää onnistuneesti asennettu

Siirry nyt "Rakenna" -välilehteen ja vieritä alas nähdäksesi, kuinka usein kysytyt kysymykset -sovellus on käytettävissä vasemman sivupalkin "Asennetut sovellukset" -osiossa. Lisää FAQ sivullesi vetämällä ja pudottamalla elementti.

Kuinka lisätä UKK -widget Weeblyyn?

Lisää FAQ -osio Weebly -palveluun

Sovellus lisää FAQ -kysymyksiin kolme vastausta ja vastauksia. Näet käytettävissä olevat vaihtoehdot napsauttamalla elementtiä. Voit tehdä seuraavat toiminnot oletusarvoisella Weebly FAQ -sovelluksella:

  • Valitse lisättävien kohteiden määrä Q & A -osiosta
  • Valitse yksinkertainen, laatikko- tai materiaalityyli
  • Aseta otsikon ja sisällön taustavärit
  • Mukauta fontteja ja tekstin värejä

Valitettavasti Weebly FAQ -sovelluksen avulla voit lisätä vain tekstisisältöä sekä otsikko- että vastausosioihin. Et voi vetää muita elementtejä FAQ -elementin sisälle näyttääksesi kuvaa tai karttaa. Viimeinen valmis FAQ -widget näyttää jotain alla olevan kaltaista.

Kuinka lisätä UKK -widget Weeblyyn?

Weebly FAQ Esimerkki

FAQ -widgetin lisääminen näyttää yksinkertaiselta, mutta suurin ongelma on, että et voi vetää ja järjestää kysymyksiä uudelleen. Tämä tekee tästä sovelluksesta hyödytön, ellei sinulla ole kiinteitä kysymyksiä ja vastauksia, jotka eivät koskaan muutu. Lisää kysymykset huolellisesti samaan järjestykseen kuin tarvitset, muuten ainoa tapa on poistaa ja aloittaa alusta.

2 Mukautettu FAQ -widget Weeblylle

Niin kauan kuin vedä ja pudota -toiminto ei ole käytettävissä FAQ -sovelluksessa, on järkevää muokata sisältöä offline -tilassa ja lisätä sivulle upotuskoodin avulla. Alla on, miltä mukautettu FAQ -widget näyttää, mikä on paljon parempi kuin Weeblyn FAQ -sovellus.

Kuinka lisätä UKK -widget Weeblyyn?

Muokatussa widgetissä on kolme osaa – komentosarja, CSS ja HTML.

2.1. Skripti FAQ -widgetille

Lisää seuraava komentosarja Weebly -sivusi Alatunniste -osioon. Voit lisätä tämän joko yhdelle sivulle kohtaan "Sivut> Valitse sivusi> SEO -asetukset> Alatunniste".

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

Lisää alla oleva CSS Weebly -sivusi Sivut> Valitse sivusi> SEO -asetukset> Otsikkokoodi -osioon.

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

Lisää alla oleva HTML -koodi sivun upotuskoodin elementtiin. Esimerkki -HTML -koodissa on kolme kysymystä ja vastausta, muista korvata nuken sisältö omalla. Voit lisätä kysymyksiä ja vastauksia lisäämällä vain lisää

tunnisteita.

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

Julkaise sivustosi ja katso reaaliaikaiset usein kysytyt kysymykset Näytä kaikki- ja Piilota kaikki -painikkeilla. Voit muokata UKK: ta offline -tilassa järjestämällä kysymykset uudelleen, muuttamalla värejä ja säätämällä kirjasinkokoa.

Huomautus: Usein kysytyt kysymykset -koodi voi olla ristiriidassa sivustosi muiden koodien kanssa. Siksi suosittelemme, että lisäät koodin sivutasolle sivustotason sijaan Asetukset> SEO> Ylä-/alatunnisteen koodi -osiossa. Käytä lisäksi yhtä usein kysyttyjä kysymyksiä sivulla, muuten sinun on ehkä muutettava CSS -luokkien nimiä, jotta tyylit eivät sotkeudu.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja