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.

Personalizar el encabezado

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

1. Abra un sitio en el modo de edición.
2. Abra el panel lateral seleccionando el botón de alternancia . Seleccione Encabezado (seleccione Personalizar para regresar al menú Personlizar).
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. 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.
6. Nombre corto: introduzca una versión abreviada del nombre que haya agregado al encabezado. El nombre abreviado solo se aplica al encabezado si es demasiado largo para visualizarlo en una pantalla más pequeña, como un teléfono móvil.

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

7. Si desea identificar con su marca el encabezado del sitio con HTML o CSS personalizado, seleccione HTML/CSS personalizado y escriba el código en los cuadros de 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 su sitio eligiendo los colores del encabezado y el texto del sitio. Los colores que elija en el menú Tema del sitio se aplicarán a la totalidad del sitio. Puede anular estas selecciones configurando colores para filas específicas. Para obtener más información, consulte Colores y fuentes.

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.

1. Abra un sitio en el modo de edición.
2. En el panel Personalizar, seleccione Tema.
3. 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 Más información sobre 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 fila y el color de texto también se pueden configurar para cada fila siguiendo los pasos proporcionados en Color y fuentes.
   • 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.

     Nota:

     Las pestañas verticales, incluido el botón para compartir, utilizan el color de vínculo del cuerpo para el relleno de fondo y el color de fondo del cuerpo para iconos o texto.

4. Después de definir los colores, haga clic en Guardar.
5. También es posible aplicar fuentes al texto del encabezado y del cuerpo del sitio.
   • Para seleccionar 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 comenzar de nuevo o restituir los colores predeterminados, seleccione Restablecer fuentes en la parte inferior del menú Tema.

Agregar un logotipo a un encabezado

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

1. Seleccione el botón de alternancia Logotipo para activarlo.
2. Seleccione URL de imagen o Carga 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, puede elegir una configuración para Alineación de logotipo.
4. 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 “” como texto alternativo.

5. Seleccione Guardar.

Agregar vínculos de redes sociales a un encabezado

Puede agregar iconos de redes sociales al encabezado que vinculen a sus cuentas de Facebook, X, Instagram o YouTube.

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 su plataforma.
5. Seleccione Guardar.

Crear un pie de página

Puede usar HTML personalizado para agregar un pie de página a su sitio que permanezca en cualquier página adjunta a su sitio.

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

   Nota:

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

Contenido relacionado

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 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 su sitio. Para obtener más información, consulte Dominios.