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, 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:
- Abra un sitio en el modo de edición.
- En el panel Personalizar, haga clic en Encabezado.
Sugerencia:
Si el panel Personalizar no está visible, haga clic en el botón de
para abrirlo. - 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 (130 píxeles) y vínculos de menú adicionales.
- HTML/CSS personalizado: use un editor de código habilitado para sintaxis para configurar el encabezado con código personalizado.
Cuando se selecciona HTML/CSS personalizado, aparece un menú con parámetros para HTML y CSS. Haga clic en Abrir editor de código HTML o Abrir editor de código CSS
para escribir el código del encabezado personalizado.Nota:
Los encabezados personalizados persisten en todas las páginas del sitio, pero no se muestran en páginas de vista previa.
El HTML del encabezado no admite JavaScript integrado. Se ignoran las etiquetas de script.
- En Diseño, elija Cuadro o Ancho.
- Proporcione texto en Nombre y Nombre corto.
El nombre que proporcione solo será visible en el encabezado y no aparecerá en la URL del sitio ni en su lista de sitios. 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.
También puede desactivar el parámetro Nombre si no desea que el nombre del sitio aparezca en el encabezado.
Nota:
Un sitio debe tener un nombre o un logotipo en el encabezado. El parámetro Logotipo debe estar activado antes de poder desactivar el parámetro Nombre.
- Haga clic en Guardar diseño.
Agregar un logotipo al encabezado
Puede agregar el logotipo de su organización al encabezado para personalizar la marca de su sitio. El tamaño y la posición del logotipo del sitio dependen del estilo de encabezado que elija (Estándar, Prominente o HTML/CSS personalizado).
Para agregar un logotipo al encabezado, siga estos pasos:
- Abra un sitio en el modo de edición.
- En el panel Personalizar, haga clic en Encabezado.
Sugerencia:
Si el panel Personalizar no está visible, haga clic en el botón de
para abrirlo. - En el menú Apariencia, haga clic en el botón Logotipo para activarlo.
- Elija una de las siguientes acciones:
- Para proporcionar una URL, elija URL de imagen y pegue un vínculo de imagen compatible en el campo URL.
Entre los tipos de archivos admitidos se incluyen .jpeg, .png y .gif.
- Para cargar un archivo, elija Cargar.
El tamaño de archivo máximo es de 3 MB y solo se admiten los tipos de archivo .jpeg, .jpg y .png.
Sugerencia:
Las imágenes guardadas como archivo .png funcionan mejor.
Si selecciona Cargar, realice los pasos siguientes para cargar una imagen:
- Arrastre el archivo a la casilla o haga clic en Buscar imagen para agregar su imagen.
- Haga clic en el botón Recortar imagen para
o cambiar el tamaño de la imagen.Si quiere recortar la imagen, arrastre un manipulador para cambiar el tamaño del marco de recorte. Para cambiar la posición del marco de recorte, haga clic en la línea de puntos y arrástrela. Para ajustar el zoom, use el control deslizante situado debajo la imagen.
- Haga clic en Hecho para aplicar los cambios.
El logotipo se agrega al encabezado y se cambia de tamaño en función del diseño y la alineación del logotipo elegidos.
- Para proporcionar una URL, elija URL de imagen y pegue un vínculo de imagen compatible en el campo URL.
- Si utiliza el estilo de encabezado Prominente, elija una configuración para Alineación de logotipo:
- Logotipo horizontal: el logotipo conserva la altura estándar de 60 píxeles. Se alinea con el Nombre o el Nombre corto del encabezado.
- Logotipo vertical: el logotipo se amplía hasta una altura de 130 píxeles. Se coloca a la izquierda de todo el contenido del encabezado, incluidos el Nombre y los vínculos del menú.
- 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.
- Haga clic en Guardar diseño.
Agregar vínculos de redes sociales al encabezado
Agregue iconos de redes sociales al encabezado que vinculan a sus cuentas de Facebook, X, Instagram o YouTube. Para agregar vínculos de redes sociales al encabezado, siga estos pasos:
Nota:
Si utiliza el estilo de encabezado HTML/CSS personalizado, no podrá configurar vínculos de redes sociales mediante los pasos siguientes.
- Abra un sitio en el modo de edición.
- En el panel Personalizar, haga clic en Encabezado.
Sugerencia:
Si el panel Personalizar no está visible, haga clic en el botón de
para abrirlo. - Expanda Iconos de redes sociales.
- Haga clic en los botones de alternancia para agregar iconos de redes sociales.
Los iconos de redes sociales se mostrarán en el encabezado.
- Proporcione las direcciones URL de sus cuentas de redes sociales para vincularlas a los iconos.
- Haga clic en Guardar diseño.
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:
- Abra un sitio en el modo de edición.
- En el panel Personalizar, haga clic en Tema.
Sugerencia:
Si el panel Personalizar no está visible, haga clic en el botón de
para abrirlo. - 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.
- 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 y los botones de la barra de 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 del sitio.
- Color de fondo del cuerpo: aplique color a las filas del sitio. El color de fondo también se puede configurar para filas individuales.
- Color de texto del cuerpo: aplique color al texto de todo el sitio. El color del texto también se puede configurar para filas individuales.
- Color de vínculo del cuerpo: aplique color a los vínculos del sitio.
Nota:
En el menú de acción del sitio de publicado Hub se utiliza 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.
- Si lo desea, puede aplicar fuentes al texto del encabezado y del cuerpo del sitio haciendo lo siguiente:
- Haga clic en el botón Personalizar de Fuente base o Fuente de encabezado.
La fuente base se utiliza para el texto del cuerpo del sitio y la fuente de encabezado se utiliza para el texto del encabezado del sitio.
Sugerencia:
Si va a cambiar tanto la fuente base como la fuente de encabezado a la misma familia de fuentes, actualice primero la fuente base y, a continuación, active la casilla Usar la misma fuente como base para la fuente de encabezado.
- En URL de @import, pegue la URL de @import del código de incorporación de la fuente.
- Proporcione el nombre de la familia de fuentes.
- Opcionalmente, haga clic en Vista previa de la fuente para ver el texto de vista previa con la familia de fuentes importada.
- Haga clic en la pestaña para actualizar la segunda fuente si es necesario.
- Haga clic en Aplicar.
- Haga clic en el botón Personalizar de Fuente base o Fuente de encabezado.
- Haga clic en Guardar diseño.
Nota:
Para volver a las fuentes predeterminadas, haga clic en Restablecer fuentes en la parte inferior del menú Tema.
Crear un pie de página
Se puede agregar un pie de página del sitio mediante HTML y CSS personalizados. El pie de página aparecerá en la parte inferior del sitio y en todas las páginas y vistas asociadas a él. Para agregar un pie de página a un sitio, siga estos pasos:
- Abra un sitio en el modo de edición.
- En el panel Personalizar, haga clic en Pie de página.
Sugerencia:
Si el panel Personalizar no está visible, haga clic en el botón de
para abrirlo. - Haga clic en la opción Personalizar.
- Haga clic en Abrir editor de código HTML o Abrir editor de código CSS para escribir el código del pie de página personalizado.
- Haga clic en Aplicar para ver los cambios en el pie de página.
Nota:
El HTML del pie de página no admite JavaScript integrado. Se ignoran las etiquetas de script.
- Haga clic en Guardar diseño.