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

Ya sea que estés escribiendo una publicación larga y detallada o creando una sección de preguntas frecuentes detallada, puede ser complicado presentar mucha información sin abrumar a tus lectores.

En este caso, nuestra solución preferida es mostrar y ocultar texto con un efecto de alternancia. Este enfoque ahorra espacio, hace que tu contenido sea escaneable y da a los lectores control sobre lo que quieren ver.

Piénsalo como un interruptor de luz para tu contenido. Los lectores pueden hacer clic para revelar más detalles o hacer clic de nuevo para ocultarlos.

Hemos visto muchos sitios web usarlo para aprovechar mejor su espacio, y sus usuarios aprecian cómo ayuda a mantener las cosas limpias y organizadas.

Aquí hay 3 maneras fáciles de usar el efecto de alternancia en WordPress para mostrar y ocultar texto para tu contenido extenso.

¿Por qué mostrar y ocultar texto en publicaciones de WordPress?

Muchos sitios web ocultan texto por defecto, generalmente mostrando un avance y luego incluyendo un enlace de 'Leer más' o 'Ver más'. Los visitantes pueden obtener más información haciendo clic en ese enlace.

Esto es útil si necesitas agregar mucha información a una página pero te preocupa que una pared sólida de texto pueda abrumar a los visitantes.

Las preguntas frecuentes son un gran ejemplo, ya que la mayoría de los visitantes solo querrán la respuesta a una sola pregunta.

Si muestras todas las respuestas completas, los visitantes pueden tener dificultades para encontrar la información que necesitan.

Al ocultar texto con el efecto de alternancia, los visitantes pueden escanear muchas publicaciones, características, beneficios u otra información y luego elegir el elemento sobre el que desean aprender.

Dicho esto, veamos cómo puedes mostrar y ocultar texto en WordPress con el efecto de alternancia. Simplemente usa los enlaces rápidos a continuación para saltar al método que deseas usar:

• Método 1: Mostrar y ocultar texto en WordPress usando un shortcode (rápido y fácil)
• Method 2: Show and Hide Text in WordPress Using SeedProd (Best For FAQs)
  • Alternativa: Usa el plugin Heroic FAQs
• Method 3: Show and Hide Text With WordPress Details Block (No Plugin)
• Preguntas Frecuentes: El efecto de alternancia en WordPress

Método 1: Mostrar y ocultar texto en WordPress usando un shortcode (rápido y fácil)

La forma más rápida y sencilla de añadir un enlace de ‘Leer más’ a cualquier página o publicación es usando Read More Without Refresh. Este plugin gratuito te permite personalizar el enlace de ‘Leer más’ y luego añadirlo en cualquier lugar de tu sitio web usando un shortcode.

Un shortcode es un pequeño fragmento de código entre corchetes que realiza una función específica. No te preocupes, son muy fáciles de usar y solo requieren copiar y pegar.

Lo primero que necesitas hacer es instalar y activar el plugin Read More Without Refresh. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Tras la activación, haz clic en ‘RMWP Settings’ para configurar los ajustes del plugin.

Para empezar, puedes cambiar el texto que se usa en los enlaces de ‘Leer más / Ocultar’ escribiendo en los dos campos de texto.

Por ejemplo, si estás creando una sección de Preguntas Frecuentes, podrías querer usar algo como ‘Mostrar respuesta / Ocultar respuesta’ en su lugar.

En esta pantalla, también puedes cambiar el color del texto, el color de fondo y más. Esto puede ayudarte a crear enlaces que se adapten perfectamente a tu tema de WordPress.

También puedes cambiar el grosor de la fuente, añadir un borde y cambiar el relleno.

Cuando termines en esta página, asegúrate de hacer clic en el botón ‘Guardar cambios’ incluso si no realizaste ningún cambio.

Esto es importante porque al hacer clic en ‘Guardar Cambios’ se inicializan la configuración del plugin en la base de datos de WordPress.

Si omites este paso, el plugin no tendrá la información que necesita para funcionar correctamente en tu sitio.

Con eso hecho, puedes agregar un efecto de alternancia a cualquier página o publicación. Necesitarás encontrar el texto que deseas ocultar y luego envolverlo en un shortcode.

Para empezar, abre el editor de bloques de Gutenberg para cualquier página o publicación. Luego, haz clic en el ícono ‘+ Añadir bloque’ para agregar un bloque antes del texto que deseas ocultar.

Luego, empieza a escribir 'Shortcode' y selecciona el bloque correcto cuando aparezca.

En el cuadro de Shortcode, agrega el siguiente shortcode:

[leer más]

Esta es una etiqueta de marcador de posición que marca el inicio de tu contenido oculto.

El plugin reemplazará automáticamente [leer más] con el texto del enlace personalizado que creaste en la configuración, como 'Mostrar respuesta' o 'Ver más'.

Hecho esto, necesitarás agregar un bloque Shortcode después del texto que deseas ocultar.

Al final del texto, simplemente haz clic en el ícono '+' y crea otro bloque Shortcode siguiendo el mismo proceso descrito anteriormente.

En este bloque, agrega el siguiente código: [/leer]

Ahora puedes hacer clic en 'Actualizar' o 'Publicar' para que el texto esté en vivo.

Ahora, visita tu blog de WordPress, y verás que el texto entre los bloques de shortcode está oculto por defecto.

Para mostrar el texto, simplemente haz clic en el enlace 'Leer más' o similar.

Método 2: Mostrar y ocultar texto en WordPress usando SeedProd (Mejor para preguntas frecuentes)

Las preguntas frecuentes son uno de los formatos más comunes para ocultar y mostrar texto en un sitio web de WordPress. Si deseas crear una sección de preguntas y respuestas con un diseño profesional y atractivo, te recomendamos usar un plugin de constructor de páginas en su lugar.

SeedProd es el mejor constructor de páginas del mercado y te permite crear todo tipo de páginas de destino personalizadas para tu sitio web de WordPress. Viene con más de 300 plantillas de sitio prediseñadas, incluyendo diseños que puedes usar para promocionar productos, servicios, seminarios web y más.

Todos estos diseños son el lugar perfecto para agregar una sección de preguntas frecuentes. Varias de nuestras marcas asociadas han diseñado sus sitios web completos utilizándolo. Para más detalles, consulta nuestra reseña completa de SeedProd.

Después de seleccionar una plantilla, SeedProd incluso tiene diferentes secciones de preguntas frecuentes prediseñadas que puedes agregar al diseño de tu página con un solo clic.

Muchas de estas secciones de preguntas frecuentes vienen con un efecto de alternancia de texto para ocultar/mostrar incorporado.

También son completamente personalizables, por lo que puedes agregar fácilmente tu propio texto de preguntas y respuestas.

Para obtener información sobre cómo usar SeedProd, consulta nuestra guía sobre cómo crear una página personalizada en WordPress.

Después de crear una página, es fácil agregar una sección de preguntas frecuentes prediseñada. En el editor de páginas de SeedProd, simplemente haz clic en la pestaña 'Secciones' en el menú de la izquierda.

Ahora puedes seleccionar 'Preguntas frecuentes' para ver todas las secciones de preguntas y respuestas de SeedProd. Para previsualizar un diseño, pasa el mouse sobre él y luego haz clic en la pequeña lupa.

Cuando encuentres un diseño que quieras usar, haz clic en 'Elegir esta sección'.

SeedProd procederá a agregar la sección al final de tu página.

Puedes mover la sección de Preguntas Frecuentes a una nueva ubicación usando arrastrar y soltar.

Después de eso, estás listo para agregar tu propio texto haciendo clic para seleccionar el bloque de acordeón de Preguntas Frecuentes. El menú de la izquierda ahora se actualizará para mostrar una lista de todas las preguntas.

Para editar un par de pregunta y respuesta, simplemente haz clic en esa pregunta en el menú de la izquierda.

Esto abre dos pequeños editores de texto donde puedes agregar tu propia pregunta y respuesta. También puedes usar todas las opciones de formato estándar, como agregar un enlace o poner el texto en negrita.

Simplemente repite estos pasos para cada pregunta y respuesta en la sección de Preguntas Frecuentes.

Si deseas agregar más preguntas, simplemente haz clic en el botón 'Agregar nuevo elemento'.

Para eliminar un par de pregunta y respuesta, simplemente pasa el mouse sobre esa pregunta en el menú de la izquierda.

Luego, haz clic en el ícono de la papelera cuando aparezca.

Cuando estés satisfecho con la información que ingresaste, puedes cambiar la apariencia del texto usando los controles deslizantes ‘Tamaño de fuente’ y ‘Espacio entre’.

También hay una sección ‘Icono’ que define la pequeña imagen que aparece junto a cada pregunta en las Preguntas Frecuentes (FAQs).

Si deseas personalizar esta imagen, simplemente haz clic para expandir la sección ‘Icono’.

Aquí, verás configuraciones para cambiar la alineación y el color del ícono. Ten en cuenta que ‘Icono cerrado’ es la imagen que ves por defecto cuando la pregunta está contraída.

‘Icono abierto’ es la imagen que ves cuando la pregunta está expandida.

Si deseas usar un ícono completamente diferente en su lugar, coloca el cursor del mouse sobre la vista previa de ‘Icono cerrado’ o ‘Icono abierto’.

Luego, haz clic en la miniatura de ‘Biblioteca de íconos’.

Esto abre la biblioteca integrada de SeedProd, donde puedes elegir entre más de 1400 fuentes de íconos de Font Awesome.

Puedes personalizar aún más la apariencia de las secciones de Preguntas Frecuentes seleccionando la pestaña ‘Avanzado’. Aquí, puedes cambiar la fuente, agregar márgenes y espaciado, e incluso agregar animaciones CSS para que las Preguntas Frecuentes realmente destaquen.

Hecho esto, puedes continuar agregando nuevos bloques y personalizando el contenido de tu página de SeedProd.

Cuando estés satisfecho con cómo se ve, simplemente haz clic en la flecha junto al botón ‘Guardar’ y luego selecciona ‘Publicar’.

Ahora, si visitas tu sitio web, verás el diseño de la página y la sección de Preguntas Frecuentes en vivo.

Alternativa: Usa el plugin Heroic FAQs

Si buscas una alternativa a SeedProd, también puedes mostrar y ocultar texto con el plugin Heroic FAQs.

Heroic FAQs es el mejor plugin de gestión de Preguntas Frecuentes para WordPress. Su interfaz de arrastrar y soltar te permite agregar fácilmente preguntas y respuestas a grupos de Preguntas Frecuentes.

Luego, puedes mostrar tus preguntas frecuentes en cualquier lugar de tu sitio web usando un simple bloque de WordPress.

El plugin ofrece múltiples estilos de preguntas frecuentes, y puedes mostrar y ocultar tus preguntas y respuestas usando un formato de acordeón o de alternancia.

Para más detalles, consulta nuestra guía sobre cómo agregar una sección de preguntas frecuentes en WordPress y nuestra lista de los mejores plugins de WordPress para preguntas frecuentes.

Método 3: Mostrar y ocultar texto con el bloque de detalles de WordPress (sin plugin)

Si no quieres usar un plugin ni ningún código corto, puedes usar el bloque de detalles integrado de WordPress para mostrar y ocultar texto. Esta función también es excelente para las preguntas frecuentes.

Para usar este bloque, simplemente abre el editor de Gutenberg para una página o publicación. Luego, en cualquier lugar de la interfaz, haz clic en el botón '+ Agregar bloque' para encontrar el bloque de detalles.

En el espacio junto al signo de flecha hacia abajo, puedes escribir tu pregunta frecuente.

En la parte inferior, puedes escribir la respuesta a esa pregunta.

En la barra lateral de configuración del bloque, puedes elegir que la respuesta se abra por defecto si lo deseas.

Una vez hecho esto, simplemente procede a previsualizar tu sitio web. Luego, haz clic en 'Actualizar' o 'Publicar'.

Si desea usar el mismo bloque de Detalles con el mismo contenido en otras páginas o publicaciones, puede convertir este bloque en un bloque reutilizable o un patrón de bloques.

La mejor parte es que si edita un bloque reutilizable, se actualizará automáticamente en todas partes de su sitio. Esto le ahorra mucho tiempo, ya que no tiene que cambiar cada uno manualmente.

También puede que desee cambiar la altura y el ancho del bloque para que combine mejor con el resto de su página.

¿Qué método de alternancia debe usar?

Hemos cubierto tres formas diferentes de agregar un efecto de alternancia, y la mejor depende de sus necesidades. Aquí están nuestras recomendaciones:

• Para una solución rápida y sencilla que funciona en cualquier lugar, Método 1 (Shortcode) es la forma más rápida de ocultar texto detrás de un enlace de ‘Leer más’.
• Para crear secciones de preguntas frecuentes (FAQ) personalizables y de aspecto profesional, Método 2 (SeedProd) es la mejor opción. Te da control total del diseño sin necesidad de código.
• Si quieres evitar plugins y necesitas un interruptor básico para una sola publicación o página, entonces Método 3 (Bloque de Detalles) es la opción integrada perfecta.

Preguntas Frecuentes: El efecto de alternancia en WordPress

Aquí tienes algunas de las preguntas más comunes que recibimos sobre el uso del efecto de alternancia en WordPress.

¿Qué es el efecto de alternancia en WordPress?

El efecto de alternancia, también conocido como acordeón, es un elemento de interfaz de usuario que te permite mostrar y ocultar contenido.

Los visitantes hacen clic en un encabezado o en un enlace de “Leer más” para expandir una sección y revelar el texto interior, lo que ayuda a mantener tus páginas organizadas y menos abarrotadas.

¿Ocultar contenido con un interruptor puede afectar el SEO de mi sitio web?

Generalmente, no, siempre y cuando se haga para la experiencia del usuario. Google y otros motores de búsqueda aún pueden rastrear e indexar el contenido oculto dentro de los interruptores o acordeones.

Sin embargo, siempre es mejor asegurarse de que tu información más importante sea visible por defecto.

¿Qué método es mejor para agregar un efecto de alternancia?

Para interruptores simples y únicos, el bloque de Detalles integrado de WordPress es la opción más fácil, ya que no requiere plugins.

Para crear secciones de preguntas frecuentes (FAQ) completas o para un mayor control del diseño, un constructor de páginas como SeedProd ofrece más opciones de estilo y funciones.

¿Puedo personalizar el texto de ‘Leer más’?

Sí, la mayoría de los plugins que agregan un efecto de alternancia, como el plugin Read More Without Refresh mencionado en esta guía, te permiten personalizar el texto del enlace.

Puedes cambiarlo a “Mostrar respuesta”, “Ver detalles” o cualquier otra cosa que se ajuste a tu contexto.

Esperamos que este artículo te haya ayudado a aprender cómo mostrar y ocultar texto en las publicaciones de WordPress con el efecto de alternancia. También te puede interesar nuestra lista de los mejores plugins de bloques de Gutenberg para WordPress y nuestra guía sobre cómo crear un menú de barra lateral colapsable en WordPress.

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