Cerrar video

Cómo diseñar un menú personalizado pixel perfect responsive con divi theme builder para tu tienda de woocommerce

por | May 14, 2021 | Tutorial premium | 0 Comentarios

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.

Cómo diseñar un menú personalizado pixel perfect responsive con divi theme builder para tu tienda de woocommerce

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.

Este tutorial es premium

Accede a éste y más tutoriales exclusivos de la Academia OV DIVI por tan sólo $6.00 USD al mes y saca el máximo provecho del mejor tema y constructor visual para WordPress.

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Tutoriales Exclusivos

Tutoriales exclusivos OV Divi

Lleva tus sitios web creados con divi al siguiente nivel.

Accede a tutoriales exclusivos y únicos de divi y saca el máximo provecho del mejor tema y constructor visual para WordPress.

$6 USD / mes

Pin It on Pinterest