Agregar texto e imágenes

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

• Tarjeta Fila: se trata de los pilares de su sitio. Cada tarjeta debe estar anidada dentro de una tarjeta de fila. Puede agregar imágenes y colores de fondo a las tarjetas Fila.
• Tarjeta de texto: agregue texto en cualquier lugar del sitio arrastrando 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 Hub y seleccione Sitios en la página Descripción general para ver una lista de sus sitios. Si su organización tiene licencia para ArcGIS Hub Premium, puede encontrar sus sitios enumerados en Iniciativas.

Sugerencia:

También puede editar un sitio al verlo en un navegador. Inicie sesión en ArcGIS Hub 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 e introduzca texto.
3. Seleccione cualquier texto que desee formatear. Entre las opciones están el estilo (Normal, Código, Encabezados, etc.), negrita, cursiva y vínculos.
4. Para ajustar el tamaño del texto, seleccione el botón Estilo y elija un tamaño de encabezado.
5. Para ajustar la alineación del texto, seleccione las opciones de párrafo y elija una. Para mover una línea de texto, elija la opción de párrafo y seleccione Anular sangría o Sangría.

   Sugerencia:

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

6. Seleccione Guardar.

Nota:

El tamaño de fuente del texto con fuente base ha aumentado en todos los sitios y páginas en 2021/2022 para que puedan leerse mejor y hacer el contenido web accesible a personas con diferentes capacidades.Lea la publicación FAQ: Upcoming changes to base font size and rem units in ArcGIS Hub sites para obtener detalles.

Cambiar color de texto

Para aplicar el mismo color a todo el texto de su sitio, cambie el color del texto utilizando la configuración Tema de su sitio. También puede ajustar el color del texto 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, seleccione el lápiz de edición de la fila.
4. Cambie el color introduciendo un código de color hexadecimal o eligiendo un 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. Seleccione 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.

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 una fila.
3. Agregue texto o seleccione texto existente.
4. Seleccione Lista desordenada para crear una lista con viñetas o Lista ordenada para crear una lista numerada.
5. Seleccione Guardar.

Agregar una imagen independiente

Puede agregar imágenes independientes a cualquier tarjeta de fila. Las imágenes que se comparten internamente solo las pueden ver 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 Imagen a una fila.
3. En Imagen, elija el origen de la imagen. Ambas opciones admiten JPG, JPEG, PNG, etc.
   • Para proporcionar una URL, elija URL de imagen y pegue un vínculo de imagen compatible en el campo URL.
   • Para cargar un archivo, elija Cargar imagen. Arrastre el archivo a la casilla o seleccione Buscar imagen para agregar su imagen (el tamaño máximo de archivo es de 3 MB).
4. Para personalizar una imagen cargada, seleccione el botón Recortar imagen y arrastre un manipulador para cambiar el tamaño del marco de recorte. Para reposicionar el marco de recorte, seleccione y arrastre por la línea de puntos. Para ajustar el zoom, use el control deslizante situado debajo la imagen.
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. Si procede, proporcione un hipervínculo de imagen y configure el vínculo para que se abra en la misma pestaña o en una 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 Título de la imagen y seleccione la alineación del texto.
8. Si lo desea, seleccione Escalar imagen para rellenar para establecer un punto focal para la imagen. El punto focal garantizará que la imagen permanezca enfocada donde sea necesario a medida que se redimensiona para diferentes pantallas.
9. Seleccione Guardar.

Agregar imágenes y color de fondo

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

Sugerencia:

Para mostrar texto o contenido sobre una imagen, elija un color de fondo que contraste. Por ejemplo, si va a usar texto de color claro o mostrar 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 la imagen siga siendo visible.

1. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta Fila al diseño y formatee en Apariencia.
3. En Imagen de fondo, elija el origen de la imagen. Ambas opciones admiten JPG, JPEG, PNG, etc.
   • Para proporcionar una URL, elija URL de imagen y pegue un vínculo de imagen compatible en el campo URL.
   • Para cargar un archivo, elija Cargar imagen. Arrastre el archivo a la casilla o seleccione Buscar imagen para agregar su imagen (el tamaño máximo de archivo es de 3 MB).
4. Seleccione un Color de fondo introduciendo un código hexadecimal o eligiendo un color.

   Nota:

   Solo las tarjetas de fila admiten colores de fondo.

5. Para ajustar Transparencia de imagen, utilice el control deslizante o introduzca un valor en el campo de porcentaje. Con ello se aclara o atenúa el color de fondo y puede ayudar a garantizar que la imagen y el texto sigan siendo accesibles para los usuarios invidentes.
6. Seleccione Guardar.

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

Cada tarjeta de fila tiene dos opciones de diseño para determinar cómo se mostrará su imagen.

1. Después de agregar una imagen a una tarjeta de fila, puede elegir un diseño ancho o fijo para la imagen y cualquier contenido que se muestre en la tarjeta.
   • Elija Cuadro si desea que la imagen permanezca fija.
   • Elija Ancho si desea que la imagen abarque el ancho de su sitio.
2. Establezca Punto focal de imagen para garantizar que la imagen permanezca enfocada donde sea necesario a medida que se redimensiona para diferentes pantallas.
3. Seleccione 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. Seleccione el botón Insertar y elija Botón.
4. Seleccione </> Editar en HTML.
5. En la etiqueta 'href', introduzca la URL en lugar de '#' y el texto del vínculo en lugar de 'Botón' (orientación del componente de Calcite).
6. Seleccione Aplicar y Guardar.
Para obtener información sobre los colores de los botones, consulte Crear un tema.

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. Seleccione el botón Insertar y elija Panel lateral expandible.
4. Seleccione </> Editar en HTML para agregar y dar formato al texto (orientación del componente Calcite).
5. Seleccione Aplicar y Guardar.

Ver los componentes admitidos de Calcite

La tarjeta Texto admite los siguientes componentes del sistema de diseño de Calcite. Consulte un catálogo de todos los componentes de Calcite que incluye descripciones, usos óptimos, ejemplos y más.

'calcite-action' 'calcite-accordion' 'calcite-accordion-item' 'calcite-avatar' 'calcite-block' 'calcite-button' 'calcite-card' 'calcite-chip' 'calcite-dropdown-group'

'calcite-dropdown-item' 'calcite-fab' 'calcite-flow' 'calcite-icon' 'calcite-link' 'calcite-modal' 'calcite-panel' 'calcite-rating' 'calcite-split-button'

'calcite-stepper' 'calcite-stepper-item' 'calcite-tab' 'calcite-tab-nav' 'calcite-tab-title' 'calcite-tabs' 'calcite-tile' calcite-tip' 'calcite-tooltip'

Configurar texto con HTML

Personalice su texto con HTML utilizando los elementos y atributos que se indican a continuación.

1. Abra un sitio o página en modo de edición.
2. Agregue una tarjeta de Texto al diseño.
3. Seleccione </> Editar en HTML para agregar y dar formato al texto (orientación del componente Calcite).
4. Seleccione Aplicar y Guardar.

Precaución:

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

Elementos HTML permitidos

'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' 'image' 'input' 'ins' 'kbd' 'keygen' 'li'

'link' 'main' 'map' 'mark' 'menu' 'meter' 'nav' 'ol' 'optgroup' 'option' 'output' 'br' '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 esos elementos. Todos los elementos HTML admitidos permiten: ['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']