Cómo cambiar el orden de los elementos del menú secundario de Divi

Divi menú desplegable tamaño del texto

Por defecto tu página recién añadida se colocará al final de tu menú. Típicamente el menú de su sitio web se mostrará de forma horizontal (aunque algunos de nuestros sitios web están diseñados con menús verticales), sin embargo usted notará que el constructor de menú es siempre vertical.

El menú vertical aquí nos permite organizar fácilmente el orden del menú de su sitio web. Los elementos en la parte superior del menú aparecerán a la izquierda del menú horizontal de su sitio web, los elementos en la parte inferior del menú aparecerán a la derecha.

Los elementos que aparecen con sangría en el constructor de menús simplemente indican que están ‘anidados’ debajo de un elemento de menú. Usando nuestro menú como ejemplo podemos ver que “Servicios” no está sangrado, sin embargo justo debajo tenemos “Estrategia” y “Diseño” que sí lo están. Los elementos anidados se muestran en un menú desplegable cuando un visitante pasa el ratón por encima del elemento de menú de nivel superior.

Una vez que un elemento de menú está anidado, se puede reorganizar todo un lote de elementos de menú moviendo el enlace de nivel superior. Por ejemplo, si arrastráramos nuestro elemento de menú “Servicios”, arrastraría consigo todas las páginas anidadas y las mantendría anidadas.

¿Cómo puedo hacer que el submenú aparezca al hacer clic en lugar de al pasar el ratón por encima?

En las opciones: avada options -> menu -> submenu Solo tienes que especificar hover / click con el botón select. En su diseño puede añadir un elemento de menú en el que se aplican las opciones deseadas.

  Cómo cambiar los nombres de perfiles de usuario por defecto de WordPress

¿Cómo personalizo el submenú de WordPress?

Para personalizar el submenú, vaya a Apariencia > Personalizar > Creador de encabezados > Menú principal > Diseño > Opciones del contenedor del submenú. En las opciones de estilo, puedes ver varias opciones relacionadas con el tamaño del divisor, el desplazamiento superior, la animación del submenú, el borde, el color del submenú y muchas más.

Divi menú css

Así que ahora mismo si alguien pasa el ratón por encima de decir “casa inteligente” en la parte superior, el submenú aparece (casa inteligente soporte técnico, hub inteligente o configuración de altavoces, etc). Pero me gustaría que aparezca al hacer clic en lugar de al pasar el ratón.

Usted puede simplemente añadir una clase para cambiar la opacidad del menú desplegable al hacer clic en uno de los menús. En este ejemplo, añado la clase show al menú desplegable para cambiar la opacidad de 0 a 1 al hacer clic en el menú. Al mismo tiempo, estoy añadiendo una clase al menú en el que se ha hecho clic (es decir, en el que se ha hecho clic) para darle un color de acento que indique que es el menú en el que se ha hecho clic.

Menú desplegable Divi detrás del contenido

Como se puede ver, yo uso el tema Divi WordPress bastante para los proyectos. Es constructor de próxima generación ofrece un montón de funcionalidad fuera de la caja y requiere muy poco css retoques para que se vea bien. Un aspecto del constructor Divi que no me gusta es el sistema de menú móvil. Específicamente cuando se trata de la estructura de sub-menú. Fuera de la caja que funciona bien si usted no tiene ningún subpáginas. Si las tienes… esperemos que no tengas muchas porque tu menú móvil parecerá una versión abreviada de Guerra y Paz. En serio, he construido algunos sitios, generalmente tiendas WooCommerce, que tienen toneladas de subpáginas. El menú móvil puede estirar la longitud de la página infinitamente.

  Instala WordPress sin instalarlo

La solución parece bastante simple con un poco de jQuery aunque Elegant Themes no ha abordado la cuestión todavía en cualquiera de sus actualizaciones. Si estás buscando una solución, ¡te alegrarás de haberte pasado por el sitio! Básicamente, lo que tenemos que hacer es añadir una clase css que oculte inicialmente todos los submenús con la clase .sub-menu y, a continuación, aplicar una nueva clase que muestre el submenú una vez que se haga clic en el enlace de anclaje de nivel superior. Veamos un ejemplo de mi propio sitio, ya que por fin he podido realizar esta actualización en mi propio sitio. En parte porque mi menú de navegación no es tan profundo, pero también porque he estado muy ocupado y no era realmente una prioridad porque, bueno … no me pagan para actualizar mi propio sitio.

Anchura del menú desplegable Divi

Cuando HeroMenu está instalado y activado, no tendrá ningún efecto en el frontend de su sitio web. Sólo verá un cambio en su sitio web una vez que haya terminado de configurar su navegación en HeroMenu. La activación de su menú se puede hacer aquí Configuración ” Integración del menú

Una forma muy intuitiva y visual de dar estilo a tu navegación. Esto le permite dar estilo a cada aspecto de su navegación. Esto incluye la barra de menú, desplegables, mega menús, fuentes, colores, tamaño, iconos y muchos más. Nuestra configuración predeterminada está diseñada de una manera que se vería y funcionaría muy bien con cualquier sitio web. Así que dejando todo como está, debería dejarte con un menú de gran apariencia.

  Tablas sin bordes

La forma recomendada de activar su menú, es seleccionando la ubicación del menú. Navegue a Configuración ” Integración de menú ” Seleccione una ubicación. Para reemplazar el menú estándar de WP que viene con su tema, seleccione “Principal” de la lista desplegable. Esto debería reemplazar el menú principal de su tema WP.

Seleccione las páginas que desea añadir en su menú de los elementos de la izquierda. Haga clic en “Añadir al menú” una vez seleccionadas las páginas. Este bit funciona muy similar al constructor de menús estándar de WordPress, por lo que se sentirá muy cómodo usando esto.