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 debe estar anidada 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 imagen: agregue imágenes independientes a cualquier tarjeta de fila, en cualquier parte de su sitio.

Para empezar, inicie sesión en ArcGIS Enterprise y haga clic en Sites 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. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta Texto a una fila.
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

Puede cambiar el color del texto utilizando la configuración Tema de su sitio si desea aplicar el mismo color a todo el texto del sitio. También puede ajustar el color del texto por fila utilizando la configuración de fila.

1. Abra un sitio o página en modo de edición.
2. Para definir un color para todo el texto de su sitio o página, abra el panel lateral y expanda el menú Tema. Para obtener más información sobre los temas, consulte Implementar imagen de marca en un sitio con opciones de encabezado y tema.
3. Para definir un color para una fila concreta, haga clic en el lápiz de edición de la fila.
4. 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.

5. 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 y a las páginas de vista previa de contenido a las que se acceda mediante búsquedas en el sitio.

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

Agregue una lista con viñetas o números

Cree una lista siguiendo estos pasos.

1. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta Texto a un diseño de sitio o página.
3. Agregue texto o seleccione texto existente.
4. Haga clic en la lista desordenada para crear una lista con viñetas o haga clic en la lista ordenada para agregar una lista numerada.
5. Haga clic en Guardar.

Crear un menú de panel lateral expandible

Agregue un menú contraíble, una opción útil a la hora de agregar preguntas frecuentes.

1. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta de Texto al diseño.
3. Haga clic en el botón Insertar y elija Panel lateral expandible.
4. Agregue texto y formatéelo.
5. 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. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta de Imagen a una fila existente.
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.

Crear un botón

Un botón con un vínculo a otra ubicación, como una sección o página, es una útil herramienta de navegación. Los botones también pueden incluir llamadas a la acción.

1. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta de Texto al diseño.
3. Haga clic en el botón Insertar y elija Botón.
4. Edite el texto del botón para incluir su llamada a la acción.
5. Haga clic en el botón que acaba de agregar y en el botón del vínculo.
6. En el cuadro de texto Texto que se va a visualizar, agregue texto si todavía no lo ha hecho.
7. En el cuadro de texto URL, pegue el vínculo al que desea que lleguen los usuarios al hacer clic en el botón.
8. Haga clic en Insertar vínculo para confirmar sus cambios.
9. Haga clic en Guardar.
Para obtener información sobre los colores de los botones, consulte Crear un tema.

Agregar imágenes y color de fondo

Puede agregar imágenes detrás de otras tarjetas con la tarjeta Fila.

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. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta Fila al diseño.
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 imagen 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 invidentes.
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. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta de Texto al diseño y, a continuación, haga clic en </> Editar en HTML.
3. Introduzca su código y 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']