Utilizar módulos deslizantes de imágenes

Puedes utilizar el módulo deslizador de imágenes para mostrar varias imágenes en el mismo módulo. Puedes configurar las imágenes para que pasen de una a otra automáticamente, o puedes ayudar a los visitantes a pasar de una a otra manualmente. 

Añadir y editar diapositivas en módulos deslizantes de imágenes

1. Ve al contenido:

   • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
   • Landing Pages: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
   • Artículos de blog: En tu cuenta de HubSpot, dirígete a Contenido > Blog.
2. Haz clic en el nombre de tu contenido.
3. En el editor de contenidos, haz clic en el icono add Agregar de la barra lateral izquierda. 
4. Haz clic para expandir la categoría Media , luego haz clic en el módulo Image Slider y arrástralo hasta su posición. 
5. En la barra lateral izquierda, pase el ratón sobre una diapositiva y haga clic en el icono edit Editar para añadir una imagen a esa diapositiva:
   
   • En la sección Imagen , haga clic en Subir para seleccionar una imagen de su ordenador o en Examinar imágenes para seleccionar una imagen de la herramienta de archivos. Para generar una imagen, haga clic en Generar con AI.
   • En el campo Título , introduce un título que aparecerá debajo de la imagen. Para mostrar la imagen sin pie de foto, borra el texto por defecto. 
   
   • Para añadir un enlace a la diapositiva:
     • Haz clic en el menú desplegable Enlace a y selecciona un enlace de tipo .
     • Especifica el destino del enlace en el campo que aparece. Más información sobre trabajando con enlaces en HubSpot. 
     • Para mantener el contenido abierto y que el enlace se abra en una ventana nueva, active el interruptor Abrir enlace en ventana nueva . 
     • Para identificar el destino del enlace como ajeno a tus sitios web para los motores de búsqueda, selecciona la casilla No follow . 
   • Pulsa Aplicar cambios para guardar los cambios en esta diapositiva. 
6. En la parte superior del editor de la barra lateral, haz clic en Image slider para volver a la vista general del módulo. 

7. Para añadir más diapositivas, pasa el ratón por encima de otra diapositiva y haz clic en el icono edit Editar .
8. Para finalizar los cambios, haz clic en Aplicar cambios. 

Editar la configuración de los módulos deslizantes de imágenes

1. Ve al contenido:

   • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
   • Landing Pages: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
   • Artículos de blog: En tu cuenta de HubSpot, dirígete a Contenido > Blog.
2. Haz clic en el nombre de tu contenido.
3. En el editor de contenidos, haz clic en el módulo deslizador de imágenes . 
4. En el editor de la barra lateral, haz clic en Configuración para editar la configuración del módulo. 
5. Haz clic para ampliar la sección Diapositivas para editar las opciones de las diapositivas: 
   • En el campo Diapositivas por página , introduce el número de diapositivas que aparecerán a la vez en tu deslizador de imágenes. Puedes mostrar hasta cinco diapositivas a la vez. Cuando se seleccionan varias diapositivas a la vez, los pies de foto y las miniaturas no se muestran. 
   • En el campo Tamaño de imagen , seleccione una opción de relación de aspecto. De forma predeterminada, las imágenes aparecerán con la relación de aspecto que hayan subido. Para estandarizar una única relación de aspecto en todas las imágenes, selecciona Forzar relación de aspecto. Esto puede hacer que algunas imágenes aparezcan distorsionadas. 
   • Para añadir o eliminar subtítulos de las diapositivas, seleccione la casilla de verificación Mostrar subtítulos . De forma predeterminada, la casilla de verificación Mostrar subtítulos está seleccionada.
   • En el menú desplegable Posición de los subtítulos, seleccione la posición de los subtítulos. 

6. Haz clic para ampliar la sección Movimiento para editar las opciones de transición de diapositivas: 
   • Para configurar la transición de las diapositivas, seleccione una opción de transición (por ejemplo, Fundido).
   • Para que las diapositivas se repitan al llegar a la última diapositiva, selecciona la casilla Diapositivas en bucle . 
   • Para que las diapositivas tengan un ciclo automático, selecciona la casilla Reproducción automática . Si tienes menos diapositivas que el ajuste Diapositivas por página , no puede producirse ningún ciclo. 
7. Haga clic para ampliar la sección Navegación y editar las opciones de navegación: 
   • Para mostrar flechas que permitan a los visitantes pasar manualmente de una diapositiva a otra, selecciona la casilla Mostrar flechas de navegación . 
   • Para mostrar miniaturas de imágenes debajo de la navegación, selecciona la casilla Mostrar miniaturas . 
   • Para mostrar puntos debajo de las imágenes que mostrarán el número total de diapositivas y permitirán a los visitantes seleccionar una imagen específica, seleccione Mostrar navegación por puntos. 
8. Cuando haya terminado, haga clic en Aplicar cambios. 

Edición de estilos para módulos deslizantes de imágenes

Puede editar los estilos de los módulos del deslizador de imágenes, incluidos los estilos de las diapositivas, la navegación y el deslizador.

1. Ve al contenido:

   • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
   • Landing Pages: En tu cuenta de HubSpot, dirígete a Contenido > Landing pages.
   • Artículos de blog: En tu cuenta de HubSpot, dirígete a Contenido > Blog.
2. Haz clic en el nombre de tu contenido.
3. En el editor de contenidos, haz clic en el módulo deslizador de imágenes . 
4. En el editor de la barra lateral, haz clic en la pestaña Estilos.  
5. Para continuar editando estilos para el módulo deslizador de imágenes, haga clic en Diapositivas, Navegación o Deslizador. 

Editar estilos de diapositivas

Para editar los estilos de visualización de las imágenes en las diapositivas:

1. Haz clic en Diapositivas.
2. Haga clic para ampliar la sección Imágenes .
3. Introduce los valores de los píxeles de  en el campo Radio de esquina . Cuanto mayor sea el valor, más redondeadas aparecerán las esquinas. 
4. Cuando haya terminado, haga clic en Aplicar cambios.

Para editar estilos sobre cómo se muestran los subtítulos en las diapositivas:

1. Haga clic en Subtítulos.
2. Haga clic para ampliar la sección Antecedentes . 
   • Para añadir márgenes por encima o por debajo de los subtítulos, introduzca valores en píxeles en los campos Margen por encima y Margen por debajo .
   • Para añadir relleno a tus subtítulos, introduce un valor de píxeles en el campo Relleno . Para añadir valores separados para cada lado, haz clic en Editar por separado, e introduce valores de píxeles en los campos.
   • Para añadir un color de fondo a tus subtítulos, introduce un valor hexadecimal  en el primer campo de la sección Color , o haz clic en el selector de color  y selecciona un color . Se pueden añadir colores personalizados desde la pestaña Avanzado .
   • Para establecer la transparencia de un color de fondo, introduce un valor porcentual  en el segundo campo de la sección Color . Una transparencia del 100% será opaca, mientras que una transparencia del 0% no será visible. 
3. Haga clic para ampliar la sección Texto . 
   • Para cambiar el tipo de fuente, haga clic en el menú desplegable Seleccionar fuente y seleccione una fuente. 
   • Para cambiar el tamaño de la fuente, haz clic en el menú desplegable Tamaño y selecciona un tamaño de fuente . 
   • Para cambiar el color de la fuente, haz clic en el selector de color  y selecciona un color . Se pueden añadir colores personalizados desde la pestaña Avanzado .
   • Para cambiar el peso de la fuente, haga clic en el icono bold para negrita, italicIcon cursiva o underlineIcon texto subrayado.
4. Cuando haya terminado, haga clic en Aplicar cambios.

Editar estilos de navegación

Puede editar los estilos de navegación, incluidas las flechas del control deslizante, los puntos y el botón de reproducción automática, así como la navegación por miniaturas. Las opciones de estilo disponibles dependerán de los ajustes del módulo deslizador de imágenes para la navegación.

Flechas deslizantes

1. Haz clic en Navegación.
2. Haga clic para ampliar la sección Flechas deslizantes.
3. Introducir un valor hexadecimal en la sección Color de fondo . También puede hacer clic en el selector de color y seleccionar un color. Se pueden añadir colores personalizados desde la pestaña Avanzado .
4. Para ajustar la transparencia del color de fondo, introduzca un valor porcentual en el segundo campo de la sección Color de fondo . Por ejemplo, una transparencia del 100% será opaca, mientras que una transparencia del 0% no será visible.
5. Para reemplazar los iconos utilizados para las flechas izquierda y derecha, haga clic en Reemplazar encima de los campos Icono izquierdo e Icono derecho . En el panel derecho, seleccione un icono. 
6. Para ajustar el color de los iconos izquierdo y derecho, introduzca un valor hexadecimal en el primer campo de la sección Color del icono . También puede hacer clic en el selector de color y seleccionar un color. Se pueden añadir colores personalizados desde la pestaña Avanzado .
7. Para ajustar la transparencia del color de fondo del icono, introduzca un valor porcentual en el segundo campo de la sección Color del icono . Por ejemplo, una transparencia del 100% será opaca, mientras que una transparencia del 0% no será visible. 
8. Cuando haya terminado, haga clic en Aplicar cambios.

Puntos y botón de reproducción automática

1. Haz clic para ampliar la sección Puntos y botón de reproducción automática.
2. Introducir un valor hexadecimal en el primer campo de la sección Color , o hacer clic en el selector de color y seleccionar un color. Se pueden añadir colores personalizados desde la pestaña Avanzado.
3. Cuando haya terminado, haga clic en Aplicar cambios.

Navegación por miniaturas

1. Haga clic para ampliar la sección de navegación por miniaturas .
2. Para editar el color de fondo, introduzca un valor hexadecimal en el primer campo de la sección Color de fondo de la flecha o haga clic en el selector de color y seleccione un color. Se pueden añadir colores personalizados desde la pestaña Avanzado .
3. Para editar la transparencia del color de fondo, introduzca un valor porcentual en el segundo campo de la sección Color de fondo de la flecha . Una transparencia del 100% será opaca, mientras que una transparencia del 0% no será visible. 
4. Para sustituir los iconos utilizados para las flechas izquierda y derecha, haz clic en Sustituir encima de los campos Icono flecha izquierda y Icono flecha derecha . En el panel derecho, selecciona un icono .

5. Para editar el color de los iconos de flecha izquierda y derecha, introduzca un valor hexadecimal en el primer campo de la sección Color de relleno del icono de flecha . También puede hacer clic en el selector de color y seleccionar un color. Se pueden añadir colores personalizados desde la pestaña Avanzado .
6. Para establecer la transparencia de la flecha, introduce un valor porcentual en el segundo campo de la sección Color del icono . Por ejemplo, una transparencia del 100% será opaca, mientras que una transparencia del 0% no será visible. 
7. Para editar la relación, el ancho y las esquinas redondeadas de las imágenes en miniatura:
   • Haga clic para ampliar la sección de imágenes en miniatura .
   • Para establecer la relación de aspecto utilizada para todas las imágenes en miniatura, haz clic en el menú desplegable relación de aspecto y selecciona una relación de aspecto . 
   • Para establecer la anchura utilizada para todas las imágenes en miniatura, introduce un valor de píxeles en el campo Anchura . 
   • Para establecer cómo de redondeadas aparecen las esquinas de las imágenes en miniatura, introduce un valor de píxeles en el campo Radio . Cuanto mayor sea el valor, más redondeadas aparecerán las esquinas. 
8. Cuando haya terminado, haga clic en Aplicar cambios.

Editar estilos para el deslizador

1. Haz clic en Deslizador. 
2. Haz clic para ampliar la sección Espaciado .
3. Para añadir márgenes por encima y por debajo del deslizador, introduce los valores de píxeles en los campos Margen por encima y Margen por debajo . 
4. Para añadir relleno al deslizador, introduce un valor de píxeles en el campo Relleno . Para añadir valores separados para cada lado, haz clic en Editar por separado, e introduce valores de píxeles en los campos.
5. Cuando haya terminado, haga clic en Aplicar cambios.