Los miembros del equipo central 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. 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 seleccione 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.
- Abra un sitio o página en modo de edición.
- Agregue una tarjeta Texto a una fila.
- Agregue texto.
- Seleccione el texto que desea formatear. Entre las opciones de formato están el estilo (Normal, Código, Encabezados, etc.), negrita, cursiva y vínculos.
- Para cambiar el tamaño del texto, seleccione el botón Estilo y elija un tamaño de encabezado.
- Para ajustar la alineación del texto, seleccione las opciones de párrafo y elija una. También puede mover una línea de texto eligiendo la opción de párrafo y seleccionando Anular sangría o Sangría.
Sugerencia:
Si comete un error, pulse Comando+Z o Ctrl + Z en el teclado para revertir los cambios. - 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 Enterprise Sites para obtener más 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.
- Abra un sitio o página en modo de edición.
- 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.
- Para definir un color para una fila concreta, seleccione el
lápiz de edición de la fila. - 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. - 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 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 ArcGIS Hub y ArcGIS Enterprise Sites.
Agregue una lista con viñetas o números
Cree una lista siguiendo estos pasos.
- Abra un sitio o página en modo de edición.
- Agregue una tarjeta Texto a un diseño de sitio o página.
- Agregue texto o seleccione texto existente.
- Seleccione Lista desordenada para crear una lista con viñetas o Lista ordenada para crear una lista numerada.
- Seleccione Guardar.
Crear un menú de panel lateral expandible
Agregue un menú contraíble, una opción útil a la hora de agregar preguntas frecuentes.
- Abra un sitio o página en modo de edición.
- Agregue una tarjeta de Texto al diseño.
- Seleccione el botón Insertar y elija Panel lateral expandible.
- Agregue texto y formatéelo.
- Seleccione Guardar.
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.
|
|
|
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 las pueden ver los usuarios que hayan iniciado sesión y pertenezcan al equipo central o a la organización.
- Abra un sitio o página en modo de edición.
- Agregue una tarjeta de Imagen a una fila existente.
- Elija una imagen en Editor de diseño. Puede proporcionar una URL a una imagen o cargar un archivo de imagen. Ambas opciones admiten JPG, JPEG y PNG.
- 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 y arrastre el archivo al cuadro, o seleccione Buscar imagen para localizar su archivo y agregarlo. El tamaño de archivo máximo es de 3 MB.
- 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 bajo la imagen para reposicionar la imagen aún más seleccionando dentro del marco de recorte.
- En el menú Opciones, proporcione un texto alternativo de imagen para ayudar a los usuarios invidentes y mejorar la accesibilidad de su sitio.
- Proporcione un hipervínculo de imagen y establezca 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. - Proporcione texto para Título de la imagen y seleccione la alineación del texto.
- 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.
- 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.
- Abra un sitio o página en modo de edición.
- Agregue una tarjeta de Texto al diseño.
- Seleccione el botón Insertar y elija Botón.
- Edite el texto del botón para incluir su llamada a la acción.
- Seleccione el botón que acaba de agregar y el botón del vínculo.
- En el cuadro de texto Texto que se va a visualizar, agregue texto si todavía no lo ha hecho.
- En el cuadro de texto URL, pegue el vínculo al que desea que lleguen los usuarios al seleccionar el botón.
- Seleccione Insertar vínculo para confirmar sus cambios.
- Seleccione Guardar.
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 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 permanezca visible.
- Abra un sitio o página en modo de edición.
- Agregue una tarjeta Fila al diseño y formatee en Apariencia.
- En Imagen de fondo, elija el origen de la imagen. Puede proporcionar una URL a una imagen o cargar un archivo de imagen. Ambas opciones admiten JPG, JPEG y PNG.
- 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 y arrastre el archivo al cuadro, o seleccione Buscar imagen para localizar su archivo y agregarlo. El tamaño de archivo máximo es de 3 MB.
- Después de agregar una imagen, seleccione Color de fondo introduciendo un código hexadecimal o utilizando el selector de color.
Nota:
Solo las tarjetas de fila admiten colores de fondo.
- Para ajustar Transparencia de imagen, utilice el control deslizante o introduzca un valor en el campo de porcentaje. Esta acción aclara o atenúa el color de fondo en función de su ajuste. Puede ayudar a garantizar que su imagen y texto permanezcan accesibles para los usuarios invidentes.
- Seleccione 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.
- 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.
- Establezca Punto focal de imagen para garantizar que la imagen permanezca enfocada donde sea necesario a medida que se redimensiona para diferentes pantallas.
- Seleccione Guardar.
Configurar texto con HTML
Si desea utilizar HTML para personalizar su texto, puede utilizar los siguientes elementos HTML:
- Abra un sitio o página en modo de edición.
- Agregue una tarjeta de Texto al diseño y, a continuación, seleccione </> Editar en HTML.
- Introduzca su código y seleccione Guardar.
Precaución:
Por motivos de seguridad, las tarjetas 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']