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
ÍNDICE - BOTÓN LEER MÁS - MOSTRAR OCULTAR CONTENIDO
- Plugin Show-Hide/Collapse-Expand para mostrar y ocultar contenido en Wordpress
- Cómo crear un enlace desplegable de leer más en wordpress
- Cómo añadir un botón que muestre o despliegue un texto oculto con wordpress
- Efectos al mostrar el contenido de texto y otras opciones de configuración
- Cómo utilizar el plugin con los módulos de la plantilla Divi y con Gutenberg
- Módulo acordeón y botón desplegable de Divi
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”.
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.
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.
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.
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola, gracias por la explicación, habria alguna manera de cambiar los colores de los botones por los que vienen predeterminados en el pluging Show-Hide/Collapse-Expand por ejemplo el de button-orange por el color #85B09A
estoy empleando el tema de divi
Gracias
Buenas, para elegir un color de fondo diferente a las opciones del plugin ya tendrías que verlo vía CSS. En el mismo menú de creación del shortcode tienes una opción para añadir CSS.
Me gustaría también a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, Curso diseñador web Freelance, Curso Copywriting, Cursos sobre Divi, curso SEO General, Curso SEO Análisis de clics e impresiones, Curso Woocommerce, Curso como crear una tienda online de éxito, Astra Pro, Elementor, Curso sobre idexación web y alta en google, Flatsome, sobre Mailchimp, blog WordPress, etc. etc.
Genial Joaquín, andaba buscando esto ya que en muchas ocasiones no queda bien tanto texto a la vista .
Saludos
Hola Mónica,
Me alegro que te haya sido de interés el post para añadir un enlace o botón para desplegar contenido. Me gustaría también invitarte, si es posible, a que eches un vistazo a mi plataforma de formación https://cursotiendaonline.com/ desde donde puedes Acceder a TODOS mis cursos online por solo 10 €/mes (Incluye ¡¡SOPORTE!!). En la plataforma tienes cursos sobre WordPress, curso Diseñador web freelance, Cursos sobre Divi, Woocommerce, SEO Tiendas online, Analytics ecommerce, Astra Pro, Elementor, Flatsome, Cursos sobre SEO, sobre Mailchimp, blog WordPress, etc. etc.