No se encontraron resultados

Desde hace unos años Divi el maquetador visual más popular para wordpress, implementó dentro de sus nuevas características la funcionalidad de realizar menús personalizables usando cualquier estructura. Sin embargo muchas personas siguen sin entender cómo se puede hacer uso de esta característica.

Nuestro menú principal dentro del sitio kimera.glassmarket.com.co está construido usando esta característica. Sin embargo hacemos uso de código CSS y JavaScript usando Jquery para darle movilidad e interacción al menú. Si estas interesado en aprender cómo realizar tu propio menú personalizado dentro de Divi usando CSS y JavaScript quédate que ya empezamos.

• Como primer paso después de iniciar sesión en nuestro wordpress, debemos dirigirnos al menú , y dirigirnos hacia donde dice Divi > Generador de temas

• Una vez allí dentro de la nueva ventana podrás decidir en qué partes de tu sitio web aplicara el nuevo menú que vamos a crear. Divi nos permitiría hasta crear un menú personalizado por página, o en su caso para cada categoría de un artículo. Como en nuestro caso solo crearemos un menú para todo el sitio, es decir para todas las páginas y subpáginas.  Daremos clic donde dice “crear nueva plantilla”. Y una vez se desplieguen las opciones, le diremos “Todas las paginas”. (para que afecte a todo el sitio, si no es tu caso y deseas tu menú solo para una página en específico, lo que debes hacer  es escoger “página específica y luego el nombre de la página”).

    Una vez seleccionado le debemos dar en el botón «Crear plantilla».

• Ahora se creara una nueva plantilla bajo el nombre “Todas las paginas”, que estará conformado por tres campos. Agregar (Encabezado, cuerpo o pie de página). Es aquí donde podremos crear el nuevo menú que será un  encabezado así que damos clic en encabezado y nos dará unas opciones adicionales, las cuales si manejas Divi conocerás muy bien, de lo contrario selecciona “crear encabezado personalizado”.

• Ahora Divi nos dará las opciones básicas para empezar un diseño así que como será personalizado nuestro diseño de menú, escogeremos “Construir desde cero”.

• Como podemos ver Divi nos da las mismas opciones de diseño para crear una página, basado en secciones, filas, columnas, módulos. (en este paso ya deberías tener tu diseño definido para empezar a modelarlo).

• Para nuestro sitio web Kimeramultimedia.com decidimos usar un menú compuesto por varios submenús, algo así como un “supermenu”. El primero de ellos (Desarrollo web, marketing Digital, fotografía, nosotros, contáctanos), se mantendrá fijo, el segundo  menu (Área de clientes, afiliación, renovar producto, trabaja con nosotros) decidimos  debe tener una animación que permita “recogerse hacia el centro”,  siguiente a esto nuestro logo que esta al centro en una especie de triangulo invertido. Deberá tener una animación que le permitirá esconderse detrás del menu superior principal y salir de la ventana. Y por último nuestro  menu que tiene algunas de las marcas para las que trabajamos. Como se pueden dar cuenta tiene un botón estilo flecha para que nos sirva de botón para que este se despliegue cuando hagamos  clic en él. Así que debe estar detrás de todos los otros menús. Para este menu queremos que al recogerse detrás de todos los otros menús, sobresalga detrás de ellos un poco para que se pueda ver la parte inferior y saber que él está allí y que puede ser desplegado por el usuario cuando de clic en la flecha. Antes mencionada.

• Se supone que para haberte interesado este tema, de seguro ya has creado algún diseño en Divi y conoces sus funcionalidades. Por lo que te estarás preguntando ¿Cómo hacer todo lo anteriormente propuesto con el menu si Divi no trae por defecto la manera de poder realizarlo? La respuesta como ya les había dicho es usando CSS y JavaScript. Asi que manos a la obra que aquí empieza lo bueno.
• Como sabemos JavaScript para reconocer un elemento de HTML debe tener un nombre o ID para poder referenciarnos a él y manipular sus propiedades posteriormente, así que eso será justamente lo que empezaremos hacer. Darle un nombre a cada parte de nuestros menús que deseamos manipular para darle animación posteriormente. Esto lo lograremos yendo a las configuraciones de cada fila en Divi yendo a la pestaña AVANZADO y luego en ID Y CLASES CSS. Yo solo les mostrare como hacerlo con uno de los elementos del menu. Pero para cada elemento que quieran animar en el menu deberán especificarle un ID.

• Después de marcar las filas con sus respectivos ID los de nuestro menu fueron 3 que quedaron nombrados de la siguiente manera.

1) barraAux1 («Área de clientes, afiliación, renovar producto, trabaja con nosotros«)

2) logoPrincipal («Triangulo con el logo»)

3) megaMenu (menu con las marcas de nuestros clientes destacados)

• Ya que están marcados con su respectivo ID podemos referenciarlos a través de código y JavaScript sabrá que existen y los podremos manipular. El mejor Sitio Que Divi tiene para escribir código, es en el menu de wordpress, luego en El ítem Divi, luego en opciones del tema y por último en la pestaña integración. Así que vamos allí.

• Una vez allí nos dirigiremos al cuadro de código que Divi pone a nuestra disposición. En la parte que dice “Agregar código al <HEAD> de su blog”. Aquí será donde escribiremos nuestro código para animar nuestro menu personalizado.

• A ustedes les aparecerá completamente vacío si aún no han implementado  algún código. Como nuestra página en Divi es personalizada. Tengo algunos códigos mas ya implementados por lo que me aparecen. Lo más importante de este cuadro de código es mantenerlo organizado y debidamente seccionado para poder acudir a él cuándo lo necesitemos sin que todo este revuelto y ni nosotros mismos lo entendamos.
• Como sería casi interminable explicarles la implementación de todo el menu, les explicare a detalle tan solo la animación y el código usado para el logo que es el que está encerrado en una especie de triangulo e identificado con el ID “logoPrincipal”, el resto de la implementación para los otros menús será igual solo que cambiara la posición y el tipo de animación que se deberá especificar en el CSS.

• Lo que haremos con el logo será controlar el “scroll” que el usuario realiza sobre la página y cuando este llegue a un determinado punto, este se esconda o aparezca en el menu. (Para verlo en funcionamiento y entender que es lo que haremos con él. Puedes visitar nuestro sitio principal kimera.glassmarket.com.co )

• Empecemos pues capturando el valor del «scroll» que el usuario ejecutara cuando se desplace por la página. Esto lo haremos con la siguiente función  de Jquery que solo debemos invocarlo ya que por defecto Divi ya lo trae integrado

• Ahora que tengo el valor del “scroll valido si es igual al punto en el que yo quiero que desaparezca el menu en mi caso el valor fue 600 que me pareció correcto”, y luego defino una variable llamada auxi1 con un valor de 1 que más adelante me indicara si este logo ya fue oculto o no, para hacer su proceso contrario ósea aparecerlo.

• Luego de comprobar que el “scroll” ejecutado por el usuario es mayor a 600, es hora de sacar el logo de la página con una transición suave y una duración especifica también con un poco de “delay”. Y para eso usamos JavaScript referenciando el ID que previamente le asignamos en las opciones avanzadas de Divi el cual llamamos “logoPrincipal”. Ustedes pueden cambiar cualquiera de esos valores incluyendo la dirección y lograr cualquier efecto que quieran.

• A continuación, comparto con ustedes todo el código que definí para nuestro menú principal en Kimeramultimedia.com haciendo uso de media querys y teniendo en cuenta la implementación de un menú totalmente diferente para la versión móvil que también se creó con Divi.

  Espero les sea de utilidad para sus proyectos futuros.

  Un abrazo y bendiciones.