Descripción

Mediante el componente UCA Menú Visual podemos crear fácilmente un menú visual para una página, de modo que se presenten al usuario diversas opciones de navegación de una forma interactiva y visualmente atractiva.

Modo de Uso

Una vez situado en el editor de contenido de wordpress (bien editando una página existente o creando una nueva), para utilizar el componente menú visual necesitará crear dos tipos de componentes:
Cree un shortcode MenuVisual para “envolver” todo el menú:

[MenuVisual title="" align="center"] [/MenuVisual]

El shortcode MenuVisual admite dos parámetros:

• title: Título para el menú (es opcional: si no se indica nada, no se muestra)
• align: Permite alinear los elementos del menú, puede ser: ‘left’, ‘center’ o ‘right’, alineando respectivamente a la izquierda, centrado o a la derecha los elementos del menú (si se omite el comportamiento por defecto es ‘center’)

Dentro del anterior MenuVisual puede ir introduciendo elementos mvitem que serán las opciones de navegación que se le presentarán al usuario:

[mvitem title="Opción 1" image="https://docwp.uca.es/wp-content/uploads/2021/07/menu_visual_1.jpg" description="Descripción de la opción número 1" link="#"]

Los campos del shortcode mvitem serían:

• title: Título a mostrar
• image: URL de la imagen que se mostrará en la opción de menú (de 250 x 120 píxeles)
• description: Descripción opcional a mostrar
• link: URL de la página a la que se navegará al pulsar la opción de menú
• class: Modo en que se mostrará la opción de menú (se detalla mas adelante)

El conjunto del menú quedaría de la siguiente manera:

[MenuVisual title="Menú Ejemplo" align="center"]
[mvitem title="Opción 1" image="https://docwp.uca.es/wp-content/uploads/2021/07/menu_visual_1.jpg" description="Descripción de la opción número 1" link="#"]
[mvitem title="Opción 2: tiene un título mas largo" image="https://docwp.uca.es/wp-content/uploads/2021/07/menu_visual_2.jpg" description="Al pulsar el menú 2 obtendrá enormes ventajas" link="https://docwp.uca.es/"]
[mvitem title="Opción 3" image="https://docwp.uca.es/wp-content/uploads/2021/07/menu_visual_3.jpg" description="Pulse aquí y se emocionará como nunca antes. Este es un ejemplo del mejor clickbait que jamás verá, aunque éstos títulos no suelen ser tan largos, mejor corto y que el usuario pille el misterio" link="#"]
[/MenuVisual]

Mostrándose al usuario de la siguiente manera:

Menú Ejemplo

• 
  Opción 1
  Descripción de la opción número 1


• 
  Opción 2: tiene un título mas largo
  Al pulsar el menú 2 obtendrá enormes ventajas


• 
  Opción 3
  Pulse aquí y se emocionará como nunca antes. Este es un ejemplo del mejor clickbait que jamás verá, aunque éstos títulos no suelen ser tan largos, mejor corto y que el usuario pille el misterio

Características

• El componente MenuVisual se adapta al dispositivo en el que se muestra, de modo que según el tamaño que tenga la pantalla (PC, tablet o móvil) mostrará en cada fila mas o menos opciones optimizando la visualización de los mismos
• La imagen debe ser en tamaño 250 x 120 (u otro tamaño de proporción equivalente)
• Si no se indica imagen, se mostrará una imagen por defecto indicando el tamaño de la imagen a mostrar.
• El campo description es opcional, y puede evitar mostrarlo si lo desea.
• El elemento mvitem permite presentarse de diversas maneras mediante el campo class:

Ejemplo

Tipos de elementos

• 
  class='1'
  La imagen se sitúa arriba, después el título de la opción y por último la descripción


• class='2'
  
  El título arriba, después la imagen y la descripción


• 
  class='3'
  Como el class 1 (imagen-título-descripción) pero sin marco visible.


• class='4'
  
  Como el class 2 (título-imagen-descripción) pero sin marco visible.