En este tutorial exploraremos Divi Flexile Headers el cual es un paquete de 50 encabezados personalizados que podemos usar en nuestros sitios web creados con divi builder o divi theme builder.
Si ya tienes tiempo con divi sabrás que diseñar un encabezado personalizado desde el divi theme builder (generador de temas de divi) no es tan fácil cuando queremos llevar nuestros diseños a un siguiente nivel.
La personalización de un encabezado no es lo más intuitivo en divi sobre todo a la hora de adaptarlo a dispositivos móviles o querer agregar alguna funcionalidad, es aquí dónde entra Divi Flexile Headers.
Divi Flexile Headers ha hecho el trabajo «rudo» por nosotros, es decir, a través de estilos personalizados y funcionalidades aplicadas a través de javascript han creado 50 encabezados personalizados listos para ser instalados en nuestro sitio web con tan solo unos clicks.
Créeme este paquete de encabezados personalizados te ahorrara mucho tiempo y sobre todo dolores de cabeza a la hora de estar diseñando un header para tu web.
Si quieres tener acceso a estos encabezados personalizados puedes unirte a los tutoriales exclusivos de la Academia OV DIVI y por solo $6.00 USD al mes tendrás acceso a este paquete y a muchos más tutoriales exclusivos sobre divi y wordpress.
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.
En este tutorial premium de los tutoriales exclusivos de la Academia OV DIVI aprenderás a crear un hermoso menú móvil personalizado para divi con Divi Mobile de Divi Engine.
Divi Mobile es un plugin para Divi que te permite personalizar completamente el menú de divi para dispositivos móviles cómo tabletas y teléfonos aunque si lo quisieras también puedes incrustar el menú hamburguesa para pantallas de escritorio. Con Divi Mobile puedes crear hermosos menús móviles de aspecto personalizado para tu sitio de Divi sin tener que escribir ningún código. Todas las configuraciones están en el personalizador de temas que te permite ver una vista previa en vivo de cómo va quedando tu menú en navegación móvil.
Divi Mobile cuenta diferentes menús, íconos de hamburguesas y estilos de submenús en los que puedes mezclar y combinar para crear algo único para cada sitio. Con este complemento tendrás infinitas opciones de personalización para tu menú divi móvil.
Si quieres aprender a configurar este complemento pero sobre todo descargarlo, puedes unirte a los Tutoriales Exclusivos de OV DIVI por solo $6 dólares al mes dónde tendrás acceso no solo a este tutorial sino a muchos más tutoriales premium con todo su material necesario.
En este tutorial premium y exclusivo de OV DIVI aprenderás a crear un mini carrito ajax drop down en el menu principal de divi y lo mejor es que lograremos esta funcionalidad sin plugins.
La funcionalidad de esta alternativa consiste en tener un icono de carrito en el menú con un contador ajax, es decir, al ir agregando productos al carrito este contador ser va refrescando automáticamente y al pasar el cursor sobre el icono se nos despliega un menú (drop menu) con los productos que hemos añadido al carrito. Desde este dropdown podemos ver el sub total de la compra, eliminar productos, ir al carrito o finalizar la compra.
En realidad este tutorial es muy completo y es una gran funcionalidad que puedes empezar a aplicar en tus tiendas online creadas con divi. 😍
En este tutorial aprenderás a crear un menú hamburguesa con una barra de navegación lateral off canvas en divi.
Seguramente te estás preguntando, Oscar ¿Otro tutorial más sobre menús? ¡Sí! Entiendo que anteriormente ya hemos realizado varios menús para divi tanto gratuitos cómo premium, pero la realidad es que cada menú es diferente, tiene un diseño, un estilo y una funcionalidad diferente. Tú bien sabrás que existen muchos estilos de diseño para menús, en la web hay miles de posibilidades y aquí te traigo otra más.
Estoy seguro que este menú te va a encantar tanto cómo a mi, la verdad que es un tutorial de poco más de una hora que considero vale completamente la pena. Ya me dirás.
El efecto consiste en crear una barra de navegación vertical compuesta por el icono del menú, un texto con rotación y los enlaces a las redes sociales. Al desplegar esta barra se nos deslizan todas las opciones del menú con un efecto de transición off canvas. Las opciones del menú vienen con un efecto hover de transición de un color a una imagen de fondo y además se adaptan correctamente a cualquier resolución de pantalla, esto es realmente genial.
Bueno, creo que para que me entiendas mejor, lo ideal es que te des una vuelta por la demo y navegues por este increíble menú, así tendrás una mejor idea de lo que vas a lograr en este tutorial.
Si este menú te convenció recuerda que puedes verlo en el área de los tutoriales exclusivos de la Academia OV DIVI y el acceso a estos tutoriales premium es por solo $6,00 USD al mes.
