¿Le gustaría mostrar su página de blog DIVI como una cuadrícula de varias columnas?
El módulo Blog de Divi puede mostrar publicaciones de blog en un diseño de ancho completo o de cuadrícula. Si elige el diseño de cuadrícula, el número máximo de columnas que puede tener es tres.
En este tutorial, con sólo unos pocos fragmentos de CSS, tu blog se convertirá en un hermoso diseño de cuadrícula de varias columnas. Además, las columnas serán fluidas y responsivas en todos los tamaños de navegador, por lo que no tendrá que preocuparse por actualizar esas consultas de medios o configuraciones responsivas.
También puedes consultar nuestro artículo para saber Cómo crear una página de blog con el módulo DIVI Blog.
vista
Antes de saltar a este tutorial, primero echemos un vistazo al resultado que queremos lograr.
Descarga DIVI ahora!!!
Configuración de un módulo de Blog con un diseño de pantalla completa
El módulo Blog de DIVI se puede usar para agregar un blog en cualquier parte de su Sitio web. Realmente facilita la creación de una página de blog en Divi. Todo lo que tiene que hacer es agregar un módulo de Blog a la página usando Divi Builder.
Para este tutorial, vamos a utilizar un diseño de blog prefabricado de uno de paquetes de diseño gratis de DIVI que ya contiene un módulo Blog con un estilo básico.
Para cargar el diseño de blog prefabricado:
- Crear una nueva página desde el panel de control de WordPress
- Dale un nombre relevante y haz clic en 'Usar Divi Builder'
- Haga clic en "Elegir diseño"
- Escriba en la barra de búsqueda 'Diseñador de moda' y elija el diseño 'Página de blog de diseñador de moda'
- Asegúrese de elegir Diseño de blog y luego haga clic en "Elegir diseño"
Una vez que se cargue el diseño, busque el módulo Blog utilizado para mostrar las publicaciones del blog y abra la configuración.
Establecer número de publicaciones
En la configuración del blog, actualice el contenido para limitar el número de publicaciones a 10. (Esto se debe principalmente a razones estéticas, ya que nuestra cuadrícula eventualmente incluirá dos filas de cinco publicaciones de blog).
- Número de posiciones: 10
Seleccionar diseño de pantalla completa
Dado que vamos a diseñar nuestro blog en columnas usando CSS Grid, debemos asegurarnos de que el diseño del módulo Blog sea 'Pantalla completa' (no 'Cuadrícula'). Esto asegurará que las publicaciones del blog se apilen verticalmente en su orden de página normal.
Para cambiar el diseño del módulo Blog, abra la configuración del módulo y, en la pestaña Estilo, abra el menú desplegable Plantilla y seleccione Pantalla completa .
Ahora, cada publicación de blog abarcará todo el ancho de la columna (o contenedor principal).
Agreguemos un borde a las publicaciones del blog. Actualice las opciones de borde de la siguiente manera:
- Ancho del borde: 1px
- Color del borde: rgba (150,104,70,0.35)
Agregar una clase CSS personalizada al módulo Blog
Para apuntar de manera efectiva a este módulo de Blog en particular (no a otro) con nuestro CSS, debemos darle a nuestro módulo una clase de CSS personalizada. En la pestaña avanzada, agregue la siguiente clase CSS:
- Clase CSS: et-blog-css-grid
Crear el diseño de varias columnas con CSS Grid
Ahora que nuestro módulo Blog está configurado con un diseño de pantalla completa, estamos listos para agregar nuestro CSS personalizado.
Vamos a insertar un módulo Código debajo del módulo Blog para agregar CSS a la página.
En el cuadro de entrada de código, agregue las etiquetas de estilo necesarias para envolver cualquier código CSS agregado a una página.
Dentro de las etiquetas de estilo, pegue el siguiente fragmento de código CSS:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
La primera línea de CSS presenta el contenido (o módulos) en forma de cuadrícula.
display: grid;La segunda línea de CSS define el modelo de columna de cuadrícula.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));La tercera fila determina el espacio entre los elementos de la cuadrícula.
gap : 20px ;En este punto, la cuadrícula receptiva de cinco columnas está lista para funcionar. De hecho, si no desea utilizar la paginación o los bordes para las publicaciones de su blog, puede detenerse aquí.
Aquí está el resultado hasta ahora.
Personalizar elementos de cuadrícula
Luego, podemos agregar algunas líneas de CSS que apunten a los elementos de la cuadrícula para que estén alineados en la parte superior de cada fila y tengan algo de relleno.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Paginación de cuadrícula eliminada
Actualmente, si tiene la paginación activa en el módulo de blog, se tratará como el último elemento de cuadrícula en la cuadrícula CSS. Para eliminar completamente la paginación de la cuadrícula, podemos darle una posición absoluta y colocarla directamente debajo del módulo del blog. Para hacer esto, agregue el siguiente CSS:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
¡Veamos el resultado hasta ahora!
Consejo: ajuste el tamaño de todas las imágenes destacadas (o miniaturas)
En este punto, puede notar la inconsistencia en la altura de las imágenes que aparecen en cada publicación del blog. Si desea que todos tengan la misma altura, también puede usar CSS adicional para hacerlo.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
Con un margen interno superior del 56,25 %, deberíamos obtener una relación de aspecto de 16:9 para todas nuestras imágenes.
Siéntase libre de ajustar el relleno en el contenedor de la imagen para obtener la relación de aspecto que desea para su imagen.
Resultado final
Y aquí hay una vista previa final de nuestro módulo Blog con nuestras nuevas columnas y cuadrícula. Y como podemos ver, la cuadrícula responde completamente.
Descarga DIVI ahora!!!
Conclusión
Está hecho ! Le hemos mostrado en este tutorial cómo organizar las publicaciones de su blog en columnas.
Pudimos reestructurar todo el módulo Divi Blog en un diseño fluido de cinco columnas. Espero que esto le ahorre tiempo y le brinde más opciones para crear hermosas páginas de blog. También puedes consultar Cómo crear una página de blog con el módulo Blog de Divi
Ver tambien nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
