Cómo mostrar y ocultar texto en publicaciones de WordPress con el efecto de alternancia

¿Quiere mostrar y ocultar texto fácilmente en sus publicaciones y páginas de WordPress?

A veces, es posible que desee permitir que sus usuarios vean contenido oculto cuando hacen clic en un enlace específico. Esto es especialmente útil cuando desea incluir una sección de preguntas frecuentes.

En este artículo, aprenderá a mostrar y ocultar texto en publicaciones de WordPress con el efecto de alternar.

Mostrar u ocultar texto en WordPress usando el efecto de alternar

Lo primero que debe hacer es instalar y activar el complemento Show-Hide / Collapse-Expand. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

El complemento funciona de inmediato y no hay opciones para configurar.

Le permite utilizar dos métodos para ocultar cualquier texto en su sitio web con un enlace para expandir y mostrar el texto.

Mostrar texto oculto en WordPress usando código corto

Para este método, deberá agregar manualmente un código corto para mostrar u ocultar el texto.

Aquí hay un código abreviado de muestra que puede usar como punto de partida.

[bg_collapse view=”link” expand_text=”Show More” collapse_text=”Show Less”]

El texto que quieres ocultar …

[/bg_collapse]

Después de agregar el código corto a su publicación o página, puede guardar sus cambios y obtener una vista previa. Verá un enlace simple ‘Mostrar más’ y al hacer clic en él, se revelará el texto oculto.

Mostrar texto oculto con un enlace simple usando shortccode

Hay muchos parámetros para este código corto que cambiarán la apariencia de su texto para mostrar / ocultar.

Por ejemplo, puede agregar un botón en lugar de un enlace simple, agregar iconos e incluso usar CSS personalizado dentro de este código corto.

Sin embargo, sería bastante complicado generar este shortcode manualmente. En ese caso, puede usar el segundo método que le permite generar el código corto usando un editor visual.

Mostrar texto oculto en WordPress usando el editor visual

Para este método, deberá agregar el bloque ‘Clásico’ en su editor de contenido de WordPress. Simplemente haga clic en el botón Agregar nuevo bloque y busque el bloque ‘Clásico’.

Buscar bloque clásico

Una vez que inserte el bloque clásico, verá un editor visual con botones de formato que se parece al editor clásico anterior de WordPress.

Vista del editor de bloques clásico

En la barra de herramientas, debe hacer clic en el botón ‘Contraer / Expandir’. Aparecerá una ventana emergente en la que configura los parámetros del shortcode visualmente.

Generador de shortcode

Desde aquí puede elegir el enlace o botón, el color, los iconos y el texto que se mostrará para mostrar y ocultar los botones.

Después de elegir los parámetros, haga clic en el botón ‘Aceptar’ para insertarlo en su publicación. Verá el código abreviado agregado dentro de su editor de publicaciones.

Código corto dentro del editor de publicaciones

Ahora puede continuar y agregar el texto que desea ocultar entre las etiquetas de inicio y finalización del código abreviado.

Agregar texto para ocultar

Después de eso, puede guardar su publicación o página y visitar su sitio web para ver los cambios en acción. Así es como se veía en nuestro sitio de prueba.

Mostrar texto oculto con un botón

Esperamos que este artículo le haya ayudado a aprender a mostrar y ocultar texto en publicaciones de WordPress con el efecto de alternancia. También puede consultar nuestra lista de los complementos de WordPress imprescindibles para todos los sitios web, y nuestro tutorial sobre cómo agregar contenido dinámico personalizado en WordPress.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Botón volver arriba