Cómo diseñar las tarjetas de cuadrícula del módulo Divi Blog (con 4 ejemplos)

Hoy le mostraré cómo orientar y aplicar más de un estilo a las tarjetas que componen la cuadrícula de su blog usando CSS personalizado. Te mostraré cómo aplicar un estilo diferente a cada otra tarjeta, creando un efecto a cuadros. También le mostraré cómo diseñar sus tarjetas de manera diferente por fila y cómo orientar y diseñar cualquier tarjeta individual por sí misma.

Incluyo 4 ejemplos de cómo diseñar sus tarjetas de cuadrícula, incluidos algunos efectos de desplazamiento que puede usar. Al final de este tutorial, estará preparado para crear increíbles diseños de cuadrículas de blogs para su próximo proyecto.

Empecemos.

Suscríbete a nuestro canal de Youtube

Configuración del diseño de cuadrícula del módulo de blog

Antes de comenzar a diseñar las tarjetas del módulo de blog, asegúrese de tener al menos 12 publicaciones creadas con una imagen destacada. Estoy usando el texto «lorem ipsum» para el contenido de mi publicación e imágenes simuladas de unsplash.com para mis imágenes destacadas.

Una vez que haya creado sus publicaciones, cree una nueva página. En su nueva página, implemente el módulo de blog en una columna de ancho completo dentro de una sección estándar:

Haga clic para editar la configuración del módulo de blog. En Configuración general, cambie las siguientes configuraciones:

Diseño: Cuadrícula

Número de publicación: 12

Mostrar imagen destacada: SÍ

Leer más Botón: ENCENDIDO

En CSS personalizado, ingrese «tarjeta de cuadrícula» en el cuadro de texto ID de CSS. Esta será una forma de personalizar solo este módulo de blog.

Guardar la salida

Comprender el diseño de cuadrícula del módulo de blog

Ahora que tiene la cuadrícula de su blog en su lugar, es importante comprender la estructura del diseño de la cuadrícula para que pueda ubicar las tarjetas de módulo de blog que desea editar.

La cuadrícula del blog está configurada con un diseño de tres columnas. La siguiente es una ilustración de la cuadrícula del blog con 12 publicaciones de blog divididas en las tres columnas:

Las tarjetas postales del blog están ordenadas de arriba a abajo en cada una de las columnas. Entonces, si tuviera que darles un número a cada uno, los numeraría del 1 al 4 de arriba a abajo en cada columna:

Dado que conoce el orden numérico de cada tarjeta de publicación de blog en cada columna, también puede identificar cada tarjeta como un número par o impar de la siguiente manera:

Ejemplos de diseños de cuadrícula

Ejemplo n.º 1: diseño de una cuadrícula de blog a cuadros

Para este primer ejemplo, me enfocaré en todas las tarjetas de módulos de blog impares (tarjetas 1 y 3) debajo de la primera columna dándoles un color de fondo gris oscuro. Para hacerlo, ve a Divi → Opciones de tema y agrega el siguiente CSS en el cuadro de texto CSS personalizado:

#gridcard .column:first-child article:nth-child(odd){
background: #333;
}

Aquí hay un desglose de lo que está haciendo este código:

#gridcard = el ID para todo el módulo de blog

.column:first-child = selecciona la primera columna en el módulo de blog

article:nth-child(odd) = selecciona todos los artículos impares (o tarjetas) en la columna

Poniéndolo todo junto, esto selecciona las tarjetas impares en la primera columna del módulo de blog con la ID «tarjeta de cuadrícula».

A continuación, agregue su texto blanco para pasar sobre el fondo oscuro agregando el siguiente CSS:

#gridcard .column:first-child article:nth-child(odd) .entry-title, 
#gridcard .column:first-child article:nth-child(odd) .post-meta, 
#gridcard .column:first-child article:nth-child(odd) .post-meta a, 
#gridcard .column:first-child article:nth-child(odd) .post-content p {
color: #ffffff;
}

Este código se dirige a todos los elementos de texto en las tarjetas del módulo de blog (incluido el título, el meta de la publicación, los meta enlaces de la publicación y el contenido de la publicación) y les asigna el color blanco.

Aquí está el resultado:

El siguiente paso para crear nuestro diseño a cuadros es apuntar a las tarjetas impares en la tercera columna y aplicar el fondo gris oscuro y el texto blanco tal como lo hizo en la primera columna. Agregue el siguiente CSS en el cuadro de texto CSS personalizado:

#gridcard .column:last-child article:nth-child(odd){
background: #333;
}
 
#gridcard .column:last-child article:nth-child(odd) .entry-title, 
#gridcard .column:last-child article:nth-child(odd) .post-meta, 
#gridcard .column:last-child article:nth-child(odd) .post-meta a, 
#gridcard .column:last-child article:nth-child(odd) .post-content p {
color: #ffffff;
}

Este código apunta a la columna «última» (en este caso, la tercera columna es la última columna) con el pseudo elemento «último hijo».

Para la segunda columna (o del medio), apunte a las cartas con números pares para completar el efecto a cuadros. Para hacer esto, necesitamos agregar el siguiente CSS:

#gridcard .column:nth-child(2) article:nth-child(even) {
background: #333;
}
 
#gridcard .column:nth-child(2) article:nth-child(even) .entry-title, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta a, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-content p  {
color: #fff;
}

Ahora vaya y consulte la página del blog para ver el diseño a cuadros de las tarjetas del módulo de blog.

Ejemplo n.º 2: agregar efectos de desplazamiento con el diseño a cuadros

Una vez que sepa cómo orientar sus tarjetas de módulo de blog, puede editar cualquiera de los elementos dentro de la tarjeta de manera creativa.

Para este ejemplo, estoy usando el diseño a cuadros y esta vez voy a cambiar las imágenes destacadas de la tarjeta gris oscuro a blanco y negro al pasar el mouse sobre la tarjeta. Y voy a hacer que las imágenes destacadas de la tarjeta blanca sean más brillantes al pasar el mouse sobre la tarjeta. Para hacer esto, agregue el siguiente CSS en el cuadro CSS personalizado (asegúrese de deshabilitar o eliminar el otro código para que no entre en conflicto con el nuevo):

#gridcard .column:first-child article:nth-child(odd), 
#gridcard .column:last-child article:nth-child(odd),
#gridcard .column:nth-child(2) article:nth-child(even)  {
background: #333;
}
 
#gridcard .column:first-child article:nth-child(odd) .entry-title, 
#gridcard .column:first-child article:nth-child(odd) .post-meta, 
#gridcard .column:first-child article:nth-child(odd) .post-meta a, 
#gridcard .column:first-child article:nth-child(odd) .post-content p, 
#gridcard .column:last-child article:nth-child(odd) .entry-title, 
#gridcard .column:last-child article:nth-child(odd) .post-meta, 
#gridcard .column:last-child article:nth-child(odd) .post-meta a, 
#gridcard .column:last-child article:nth-child(odd) .post-content p,
#gridcard .column:nth-child(2) article:nth-child(even) .entry-title, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-meta a, 
#gridcard .column:nth-child(2) article:nth-child(even) .post-content p  {
color: #fff;
}
 
#gridcard .column:nth-child(2) article:nth-child(even):hover img, 
#gridcard .column:first-child article:nth-child(odd):hover img, 
#gridcard .column:last-child article:nth-child(odd):hover img { 
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}
 
#gridcard .column:nth-child(2) article:nth-child(odd):hover img, 
#gridcard .column:first-child article:nth-child(even):hover img, 
#gridcard .column:last-child article:nth-child(even):hover img { 
  -webkit-filter: brightness(1.5);
  filter: brightness(1.5);
}

También puede agregar un efecto de inversión en las tarjetas para que cuando pase el mouse sobre las tarjetas blancas, se vuelvan de color gris oscuro, y cuando pase el mouse sobre las tarjetas de color gris oscuro, se vuelvan blancas.

Agregue el siguiente CSS además del CSS anterior:

#gridcard .column article, #gridcard .column article img {
    -webkit-transition: all 0.8s;
    -moz-transition: all 0.8s;
    transition: all 0.8s;
}
 
#gridcard .column:first-child article:nth-child(odd):hover, 
#gridcard .column:last-child article:nth-child(odd):hover,
#gridcard .column:nth-child(2) article:nth-child(even):hover {
background: #fff;
}
 
#gridcard .column:first-child article:nth-child(odd):hover .entry-title, 
#gridcard .column:first-child article:nth-child(odd):hover .post-meta, 
#gridcard .column:first-child article:nth-child(odd):hover .post-meta a, 
#gridcard .column:first-child article:nth-child(odd):hover .post-content p, 
#gridcard .column:last-child article:nth-child(odd):hover .entry-title, 
#gridcard .column:last-child article:nth-child(odd):hover .post-meta, 
#gridcard .column:last-child article:nth-child(odd):hover .post-meta a, 
#gridcard .column:last-child article:nth-child(odd):hover .post-content p,
#gridcard .column:nth-child(2) article:nth-child(even):hover .entry-title, 
#gridcard .column:nth-child(2) article:nth-child(even):hover .post-meta, 
#gridcard .column:nth-child(2) article:nth-child(even):hover .post-meta a, 
#gridcard .column:nth-child(2) article:nth-child(even):hover .post-content p  {
color: #333;
}
 
#gridcard .column:first-child article:nth-child(even):hover, 
#gridcard .column:last-child article:nth-child(even):hover,
#gridcard .column:nth-child(2) article:nth-child(odd):hover {
background: #333;
}
 
#gridcard .column:first-child article:nth-child(even):hover .entry-title, 
#gridcard .column:first-child article:nth-child(even):hover .post-meta, 
#gridcard .column:first-child article:nth-child(even):hover .post-meta a, 
#gridcard .column:first-child article:nth-child(even):hover .post-content p, 
#gridcard .column:last-child article:nth-child(even):hover .entry-title, 
#gridcard .column:last-child article:nth-child(even):hover .post-meta, 
#gridcard .column:last-child article:nth-child(even):hover .post-meta a, 
#gridcard .column:last-child article:nth-child(even):hover .post-content p,
#gridcard .column:nth-child(2) article:nth-child(odd):hover .entry-title, 
#gridcard .column:nth-child(2) article:nth-child(odd):hover .post-meta, 
#gridcard .column:nth-child(2) article:nth-child(odd):hover .post-meta a, 
#gridcard .column:nth-child(2) article:nth-child(odd):hover .post-content p  {
color: #fff;
}

Ahora ve a ver el efecto en tu blog.

Ejemplo n.º 3: Personalización de las tarjetas del módulo Blog por fila

Para el segundo ejemplo, voy a aplicar el mismo fondo oscuro y texto blanco para las tarjetas en cada fila (no columna). Para hacer esto, debe apuntar a todas las tarjetas con números pares en cada una de las columnas. Vaya a Divi → Opciones de tema y asegúrese de deshabilitar o eliminar cualquier CSS anterior que pueda tener en el cuadro CSS personalizado de este tutorial. Luego agregue el siguiente CSS:

#gridcard article:nth-child(even) {
    background-color: #333;
}
 
#gridcard article:nth-child(even) .entry-title, 
#gridcard article:nth-child(even) .post-meta, 
#gridcard article:nth-child(even) .post-meta a, 
#gridcard article:nth-child(even) .post-content p  {
color: #fff;
}

Así es como se ve el resultado:

Ejemplo n.º 4: diseño de una tarjeta de módulo de blog específica

Algunos de ustedes pueden querer seleccionar una tarjeta de módulo específica. Para hacer esto, debe encontrar la identificación de publicación única que se asigna automáticamente a cada una de sus tarjetas. Para este ejemplo, estoy usando el navegador Chrome.

Vaya a la página que muestra su módulo de blog y haga clic derecho en una de sus tarjetas. En el cuadro de opciones que aparece, seleccione «Inspeccionar» (algunos navegadores pueden tener «Inspeccionar elemento» o algo similar). Esto desplegará la ventana de herramientas de desarrollo que muestra tanto el html como el css de su página web. Busque la etiqueta del artículo que envuelve su tarjeta/publicación de módulo y observe el ID de publicación que se le asignó. Ese es el selector que desea usar para orientar su tarjeta individual. Para mi ejemplo, me desplacé sobre, hice clic con el botón derecho e inspeccioné la tarjeta con la ID «post- 3466”.

Mira aquí:

Para apuntar a esta tarjeta en CSS y dar solo a esta tarjeta una fuente blanca sobre un fondo gris oscuro, usaría el siguiente CSS:

#post-3466 {
background: #333333;
}
#post-3466 .entry-title, 
#post-3466 .post-meta, 
#post-3466 .post-meta a, 
#post-3466 .post-content p  {
color: #fff;
}

Ahora la tarjeta tiene ese estilo específico aplicado.

¡Eso es todo!

Pensamientos finales

Estos son solo algunos ejemplos de los muchos estilos diferentes que puede lograr utilizando este tipo de orientación CSS de las tarjetas del módulo Blog. Ya no está obligado a mantener el mismo estilo para cada tarjeta. Puedes diseñarlos como quieras.

¡Disfrutar! Espero escuchar algunas sugerencias e ideas geniales de usted en los comentarios.