Ahorra hasta 20% OFF en nuestro Planes y Cursos

Día(s)

:

Hora(s)

:

Minuto(s)

:

Segundo(s)

Solo durante:

Ahorra hasta 20% OFF en nuestro Planes y Cursos

Seleccionar página

Cambiar el número de columnas en el módulo de blog de Divi

En este vídeo tutorial premium aprenderás a cambiar el numero de columnas en el módulo de blog de Divi.

Profesor: Jefferson M.

Publicación: 15 abril 2020

Contenido Premium

Puedes acceder a este y otros +700 contenidos suscribiéndote en cualquiera de  nuestros planes o accediendo con tu cuenta.

En este vídeo tutorial premium aprenderás a cambiar el numero de columnas en el módulo de blog de Divi. Cuando comienzas a diseñar un blog con el tema Divi e intentas darle cierto dinamismo al diseño, te encuentras con que divi tiene 2 opciones de desplegado de post en su módulo de blog: ancho completo y «rejilla» o mejor conocido como estilo mansory. Esto es bastante lamentable pues sabemos que otros constructores visuales son mucho más flexibles en este aspecto de diseño.

Pues bien, en este tutorial premium haremos un par de modificaciones colocando un pequeño CCS para cambiar el numero de columnas en el módulo del blog y además agregar unos pequeños toques de diseño, de manera que el blog luzca con el aspecto que necesitas.

Cuando termines de ver este tutorial premium y pongas en marcha lo aquí aprendido podrás lograr un diseño similar o mejor que este:

Cambiar el numero de columnas en el módulo de blog de Divi

Como ves, es bastante sencillo modificar el módulo de post de Divi agregando un pequeñito cambio de CCS al módulo del blog. Con esto lograrás personalizar la forma en cómo se muestran tus post del blog y hagas que deje de parecerse a la típica página de entradas de Divi para así convertirte en un diseño más limpio y presentable.

Si además de esto te interesa crear un layout de post personalizado con el Theme Builder de Divi no olvides que tenemos un video tutorial premium donde te enseñamos como hacerlo.

Si te ha gustado este contenido no olvides compartirlo con tus amigos y conocidos, además recuerda que puedes compartirnos el enlace de tu creación en los comentarios de este contenido, así todos veamos los resultados maravillosos que conseguiste con este contenido premium.

15 Comentarios

  1. Jerry Brian Pizango Mozombite

    Interesante opciones para modificar los blog.

    Responder
    • Jefferson Maldonado

      Claro, esto también se logra con Plugins, pero lo interesante es poder realizar primero con pequeños cachos de código.

      Responder
  2. carlos diaz

    Un favor como puedo cambiar las palabras «Entradas más antiguas» y «Entradas siguientes»

    Responder
    • Jefferson M.

      No hay una manera sencilla de hacerlo, pero nos lo apuntamos para un tutorial y explicarlo a detalle.

      Responder
    • Alejandro Ruiz

      Hola Carlos, puedes editar el fichero wp-content/themes/Divi/includes/navigation.php y sustituir los textos Older Entries y Newer Entries por los que quieras.
      Ten en cuenta que se supone que deben de tener la traducción en algún sitio que no he encontrado, y que cuando actualices la versión de Divi perderás estas modificaciones.
      Un saludo.

      Responder
      • Jefferson M.

        ¡Gracias por ayudar a la comunidad Alejandro!

        Responder
  3. Alicia Cordova Bracamontes

    Hola Jefferson!! No sé porque a mi por defecto el modulo blog se me puso en 2 columnas, así que apliqué este tutorial para cambiarlo a 3.

    ¿Cómo le puedo hacer para que no haya tanto espacio entre las entradas? Osea reducir el espacio que marqué con las flechas en la siguiente imagen https://snipboard.io/xQoiNG.jpg.

    Muchas gracias!!

    Responder
    • Jefferson M.

      Hola Alicia. Claro que si, para eso debes ir a los ajustes de la fila donde tienes ese módulo > pestaña de diseño > ajustar el canalon del ancho predeterminado > dejarlo en 2. Con eso debería reducirse el espaciado del módulo del blog.

      Responder
  4. Alicia Cordova Bracamontes

    Hola Jefferson muchas gracias!! De echo lo había echo así pero no me funcionó, le puse el valor de 1 y se queda igual, https://snipboard.io/rQ0qvZ.jpg

    También tengo otra duda Jefferson. Siento que las columnas del Blog pueden ser un poco más grandes, pensaba que reduciendo el espacio que te comenté se harían un poco más grandes, con el código solo lo puedo aumentar hasta 29% para que quede en tres columnas, si lo aumento a 30%, se cambia a dos columnas. ¿Habrá alguna manera de ajustarlas, o ya se quedan así por defecto?

    Muchas gracias!!

    Responder
    • Jefferson M.

      Si, es que el el asunto del ajuste manual con CSS. Mira, si esperas algún tiempo, sacaré un tutorial donde puedes hacer estos ajustes de manera más sencilla con un plugin.

      Responder
      • Alicia Cordova Bracamontes

        Excelente!! Muchas gracias!!

        Responder
  5. Alicia Cordova Bracamontes

    Hola de nuevo Jefferson!! ¿Qué puedo hacer si por ejemplo en una página quiero que el módulo de blog me aparezca en dos columnas y en otra página que sean 4 columnas?

    Muchas gracias!!

    Responder
    • Jefferson M.

      En ese caso Alicia, no debes colocar el CSS en las opciones de Divi, sino en las opciones de la página en cuestión donde quieres que se aplique especificamente el CSS, vas a Divi Builder de la pagina 1 > Opciones de página > Avanzado > CSS Personalizado: Allí colocas el CSS de las columnas que quieres ver, y luego haces lo mismo en la página 2, colocando allí en CSS especifico que quieres que se aplique para esa página. Con eso aplicas CSS especifico a páginas especificas.

      Responder
  6. Alicia Cordova Bracamontes

    Muchas gracias Jefferson!! No sé que está pasando que cuando pongo el código en la página en el generador de temas si cambia a las columnas que quiero, pero al salir del generador y checar la página no me está respetando el número de columnas que le asigné.

    Responder

Enviar un comentario

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

¡40% + 10% OFF en nuestro lanzamiento!

Apúntate y te avisaremos cuando esté publicada nuestra nueva plataforma uxdivitemplates.com. Te regalaremos un cupón ÚNICO de descuento del 10% adicional a los descuentos de lanzamiento.

¡Gracias! Te avisaremos cuando publiquemos nuestra plataforma y te enviaremos el cupón de descuento único por estar en esta lista.