Leave a Comment:
2 comments
Cómo crear un menú adaptado a dispositivos móviles, para cualquier tema en WordPress
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
- 1 Cómo crear un menú adaptado a dispositivos móviles bien molón facilitando la navegalidad en tu web?
- 2 ¿Qué plugin vamos a utilizar y notaremos los cambios?
- 3 Menos palabras y empecemos a crear desde cero un menú responsive
- 4 Instalando el plugin, entramos en materia
- 5 Vamos a divertirnos un poco, entramos en las configuraciones
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.
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:
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:
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:
Vamos a divertirnos un poco, entramos en las configuraciones
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.
#Pestaña General
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:
#Pestaña Buttons
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
Cambios que he realizado:
- Outline Style → Os aconsejo probar las tres, yo la he puesto en solido.
Guardar cambios.
#Pestaña Menús
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 😉
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.
Latest posts by Josu Eizagirre (ver todos)
- Amp para Woocommerce, beneficios de instalarlo en tu Tienda Online - 2018-02-23
- AMP, acelera tu web y mejora tu posicionamiento - 2018-02-10
- Sorteo mensual, Thrive Architect + Elementor pro - 2017-09-30
Quizás te interesen estos artículos
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