Inicio
/
Ecommerce
/
Cómo personalizar el encabezado de mi sitio

Cómo personalizar el encabezado de mi sitio

El encabezado es la barra de navegación de tu sitio. Es una parte importante que te permite destacar las páginas o secciones más importantes de tu sitio web para que los visitantes pueden acceder fácilmente.

En esta breve guía, verás cómo personalizarla tanto en Website Builder como en SiteGround Ecommerce.

Cómo personalizar el encabezado en Website Builder

Cómo personalizar el contenido del encabezado

  1. Ve a Site Admin > Website Builder y presiona el botón Personalizar.
    Botón Personalizar en Site Admin de Website Builder
  2. Abre la pestaña Páginas.
  3. Navega a Plantillas del sitio y haz clic en Encabezado.
    Configuraciones del encabezado para Website Builder
  4. Personaliza varios aspectos del área del encabezado, como diseño, tipo de menú, alineación del menú, logo y favicon.
    Opciones de personalización del encabezado en Website Builder

Cómo personalizar los colores del encabezado

  1. Dentro Site Admin, ve a Website Builder.
  2. Haz clic en Personalizar.
  3. Abre la pestaña Páginas y selecciona Encabezado.
  4. Elige uno de los colores de paleta predefinidos del menú Color del encabezado.
    Configuraciones de color del encabezado en Website Builder

¡NOTA! El color del texto también cambiará automáticamente para asegurar un buen contraste y cumplir con los estándares de accesibilidad. Puedes cambiar la paleta de colores predeterminada desde la sección Estilo > Colores.

Cómo personalizar el menú de navegación del encabezado

  1. Inicie sesión en su Site Admin.
  2. Abre la sección Website Builder.
  3. Haz clic en el botón Personalizar.
  4. Abre la pestaña Menús.
  5. Para agregar un nuevo elemento de menú, haz clic en la pestaña Nuevo artículo.
    Configuraciones de color del encabezado en Website Builder
  6. Para agregar el elemento al encabezado, selecciona Menú principal en el menú desplegable Ubicación.
    Seleccionar el encabezado para la ubicación de un elemento de menú
  7. Selecciona el tipo de elemento del menú Tipo de enlace. Puedes elegir entre Página, Etiqueta y Enlace externo. Si el tipo es Página, selecciona una de las páginas de tu sitio web desde el menú desplegable a continuación.
  8. Asigna el nombre del elemento que aparecerá en el menú del encabezado.
  9. Confirma el elemento con el botón Agregar artículo.
    Botón Agregar artículo para confirmar un nuevo elemento de menú de encabezado en Website Builder
  10. También puedes eliminar elementos de la lista de elementos del menú en Menú principal. Para eliminar un elemento del menú, pasa el cursor sobre él y presiona el icono de papelera (Eliminar). En la ventana emergente siguiente, presiona Confirmar.
    Eliminando un elemento del menú de encabezado en Website Builder

  11. También puedes reorganizar el orden de los elementos. Simplemente, arrastra el elemento elegido y suéltalo en la posición deseada.
    Reorganizando elementos del menú de encabezado en Website Builder

Cómo personalizar el encabezado en SiteGround Ecommerce

Cómo personalizar el contenido del encabezado

  1. Inicia sesión en el Site Admin de tu Ecommerce de SiteGround, y presiona Personalizar.
  2. Abre la pestaña Páginas, navega a Plantillas del sitio y haz clic en Encabezado.
    Pestaña de Páginas del constructor de SiteGround Ecommerce con la sección de Encabezado destacada

  3. Aquí, puedes elegir el tipo de menú, alineación del menú, diseño, logo y favicon.
    Menú de configuraciones del encabezado en SiteGround Ecommerce

Cómo personalizar los colores del encabezado

  1. Dentro del constructor de tu tienda, abre la pestaña Páginas y selecciona Encabezado en la sección Plantillas del sitio.

    Pestaña de Páginas del constructor de SiteGround Ecommerce con la sección de Encabezado destacada donde puedes cambiar el color del encabezado


  2. Desplázate a la sección Color del encabezado, donde puedes seleccionar uno de los colores predefinidos para el encabezado.
    Menú de color del encabezado con diferentes paletas de colores

¡NOTA! Puedes elegir entre combinaciones de colores predefinidas para colores de fondo y texto que están optimizadas para una mejor legibilidad. La paleta de colores elegida predefine las combinaciones de colores disponibles. Para seleccionar otras combinaciones, cambia la paleta de colores desde la configuración de Estilo > Colores.

Cómo personalizar el menú de navegación del encabezado

  1. Dentro del constructor, navega a la pestaña Menús.
  2. Para agregar un nuevo elemento, haz clic en el botón Nuevo artículo.
    Botón Nuevo Elemento en el menú de Navegación de SiteGround Ecommerce
  3. Para asegurarte de que el elemento se agregue al encabezado, selecciona Menú principal del menú desplegable Agregar a.
    Ubicación de Navegación Principal seleccionada para añadir un elemento al encabezado
  4. Selecciona el tipo de elemento que estás agregando desde el menú desplegable Tipo de enlace. Puedes elegir entre Página, Enlace externo, Producto único, Categoría, Marca y Etiqueta.
    Menú de tipo de enlace para seleccionar el tipo del nuevo elemento de menú


  5. Si has seleccionado Página, Producto, Categoría o Marca, puedes elegir uno de los elementos existentes en el tipo de enlace respectivo.
  6. En Nombre del elemento del menú, escribe el nombre que aparecerá en el encabezado.
  7. Finalmente, presiona Agregar artículo.
    Botón Añadir Elemento para confirmar la adición del nuevo elemento de menú del encabezado


  8. Para eliminar un enlace del encabezado, vuelve a la lista de Menú principal, pasa el cursor sobre el elemento elegido y presiona el icono de papelera (Eliminar). Aparecerá una nueva ventana donde debes seleccionar Confirmar.
    Icono de eliminar para borrar un elemento del menú del encabezado


  9. También puede cambiar el orden de los enlaces del encabezado. Para hacerlo, arrastra el elemento elegido y suéltalo en la posición preferida.
    Moviendo un elemento para cambiar su posición en el menú del encabezado

Comparte este artículo