> ## Documentation Index
> Fetch the complete documentation index at: https://help.kajabi.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Agregar una imagen a una página

> Aprendan a crear una página con un diseño hermoso agregando y personalizando imágenes.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/zx68iymevz" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

<Note>
  **Nota:** esta guía se refiere al editor de páginas más reciente disponible con Website Builder y Kajabi Pages. Si están usando las plantillas heredadas de Premier, consulten la guía [aquí](/es/articles/website/pages/how-to-add-an-image-to-your-page-with-premier).
</Note>

***

## Cómo agregar un bloque de imagen

Usen imágenes para ayudar a definir el tono de su sitio, mostrar su personalidad, y exhibir lo que su negocio tiene para ofrecer.

### Para agregar un bloque de imagen a su página:

* Abran la pestaña **Website** desde su Dashboard.
* Seleccionen **Website Pages** o **Landing Pages**.
* Abran el editor de páginas de su página. [Aprendan más](/es/articles/website/pages/how-to-get-to-the-page-editor)
* Hagan clic en la sección que quieren editar o [creen una nueva sección](/es/articles/website/pages/add-sections-to-your-pages).
* En la barra lateral, hagan clic en **Add Content**.
* En la lista, seleccionen **Image**.
* Su nuevo bloque de imagen se generará al final de la sección.
* Suban un archivo nuevo o un archivo reciente para mostrar su imagen en el bloque.
* Hagan clic en **Save** para guardar sus cambios:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/14fc1mu0r3" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

***

## Cómo personalizar su bloque de imagen

Con Kajabi, personalicen la apariencia de la imagen subida tal como se muestra en su página con las diversas funciones de personalización.

[Aprendan a personalizar sus imágenes con Adobe Express.](/es/articles/website/pages/how-to-customize-your-images-on-kajabi-with-adobe-express)

**En un bloque de imagen, pueden:**

* Personalizar el [ancho del bloque](/es/articles/website/pages/how-to-customize-the-block-width)
* Seleccionar la imagen que se muestra
* Configurar una acción de imagen
* Ajustar el ancho de la imagen
* Agregar un pie de foto
* Incluir un atributo alt de la imagen
* Crear una galería para sus imágenes en la sección
* Personalizar la apariencia del bloque con la configuración de su bloque de imagen

### Seleccionar imagen

Seleccionen la imagen que se muestra en el bloque de imagen:

* Subiendo un archivo nuevo
* Seleccionando un archivo reciente

[Tipos de archivo compatibles: GIF, JPG, PNG](/es/articles/website/pages/what-are-compatible-file-types-i-can-upload-in-kajabi)

<Tip>
  **Consejo:** el tamaño máximo de archivo que se puede subir a la carpeta de recursos del Template Editor es 1 MB.
</Tip>

### Acción de imagen

Seleccionen una acción de imagen para activar una acción después de hacer clic en la imagen (dejen esto en blanco si quieren desactivar la acción de imagen).

La acción de imagen se puede usar para:

* Llevar a un visitante a una landing page personalizada
* Generar una venta llevando al Checkout
* Animar a su audiencia a descargar un archivo
* Llevar a cualquier página del sitio web con un enlace URL
* Abrir un popup de suscripción en dos pasos
* Funcionar como un enlace de anclaje que lleva a una sección de la página

<Note>
  **Nota:** marcar **Add to Section Gallery** desactivará la configuración de acción de imagen para habilitar únicamente su galería de sección al hacer clic. Esto significa que sus imágenes se expandirán a tamaño completo al hacer clic, para una experiencia de visualización mejorada tipo "galería" para los visitantes de su sitio.
</Note>

### Ancho de imagen

El bloque de imagen se puede personalizar para:

* Cambiar el [ancho del bloque](/es/articles/website/pages/how-to-customize-the-block-width)
* Cambiar el ancho de la imagen dentro del bloque

Personalicen el ancho de la imagen dentro del bloque de imagen ingresando un valor (por ejemplo, 10px o 10) en el campo Image Width:

<img src="https://mintlify.s3.us-west-1.amazonaws.com/kajabi-support/es/articles/images/62ba7584_17046192108827.png" alt="4CAC2C9D-2157-43D4-8BCA-985031229E11.png" />

<Tip>
  **Consejo:** el ancho de la imagen debe estar en el formato 10px o simplemente 10. Dejar el ancho de imagen en blanco mantendrá el ancho predeterminado de la imagen.
</Tip>

### Pie de foto

El pie de foto se muestra debajo de su imagen cuando se hace clic en ella y se expande a tamaño completo para que sus visitantes vean la imagen en su galería de sección.

Su galería de sección se puede activar marcando **Add to Section Gallery** hacia el final del editor.

### Atributo alt de la imagen

Agreguen un atributo alt de la imagen para SEO o en caso de que la imagen no se pueda mostrar.

### Abrir en una pestaña nueva

Activen **Open in New Tab** para abrir una pestaña separada cuando se hace clic en su imagen, llevando al destino especificado en la configuración de acción de imagen.

### Agregar a la galería de sección

Agreguen la imagen a la galería de sección para una experiencia de visualización mejorada tipo "galería" para los visitantes de su sitio.

Esto significa que su imagen se expandirá a tamaño completo al hacer clic, y sus visitantes podrán navegar fácilmente por las imágenes de la sección:

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/gqxkzslzf0" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

Tengan en cuenta que activar la configuración **Add to Section Gallery** desactivará las acciones de imagen para la imagen.

Aprendan la diferencia entre configurar una sección de galería de imágenes y agregar imágenes a su galería de sección para mejorar la experiencia visual interactiva de sus visitantes en [esta guía](/es/articles/website/pages/difference-between-an-image-gallery-and-a-section-gallery).

***

## Configuración del bloque

Para ajustar la apariencia del bloque, configuren la configuración de su bloque personalizando:

* [Fondo](/es/articles/website/pages/customizing-block-background-settings)
* [Diseño de escritorio y móvil](/es/articles/website/pages/customizing-block-layout-settings)
* Superposición
* [Animaciones](/es/articles/website/pages/customizing-block-animations)
* [Revelación por tiempo](/es/articles/website/pages/customizing-time-reveal-settings)

### Configuración de bloque de superposición

**¿Qué es una superposición?**

Una superposición cambia la apariencia de su imagen para ayudar a comunicar un mensaje a sus visitantes. Esto se puede hacer mostrando un color de superposición o incluyendo texto que aparezca encima de su imagen.

<div className="w-full aspect-video">
  <iframe src="https://fast.wistia.net/embed/iframe/ah4d4pnvzt" allow="autoplay; fullscreen" allowFullScreen className="w-full h-full" />
</div>

Personalicen la apariencia de su imagen con la configuración de bloque de superposición:

* **Show Overlay on Hover**: muestra un color de superposición y/o texto cuando su visitante pasa el cursor sobre la imagen.
* **Always Show on Mobile**: muestra siempre la superposición cuando se ve en un dispositivo móvil.
* **Overlay Background Color & Text Color**: personalicen la apariencia general (color y texto) de su configuración de superposición si eligen activarla.
* **Overlay Text**: muestra un mensaje personalizado como superposición para su imagen.