Usen un Image Block para definir el tono de su página, mostrar su personalidad y exhibir lo que ofrece su negocio. Agreguen una sola imagen o creen un grupo de imágenes con una sección Image Gallery.
Los pasos a continuación se aplican al editor de páginas más reciente, disponible con Website Builder y Kajabi Pages. Si crearon su página con la plantilla heredada Premier, vayan a Agregar una sección de imagen con Premier (plantilla heredada) más adelante en este artículo.
Agregar un Image Block
Desde el Dashboard, hagan clic en Website.
Seleccionen Website Pages o Landing Pages.
Abran el editor de páginas de su página. Aprendan a abrir el editor de páginas.
Hagan clic en la sección que quieren editar o creen una nueva sección.
En la barra lateral, hagan clic en Add Content.
En la lista, seleccionen Image. Kajabi agrega el bloque de imagen al final de la sección.
Hagan clic en Select Image y luego elijan Upload new file o Select recent file.
Hagan clic en Save.
Personalizar un Image Block
Cambien cómo se ve y se comporta su imagen en la página con la configuración del bloque de imagen. Para editar una imagen antes de subirla, aprendan a personalizar sus imágenes con Adobe Express.
Archivos de imagen compatibles
Suban un archivo GIF, JPG o PNG.
Consejo: el tamaño máximo de archivo que se puede subir a la carpeta de recursos del Template Editor es 1 MB.
Image Action
Seleccionen una Image Action para activar una acción cuando un visitante haga clic en la imagen. Déjenla en blanco para desactivar la Image Action. Usen una Image Action para:
Llevar a un visitante a una landing page personalizada
Generar una venta desde una página de pago
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 a una sección de la página
Nota: marcar Add to Section Gallery desactiva la configuración de Image Action, de modo que la imagen solo se abre en su galería de sección al hacer clic. La imagen se expande a tamaño completo para los visitantes.
Image Width
Cambien el ancho del bloque o el ancho de la imagen dentro del bloque. Para cambiar el ancho de la imagen, ingresen un valor (por ejemplo, 10px o 10) en el campo Image Width:
Consejo: ingresen el ancho de la imagen como 10px o simplemente 10. Dejen el campo en blanco para mantener el ancho predeterminado de la imagen.
Image Caption
El Image Caption se muestra debajo de su imagen cuando un visitante hace clic en ella y se expande a tamaño completo en su galería de sección. Activen su galería de sección marcando Add to Section Gallery hacia la parte inferior del editor.
Image Alt Attribute
Agreguen un Image Alt Attribute para describir su imagen a los motores de búsqueda y a los visitantes cuyo navegador no pueda mostrarla.
Open in New Tab
Activen Open in New Tab para abrir el destino de su Image Action en una pestaña separada del navegador cuando un visitante haga clic en la imagen.
Add to Section Gallery
Marquen Add to Section Gallery para ofrecer a los visitantes una vista mejorada tipo "galería". La imagen se expande a tamaño completo al hacer clic, y los visitantes pueden recorrer las imágenes de la sección:
Tengan en cuenta que Add to Section Gallery desactiva la Image Action de esa imagen.
Configuración del Image Block
Ajusten la apariencia del bloque configurando sus ajustes de bloque:
Overlay
Una superposición cambia la apariencia de su imagen para ayudar a comunicar un mensaje a sus visitantes. Muestren un color de superposición, texto sobre su imagen o ambos.
Personalicen la superposición con estos ajustes:
Show Overlay on Hover: muestra un color y texto de superposición cuando su visitante pasa el cursor sobre la imagen.
Always Show on Mobile: muestra siempre la superposición cuando su página se ve en un dispositivo móvil.
Overlay Background Color & Text Color: definan el color y el color del texto de su superposición.
Overlay Text: muestra un mensaje personalizado sobre su imagen.
Agregar una sección Image Gallery
Una Image Gallery Section muestra un grupo de imágenes en un diseño uniforme. Al agregar una, se generan seis bloques de imagen, para que puedan crear y diseñar una página llena de imágenes.
Desde el Dashboard, abran la pestaña Website.
Seleccionen Website Pages o Landing Pages.
Abran el editor de páginas de su página.
En la barra lateral, hagan clic en Add Section.
Seleccionen la sección Image Gallery para obtener una vista previa.
Hagan clic en Add para agregar la sección predefinida a su página.
Subir imágenes a una sección Image Gallery
Suban imágenes desde su disco duro o seleccionen imágenes subidas recientemente:
En el editor de páginas, hagan clic en el bloque Image que quieren cambiar.
En la barra lateral, hagan clic en Select Image.
Elijan Upload new file o Select recent file.
Hagan clic en Save.
Agregar más bloques de imagen a una sección Image Gallery
Una sección Image Gallery está formada por seis bloques de imagen. Agreguen otro bloque de imagen para incluir más imágenes. El nuevo bloque tiene un tamaño diferente al del resto de la galería, así que personalicen su configuración para que se ajuste a su diseño.
Pasen el cursor sobre la sección Image Gallery y hagan clic dentro de la sección, no dentro de un bloque de imagen.
En el editor de la barra lateral, hagan clic en Add Content.
Hagan clic en Image.
Personalicen el nuevo bloque de imagen para que se ajuste a su sección Image Gallery.
Hagan clic en Save.
Personalizar una sección Image Gallery
Editen los bloques de imagen y la configuración de la sección para cambiar cómo se ve su galería, cómo se comporta y qué muestra. Configuración de la sección:
Sección Image Gallery vs. Section Gallery
Una sección Image Gallery y una Section Gallery suenan parecido, pero cumplen funciones distintas. Saber cuál necesitan les ayuda a crear la mejor experiencia visual para sus visitantes.
Section Gallery
La Section Gallery expande sus imágenes a tamaño completo cuando un visitante hace clic en una, para que los visitantes puedan recorrer sus imágenes en una vista de galería. En un bloque de imagen, activen Add to Section Gallery para habilitarla.
Image Gallery
Una Image Gallery es una sección de una página formada por bloques de imagen. Pueden obtener una agregando una sección Image Gallery, que genera seis bloques de imagen en una sola sección, o agregando ustedes mismos bloques de imagen a una sección:
Nota: una Image Gallery y una Section Gallery son funciones diferentes, pero pueden agregar las imágenes de una Image Gallery a su Section Gallery. Activen Add to Section Gallery en cada bloque de imagen de la sección.
Agregar una sección de imagen con Premier (plantilla heredada)
Nota: estos pasos se aplican solo a las páginas creadas con la plantilla heredada Premier. Si su página usa el editor de páginas más reciente, sigan los pasos anteriores de este artículo.
En la plantilla heredada Premier, las imágenes se agregan con una sección Images.
Desde el Dashboard, hagan clic en Website.
Hagan clic en Pages.
Abran el editor de páginas de su página. Aprendan a abrir el editor de páginas.
En el editor de la barra lateral, hagan clic en Add Section.
Hagan clic en Images.
Hagan clic en Add.
Hagan clic en Select Image y luego elijan Upload new file o Select recent file.
Hagan clic en Save.
Nota: para eliminar una sección de imagen, hagan clic en Delete This Section en la parte inferior de la barra lateral.
Personalizar una sección de imagen de Premier
Personalicen una sección de imagen en la plantilla heredada Premier con estos ajustes:
Heading y Subheading: ingresen el mensaje que quieren mostrar encima de la imagen.
Image Action: activa una acción cuando un visitante hace clic en la imagen. Lleva a una landing page personalizada, una página de pago, la descarga de un archivo, cualquier página del sitio web con un enlace URL, un popup de suscripción en dos pasos o una sección de la página. Marquen Open In New Window para abrir la Image Action en una ventana nueva.
Image Width: ingresen un ancho como 10px o simplemente 10. Si lo dejan en blanco, la imagen toma su ancho natural con un ancho máximo del 100%.
Background, Text Color y Section Spacing: cambien la apariencia de la sección.