TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo agregar un widget de preguntas frecuentes en Weebly?

17

Las preguntas frecuentes y el acordeón son tipos de contenido similares que tienen varias secciones en un solo elemento. Cada sección contiene un encabezado y un cuerpo para agregar detalles. La única diferencia entre estos dos widgets es que las preguntas frecuentes solo permiten contenido de texto, mientras que el acordeón permite cualquier tipo de contenido. Hemos explicado los contenedores de alternancia de acordeón CSS, jQuery y Bootstrap en nuestros artículos anteriores. En este artículo, analicemos cómo agregar el widget de preguntas frecuentes en el sitio de Weebly.

Hay 2 formas de agregar el widget de preguntas frecuentes en Weebly.

  • Uso de la aplicación de preguntas frecuentes de Weebly
  • Insertar widget personalizado de preguntas frecuentes

Ambos métodos tienen sus propias ventajas y desventajas. Puede utilizar el widget de preguntas frecuentes para agregar una sección de preguntas y respuestas en una sola página o crear una página de preguntas frecuentes dedicada.

1 Aplicación de preguntas frecuentes de Weebly

Weebly ofrece una aplicación gratuita de preguntas frecuentes a través de su centro de aplicaciones.

  • Inicie sesión en su cuenta de Weebly y vaya al editor del sitio al que desea agregar las preguntas frecuentes.
  • Vaya a la pestaña "Aplicaciones" para navegar hasta el centro de aplicaciones.
  • Busque "Preguntas frecuentes" y encuentre la aplicación de preguntas frecuentes de Weebly.
  • Haga clic en la aplicación para ver los detalles y haga clic en el botón "Agregar" para conectar la aplicación a su sitio.

Aplicación predeterminada de preguntas frecuentes de Weebly

  • Confirme el mensaje haciendo clic en la opción "Conectar".

¿Cómo agregar un widget de preguntas frecuentes en Weebly?

Agregar la aplicación de preguntas frecuentes de Weebly

  • Verá un mensaje de éxito como el siguiente, una vez que la aplicación de preguntas frecuentes se haya instalado correctamente en su sitio.

¿Cómo agregar un widget de preguntas frecuentes en Weebly?

Agregar instalado correctamente

Ahora, vaya a la pestaña "Crear" y desplácese hacia abajo para ver que la aplicación de preguntas frecuentes está disponible en la sección "Aplicaciones instaladas" en la barra lateral izquierda. Arrastre y suelte el elemento para insertar una pregunta frecuente en su página.

¿Cómo agregar un widget de preguntas frecuentes en Weebly?

Insertar sección de preguntas frecuentes en Weebly

La aplicación agregará tres preguntas y respuestas ficticias como preguntas frecuentes. Puede hacer clic en el elemento para ver las opciones disponibles. Puede hacer lo siguiente con la aplicación predeterminada de preguntas frecuentes de Weebly:

  • Elija la cantidad de elementos que se agregarán en la sección de preguntas y respuestas
  • Seleccione un diseño de estilo simple, de caja o de material
  • Establecer los colores de fondo para el título y el contenido
  • Personaliza fuentes y colores de texto

Desafortunadamente, la aplicación de preguntas frecuentes de Weebly le permite agregar solo contenido de texto para las secciones de título y respuesta. No puede arrastrar otros elementos dentro del elemento de preguntas frecuentes para mostrar la imagen o el mapa. El widget de preguntas frecuentes finalizado mostrará algo como a continuación.

¿Cómo agregar un widget de preguntas frecuentes en Weebly?

Ejemplo de preguntas frecuentes de Weebly

Parece sencillo agregar el widget de preguntas frecuentes, pero el mayor problema es que no puede arrastrar y reorganizar las preguntas. Esto hace que esta aplicación sea inútil a menos que haya arreglado preguntas y respuestas que nunca cambiarán. Debe agregar cuidadosamente las preguntas en la misma secuencia que necesita; de lo contrario, la única forma es eliminar y comenzar desde el principio.

2 Widget de preguntas frecuentes personalizado para Weebly

Siempre que la función de arrastrar y soltar no esté disponible en la aplicación de preguntas frecuentes, tiene sentido editar el contenido sin conexión y agregarlo a la página mediante el elemento de código de inserción. A continuación se muestra cómo se verá el widget de preguntas frecuentes personalizado, que es mucho mejor que la aplicación de preguntas frecuentes de Weebly.

¿Cómo agregar un widget de preguntas frecuentes en Weebly?

El widget personalizado tiene tres partes: script, CSS y HTML.

2.1. Script para el widget de preguntas frecuentes

Agregue la siguiente secuencia de comandos en la sección " Código de pie de página " de su página de Weebly. Puede agregar esto en una sola página en "Páginas> Seleccione su página> Configuración de SEO> Código de pie de página".

<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 para el widget de preguntas frecuentes

Agregue el CSS a continuación en la sección "Páginas> Seleccione su página> Configuración de SEO> Código de encabezado" de su página de 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 para el widget de preguntas frecuentes

Agregue el siguiente código HTML dentro del elemento de código de inserción en la página. El código HTML de muestra tiene tres preguntas y respuestas; recuerde reemplazar el contenido ficticio por el suyo. Puede agregar más preguntas y respuestas con solo agregar más

etiquetas.

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

Publique su sitio y vea las preguntas frecuentes en vivo con los botones "Mostrar todo" y "Ocultar todo". Puede personalizar las preguntas frecuentes sin conexión reorganizando las preguntas, cambiando los colores y ajustando el tamaño de fuente.

Nota: El código de preguntas frecuentes puede entrar en conflicto con otros códigos de su sitio. Por lo tanto, recomendamos agregar el código en el nivel de la página en lugar del nivel del sitio en la sección "Configuración> SEO> Código de encabezado / pie de página". Además, use una pregunta frecuente en una página; de lo contrario, es posible que deba cambiar los nombres de las clases CSS para evitar estropear los estilos.

Fuente de grabación: www.webnots.com
Deja una respuesta

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