Tipos de enlaces en DiviMenus

Entrada publicada por JC

Hace más de un año anuncié al lanzamiento de DiviMenus. Desde entonces han sido muchos los usuarios que han confiado en el producto y a día de hoy tiene más de mil ventas en el Divi Marketplace, donde ha llegado a entrar en el top sellers en varias ocasiones.

En breve estará disponible DiviMenus 1.5, que viene con novedades muy demandadas: la posibilidad de usar Títulos en el Menu Button y mejoras en el tipo de enlace Mostrar (Mostrar en Hover y Ocultar al Clicar en la Página).

En esta entrada, y aprovechando las mejoras en el tipo de enlace Mostrar, quiero hablarte sobre los tipos de enlaces de DiviMenus para que puedas sacarles el máximo partido. Además te mostraré casos de uso y te ofreceré los mejores recursos. ¡Vamos allá!

> URL

Este tipo de enlace es el más conocido, ya que es el que puedes encontrar en la mayoría de los menús, por ejemplo el de WordPress.

El tipo de enlace URL, tal y como su nombre indica, te permite abrir una URL (de aquí en adelante URL de destino o simplemente enlace) tanto en la misma página como en otra diferente.

Campos del tipo de enlace URL

Enlaces en DiviMenus, URL

URL

Este campo te permite introducir la URL de destino. Para ello, puedes escribirla a mano o usar la opción de contenido dinámico.

Para usar esta opción solo tienes que pasar por encima del campo y pulsar el icono que aparecerá a la derecha. DiviMenus te permitirá elegir entre todas las URLs de tu página, desde la home de WordPress hasta cualquier entrada, página o entrada personalizada.

Es la opción recomendable. Primero porque no te equivocarás al introducirla, y segundo porque al ser dinámica, si la URL cambia en WordPress, automáticamente cambia también en tu DiviMenu.

Por último, puedes usar anchor links para ir a determinadas partes de la página, por ejemplo para navegar por secciones. Para ello debes saber el identificador CSS del elemento (ID) e introducirlo en el campo precedido del símbolo #. Por ejemplo: #elemento

Por convenio, un identificador CSS debe contener palabras en minúsculas separadas por guiones. Por ejemplo: “tipos-de-enlace”

Habilitar estado activo

Este campo hace que el Menu Item tenga el estado activo si la URL de destino coincide con la URL de la página. O en el caso de usar anchor links, si la ID del elemento introducido corresponde al primer elemento visible de la página.

¿Qué significa que un Menu Item tenga el estado activo?

Para ello primero hay que entender el estado hover.

Un Menu Item cambia al estado hover cuando pasamos el mouse sobre él. En ese caso podemos hacer que el estilo sea diferente, usando para ello la opción Hover que ofrece DiviMenus en sus campos.

Con esto tenemos que cuando pasamos el mouse sobre un Menu Item el aspecto de este cambia, ya que se aplicará el estilo que hayamos definido para el estado hover a la opción Hover comentada previamente.

Que un Menu Item esté en estado activo significa que se le aplicará en todo momento el estilo que hayamos definido para el estado hover.

En el caso de que el Menu Item tenga Título, a este también se le aplicará el estilo que hayamos definido para el estado Hover.

El Menu Item “URL” del DiviMenu superior es un ejemplo de Menu Item activo, por eso ya se muestra el estilo que yo le he definido para el estado Hover (fondo azul y letras verdes llamativas).

El enlace se abre

Este campo, que es autoexplicativo, te permite abrir el enlace en la misma ventana o en una nueva.  

> MOSTRAR

Este tipo de enlace muestra un elemento de la página en vez de abrir un enlace.

El tipo de enlace Mostrar abre un mundo de posibilidades relacionadas con la visibilidad. Para ello es mejor que estudiemos sus campos y te muestre varios ejemplos de diseños creados gracias a este tipo de enlace.

Campos del tipo de enlace MOSTRAR

Enlaces DiviMenus, Mostrar

ID del Elemento

Este campo te permite introducir el identificador ID del elemento que deseas que se muestre. Recuerda que el elemento debe existir y aquí no debes introducir el símbolo #, solo el identificador del elemento.

Cambiar Visibilidad

Este campo te permite definir la visibilidad del elemento. Si lo tienes activado esta cambiará (de oculto a visible o viceversa), en caso contrario el elemento se mostrará siempre.

Puedes ver el funcionamiento de este campo en este gran vídeo de Gonzalo de la Campa.

Mantener Visible

Este campo te permite mantener el elemento visible una vez mostrado. Es útil para mostrar etapas o procesos como ya veremos más adelante.

Mostrar en Hover

Este campo te permite mostrar el elemento sin necesidad de clicar el Menu Item. Para verlo solo tienes que pasar el mouse sobre el Menu Item y para ocultarlo solo tienes que salir del elemento o hacer clic en cualquier lugar de la página si tienes activado el campo Ocultar al Clicar en la Página

Ocultar al Clicar en la Página

Este campo te permite ocultar el elemento sin necesidad de volver a clicar el Menu Item o de pasar sobre él. 

Estado Inicial

Para tu diseño puedes querer que el elemento se muestre visible desde el inicio. Si es así solo tienes que seleccionar Visible como estado inicial.

En el DiviMenu superior he seleccionado que el Menu Item “URL” muestre el elemento desde el inicio.

Ten en cuenta que los Menu Items que muestran elementos tendrán el estado activo, tal y como puedes ver en el DiviMenu superior. Como conclusión, un Menu Item tendrá el estado activo si la URL de destino coincide con la URL de la página, si abre un popup o si muestra un elemento.

> Tipos de enlaces en ACCIÓN

En esta sección te voy a mostrar algunos vídeos creados con DiviMenus y los tipos de enlaces que acabamos de ver.

Espero que te ayuden o te inspiren 🙂

Si quieres ver más diseños puedes suscribirte al canal de YouTube de DonDivi, donde se irán subiendo nuevos vídeos explicativos. ¡No olvides darle a la campanita si no te quieres perder ningún vídeo!

Relojes

Tipo de enlace usado: Popup

Puedes ver este diseño en: https://dondivi.com/layouts/watch-items/ y en https://dondivi.com/layouts/watch-hotspot/ 

Mega Menú

Tipo de enlace usado: Popup

Mostrar Icono de Cierre: NO

Mega Menú

Tipo de enlace usado: Mostrar

Cambiar Visibilidad: SÍ
Mantener Visible: NO
Estado Inicial: Oculto

Puedes ver este diseño en: https://dondivi.com/layouts/red-megamenu/

Pestañas verticales

Tipo de enlace usado: Mostrar

Cambiar Visibilidad: NO
Mantener Visible: NO
Estado Inicial: Visible en el primer Menu Item; oculto en los demás.

Puedes ver este diseño en: https://dondivi.com/layouts/marker/

El camino de baldosas amarillas

Tipo de enlace usado: Mostrar

Cambiar Visibilidad: NO
Mantener Visible: SÍ
Estado Inicial: Visible en el primer Menu Item; oculto en los demás.

Puedes ver este diseño en: https://dondivi.com/layouts/oz/

> RECURSOS

Documentación en inglés

Blog de ELEGANT THEMES

Canal de YouTube

DonDivi LAYOUTS

Como usuario de DonDivi podrás descargarte todos los layouts, donde encontrarás ejemplos de todos los tipos de enlaces vistos en esta entrada.

¡Disfruta construyendo!

Crea una página web que destaque

Impresiona a tu jefe, a tu empleador o a tus clientes por solo $49.

Ese precio incluye actualizaciones, uso ilimitado en páginas web y soporte premium en español durante un año.