Leave a Comment:
2 comments

Nos ponemos en situación, entras desde tu dispositivo móvil a una web, blog o tienda online y ves esto, te suena?
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 🙂
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 😉
TABLA DE CONTENIDOS
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.
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.
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«
Una vez añadido nuestra compra al carrito rellenamos todos los datos que nos piden:
Y una vez rellenado todo hacemos click en «purchase» abajo del todo:
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:
Una vez realizado el pago nos va a llegar un correo con el archivo del plugin + la licencia que hemos adquirida:
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:
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:
Y nos dirigimos a SuperSide Me en «Plugins» y hacemos click en settings:
Una vez dentro lo primero es lo primero y vamos a activar la licencia:
Ahora mismo al instalar este plugin vemos el cambio de esta forma:
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.
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:
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.
Cambios que he realizado:
Guardar cambios.
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.
Una vez comprobado que todo está correcto este ha sido el resultado final totalmente adaptado a móviles y tablets.
Esto ha sido todo, espero que os haya gustado este tutorial.
¿Y [email protected] 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 😉
Amp para Woocommerce, beneficios de instalarlo en tu Tienda Online
Megatutorial- Seo para WordPress, aprende a posicionar tu web
Cómo crear un blog en WordPress, generar confianza, atraer visitas y Monetizarlo.
Las mejores plantillas para WordPress en el 2018 – La guía definitiva
[Recopilación] Los mejores tutoriales para crear cualquier Proyecto Web en WordPress
Cómo optimizar la velocidad de carga en WordPress (Pagespeed + Wp Rocket)
Cómo crear un tema hijo en nuestro Tema WordPress, con solo un par de clicks
Cómo traducir tu tema de WordPress, sin complicarte mucho la vida