Implementar una imagen de marca en su sitio con el logotipo y los colores de su organización establece su contenido como fiable y autorizado. También ayuda a que su sitio se combine con otro contenido web de su organización. En este tema se describe cómo los administradores y los miembros del equipo central pueden realizar lo siguiente:
- Elegir el encabezado y título de un sitio.
- Agregar un logotipo al encabezado de un sitio.
- Cambiar los colores del encabezado, los botones, el texto y el fondo del 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.
Seleccionar un estilo de encabezado
El encabezado de su sitio es donde puede implementar la marca en su sitio agregando un logotipo, generando navegación a otros recursos con vínculos de menú y vinculando con cuentas de redes sociales.
- Haga clic en Encabezado en el panel Personalizar.
- Haga clic en el menú Apariencia para elegir un estilo para el encabezado. Estas son las tres opciones disponibles:
- Estándar: valor predeterminado para cada sitio nuevo, este diseño presenta una barra delgada y compacta que tiene espacio para un logotipo (60 píxeles), redes sociales y vínculos de menú.
- Prominente: este diseño proporciona más espacio para logotipos más grandes (120 píxeles) y vínculos de menú adicionales.
- CSS/HTML personalizado: usa un editor de código habilitado para sintaxis para configurar el encabezado con código personalizado. Para obtener más información, consulte Personalizar encabezados y pies de página.
Nota:
Para agregar un logotipo, siga los pasos que se proporcionan en la siguiente sección.
- Haga clic en el menú Imagen de marca. Todos los campos proporcionados en el menú son opcionales.
- Nombre: introduzca el nombre que aparecerá en el encabezado de su sitio El nombre que introduzca en este campo solo es visible en el encabezado y no se reflejará en la URL de su sitio ni en su lista de sitios.
- Nombre corto: introduzca una versión abreviada de los nombres que haya agregado al encabezado. Este nombre solo aparecerá si el nombre original del encabezado es demasiado largo para verse en pantallas pequeñas (por ejemplo, en un teléfono móvil).
Sugerencia:
La gente usa cada vez más dispositivos móviles para acceder a Internet. Se recomienda encarecidamente agregar un nombre corto para garantizar la calidad del sitio en cualquier dispositivo.
- Elija una opción para Diseño: Cuadro o Ancho.
- Si desea identificar con su marca el encabezado del sitio con HTML o CSS personalizado, seleccione Utilizar HTML/CSS personalizado.
Nota:
El HTML del encabezado no admite JavaScript integrado. Se ignoran las etiquetas de script.
- Modifique el cuadro de CSS del panel lateral y haga clic en Aplicar cambios para ver su código en acción.
- Haga clic en Save (Guardar).
Agregar un logotipo a un encabezado
El tamaño y la posición del logotipo de su sitio dependen del estilo de encabezado elegido.
- Haga clic en Encabezado en el panel Personalizar.
- Haga clic para expandir el menú Imagen de marca.
- Haga clic en el botón de alternancia Logotipo para activarlo.
- Agregue una imagen eligiendo URL de imagen o cargando una imagen desde un archivo.
Sugerencia:
Si carga una imagen desde un archivo, recuerde que las imágenes guardadas como archivo PNG funcionan mejor. Puede recortar y ampliar la imagen en la sección Configuración de imagen de la tarjeta en el panel Personalizar. - Si utiliza el encabezado Prominente, puede elegir una configuración para Alineación de imagen.
- En Texto alternativo de logotipo, introduzca texto para cumplir con los estándares de accesibilidad.
Sugerencia:
Si un logotipo tiene texto, el texto alternativo puede ser el nombre de la empresa. Si el logotipo es un diseño de logomark, puede considerarlo decorativo y escribir “” para el texto alternativo. - Haga clic en Save (Guardar).
Crear un tema
Cree un tema para su sitio eligiendo los colores del encabezado, el texto y los botones del sitio.
Sugerencia:
Al elegir un color, revise las directrices de la marca de su organización. Muchas directrices de marca proporcionan códigos de color exactos para contenido como sitios web y logotipos. Si no dispone de pautas sobre imagen de marca, consulte con su equipo o con las partes interesadas para asegurarse de que el tema de su sitio refleje adecuadamente su organización.
- Para seleccionar un color para alguna de las siguientes opciones, introduzca un código de color o seleccione un color del selector junto al campo de código de colores.
- Color de fondo de navegación global aplica color a la barra de navegación global de su sitio.
- Color de texto de navegación global aplica color al texto de la barra de navegación global.
Nota:
Para obtener más información sobre la navegación global, consulte ¿Qué es la navegación global?
- Color de fondo del encabezado aplica color al encabezado de su sitio.
- Color de texto del encabezado aplica color a todo el texto del encabezado.
- Color de fondo del cuerpo aplica color a las filas del sitio. El color de la fila y el del texto también se pueden configurar para cada fila siguiendo los pasos proporcionados en Agregar su primera tarjeta con la tarjeta de fila.
- Color de texto del cuerpo aplica color al texto de todo el sitio.
- Color de vínculo del cuerpo aplica color a todos los vínculos del sitio.
- Color de fondo del botón aplica color a los botones que aparecen en su sitio.
- Color de texto del botón aplica color al texto de los botones que aparecen en su sitio.
- Después de definir los colores, haga clic en Aplicar cambios.
- También es posible aplicar fuentes al texto del encabezado y del cuerpo del sitio.
- Para seleccionar una fuente para el cuerpo del sitio, haga clic en el botón de configuración Fuente base.
- Para cambiar la fuente del encabezado del sitio, haga clic en el botón de configuración Fuente del encabezado .
Nota:
Para comenzar de nuevo o restituir los colores predeterminados, seleccione Restablecer a valores predeterminados en la parte inferior del menú Tema.
Crear un pie de página
De forma predeterminada, el Editor del sitio no tiene pie de página. Debe crear un pie de página personalizado para tener un pie de página persistente en todas las páginas del sitio.
- En la sección Pie de página, seleccione
Personalizado.
Aparece un pie de página predeterminado en la página y un cuadro de CSS en el panel lateral.
- Haga clic en el botón de configuración de la parte inferior derecha del pie de página para editar el HTML.
- Haga clic de nuevo en el botón de configuración para ver sus cambios.
- Modifique el cuadro de CSS del panel lateral y haga clic en Aplicar cambios para ver los efectos en su HTML.
Sugerencia:
El HTML del pie de página no admite JavaScript integrado. Se ignoran las etiquetas de script.
Siguientes pasos
Para configurar su sitio con más imagen de marca, puede hacer lo siguiente:
- Agregar vínculos de menú y asegurarse de que la navegación global está habilitada. Para obtener más información, consulte Configurar vínculos de menú y navegación global.
- Cada sitio incluye una URL (dirección web). Si su organización tiene un dominio personalizado, puede configurar esta dirección URL para ofrecer aún más imagen de marca en su sitio. Para obtener más información, consulte Configurar una URL personalizada.