¿Alguna vez ha navegado por una página web muy larga, luchando por encontrar la información exacta que necesita? Es frustrante, ¿verdad? La solución está en el contenido plegable y ampliable, que es una forma sencilla pero eficaz de organizar la información.
Esta técnica le permite presentar contenidos detallados al tiempo que mantiene sus páginas limpias y fáciles de navegar. Ya se trate de preguntas frecuentes, descripciones de productos o entradas de blog, las secciones plegables mejoran la usabilidad y el compromiso.
¿La buena noticia? No necesitas sumergirte en la codificación para ponerlo en práctica. Con WordPress, herramientas como el plugin Ultimate Blocks lo hacen increíblemente sencillo. Ultimate Blocks, un plugin diseñado específicamente para los usuarios de Gutenberg, ofrece funciones como la función Conmutador de contenido y Ampliar bloques para poder crear secciones interactivas y plegables.
Método 1: Utilizar el plugin Ultimate Blocks
Paso 1: Instalar el plugin Ultimate Blocks
Vaya a su panel de control de WordPress, vaya a la sección "Plugins" y haga clic en "Añadir nuevo". Tipo "Bloques definitivos" en la barra de búsqueda, localice el plugin en los resultados, haga clic en "Instalar ahora". y luego "Activar".
Paso 2: Añadir el bloque de alternancia de contenido
Abra la entrada o página en la que desea añadir contenido plegable. Haga clic en el icono Icono "+". en el editor de WordPress para añadir un nuevo bloque, busque "Content Toggle" y selecciónelo.
Una vez que hayas añadido el bloque, verás el bloque en posición pero en formato cerrado. Haga clic en el signo de flecha para expandirlo, coloque el título de su contenido en la casilla "Título del panel" y, posteriormente, el contenido principal en el campo "Contenido del panel" caja.
Ahora, si necesita más de una sección ampliable o plegable, haga clic en el botón + botón en la parte inferior del bloque para insertar un nuevo conmutador. Del mismo modo, si no desea ningún conmutador específico, haga clic en el botón x al final del bloque.
Paso 3: Personalizar el bloque de alternancia de contenido
Una vez seleccionado el bloque, aparecerá el panel de configuración de bloques a la derecha del panel de control. Allí encontrarás dos pestañas separadas: Ajustes generales y estilos.
En el Ajustes generales puedes:
- Ajuste el Título del panel para una jerarquía adecuada.
- Establezca el estado de alternancia para controlar si los paneles deben estar contraídos o abiertos cuando se carga la página.
- Activar Esquema FAQ para mejorar la visibilidad en los resultados de los motores de búsqueda.
- Utilice Control de respuesta para ocultar o mostrar el bloque en dispositivos específicos.
- Añadir un Cuadro de búsqueda para facilitar la navegación por las FAQ. Sin embargo, esta función está limitada a los usuarios Pro.
Ahora, si cambia a la Ficha Estilospuede ajustar los colores, activar los bordes, establecer estilos y posiciones de los iconos y ajustar el relleno y los márgenes.
Una vez satisfecho, haga clic en "Publicar" o "Actualizar" para activarlo.
Método 2: Utilizar el bloque Expandir
Paso 1: Añadir el bloque Expandir
Navega hasta la página o la entrada en la que desees que aparezca el contenido plegable/expandible. Vuelve a hacer clic en el icono "+" para añadir un nuevo bloque, busca "Expandir" y selecciónalo.
Paso 2: Añadir contenido al bloque
El bloque proporcionará dos secciones: una para el contenido visible (que se muestra inicialmente) y otra para el contenido oculto (que se revela al hacer clic). Añada el contenido que desea que permanezca visible en la primera sección, encima del icono "Ver más". Coloque el resto del contenido en la sección oculta debajo del texto "Ver más" texto.
Haga clic en el botón + signo en cada bloque, seleccione el bloque que prefiera y, más tarde, añada contenido a los bloques. Puede personalizar los bloques "Ver más" y "Mostrar menos" textos para que se adapten mejor a su contenido o a su público. Solo tiene que hacer clic en los textos predeterminados y sustituirlos por las etiquetas que desee.
Paso 3: Personalizar el bloque Expandir
La versión gratuita ofrece una personalización limitada, que incluye ajustes de desplazamiento, control de respuesta y ajustes de dimensión en la pestaña Estilos. Pero si te pasas a la versión profesional, puedes elegir un efecto de desvanecimiento para el contenido minimizado (disponible en Configuración general). También puedes personalizar el estilo del botón, el color de fondo, el borde y el radio para darle un aspecto más pulido.
Cuando esté satisfecho con el resultado, haga clic en "Publicar" o "Actualizar" para guardar y mostrar los cambios en su sitio.
Conclusión
El propósito de este artículo es guiarle en la creación de contenido plegable y ampliable en WordPress, manteniendo un diseño limpio y fácil de navegar. Los bloques Ultimate Blocks le permiten conseguirlo sin necesidad de codificación y, además, con sencillez tanto en la usabilidad como en el diseño. Entender las necesidades de su público es crucial, ya que le ayuda a implementar contenido plegable donde proporciona el mayor valor y asegura que todo funcione sin problemas para una experiencia de navegación óptima. Tenga en cuenta que pequeños cambios como estos pueden transformar la forma en que los visitantes interactúan con su sitio.
