Cerrar video

Crear un menú fijo inferior con iconos tipo aplicación con el theme builder de divi

por | Jul 9, 2020 | Tutorial gratuito | 10 Comentarios

Hola bienvenido bienvenida una vez más a otro tutorial de OV Divi. En este tutorial gratuito de divi y wordpress aprenderás a diseñar un menú fijo inferior con iconos simulando el menú de una aplicación móvil. Este menú lo haremos con el nuevo generador de temas de divi (divi theme builder) y será completamente responsive, es decir, se verá perfectamente tanto en escritorio, tabletas y móviles.

Con este tutorial además de que aprenderás a realizar una composición de un menú con 5 columnas (aunque puede ser con las columnas que quieras) te enseñaré un truco que siempre uso en mis diseños para mostrar en línea más de una columna en móvil, es decir, sabemos que divi por defecto apila las columnas una abajo de otra en móviles y con este truco mostraremos las 5 columnas en una sola fila en móvil de forma muy fácil.

Bueno ya sabes que soy de los que no les gusta escribir mucho, así que mejor dale play al video y aprende a realizar este hermoso menú tipo app.

Tutoriales Relacionados

10 Comentarios

  1. Alfonso

    Hola!

    Me estoy volviendo fan de tus videos!

    Te comento que no logré algún paso y no me sale bien para celular, sale el menú todo junto, habrá solución para esto?

    Ojala puedas asesorarme!

    Saludos!

    Responder
    • Oscar Viedma

      Hola Alfonso, ¿A qué te refieres con que sale todo junto? Necesito ver tu ejercicio para saber en realidad que pasa, si lo tienes en línea envíame el enlace por fa.

      Responder
  2. Alfonso

    Wow gracias por contestar

    La web es https://californiavinosylicores.com/recompensas/ y mi problema es en la vista de celular.

    Lo que logre hacer es que el menú se ve «apretado» no se como explicarlo, te puedo mandar una foto

    En verdad te agradezco mucho en contestar

    Saludos

    Responder
    • Oscar Viedma

      Al parecer lo estás haciendo mal Alfonso. Veo que en la fila tienes un max-width: 2147%; <--- eso está mal debería tener 100% y si tienes 6 columnas debes colocarle un ancho a cada columna de 16.6% porque 100 / 6 = 16.6...

      Responder
  3. ALEXANDER RHENALS

    buenas noche oscar aplique todo lo del tutorial pero el menu no se me ve en mi pagina me puedes colaborar porfa, es la pagina de fundacooedumag, tu tienes la entra a wp. gracias

    Responder
    • Oscar Viedma

      Seguramente algo estás copiando mal Alexander. Debes seguir correctamente el paso por paso porque con algo que no hagas bien (un signo, letra, etc. de más) no te va a funcionar.

      Aunque creo que ya te respondí en youtube y en tu sitio he visto que si se muestra el menú.

      Saludos.

      Responder
  4. Lorena

    Hola, me gusta el menú fijo inferior con iconos que propones en el tutoría, pero me gustaría poder poner ese menú solo en versión Mobil, y en versión escritorio ponerlo superior y diferente, sin iconos, por ejemplo. Cómo se podría hacer??

    Responder
    • Oscar Viedma

      Hola Lorena, es fácil. Te creas dos secciones, una con el menú tipo app, esta sección la ocultas para escritorio desde los ajustes de la sección > Avanzado > Visibilidad… Y posteriormente te haces otra sección con el diseño que quieras y está la ocultas para tabletas y móviles…

      Responder
  5. Roberto Rojo

    Hola Oscar de verdad que es genial las recomendaciones y trucos que mencionas; ya he realizado varios cambios, sin embargo tengo una duda.
    Cómo hago para que uno de los iconos del menu que es un carrito de compra cambie cuando el usuario mande un articulo al carrito para compra?

    Muchas gracias y espero tus comentarios.

    Roberto Rojo

    Responder
    • Oscar Viedma

      Hola Roberto, ¿a qué te refieres que cambie? o ¿a qué quieres que cambie el icono de carrito? Si deseas agregarle un contador al icono del carrito tengo este tutorial premium donde logramos esa funcionalidad 🙂

      Responder

Trackbacks/Pingbacks

  1. Cómo crear un menú fijo inferior con iconos tipo app móvil con pop ups o ventanas emergentes en divi - OV DIVI - […] realizar este tutorial tomamos cómo base este otro tutorial gratuito que tengo en el canal de youtube. Y también…

Enviar un comentario

Tu dirección de correo electrónico no será publicada.

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