Diseño de sitio web móvil usando Divi
Contenido Restringido 🖐
Accede a este y otros contenidos siendo premium. ¿Aún no eres premium? Adquiere una membresía aquí ⭐
En un mundo cada vez más centrado en dispositivos móviles, asegurarse de que tu sitio web sea totalmente receptivo y esté enfocado en móvil, es esencial. Con Divi, uno de los temas más versátiles de WordPress, tienes una herramienta poderosa para lograrlo. En este tutorial, te mostraremos cómo maquetar un sitio web con Divi, centrándonos específicamente en el diseño para dispositivos móviles.
Mira el resultado logrado en este tutorial aquí:
Por qué el diseño web enfocado en Móvil importa
Los usuarios de dispositivos móviles representan una parte significativa de tu audiencia en línea, por lo que es vital proporcionarles una experiencia de usuario óptima. El diseño web sensible (responsive) garantiza que tu sitio se vea y funcione bien en pantallas más pequeñas, como smartphones y tabletas.
Diseño móvil con Divi paso a paso
Antes de sumergirnos en el diseño móvil con Divi, asegúrate de tener Divi instalado y activado en tu sitio de WordPress. También es aconsejable que ya tengas el contenido básico de tu sitio web creado en la vista de escritorio.
En este tutorial te mostraremos con más de una hora de contenido, como crear páginas completas orientadas a móvil, como crear secciones, encabezados, post del blog, mapas y demás, dando estilos específicos para móvil.
Además, te mostraremos como crear un menú fijo en la parte inferior, para crear una experiencia de navegación nativa para móvil que luzca y funcione de forma correcta.
Contenido recomendado antes de ver este tutorial:
- Curso del tema Divi básico
- Curso del tema Divi intermedio
- Curso de ajustes en móvil para Divi
- Como ajustar correctamente todo el diseño de Divi en móvil
- Cambiar el número de columnas visibles de móvil en Divi
- Configurar el ancho de contenido ideal en dispositivos móviles en Divi
En resumen, el diseño móvil es esencial para garantizar que tu sitio web sea accesible y atractivo para todos los usuarios, independientemente del dispositivo que utilicen. Con Divi, tienes las herramientas para hacerlo de manera efectiva y eficiente. ¡Así que adelante, empieza a maquetar y a diseñar para el futuro de la web móvil!
Descargar los layouts trabajados en el tutorial siendo premium 👇
Hola buenas
Como se puede crear la función del botón guardar contacto?
Que tal Emanuel, un gusto saludarte. Por defecto, no hay ningun plugin que haga esta función dentro del WordPress, por lo que se debe desarrollar a medida para que pueda funcionar, en este caso encontramos un Snippet que quizá te pueda funcionar: https://stackoverflow.com/questions/75189762/how-to-save-contact-details-from-a-website-to-an-android-or-iphone-using-html-bu
Se debe implementar código a medida para generar esta función de momento.
Espero que esta info te sea de ayuda. Para cualquier otra cosa, aquí me tienes 😉🖐
Gracias por el Snippet, de manera manual como agrego el Snippet de ejemplo en el botón para que funcione.?
Que tal Pasley, un gusto saludarte.
No entendemos muy bien a que te refieres Pasley, ¿Podrías explicarnos para ver como te podemos ayudar?
Hola Jefferson!
Excelente video. Gracias por el trabajo.
Creo que es una excelente solución. El sitio se ve muy bien como dices y es una forma de resolver la cuestión de que desarrollar una “app” en algunos casos, es innecesario por los costos que acarrea.
Me gustó la idea que comentaste que quizás repensabas el tema de presentar el menú superior con otros detalles; y bueno, estaré atento a la academia como siempre para agregar esa mejora cuando lo hagas.
Gracias y felicitaciones por tus clases. Siempre muy instructivas y con explicaciones muy didácticas que ayudan en todo el proceso.
¡Gracias estimado Octavio, tardamos un poco pero acá está y lo cumplimos jaja!
Muchas gracias por tu feedback, te envio un gran abrazo 😎