Cómo crear un menú adaptado a dispositivos móviles, para cualquier tema en Wordpress - Josu Eizagirre-Diseño web-tutoriales-gratuitos

Cómo crear un menú adaptado a dispositivos móviles, para cualquier tema en WordPress

menu_responsive_josu

 

Nos ponemos en situación, entras desde tu dispositivo móvil a una web, blog o tienda online  y ves esto, te suena?

menu_responsive_josu1

Si, os hablo de ese espacio con franjas que muchas plantillas para WordPress traen de serie en su versión para móvil o tablet y bastante gente ni sabe que esconde un menú al hacer click en ella 🙂

menu_responsive_josu2

Seguramente, si una persona cercana al mundo de internet y de la tecnología esté leyendo este artículo se diga aquello de “es imposible que exista alguien hoy en día que al entrar en una web desde su movil no sepa para que está eso“!! (mi experiencia personal como desarrollador web me dice todo lo contrario 😉

Cómo crear un menú adaptado a dispositivos móviles bien molón facilitando la navegalidad en tu web?

Bien en este punto tienes que saber que tienes tres opciones:

 1) Puedes crear el menú con conocimientos de programación. Si es tu caso enhorabuena!!

 2) Tienes la posibilidad de contratar a un programador si dispones del presupuesto.

 3) Puedes hacerlo a través de un plugin que para mí es el mejor para esto.

Si no quieres complicarte la vida y no quieres dejar mucho dinero por el camino yo te recomiendo la opción tres.

¿Qué plugin vamos a utilizar y notaremos los cambios?

Para realizar este trabajo vamos a utilizar el plugin SuperSide Me.

A continuación podéis ver el antes y el después utilizando de ejemplo mi blog.

menu_responsive_josu4

menu_responsive_josu5

menu_responsive_josu7

menu_responsive_josu6

Menos palabras y empecemos a crear desde cero un menú responsive

Bien, empezamos a crear el menú para ello vamos a a la web del creador del plugin. (es plugin de pago)

Una vez dentro escogemos para cuantas webs queremos y click en”add to cart

menu_responsive_josu8

Una vez añadido nuestra compra al carrito rellenamos todos los datos que nos piden:

menu_responsive_josu10

menu_responsive_josu11

Y una vez rellenado todo hacemos click en “purchase” abajo del todo:

menu_responsive_josu12

Ahora nos va a redirigir a la página de paypal si habéis escogido pagar de esta forma, si no os redirigirá a la pasarela de pago seguro:

menu_responsive_josu13

Una vez realizado el pago nos va a llegar un correo con el archivo del plugin + la licencia que hemos adquirida:

menu_responsive_josu14

Instalando el plugin, entramos en materia

Ahora ya empieza lo bueno, para aplicar este tutorial voy a hacerlo en un proyecto mio, exactamente en una tienda online que ahora mismo luce de esta forma:

menu_responsive_josu14

Como podéis ver el menú se ve muy simplón y aparte las opciones no se pueden visualizar correctamente al fusionarse con el logo.

 Para solucionar este problema vamos a ir a nuestro panel de administración de Wordpress y instalaremos el plugin comprado recientemente:

 menu_josu

menu_josu3

menu_josu5

Y nos dirigimos a SuperSide Me en “Plugins” y hacemos click en settings:

menu_josu6

Una vez dentro lo primero es lo primero y vamos a activar la licencia:

menu_josu7

menu_josu8

menu_josu9

Vamos a divertirnos un poco, entramos en las configuraciones

Ahora mismo al instalar este plugin vemos el cambio de esta forma:

menu_josu10

Pero todavía nos falta hacer todos los cambios de diseño etc… para que se ajuste a los colores y estética de nuestra web.

#Pestaña General

josu_menu12

En mi caso solo voy a cambiar tres cosas, todo lo demás lo dejo como está:

           1-Panel Width → 340 pixeles.

                2-Background Color →#f9c2b8

3-Link Color →#3f3f3f

Guardar Cambios.

Y nos está quedando de esta forma:

josu_menu14

menu_josu20

#Pestaña Buttons

josu_menu21

           En esta pestaña he hecho estos dos cambios:

1)Main Menu Button Text → He puesto “Menú”.

                                                  2)Close Button Text →He traducido El “Close” por “Cerrar” en castellano.

Guardar cambios.

#Pestaña Options

josu_menu24

 Cambios que he realizado:

  1. Outline Style → Os aconsejo probar las tres, yo la he puesto en solido.

Guardar cambios.

#Pestaña Menús

menu_josu25

En esta pestaña solo he comprobado que todos los menús están bien asignados, en mi caso tengo menú primario y secundario, si tenéis algún problema con los menús ahí es donde tenéis que mirar y hacer los cambios necesarios.

menu_josu_responsive

Una vez comprobado que todo está correcto este ha sido el resultado final totalmente adaptado a móviles y tablets.

josu_menu_responsive

josu_menu_adaptativo_wordpress

Esto ha sido todo, espero que os haya gustado este tutorial.

¿Y vosotr@s qué decís, tenéis un menú adaptado a dispositivos móviles y que es amigable para los visitantes de tu web, blog o tienda online?

Nos vemos en los comentarios 😉

Cómo crear un menú adaptado a dispositivos móviles, para cualquier tema en WordPress
5 (100%) 48 votes
The following two tabs change content below.
Me llamo Josu y soy un Informático apasionado con todo lo relacionado con Internet y la tecnología. Actualmente ayudando a emprendedores e inconformistas a crear y monetizar su presencia en internet, a través de webs o tiendas online totalmente personalizadas y optimizadas. Enamorado de Wordpress y todo lo que tenga que ver con las formas de monetizar un proyecto web.

COMENTARIOS DE ESTE ARTÍCULO:

2 comentarios
Paco Dice 2016-11-09

Estupendo. Muchas gracias.

Contestar
COMENTAR