En este tutorial aprenderás a diseñar un menú personalizado pixel perfect responsive con divi theme builder para tu tienda de woocommerce.
Cómo bien sabemos con divi podemos diseñarnos un header personalizado a través del generador de temas. Podría decirse que no es nada complejo diseñar un menú sencillo para escritorio, el problema viene cuando queremos personalizarlo un poco más y adaptarlo a nuestras necesidades, sobre todo para dispositivos móviles.
Un buen ejemplo de lo anterior es cuando queremos colocar dos o más columnas en la misma fila en móvil, esta es una configuración que se tiene que hacer con CSS ya que en dispositivos móviles divi por defecto apila una columna debajo de otra, es decir, los elementos no quedan en línea.
El ejemplo anterior es uno de los muchos “detallitos” que podemos encontrarnos a la hora de diseñar un menú con el divi theme builder. Así que en este tutorial vamos a solucionar esos problemas de una vez por todas, te voy a enseñar a diseñar correctamente un menú con el divi theme builder completamente responsive, es decir, se adaptará perfectamente tanto a escritorio, tabletas y móviles, no tendremos saltos de línea y ningún defecto.
En esta ocasión trabajaremos un menú para un sitio web de una tienda online, dónde tendremos el logotipo, un sub menú de categorías, un menú principal donde colocaremos los enlaces principales del sitio más un buscador y de lado derecho tendremos tres iconos: uno para ir a la lista de deseos, otro para ir a la página de mi cuenta y el último será de un carrito ajax completamente funcional.
Si quieres ver por tu cuenta lo que te estoy diciendo puedes darle play al video de previa o incluso darle un vistazo a la demo del ejercicio.
Si te convence este ejercicio, no lo dudes y únete a los tutoriales exclusivos para que tengas acceso a este increíble tutorial.
0 comentarios