Documentación de Divi - Ajustes de cabecera y navegación del personalizador de Divi

Divi - Documentación en español

Actualizada v3.28

Ajustes de cabecera y navegación del personalizador de Divi

Personalizar la cabecera y navegación del sitio

Para empezar a personalizar la cabecera y navegación de su sitio, primero debe ingresar al Personalizador de tema, con un clic en el enlace Divi > Personalizador de tema del menú de WordPress. Esto abrirá el personalizador. Luego busque el panel Cabecera y navegación. Haga clic en el panel para abrir los ajustes correspondientes y comience a personalizarlos.

Divi - Personalizador - Cabecera

Formato de cabecera

Aquí puede ajustar el formato general de la cabecera, tal como intercambiar entre los modos de diseño principal: Predeterminado, Centrado, Logo centrado en línea, En aparición y Pantalla completa.

Si elige Centrado, el logo se colocará arriba del menú de navegación, y ambos elementos centrados en la cabecera.

Divi - Personalizador - Logo centrado

Si elige Logo centrado en línea, el logo se colocará alineado con los elementos del menú y centrado entre los enlaces.

Divi - Personalizador - Logo centrado en línea

Si elige En aparición, se mostrará el logo a la izquierda y un icono de menú en el extremo derecho de la barra de navegación. Al hacer clic en este icono, los elementos del menú aparecerán desde la derecha sobre una barra vertical con un color de fondo.

Divi - Personalizador - Cabecera en aparición

Divi - Personalizador - Menú en aparición

Si elige Pantalla completa, se mostrará el logo a la izquierda y un icono de menú en el extremo derecho de la barra de navegación. Al hacer clic en este icono se superpondrá un color de fondo semitransparente con la lista de elementos del menú centrados en la pantalla.

Divi - Personalizador - Menú en pantalla completa

Al seleccionar alguno de estos dos últimos formatos, verá una nueva opción en el panel Cabecera y navegación denominado Ajustes de encabezado en pantalla completa y en aparición, desde donde podrá controlar fuentes, tamaños y colores de estos encabezados y los elementos del menú que contienen.

También puede activar la Navegación vertical desde Formato de cabecera, con lo cual la apariencia del sitio cambiará de manera drástica, creando una barra ancha de navegación a la izquierda o a la derecha del contenido.

Divi - Personalizador - Formato de cabecera

Barra de menú primario

En este panel puede ajustar el tamaño, estilo y color del menú de navegación primario. Esta es la barra blanca larga de la parte superior de la página que contiene el logo y los enlaces del menú principal. Dentro de este panel puede hacer fácilmente muchas cosas, tales como ajustar la altura del logo, el color de fondo de la barra del menú y el color de los enlaces.

Divi - Personalizador - Barra de menú primario

  • Ancho completo – Esto extiende el menú al ancho de la ventana del navegador.
  • Ocultar imagen del logo – Si lo desea, puede ocultar completamente el logo de la barra del menú.
  • Altura de menú – Aquí puede cambiar la altura del menú a aquella que prefiera. Pero tenga cuidado de no darle un valor demasiado excesivo.
  • Altura máxima del logo – Aquí puede aumentar o disminuir el porcentaje del ancho del logo para hacerlo más grande o más pequeño.
  • Tamaño de texto, Espacio entre letras, Fuente, Estilo de fuente, Color de texto, Color de enlace activo – Estas opciones le permiten personalizar los enlaces del menú.
  • Color de fondo – Esto le permite cambiar el color de fondo de la barra del menú primario.
  • Ajustes del menú desplegable – El menú desplegable no tiene por qué heredar el estilo del menú principal. Aquí puede crear un diseño único para el desplegable. Puede añadir una animación personalizada al mostrarse el menú.

Barra de menú secundario

La barra de menú secundario es la más pequeña de las dos barras de navegación, que aparece arriba de la barra de navegación principal. Este menú no aparecerá a menos que haya asignado un menú a la ubicación Menú secundario. Una vez activado, aparecerá una barra azul más pequeña. Este panel le permite personalizar esa barra de menú y el texto que contendrá, ajustando el color de fondo, y el color y estilos del texto.

Divi - Personalizador - Barra de menú secundario

Ajustes de navegación fija

La barra de navegación fija refiere a la barra de navegación que se fija en la parte superior de la pantalla al momento de desplazar la página. Notará que al desplazar la página hacia abajo, la barra del menú permanece fija en la parte superior de la pantalla y se achica para proporcionar más espacio de lectura. Todo esto es personalizable desde el panel Ajustes de navegación fija. Puede seleccionar la altura del menú si cree que se achica demasiado, y puede cambiar los colores del menú y de los enlaces, independientemente del estado inicial del menú.

Divi - Personalizador - Ajustes de navegación fija

Elementos de cabecera

Los elementos de cabecera son algunas cosas opcionales que aparecen en la barra de navegación, cada una de las cuales se puede activar o desactivar desde aquí, tal como los iconos de redes sociales, el icono de búsqueda, el número de teléfono y la dirección de correo electrónico.

Divi - Personalizador - Elementos de cabecera

Facebook
WhatsApp
Twitter
LinkedIn
Pocket
Reddit
Enviar por correo
Imprimir

24 comentarios en “Ajustes de cabecera y navegación del personalizador de Divi”

    1. Hola, Manuel.

      Estos ajustes siguen funcionando en Divi 4, siempre y cuando no se asigne al sitio una cabecera global creada con el constructor de tema. Si usás el constructor de tema, todos los ajustes disponibles serán los de los módulos que utilices para diseñarla. Los ajustes del personalizador no tendrán ningún efecto sobre esa cabecera global.

      Saludos.

      1. Eso lo sé, pero es que al eliminar una cabecera hecha con el constructor, las otras opciones han desaparecido.
        ¿Cómo podría hacer volver esos ajustes de nuevo?
        He creado una instalación en local y sí que están, pero temo hacer una cabecera personalizada y que desaparezcan de nuevo, aunque elimine la personalizada.

        Saludos,

        1. Hola, Manuel.

          El panel Cabecera y navegación solo desaparece del Personalizador si hay activa una cabecera global. Al eliminarla, debería volver a aparecer, y conservar los últimos ajustes guardados. Al menos ese es el comportamiento normal.

          Para estar seguro de no perder esos ajustes, podés usar el sistema de portabilidad para exportarlos.

          Saludos.

          1. Buenos días Aye,

            Pues fíjate que en mi instalación esos ajustes no han vuelto a aparecer.
            Otra cosa rara es que al importar un archivo json con uno de los diseños a la instalación en local, las imágenes no han sido importadas a la biblioteca de medios.
            En su lugar, han quedado enlazadas al sitio desde el que se hizo la exportación.
            Esta versión de Divi no anda nada fina, no.

            Saludos,

        2. Hola, yo tambien tengo ese mismo problema, No se como hacer que aparezca en el personalizador de DIVI el panel «Cabecera y Navegacion» puedes ayudarme por favor? Dices que desaparece si existe una cabecera global, puedes por favor indicarme donde borrarla para que ya me aparezca en DIVI?, desde ya muchas gracias!

          1. Hola, Smellhyng.

            En Divi > Constructor de tema están los ajustes, simplemente eliminá el primer elemento de la lista y guardá los cambios.

            Saludos.

  1. Hola,

    ¿Es posible mostrar y ocultar opciones de la cabecera? Necesito ocultar algunas opciones (Registro, Iniciar Sesión) cuando el usuario inicie la sesión. No tendría sentido seguir viendo esas opciones una vez el usuario haya hecho login.
    ¿Divi permite esta personalización?

  2. Buenos días,

    ¿Existe la posibilidad de eliminar el separador que viene por defecto del navegador? (la línea fina que separa el logo y el menú del resto de la página.)
    ¿Desde dónde podemos quitarla?

    Gracias.

  3. existen 4 tipos de cabeceras. pero me gustan la cabecera por defecto en la versión pc y seria genial poner la versión pantalla completa para móviles y tables.

    se prodrá realizar eso con algunos códigos?

    alguien sabe?

  4. Hola, estoy haciendo una tienda online y quisiera aumentar el tamaño del menu hamburguesa pero no veo la manera.
    La web es trufasiberica.es tengo puesto que siempre este el menu hamburguesa y se deslice a la izquierda.

    Un saludo y gracias

      1. Muchísimas gracias por contestar y tomarte interés.
        Si lo he resuelto pero yo no veo el cambio en mi navegador, solo lo veo en navegadores de amigos que entran por.promera.vez, el caso es que le vacío el historial de navegación al navegador (Chrome) pero no me sale con el cambio aplicado.
        ¿Tienes algún consejo para darme?
        Un saludo y gracias.

        1. Hola, Vicente.

          Disculpas por la demora. En Chrome hay que vaciar toda la caché y limpiar las cookies. Si no también está la opción de abrir una ventana de incógnito.

          Saludos.

    1. Hola, Lei.

      Los elementos de la cabecera están centrados por defecto en la vista móvil.

      Para centrarlos en la vista de escritorio (siempre y cuando no tengas un menú asignado en la ubicación Menú secundario) podés usar el siguiente código CSS:

      #et-info {
          float: none;
          text-align: center;
      }
      

      Saludos.

    1. A mí también me ha desaparecido la barra de menú, incluido el logo del sitio web, en las entradas del blog. Sí me sigue apareciendo en las páginas, pero ya no en las entradas.
      ¿Alguien sabe a qué podría deberse?

      Gracias.

Responder a Aye Cancelar respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

 

Scroll al inicio