cambiar el numero de columnas en el módulo de blog de divi portada

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


Contenido Restringido 🖐
Accede a este y otros contenidos siendo premium. ¿Aún no eres premium? Adquiere una membresía aquí ⭐

En este tutorial aprenderás a cambiar el número 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.

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

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 videotutorial premium donde te enseñamos como hacerlo.

Debes asignarle la siguiente clase CSS a tu módulo: cu-blog

Luego, en Divi – Opciones de tema – CSS personalizado, debes colocar el siguiente código.

.cu-blog .et_pb_salvattore_content[data-columns]::before {
	content: '4 .column.size-1of4' !important;
}
@media only screen and ( min-width: 981px ) {
	.cu-blog .column.size-1of4 {
	    width: 23%!important;
	    margin-right: 2%;
	}
}
.et_pb_post {
    margin-bottom: 20px;
}

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 prémium.

Descarga los recursos mencionados en este tutorial acá abajo 👇 siendo premium ⭐

Artículos relacionados

Comentarios

    1. 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.

  1. 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!!

    1. 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.

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →