Implementar imagen de marca en un sitio con opciones de encabezado y tema

Puede personalizar un sitio diseñando un encabezado, creando un tema o agregando un pie de página. Un encabezado y un pie de página son importantes para completar el diseño de un sitio. En el encabezado, es posible presentar el sitio agregando la imagen de marca y creando un menú para ayudar a los visitantes a encontrar contenido, páginas y sitios web externos. El pie de página indica el final del sitio y proporciona espacio para detalles útiles, como los derechos de autor, la ubicación y la información de contacto de su organización.

Personalizar el encabezado

Cada sitio tiene un encabezado que aparece en la parte superior (debajo de la barra de navegación global) y en todas las páginas y vistas adjuntas al mismo. El encabezado contiene el título del sitio, el logotipo y los vínculos del menú. No puede eliminar un encabezado, pero puede elegir su diseño.

Para personalizar el encabezado, siga estos pasos:

1. Abra un sitio en el modo de edición.
2. Abra el panel lateral activando el botón de alternancia ; a continuación, seleccione Encabezado (o seleccione Personalizar para volver al menú Personalizar).
3. En el menú Apariencia, seleccione uno de los estilos de Encabezado siguientes:
   • 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: use un editor de código habilitado para sintaxis para configurar el encabezado con código personalizado.

     Nota:

     Los encabezados personalizados persisten en todas las páginas del sitio, pero no se muestran en páginas de vista previa.

4. En Diseño, elija Cuadro o Ancho.
5. En Nombre, introduzca un nombreque aparecerá en el encabezado.

   El nombre que proporcione solo será visible en el encabezado y no aparecerá en la URL del sitio ni en su lista de sitios.

6. En Nombre corto, proporcione una versión abreviada del nombre que agregó al encabezado.

   Agregue un nombre corto para garantizar la calidad del sitio en cualquier dispositivo.

   El nombre corto aparece en el encabezado si el nombre completo es demasiado largo para mostrarse en pantallas más pequeñas, como las de los dispositivos móviles.

7. Para personalizar el encabezado del sitio con HTML o CSS personalizados, elija HTML/CSS personalizado y proporcione el código en los cuadros de texto HTML y CSS.

   El HTML del encabezado no admite JavaScript integrado. Se ignoran las etiquetas de script.

8. Seleccione Guardar.

Crear un tema

Cree un tema para el sitio eligiendo colores para el encabezado y el texto. Los colores que elija en el menú Tema se aplicarán a todo el sitio. Puede anular estas selecciones configurando colores para filas específicas. Para obtener más información, consulte Personalizar un sitio.

Sugerencia:

Al elegir un color, revise las directrices de la marca de su organización. Muchas directrices de imagen de marca proporcionan códigos de color para contenidos tales 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 del sitio refleje adecuadamente su organización.

Para crear un tema, siga estos pasos:

1. Abra un sitio en el modo de edición.
2. En el panel Personalizar, seleccione Tema.
3. Seleccione un color para cualquiera o todas las opciones siguientes proporcionando un código de color hexadecimal o eligiendo un color en el selector de color situado junto al campo de código de color.
   • Color de fondo de navegación global: aplique color a la barra de navegación global del sitio.
   • Color de texto de navegación global: aplique color al texto de la barra de navegación global.

     Nota:

     Para obtener más información sobre la navegación global, consulte Configurar la navegación global.

   • Color de fondo del encabezado: aplique color al encabezado del sitio.
   • Color de texto del encabezado: aplique color a todo el texto del encabezado.
   • Color de fondo del cuerpo: aplique color a las filas del sitio. El color de las filas y el color del texto también se pueden configurar para cada fila siguiendo los pasos descritos en Diseñar el diseño del sitio.
   • Color de texto del cuerpo: aplíquelo al texto de todo el sitio.
   • Color de vínculo del cuerpo: aplique color a los vínculos del sitio.

     Nota:

     Las pestañas verticales, incluido el botón de uso compartido, utilizan el valor Color de vínculo del cuerpo para el relleno del fondo y el valor Color de fondo del cuerpo para los iconos y el texto.

4. Después de establecer los colores, seleccione Guardar.
5. Si lo desea, puede aplicar fuentes al texto del encabezado y del cuerpo del sitio haciendo lo siguiente:
   • Para elegir una fuente para el cuerpo del sitio, seleccione el botón de configuración Fuente base.
   • Para cambiar la fuente del encabezado del sitio, seleccione el botón de configuración Fuente del encabezado.

Nota:

Para volver a las fuentes predeterminadas, elija Restablecer fuentes en la parte inferior del menú Tema.

Agregar un logotipo al encabezado

El tamaño y la posición del logotipo del sitio dependen del estilo de encabezado elegido.

Para agregar un logotipo al encabezado, siga estos pasos:

1. Active el botón de alternancia Logotipo.
2. Seleccione URL de imagen o Cargar para agregar una imagen.

   Sugerencia:

   Si carga una imagen desde un archivo, recuerde que las imágenes guardadas como archivo .png funcionan mejor. Recorte y aplique zoom a la imagen si es necesario.

3. Si utiliza el encabezado Prominente, elija una configuración para Alineación de logotipo.
4. En Texto alternativo de logotipo, introduzca texto que cumpla 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 “” como texto alternativo.

5. Seleccione Guardar.

Agregar vínculos de redes sociales al encabezado

Para agregar iconos de redes sociales al encabezado que vinculan a sus cuentas de Facebook, X, Instagram o YouTube, siga estos pasos:

1. Abra un sitio en el modo de edición.
2. En el panel Personalizar, seleccione Encabezado.
3. Expanda Iconos de redes sociales.
4. Active las plataformas de redes sociales para que se muestren en el encabezado y proporcione una URL a la cuenta de la plataforma.
5. Seleccione Guardar.

Crear un pie de página

Para usar HTML personalizado para agregar un pie de página al sitio que sea persistente en todas las páginas adjuntas al sitio, siga estos pasos:

1. Abra un sitio en el modo de edición.
2. Seleccione Pie de página en el panel lateral.
3. Active el botón de alternancia Personalizado.
4. Modifique el contenido del cuadro CSS y HTML en el panel lateral y seleccione Guardar para ver los efectos.

   Nota:

   El HTML del pie de página no admite JavaScript integrado. Se ignoran las etiquetas de script.

Contenido relacionado

Para configurar un 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 la navegación global y los vínculos de menú.
• 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 el sitio. Para obtener más información, consulte Dominios.