En este post vamos a ver un recurso muy utilizado en páginas web para mostrar contenido oculto inicialmente. Me refiero a cómo añadir un enlace de “leer más” o “Más información”, en el cual, cuando se hace clic sobre dicho enlace se despliega un contenido de texto que estaba oculto.

Este recurso es muy interesante para no mostrar mucho contenido de texto en un primer momento y por tanto poder tener una página web más limpia. Al mismo tiempo ese contenido oculto, sí es visible para Google, por lo que sí es tenido en cuenta para el SEO. En cualquier caso, el visitante siempre podrá mostrar esos contenidos haciendo clic sobre los enlaces.

Veremos como mostrar ocultar contenido haciendo clic en un enlace utilizando WordPress.

Utilizaremos un plugin gratuito de wordpress que nos va a permitir, no solo crear enlaces simples con contenido desplegable, sino que también nos dará la posibilidad de crear botones, donde al hacer clic sobre ellos, se desplegará o mostrará un contenido de texto que permanecía oculto.

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

 

Plugin Show-Hide/Collapse-Expand para mostrar y ocultar contenido en WordPress

 

El plugin Show-Hide/Collapse-Expand para wordpress, nos permitirá fácilmente añadir enlaces y botones, donde al hacer clic sobre ellos, se desplegará texto que permanecía oculto. Es decir, nos permitirá mostrar – ocultar contenidos de texto. Una vez expandido el texto también podremos colapsarlo u ocultarlo nuevamente.

Ir al plugin Show-Hide/Collapse-Expand

El plugin añadirá un nuevo icono al editor de texto de wordpress que será el que nos permitirá insertar botones o enlaces desplegables de leer más.

Si usamos el editor clásico veremos directamente un elemento denominado “Collapse-Expand”. En caso de utilizar el editor Gutenberg, tendremos que añadir el bloque del editor clásico para ver este elemento. Aunque el shortcode generado lo podemos incluir también en un bloque de texto normal de Gutenberg.

 

 
 

Cómo crear un enlace desplegable de leer más en wordpress

 

Vamos a ver en primer lugar cómo añadir un enlace de “leer más” que nos permita desplegar un texto cuando un usuario haga clic sobre dicho enlace:

 

1.- Situar cursor: situamos el cursor en el punto del texto donde queremos añadir el enlace de leer más, más info o ver más.

2.- Collapse-expand: hacemos clic en el enlace “collapse-expand” que aparece en el editor de texto de wordpress.

3.- Opciones de configuración: rellenamos las siguientes opciones

i.- Expand/collapse content using: elegimos “simple link”

ii.- Select button/link text color: elegimos el color para el texto del enlace de leer más

iii.- Label for expanding content: etiqueta de texto que se mostrará para expandir o mostrar el texto oculto. Por ejemplo, podemos poner “Leer más”

iv.- Label for collapsing content: etiqueta de texto para ocultar el contenido. Por ejemplo, podemos poner “cerrar” o “ver menos” o lo que queramos.

A continuación, hacemos clic en “aceptar”.

 

añadir enlace desplegable de leer mas

 

4.- Introducir contenido de texto desplegable: veremos que ya nos aparece un shortcode formado por 2 bloques encerrados por corchetes. Un bloque de apertura y otro de cierre. El contenido de texto que se mostrará al hacer clic en el enlace de leer más, lo pondremos entre los dos bloques. Por ejemplo:

[bloque apertura] Entre estos dos bloques irá el texto [Bloque cierre]

o

[bloque apertura] Entre estos dos bloques irá el texto.

Podemos añadir saltos de línea a lo largo del texto que queremos mostrar.

No hay problema

[Bloque cierre]

 

Una vez introducido el texto, guardaremos la página y haremos una previsualización.

 

añadir texto oculto mostrar wordpress

 

mostrar ocultar texto wordpress

 

 

Cómo añadir un botón que muestre o despliegue un texto oculto con wordpress

 

Si lo que queremos es añadir un botón donde al hacer clic sobre él se despliega un contenido, tendremos que seguir el mismo procedimiento que en el apartado anterior. Pero, cuando nos aparezca la venta de configuración la rellenaremos de la siguiente manera:

i.- Expand/collapse content using: elegimos una de las opciones button. Por ejemplo, button (Orange): botón color naranja

ii.- Select button/link text color: elegimos el color del texto del botón.

iii.- Label for expanding content: etiqueta de texto que se mostrará en el botón, para expandir o mostrar el texto oculto. Por ejemplo, podemos poner “Leer más”

iv.- Label for collapsing content: etiqueta de texto para ocultar el contenido. Por ejemplo, podemos poner “cerrar” o “ver menos” o lo que queramos.

v.- Select button icon: con esta opción podríamos mostrar un icono dentro del botón.

A continuación, hacemos clic en “aceptar”.

Al igual que sucedía en el apartado anterior, ahora deberemos introducir el texto oculto entre los dos bloques entre corchetes.

 

boton mostrar o ocultar texto en wordpress

 

 

Efectos al mostrar el contenido de texto y otras opciones de configuración

 

En las opciones de configuración del plugin tenemos opciones para establecer efectos de transición en los elementos desplegables.

Para ver estas opciones, ve a: “Herramientas > Show-Hide / Collapse-Expand”.

En la pestaña “Settings”, si marcas la opción “Enable jQuery UI effects”, verás que te aparecen las siguientes opciones:

  • Effect for displaying hidden content: puedes elegir entre las diferentes opciones de transición y hacer clic en “preview” para ver el efecto.
  • Custom animation speed (ms): también puedes personalizar el tiempo de duración de la transición. Ojo, en milisengundos. Es decir, que 1000 milisengundos es 1 segundo

 

También tenemos otra opción interesante:

  • Make buttons and links stick to the bottom of collapsed sections: si marcamos esta opción el enlace para cerrar el contenido emergente aparecerá en la parte inferior.

 

 

Cómo utilizar el plugin con los módulos de la plantilla Divi y con Gutenberg

 

En el post hemos visto como utilizar el plugin con el editor clásico de wordpress. Pero, también lo puedes utilizar en otras interfaces.

Por ejemplo, para usarlo con Gutenberg, simplemente has de utilizar el bloque de editor clásico. También puedes crear el shortcode utilizando el editor clásico, y luego insertarlo en otro bloque de texto

 

Si estás utilizando la plantilla Divi o Elementor, puedes crear el shortcode desde una página donde estés utilizando el editor clásico y luego copiar el código a un módulo texto de Divi, o un módulo de texto de Elementor.

->TODA LA INFO SOBRE DIVI, LA MEJOR PLANTILLA WORDPRESS

SUPER DESCUENTO DIVI

 

 

Módulo acordeón y botón desplegable de Divi

 

En el caso de querer crear una sección de FAQS o preguntas frecuentes, lo cierto es que parece que el plugin se queda un poco corto.

En este caso, yo creo que lo más interesante es tirar de algún page builder. Por ejemplo, el Divi builder de la plantilla Divi, tiene dos elementos super potentes para esto: El módulo conmutador y el módulo acordeón.