Cómo agregar un acordeón en WordPress (Guía paso a paso)

¿Está diseñando una página de destino, una página de producto o una página de preguntas frecuentes en su sitio web de WordPress? Entonces deberías usar acordeones en tus diseños de página.

Los acordeones ayudan a que los sitios web sean más fáciles de explorar y mejoran la experiencia del usuario. También ayudan a reducir el desorden y acortar las páginas web extralargas.

En esta guía paso a paso, le mostramos cómo crear una sección de acordeón en su sitio web sin tener que escribir una sola línea de código.

Una gran cosa sobre el uso de WordPress es que puedes agregar características sorprendentes como acordeones a tu sitio web usando un complemento simple. En esta guía, usamos las preguntas frecuentes de Heroic para crear una sección de acordeón con solo unos pocos clics.

Te guiaremos a través del proceso, paso a paso. ¡Empecemos!

Cree Secciones de Preguntas Frecuentes - ¡La Manera Fácil!

Cree una sección de preguntas frecuentes y ayude a responder las preguntas comunes de los visitantes.

Obtenga el complemento

¿Qué es un acordeón?

Los acordeones son una estrategia de diseño muy útil que se utiliza en el diseño web para organizar múltiples secciones de contenido en un solo lugar. En pocas palabras, los acordeones le permiten crear una sección con pestañas plegables en los diseños de su página para empaquetar una gran cantidad de contenido en una sola sección.

Por ejemplo, si está creando una sección de preguntas frecuentes (FAQ), puede usar un acordeón para organizar ordenadamente las preguntas y respuestas. De esta manera, puede mostrar solo las preguntas y ocultar las respuestas en un acordeón plegable. Le permitirá ahorrar espacio en el diseño de la página y ofrecerá una forma más fácil para que los usuarios exploren las respuestas.

Eche un vistazo a cómo Tesco usa acordeones para organizar su página de preguntas frecuentes.

En el pasado, los sitios web también usaban acordeones con pestañas horizontales. Pero hoy en día rara vez se utilizan en los diseños de sitios web.

Diferencia entre acordeón y alternar

La mayoría de la gente a menudo confunde acordeones con palancas. A pesar de que se ven similares, tienen un comportamiento diferente.

Por ejemplo, cuando un usuario hace clic en un encabezado en un acordeón, ve el contenido en su pestaña. Pero cuando hacen clic en otro encabezado, la pestaña anterior se cierra para ver la nueva pestaña.

Con los conmutadores, puede modificar este comportamiento para que las pestañas permanezcan abiertas. Y permita a los usuarios cerrar pestañas manualmente.

En resumen, los acordeones solo mantienen una pestaña abierta a la vez. Los conmutadores se pueden ajustar para ver varias pestañas abiertas a la vez.

No tiene que preocuparse por estas dos opciones porque el complemento que estamos usando para configurar acordeones en WordPress admite ambas opciones.

¿Por qué usar un acordeón?

Hay muchos beneficios al usar acordeones. Aquí hay algunas razones para usarlos en su sitio web.

Ahorre mucho espacio

¿Alguna vez ha visitado una página web larga que lo obliga a seguir desplazándose hacia abajo para encontrar el contenido que está buscando? Afortunadamente, los acordeones resuelven este problema.

El principal beneficio de usar acordeones es la capacidad de ahorrar espacio en su sitio web. En lugar de crear páginas extralargas, puede ocultar toda la información importante detrás de las pestañas. Y permita que los usuarios encuentren preguntas y respuestas hojeando los encabezados.

Mejor organización de contenido

Los acordeones también le permiten organizar el contenido en una estructura fácil de usar. Con acordeones, puede anidar pestañas para organizar el contenido en categorías y temas. Puede ver esto en acción en la página de preguntas frecuentes de Tesco que le mostramos anteriormente.

Incrustar en cualquier lugar

Los acordeones se pueden incrustar en cualquier parte de su sitio web. Por ejemplo, puede agregar secciones de acordeón de preguntas frecuentes en su página de precios o en la página de destino de un producto. Esto le permitirá responder preguntas comunes sobre su producto sin ocupar demasiado espacio.

Reducir tamaño de página

El tamaño de sus páginas web juega un papel clave en la velocidad de carga de la página de un sitio web. Como sabes, la velocidad de carga de la página es uno de los principales factores de clasificación utilizados por Google.

Al usar acordeones en sitios web de WordPress, puede mejorar drásticamente la velocidad de carga de la página de su sitio web, ya que se pueden incrustar como un widget.

Preguntas frecuentes sobre cómo agregar un acordeón con Heroic

Para este tutorial, estamos usando el complemento de WordPress Heroic FAQs. No solo porque está construido por nuestro propio equipo de desarrolladores experimentados. Principalmente porque es un complemento que viene con muchas características. Y proporciona mucho valor que otros complementos.

Con el complemento Heroic FAQs, también puede crear preguntas frecuentes únicas y secciones de conocimiento para su sitio web.

Ahora, vayamos al tutorial práctico.

Paso 1: descargue e instale las preguntas frecuentes de Heroic

Primero, deberá descargar e instalar el complemento Heroic FAQs en su sitio web de WordPress. Una vez que haya comprado el complemento, podrá descargarlo desde el panel de control de su cuenta de Heroic.

Luego, inicie sesión en su panel de administración de WordPress. Vaya a Complementos >> Agregar nueva página y seleccione la opción Cargar . Explore su computadora para encontrar el archivo ZIP descargado que contiene el complemento Heroic FAQs e instálelo .

Después de completar la instalación, asegúrese de activar su complemento con su clave de licencia.

Paso 2: crea un grupo de preguntas frecuentes

El complemento Heroic FAQs lo guiará a través de su proceso de configuración inicial. Simplemente siga sus instrucciones.

Comience creando un grupo de preguntas frecuentes. Aquí es donde se agruparán y organizarán todas sus preguntas frecuentes.

Luego puede comenzar a agregar preguntas frecuentes a este grupo. Estas pueden ser preguntas y respuestas. O detalles sobre las características del producto. O cualquier cosa que quieras.

Recuerda que puedes añadir tantas preguntas frecuentes como quieras.

Paso 3: incrustar el acordeón

Ahora puede incrustar su grupo de preguntas frecuentes en una página o publicación. Con el nuevo editor de bloques de Gutenberg, es mucho más fácil agregar acordeones con las preguntas frecuentes de Heroic.

Crea una nueva página o edita una existente. Agregue un bloque nuevo y busque el bloque de contenido de preguntas frecuentes heroicas .

Desde el panel de bloque de preguntas frecuentes heroicas en el lado izquierdo, puede seleccionar el grupo de preguntas frecuentes que desea mostrar en la página. Además de cambiar el estilo del diseño del acordeón.

Paso 4: cambiar entre acordeón y alternar

Con las preguntas frecuentes de Heroic, puede elegir entre las opciones de acordeón y alternar con un solo clic.

Paso 5: Vista previa del acordeón

Obtenga una vista previa de la página para ver cómo se ve el acordeón. Luego puede presionar Publicar para guardar los cambios.

En conclusión

Hay muchas maneras diferentes de aprovechar los acordeones para aumentar la participación de los usuarios y brindar más valor a los clientes. Use nuestra guía como un trampolín para encontrar sus propios enfoques únicos para usar acordeones de otras formas útiles.

Mientras tanto, no dude en navegar por nuestro blog para obtener más consejos. Encontrará nuestra mejor comparación de software de base de conocimiento bastante útil.