Agregar texto e imágenes

Los miembros del equipo central pueden agregar imágenes y texto a un sitio utilizando las siguientes tarjetas:

• Tarjeta de fila: los bloques fundamentales de su sitio. Cada tarjeta, excepto la tarjeta de banner, debe anidar dentro de una tarjeta de fila. Puede agregar imágenes y colores de fondo a su tarjeta de fila. También puede crear un efecto de paralaje con esta tarjeta.
• Tarjeta de texto: agregue texto en cualquier lugar del sitio soltando esta tarjeta sobre una tarjeta de fila. También puede usar esta tarjeta para agregar botones, listas, tablas y código personalizado a su sitio.
• Tarjeta de banner: cree secciones utilizando esta tarjeta para dividir elementos del sitio. Esta tarjeta también cuenta con una barra de búsqueda opcional.
• Tarjeta de imagen: agregue imágenes independientes a cualquier tarjeta de fila, en cualquier parte de su sitio.

Para empezar, inicie sesión en Portal for ArcGIS y haga clic en Sitios en la página Descripción general para ver una lista de sus sitios.

Sugerencia:

También puede editar un sitio al verlo en un navegador. Asegúrese de haber iniciado sesión y busque el botón de edición a la izquierda del sitio.

Agregar texto y formatearlo

Se puede agregar texto a su sitio en cualquier lugar donde haya una tarjeta de fila.

1. Arrastre una tarjeta de Texto sobre una fila existente.
2. Desplácese sobre la tarjeta y haga clic en el botón de configuración para cambiar al modo de edición.
3. Agregue texto.
4. Seleccione el texto que desea formatear. Entre las opciones de formato están: estilo (agregue encabezados, fragmentos de código y citas), negrita, cursiva y vínculos.
5. Para cambiar el tamaño del texto, haga clic en el botón Estilo y elija un tamaño de encabezado.
6. Para ajustar la alineación del texto, haga clic en las opciones de párrafo y elija una alineación. También puede aplicar sangría o anularla en una línea de texto eligiendo la opción de párrafo y seleccionando una de las opciones.

   Sugerencia:

   Si comete un error, pulse Comando+Z o Ctrl + Z en el teclado para revertir los cambios.

7. Haga clic en Guardar.

Cambiar color de texto

Cambie el color del texto siguiendo estos pasos.

1. Pase el cursor por la tarjeta de fila en la que anida su tarjeta de texto y haga clic en el botón de configuración de la tarjeta de fila.
2. Cambie el color introduciendo un código de color hexadecimal o eligiendo un color del selector de color.

   Sugerencia:

   Los códigos hexadecimales son útiles para garantizar una imagen de marca coherente en todos los recursos de su organización. Si no está seguro de los detalles relacionados con la imagen de marca de su organización, consulte si proporciona alguna documentación o directrices de marca.

3. Haga clic en Guardar.

Cambiar fuentes

Puede cambiar la fuente de los encabezados de texto y del texto base con Google Fonts. El texto base engloba todo el texto del diseño de su sitio. Esta fuente también se aplica a cualquier página que se haya agregado a su sitio, a las páginas de detalles de elementos a las que se acceda mediante búsquedas en el sitio y a las vistas de eventos.

Para obtener más información, consulte Formatear texto en sus sitios de ArcGIS Hub y ArcGIS Enterprise.

Agregue una lista con viñetas o números

Cree una lista siguiendo estos pasos.

1. Agregue texto o seleccione texto existente.
2. Elija una lista sin ordenar para crear una lista con viñetas.
3. Elija una lista ordenada para agregar una lista con números.
4. Haga clic en Guardar.

Agregar una imagen independiente

Agregue imágenes cargándolas desde un archivo o proporcionando una dirección URL a una imagen alojada. Las imágenes que se comparten internamente solo serán visibles para los usuarios que hayan iniciado sesión y pertenezcan al equipo central o a la organización.

1. Arrastre una tarjeta de Imagen a una fila existente.
2. Desplácese sobre la tarjeta y haga clic en el botón de configuración para cambiar al modo de edición.
3. Elija un origen de imagen. Puede cargar un archivo de imagen o proporcionar una URL de imagen. Ambas opciones admiten JPG, JPEG y PNG.
   • Para cargar un archivo de imagen, seleccione Cargar imagen y arrastre el archivo al cuadro del Editor del sitio, o haga clic en Buscar imágenes para localizar y agregar su archivo. El tamaño de archivo máximo es de 3 MB.
   • También puede proporcionar una URL de imagen seleccionando URL de imagen y pegando el vínculo de una imagen compatible en el campo URL.
4. Si se usa un archivo de imagen, puede personalizar imágenes cargadas haciendo clic en el botón de recorte y arrastrando un manipulador para cambiar el tamaño del marco de recorte. El marco de recorte se puede recolocar haciendo clic y arrastrando por la línea de puntos. También puede hacer zoom ajustando el control deslizante en la parte inferior de la imagen y recolocando la imagen aún más haciendo clic dentro del marco de recorte.
5. En el menú Opciones, proporcione un texto alternativo de imagen para ayudar a los usuarios invidentes y mejorar la accesibilidad de su sitio.
6. Proporcione un hipervínculo de imagen y seleccione que el vínculo se abra en la misma pestaña o en otra nueva.

   Nota:

   Las pautas de accesibilidad (en Entrada 3.2.2 y técnica G201) recomiendan no abrir vínculos en nuevas pestañas o ventanas a menos que se proporcione una advertencia avanzada.

7. Proporcione texto para el Título de la imagen y seleccione la alineación del texto.
8. Si lo desea, haga clic en Escalar imagen para rellenar para establecer un punto focal para la imagen. El punto focal garantiza que la imagen siga enfocada donde lo desee cuando el tamaño cambie en función de distintas pantallas.
9. Haga clic en Guardar.

Agregar imágenes y color de fondo

Puede agregar imágenes detrás de otras tarjetas con las tarjetas de fila y de banner. Agregar color a estas imágenes puede hacer que el texto sea más fácil de ver.

Sugerencia:

Si va a mostrar texto o contenido sobre una imagen, elija un color de fondo claro u oscuro. Por ejemplo, si usa texto de color claro o muestra un mapa de color claro, elija un color de fondo oscuro, como el negro, para asegurarse de que su texto siga siendo claro. A continuación, ajuste la transparencia del color para que su imagen permanezca visible.

1. Arrastre una tarjeta de Banner o de Fila sobre su sitio.
2. Desplácese sobre la tarjeta y haga clic en el botón de configuración para cambiar al modo de edición.
3. En Imagen de fondo, elija el origen de la imagen. Puede cargar un archivo de imagen o proporcionar una URL de imagen. Ambas opciones admiten JPG, JPEG y PNG.
   • Para cargar un archivo de imagen, seleccione Cargar imagen y arrastre el archivo al cuadro del Editor del sitio, o haga clic en Buscar imágenes para localizar y agregar su archivo. El tamaño de archivo máximo es de 3 MB.
   • También puede proporcionar una URL de imagen seleccionando URL de imagen y pegando el vínculo de una imagen compatible en el campo URL.
4. Después de agregar una imagen, seleccione un color para Color de fondo bajo Configuración de fila introduciendo un código hexadecimal o usando el selector de color.

   Nota:

   Solo las tarjetas de fila admiten colores de fondo.

5. En Apariencia, ajuste la transparencia de la imagen utilizando el control deslizante o introduciendo un valor en el campo de porcentaje. Al ajustar la transparencia de la imagen, el color de fondo se ilumina o atenúa en función del ajuste. Esta es una técnica útil para garantizar que su imagen y texto permanezcan accesibles para los usuarios con visión normal.
6. Haga clic en Guardar.

Elegir un diseño de imagen en una tarjeta de fila

Cada tarjeta de fila tiene dos opciones de diseño que permiten elegir cómo se mostrará su imagen.

1. Después de agregar una imagen a una tarjeta de fila, puede elegir tener un diseño ancho o fijo para la imagen y cualquier contenido que se muestre en la tarjeta.
   • Elija Ancho si desea que su imagen abarque el ancho de su sitio.
   • Elija Fijo si desea que su imagen permanezca fija.
2. Configure Punto focal de imagen para garantizar que la imagen siga enfocada donde lo desee cuando su tamaño cambie en función de distintas pantallas.
3. Haga clic en Guardar.

Configurar texto con HTML

Si desea utilizar HTML para personalizar su texto, puede utilizar los siguientes elementos HTML:

1. Arrastre una tarjeta de Texto sobre una fila existente.
2. Desplácese sobre la tarjeta y haga clic en el botón de configuración para cambiar al modo de edición.
3. Haga clic en la opción Vista de código.
4. Introduzca su código.
5. Haga clic en Guardar.

Precaución:

Por motivos de seguridad, las tarjetas de texto no admiten JavaScript integrado. Se ignoran las etiquetas de script.

Se permiten los siguientes elementos HTML:

'a', 'abbr', 'acronym', 'address', 'article', 'audio', 'b',
	'bdi', 'bdo', 'big', 'blockquote', 'br', 'caption', 'center', 'cite',
 'code', 'col',
 'colgroup', 'datalist', 'dd', 'del', 'details', 'dfn', 'div', 'dl', 'dt',
	'em', 'embed', 'fieldset', 'figcaption', 'figure', 'font',
	'footer', 'frameset',
	'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'head', 'header', 'hgroup', 'hr',
 'i', 'img', 'input', 'ins', 'kbd', 'keygen', 'li', 'link', 'main', 'map',
	'mark', 'menu', 'meter', 'nav', 'ol', 'optgroup', option', 'output', 'p',
	'param', 'pre', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp',
	'section', 'small', 'source', 'span', 'strike', 'strong', 'style'
 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'tfoot', 'textarea',
	'th', 'thead', 'time', 'title', 'tr', 'track, 'tt', 'u','ul',

Se permiten los siguientes atributos para dichos elementos:

All supported HTML elements allow : ['class', 'style'], 'a' : ['href', 'title', 'data-toggle', 'data-target', 'data-toggle', 'name', 'rel', 'style', 'target'],	'audio' : ['autoplay', 'controls', 'loop', 'muted', 'preload'], 'blockquote': ['cite'],	'button' : ['name', 'value', 'data-toggle', 'data-target',	'data-dismiss'], 'col' : ['span', 'width'], 'colgroup' : ['span', 'width'],	'div' : ['style', 'align', 'data-show', 'data-target', 'data-toggle']	'font': ['size', 'color', 'style'], 'img' : ['align', 'alt', 'border', 'height', 'style', 'src', 'title',	'width'], 'ol' : ['align', 'start', 'type'],	'p' : ['style'}, 'q' : ['cite'],	'source' : ['media', 'src', 'type'], 	'span' : [style],
 'table' : ['border', 'cellspacing', 'cellpadding', 'class', 'height',	'style', 'summary', 'width'], 'td' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',	'rowspan', 'style', 'valign', 'width'], 'th' : ['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap',	'rowspan', 'style', 'valign', 'width'] 'tr' : [alignt, 'height', style', valign'],
 'ul' : ['type']