Cómo añadir texto y HTML a la cabecera superior del menú secundario Divi

Personalización del menú Divi

Los menús adhesivos (o navbars) son ahora un elemento básico en el diseño web. Pero cuando no lo eran, había que desplazarse hasta la parte superior para navegar a otra página. Naturalmente, esto resultaba incómodo y engorroso para los usuarios.

Un menú fijo es una barra de navegación estática que permanece visible mientras el visitante se desplaza por la página web. Los menús fijos son siempre accesibles y ayudan al visitante a navegar por el sitio web mucho más rápidamente. Su uso está muy extendido en Internet.

Lo mismo ocurre con un sitio web WordPress. Tanto si gestionas un blog de viajes, una tienda online o un portfolio personal, debes asegurarte de que la navegación de tu sitio web facilita a los usuarios encontrar lo que necesitan y convertirse en suscriptores o clientes. Como una buena navegación mejora la experiencia del usuario, puede mejorar el tiempo de permanencia, un factor SEO fundamental.

Los menús fijos ofrecen una solución sencilla a este molesto (y lento) problema. Con una barra de navegación fija, los visitantes pueden encontrar rápidamente lo que necesitan. Mejora la experiencia del sitio web y atrae al visitante a consumir más contenido, lo que se traduce en una menor tasa de rebote.

Personalización del menú desplegable Divi

Todos deberíamos saber ya lo importante que es tener una llamada a la acción en la página de inicio de tu sitio web. Y hay un montón de artículos que explican por qué. De hecho, hay un montón de debates en cuanto a dónde debe estar, qué color funciona mejor, a dónde debe conducir y así sucesivamente.

  Tutorial Divi: Cómo enviar un formulario a varios destinatarios de correo

5. Asigne una clase al elemento del menú que desea convertir en un botón CTA. En este caso quiero que la gente se ponga en contacto conmigo. Así que voy a cambiar el nombre del botón Contact Me a Get Started y darle una clase llamada “get-started”

Si estás trabajando con un tema hijo puedes ir a Apariencia>Editor y abrir tu hoja de estilos. Si no, ve a Apariencia>Opciones del Tema Divi>ePanel>C CSS Personalizado (que se encuentra en la parte inferior del ePanel)

En algunos casos, si ha añadido un color personalizado al enlace activo en la configuración del Personalizador (Sólo configuración de navegación fija), el color del texto puede cambiar cuando se desplaza hacia abajo. Es mejor dejar esa opción en blanco. Pero aún puede cambiar el enlace activo del menú en la configuración de la Barra de Menú Principal y aún funciona con un encabezado fijo.

Tamaño del texto del menú desplegable Divi

A medida que continuamos nuestra serie de módulos de menú Divi, vamos a centrarnos en el submenú desplegable para los próximos tutoriales. ¡Con este tutorial, usted será capaz de estilo y personalizar el módulo de menú Divi submenú desplegable y cambiar cosas como los colores, la frontera, el espaciamiento, los efectos hover, y mucho más!

En primer lugar, tenemos que entender cómo el submenú Divi se hace para que podamos apuntar a los elementos individuales de la misma por separado en función de nuestro estilo de diseño. Hay tres partes que componen el submenú desplegable Divi:

¿Notas algo? Cada pieza separada tiene sus propias propiedades, como padding y anchura. Están anidados unos dentro de otros, por lo que con el fin de personalizar lo que queremos, primero tenemos que aprender a apuntar a la pieza correcta de la estructura.

  Editor de Wordpress en tamaño completo sin plugins ni funciones

Una de las primeras cosas que probablemente notamos es el feo grueso azul como en la parte superior de nuestro submenú. O tal vez quieras quitar algo de relleno en la parte superior o inferior o hacerlo más ancho. Usted puede hacer eso apuntando a la lista desordenada del submenú como se muestra.

Ahora pasamos a los elementos de la lista. Puede ser confuso cómo se relacionan los elementos de la lista y los enlaces, pero si echa un vistazo a las ideas de estilo personalizado que sugiero, empezará a verlo. Los elementos de la lista controlan los elementos de los enlaces, pero la siguiente sección de enlaces controla el texto del enlace.

Divi mega menú sin plugin

Estoy construyendo un menú horizontal y algunas de las entradas de ese menú tendrán desplegables (submenús), y otras no. Los que tienen sub-menús no son realmente páginas. Sólo son guías para los desplegables.

(Yo uso WP como CMS, con home estática y páginas interiores. Construyo mis propias plantillas, doy estilo a los menús en CSS, luego registro los menús en el functions.php y los llamo en las plantillas). En WP añades entradas a los menús a través de la lista de páginas, o por los enlaces personalizados. Pero no quiero que los “productos” sean enlazados. Si no añado un enlace al enlace personalizado no me dejará añadirlo al menú.

Sin embargo, el uso de hashes vacíos para los enlaces de marcador de posición tiene algunos efectos secundarios. El enlace seguirá apareciendo y comportándose como un enlace, por lo que podría confundir al usuario cuando haga clic en lo que parece ser un enlace pero no ocurra nada. El otro efecto es que al hacer clic en un enlace de hash vacío se anulará cualquier hash existente, enviando al usuario a la parte superior de la página. Esto podría no ser tan preocupante para un menú que está en la parte superior de la página de todos modos, pero es bastante discordante cuando la página salta inesperadamente cuando no lo esperas, especialmente si se trata de un menú de pie de página.

  Cómo excluir categorías del loop (actualizado)