Image Widget

Descripción general

Use el widget Imagen para insertar una imagen en su sitio web. Puede personalizar imágenes para funcionar como botones y navegar a otras páginas o sitios web, descargar archivos o activar elementos emergentes. Las imágenes son una excelente manera de decorar los sitios web, exhibir productos o vitrinas y crear una forma adicional de comunicarse con los visitantes.

Guía

Add a button widget onto your responsive website. To learn more about adding widgets to your website, see Adding Widgets.

Una vez colocado el widget, aparecerá el Editor de contenido. Haga clic en el botón Reemplazar para seleccionar una imagen.

imagewidget1_en-US.png

Choose between the existing stock photos in the Photo Gallery or add your own images using the Upload New Image button in the Choose and Place Images menu.

imagewidget2_en-US.png

Desde aquí, puede:

  1. Seleccionar la carpeta con las imágenes que desea usar
  2. Presionar el icono "+" para cargar su propia imagen
  3. Cambiar a la vista completa para acceder a más opciones de selección de imágenes

Para obtener más información acerca del selector de imágenes, consulte el artículo Selector de imágenes.

Opciones de imagen

The image options are divided into two Editors - the Content Editor and the Design Editor.

Editor de contenido

imagewidget3_en-US.png

 El Editor de contenido controla el contenido de la imagen - En esta ficha, usted puede:

  • Replace the image - Change the graphic of the image widget.
  • Edit the image - Change image properties by using the Photo Editor.
  • Link the image - Images can be linked to other pages and URLs, popups, anchors, email addresses and downloadable files. When a visitor clicks on the image, they will be taken to the link.
  • Add Alternative Text - Enables search engines to recognize image content. Use this text to describe the image.
  • Add a Tooltip - Text shown when a visitor hovers over an image.

Editor de diseño

imagewidget4_en-US.png

The design tab is displayed in one window but is divided into three Predefined Sections - Layout, Style and Spacing.

Disposición

imagewidget5_en-US.png

Use la sección de disposición para editar las dimensiones de la imagen. Puede editar:

  • Anchura 
  • Altura

También tiene la opción de mantener las proporciones de la imagen. Cuando se marca la opción "Mantener proporción", cualquier cambio realizado en la anchura afectará también la altura de la imagen para mantener la imagen proporcional.  

Estilo

imagewidget6_en-US.png

Use la sección de estilo para agregar otros efectos a su imagen, tales como:

  • Estilo de borde
  • Esquinas redondeadas
  • Sombras
Espaciado
imagewidget7_en-US.png

Use la sección de espaciado para controlar el espacio del widget respecto de otros widgets a su alrededor. Puede editar el:

  • Margin - this is the outer spacing, indicating the numbers on the outer section of the spacing square.
  • Padding - this is the inner spacing, indicating the numbers on the inner section of the spacing square.

Imágenes globales 

También puede realizar cambios en el contenido y diseño de sus widgets de imagen usando el diseño de imagen global. Cambiar los elementos globales cambiará todos los widgets de imagen para tener un diseño coherente. Cualquier cambio a una imagen individual específica se guardará.

Consideraciones

Al cargar fotos que usará en su sitio web, asegúrese de obtener permiso para usar fotos de fotógrafos, empresas y otros terceros.  

Remember that using the image widget does not change the background picture. Instead, it adds a picture onto a row or column. To learn how to add a background picture, read this article

Recursos