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

• Ve al contenido en el que quieres agregar el enlace:

  • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
  • Páginas de destino: 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.
• Coloca el cursor sobre tu contenido y haz clic en Editar.
• En el editor de contenidos, haz clic en el icono add Añadir de la barra lateral izquierda. 
• Haz clic para expandir la categoría Media , luego haz clic en el módulo Image Slider y arrástralo hasta su posición. 
• En la barra lateral izquierda, pasa el ratón por encima de una diapositiva y haz clic en el icono edit Editar para añadir una imagen a esa diapositiva: 
  
  • En la sección Imagen , haz clic en Subir para seleccionar una imagen de tu ordenador o Examinar imágenes para seleccionar una imagen de la herramienta de archivos . 
  • En el campo Título , introduce un título  que aparecerá debajo de tu 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 tu contenido abierto y que el enlace se abra en una ventana nueva, haz clic para activar 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. 
• En la parte superior del editor de la barra lateral, haz clic en Image slider para volver a la vista general del módulo. 

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

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

• Ve al contenido en el que quieres agregar el enlace:

  • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
  • Páginas de destino: 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.
• Coloca el cursor sobre tu contenido y haz clic en Editar.
• En el editor de contenidos, haz clic en el módulo deslizador de imágenes . 
• En el editor de la barra lateral, haz clic en Configuración para editar la configuración del módulo. 
• 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 mostrarán. 
  • En la sección Tamaño de la imagen , selecciona una opción de relación de aspecto . Por defecto, las imágenes aparecerán utilizando su propia relación de aspecto. 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. 

• Haz clic para ampliar la sección Movimiento para editar las opciones de transición de diapositivas: 
  • 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. 
• Haz clic para ampliar la sección Navegación para 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, selecciona Mostrar navegación por puntos. 
• Para finalizar los cambios, haz clic en Aplicar cambios. 

Editar estilos para módulos de galería de imágenes

• Ve al contenido en el que quieres agregar el enlace:

  • Páginas de sitio web: En tu cuenta de HubSpot, dirígete a Contenido > Páginas web.
  • Páginas de destino: 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.
• Coloca el cursor sobre tu contenido y haz clic en Editar.
• En el editor de contenidos, haz clic en el módulo deslizador de imágenes . 
• En el editor de la barra lateral, haz clic en la pestaña Estilos. 
• Para establecer cómo de redondeadas aparecen las esquinas de tus imágenes, haz clic en Diapositivas, luego haz clic para expandir la sección Imágenes . 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. 
  • Para añadir márgenes por encima o por debajo de tus subtítulos, haz clic para ampliar la sección Fondo , e introduce valores en píxeles en los campos Margen por encima de y Margen por debajo de .
  • 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. 
   
  • Para editar el tipo de letra de tus subtítulos, haz clic para expandir la sección Texto, luego haz clic en el menú desplegable Seleccionar tipo de letra y selecciona un tipo de letra . 
  • 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, haz clic en un icono de bold peso de la fuente para texto en negrita, cursiva o subrayado.Para editar el aspecto de los pies de foto, haz clic en Diapositivas, luego haz clic en Pies de foto:
• Para editar el aspecto de tus flechas deslizantes:
  • Haz clic en Navegación.
  • Haz clic para ampliar la sección Flechas deslizantes .
  • Para establecer el color de fondo de tus iconos izquierdo y derecho, introduce un valor hexadecimal  en el primer campo de la sección Color de fondo , 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 del color de fondo, introduce un valor porcentual en el segundo campo de la sección Color de fondo . Una transparencia del 100% será opaca, mientras que una transparencia del 0% no será visible. 
  • Para sustituir los iconos utilizados para las flechas izquierda y derecha, haz clic en Sustituir encima de los campos Icono izquierdo e Icono derecho . En el panel derecho, selecciona un icono .
   
  • Para establecer el color de tus iconos izquierdo y derecho, introduce un valor hexadecimal  en el primer campo de la sección Icono 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 del color de fondo, introduce un valor porcentual en el segundo campo de la sección Color del icono . Una transparencia del 100% será opaca, mientras que una transparencia del 0% no será visible. 
• Para cambiar el aspecto de los puntos situados bajo las imágenes y el botón de reproducción automática:
  • Haz clic en Navegación.
  • Haz clic para ampliar la sección Puntos y botón de reproducción automática.
  • 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 cambiar el aspecto de la navegación por miniaturas: 
  • Haz clic en Navegación.
  • Haz clic para ampliar la sección de navegación Thumbnail .

• • Para establecer el color de fondo de tus iconos de flecha izquierda y derecha, introduce un valor hexadecimal  en el primer campo de la sección Color de fondo de flecha , 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 del color de fondo, introduce 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. 
  • 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 .
•  
  • Para establecer el color de tus iconos de flecha izquierda y derecha, introduce un valor hexadecimal  en el primer campo de la sección Relleno de icono de flecha 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 la flecha, introduce un valor porcentual en el segundo campo de la sección Color del icono . Una transparencia del 100% será opaca, mientras que una transparencia del 0% no será visible. 
  • Haz clic para ampliar la sección 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. 

• Para editar el espaciado del deslizador: 
  • Haz clic en Deslizador. 
  • Haz clic para ampliar la sección Espaciado .
  • 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 . 
  • 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.