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

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.

Encabezado

Para elegir un diseño para el encabezado, siga estos pasos:

  1. Abra un sitio en el modo de edición.
  2. Abra el panel lateral haciendo clic en el botón de alternancia botón de alternancia. Si es necesario, haga clic en la flecha hacia atrás situada junto a Personalizar en la parte superior del panel para volver al menú raíz hasta que vea la opción para hacer clic en Encabezado.
  3. Haga clic en el menú Apariencia para elegir uno de los siguientes estilos Encabezado:
    • 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 las vistas de contenido. Para obtener más información, consulte ¿Por qué la imagen de marca de la vista Explorar contenido tiene un aspecto diferente?

  4. Haga clic en el menú Imagen de marca para aplicar las siguientes opciones:
    • 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 del título 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.
      Sugerencia:

      La gente usa cada vez más dispositivos móviles para acceder a Internet. Agregue un nombre corto para garantizar la calidad de su sitio en cualquier dispositivo.

  5. Elija una opción para Diseño: Cuadro o Ancho.
  6. 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.

    Nota:

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

  7. Haga clic en 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.

  1. Haga clic para expandir el menú Marca en Encabezado en el panel lateral.
  2. Haga clic en el botón de alternancia Logotipo para activarlo.
  3. 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.

  4. Si utiliza el encabezado Prominente, puede elegir una configuración para Alineación de imagen.
  5. 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.

  6. Haga clic en Guardar.

Agregar iconos de redes sociales

Agregue iconos de redes sociales a un encabezado.

  1. Abra un sitio en el modo de edición.
  2. Haga clic para expandir el menú Marca en Encabezado en el panel lateral.
  3. Haga clic en el menú Iconos sociales.
  4. Haga clic en el botón de alternancia para agregar un icono de redes sociales para Facebook, Twitter, Instagram o YouTube.
  5. Proporcione una URL que lleve a la cuenta de su plataforma.
  6. Haga clic en Guardar.

Crear un tema

Cree un tema para su sitio eligiendo los colores del encabezado, el texto y los botones del sitio. Los colores que elija en el menú Tema del sitio se aplicarán a la totalidad de su 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. Abra el panel lateral haciendo clic en el botón de alternancia botón de alternancia. Si es necesario, haga clic en la flecha hacia atrás situada junto a Personalizar en la parte superior del panel para volver al menú raíz hasta que vea la opción para hacer clic en 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 ¿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 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 y los botones con Estilo de botón cambiado a Con contorno.
      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.

    • Color de fondo del botón aplica color a los botones que aparecen en su sitio utilizando el Estilo de botón establecido en Fondo sólido, así como los iconos ubicados en las pestañas del panel lateral.
    • Color de texto del botón aplica color al texto de los botones que aparecen en su sitio.
  4. Después de definir los colores, haga clic en Aplicar cambios.
  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, 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

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. Expanda el menú Pie de página en el panel lateral.
  3. Haga clic en el botón de alternancia situado junto a Personalizado.
  4. Modifique el cuadro de CSS y HTML del panel lateral y haga clic en Aplicar cambios 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 o iniciativa 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 o sitio de iniciativa 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 Preguntas frecuentes sobre el dominio.