El módulo Divi Blog tiene una opción de diseño en forma de una cuadrícula útil para las publicaciones de tu blog. La plantilla de cuadrícula organiza las publicaciones de su blog en cuadros o mapas que simplifican la visibilidad de los elementos en una pantalla en comparación con la vista estándar.

La configuración del módulo Blog le permite personalizar el diseño general de su red. Puede hacer que todas sus tarjetas tengan el mismo color de fondo, fuente, márgenes, etc. Sin embargo, las opciones de estilo se limitan al diseño de la cuadrícula en su conjunto, lo que dificulta aplicando diseños múltiples o diferentes a los mapas dentro de la cuadrícula.

Hoy les mostraré cómo apuntar y aplicar más de un estilo a las tarjetas que componen la cuadrícula. tu blog usando CSS personalizado. Te mostraré cómo aplicar un estilo diferente a cada tarjeta para crear un efecto de tablero de ajedrez. También te mostraré cómo diseñar cada tarjeta de manera diferente por fila y te mostraré cómo apuntar a cualquier tarjeta individual.

Estos son 4 ejemplos de cómo personalizar tu blog, incluidos algunos efectos de desplazamiento que puedes usar. Al final de este tutorial, podrás crear diseños increíbles para tu blog.

Otros tutoriales sobre el tema Divi

Vamos a empezar.

Configuración de cuadrícula de diseño para tu blog

Antes de comenzar con el diseño de las tarjetas de módulo de blog, asegúrese de tener al menos artículos 12 ya creados con una imagen en el cuadro.

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

Configurar el diseño de un blog divi

Haga clic para editar la configuración del módulo Blog. En Configuración general, cambie la siguiente configuración:

  • Diseño: Cuadrícula (Grid)
  • Número de artículos: 12
  • Mostrar imagen destacada: SÍ
  • Button Leer más: EN

Configuración de cuadrícula divi

En CSS personalizado, ingrese "gridcard" en el cuadro de texto ID de CSS. Será una forma de personalizar solo este módulo de blog.

Gridcard css divi

Guarde los cambios

Cómo entender el diseño de "cuadrícula" del blog

Ahora que tiene su red de blog en el lugar, es importante comprender la estructura de la disposición de la red para que pueda localizar los mapas del módulo de blog en el que desea personalizar.

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

Presentación del diseño de cuadrícula divi

Las tarjetas de entradas del blog se ordenan de arriba a abajo en cada una de las columnas. Por lo tanto, si desea darles un número, deberá contar 1 a 4 en cada longitud de arriba a abajo:

Contar artículos divi

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

Divi números pares e impares

Ejemplo Designs puerta

Ejemplo n ° 1: Diseño de una cuadrícula "a cuadros"

Para este primer ejemplo, apuntaré a todas las tarjetas impares en el módulo del blog (tarjetas 1 y 3) en la primera columna, dándoles un color de fondo gris oscuro. Para hacer esto, vaya a "Divi → Opciones de tema" y agregue el siguiente CSS en el cuadro de texto CSS personalizado:

#gridcard .Column: first-child artículo: nth-child (impar) {background: #333; }

He aquí un desglose de lo que hace este código:

#gridcard = la identificación de todo el módulo del blog

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

post: nth-child (impar) = selecciona todos los elementos impares (o tarjetas) en la columna

Poniéndolo todo junto, esto selecciona las tarjetas impares en la primera columna del módulo del blog con el ID "gridcard".

A continuación, añadir el texto blanco que irá en el fondo oscuro añadiendo el siguiente CSS:

#gridcard .Column: first-child artículo: nth-child (impar) .entry-título, #gridcard .Column: first-child artículo: nth-child (impar) .post-meta, #gridcard .Column: first-child artículo: nth-child (impar) un .post-meta, #gridcard .Column: first-child artículo: nth-child (impar) .post-contenido de p {color: #ffffff; }

Este código se dirige a todos los elementos de texto en las tarjetas del módulo del blog (incluidos el título, las metas de la publicación, los metavínculos de la publicación y contenido del artículo) y les da el color blanco.

Aquí está el resultado:

Personalización de cuadrícula divi impar

El siguiente paso en la creación de nuestro diseño de tablero de ajedrez 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: artículo del último hijo: n-ésimo hijo (impar) {fondo: # 333; } #gridcard .column: artículo del último hijo: nth-child (impar) .entry-title, #gridcard .column: artículo del último hijo: nth-child (impar) .post-meta, #gridcard .column: last- artículo hijo: nth-child (impar) .post-meta a, #gridcard .column: artículo del último hijo: nth-child (impar) .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 elemento de apodo "último hijo".

Para la segunda columna (o media), apunte a cartas pares para completar el efecto de tablero de ajedrez. Para hacer esto, necesitamos agregar el siguiente CSS:

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

Ahora ir a ver a la página del blog para ver el diseño de tablero de ajedrez de las tarjetas del módulo Blog.

Diseño divi de cuadrícula de tablero de ajedrez

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

Una vez que sepa cómo orientar las tarjetas del módulo de blog, puede cambiar cualquiera de los elementos dentro de la tarjeta de forma creativa.

Para este ejemplo, voy a usar el diseño de tablero de ajedrez y esta vez voy a cambiar las imágenes destacadas de mapas de gris oscuro a blanco y negro al pasar el cursor sobre el mapa. Y voy a hacer que las imágenes de la portada de las tarjetas blancas sean más brillantes cuando coloque el cursor sobre la tarjeta. Para hacer esto, agregue el siguiente CSS en el área CSS personalizado (asegúrese de deshabilitar o cortar el otro código para que no sea incompatible con el nuevo):

#gridcard .column: artículo del primer hijo: nth-child (impar), #gridcard .column: artículo del último hijo: nth-child (impar), #gridcard .column: nth-child (2) artículo: nth-child (par) {fondo: # 333; } #gridcard .column: artículo del primer hijo: nth-child (impar) .entry-title, #gridcard .column: artículo del primer hijo: nth-child (impar) .post-meta, #gridcard .column: first- artículo hijo: nth-child (impar) .post-meta a, #gridcard .column: artículo del primer hijo: nth-child (impar) .post-content p, #gridcard .column: último artículo secundario: nth-child (impar) .entry-title, #gridcard .column: artículo del último hijo: nth-child (impar) .post-meta, #gridcard .column: artículo del último hijo: nth-child (impar) .post-meta a , #gridcard .column: artículo del último hijo: nth-child (impar) .post-content p, #gridcard .column: nth-child (2) artículo: nth-child (par) .entry-title, #gridcard. columna: nth-child (2) artículo: nth-child (even) .post-meta, #gridcard .column: nth-child (2) artículo: nth-child (even) .post-meta a, #gridcard .column : nth-child (2) artículo: nth-child (even) .post-content p {color: #fff; } #gridcard .column: nth-child (2) artículo: nth-child (even): hover img, #gridcard .column: primer artículo secundario: nth-child (impar): hover img, #gridcard .column: last -artículo secundario: nth-child (impar): hover img {-webkit-filter: escala de grises (1); filtro: escala de grises (1); } #gridcard .column: nth-child (2) artículo: nth-child (impar): hover img, #gridcard .column: primer artículo secundario: nth-child (even): hover img, #gridcard .column: last -artículo secundario: nth-child (par): hover img {-webkit-filter: brillo (1.5); filtro: brillo (1.5); }

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

Agregue el siguiente CSS y CSS más arriba:

#gridcard .artículo de columna, #gridcard .artículo de columna img {-webkit-transición: todos los 0.8s; -moz-transición: todos los 0.8; transición: todos los 0.8; } #gridcard .column: artículo del primer hijo: nth-child (impar): hover, #gridcard .column: artículo del último hijo: nth-child (impar): hover, #gridcard .column: nth-child (2) artículo: nth-child (par): hover {background: #fff; } #gridcard .column: artículo del primer hijo: nth-child (impar): hover .entry-title, #gridcard .column: artículo del primer hijo: nth-child (impar): hover .post-meta, #gridcard. columna: artículo del primer hijo: nth-child (impar): hover .post-meta a, #gridcard .column: artículo del primer hijo: nth-child (impar): hover .post-content p, #gridcard .column: artículo del último hijo: nth-child (impar): hover .entry-title, #gridcard .column: artículo del último hijo: nth-child (impar): hover .post-meta, #gridcard .column: artículo del último hijo : nth-child (impar): hover .post-meta a, #gridcard .column: artículo del último hijo: nth-child (impar): hover .post-content p, #gridcard .column: nth-child (2) artículo: nth-child (par): hover .entry-title, #gridcard .column: nth-child (2) artículo: nth-child (even): hover .post-meta, #gridcard .column: nth-child ( 2) artículo: nth-child (par): hover .post-meta a, #gridcard .column: nth-child (2) artículo: nth-child (par): hover .post-content p {color: # 333; } #gridcard .column: artículo del primer hijo: nth-child (par): hover, #gridcard .column: artículo del último hijo: nth-child (even): hover, #gridcard .column: nth-child (2) artículo: nth-child (impar): hover {background: # 333; } #gridcard .column: artículo del primer hijo: nth-child (par): hover .entry-title, #gridcard .column: artículo del primer hijo: nth-child (even): hover .post-meta, #gridcard. columna: artículo del primer hijo: nth-child (par): hover .post-meta a, #gridcard .column: artículo del primer hijo: nth-child (par): hover .post-content p, #gridcard .column: artículo del último hijo: nth-child (par): hover .entry-title, #gridcard .column: artículo del último hijo: nth-child (even): hover .post-meta, #gridcard .column: artículo del último hijo : nth-child (par): hover .post-meta a, #gridcard .column: artículo del último niño: nth-child (even): hover .post-content p, #gridcard .column: nth-child (2) artículo: nth-child (impar): hover .entry-title, #gridcard .column: nth-child (2) artículo: nth-child (impar): hover .post-meta, #gridcard .column: nth-child ( 2) artículo: nth-child (impar): hover .post-meta a, #gridcard .column: nth-child (2) artículo: nth-child (impar): hover .post-content p {color: #fff; }

Ahora ve a ver el efecto en tu blog.

Personalización de las cuadrículas al pasar el cursor divi

Ejemplo # 3: Personalizar mapas por líneas

Para el tercer ejemplo, voy a aplicar el mismo fondo oscuro y texto blanco a las tarjetas en cada dos filas (no columnas). Para hacer esto, debe apuntar a todas las tarjetas pares en cada una de las columnas. Vaya a "Divi → Opciones" del tema y asegúrese de deshabilitar o eliminar cualquier código CSS anterior que haya agregado desde el inicio de este tutorial. Luego agregue el siguiente CSS:

# artículo de la tarjeta gráfica: 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 (par) .post-content p {color: #fff; }

Aquí está el resultado:

Resultado de la configuración por línea divi

Ejemplo # 4: Diseño de un mapa de cuadrícula específico

Algunos de ustedes pueden querer elegir una tarjeta específica. Para hacer esto, necesita encontrar el ID de artículo único 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 el módulo de su 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 Herramientas para desarrolladores que muestra tanto el html como el css de su página web. Busque la etiqueta de artículo que envuelve su artículo y anote el ID de artículo asignado. Este es el selector que debe utilizar para orientar su tarjeta individual. En mi ejemplo, he haga clic derecho y haga clic inspeccionado para encontrar la identificación "post-3466".

Como abajo:

Modificación de un solo artículo

Para hacer referencia a esta tarjeta CSS para darle un fondo gris con una fuente blanca, se debe utilizar el siguiente CSS:

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

Ahora el mapa tiene ese estilo específico aplicado.

¡Es todo!

Consideraciones 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 de Blog. Ya no tienes que mantener el mismo estilo para cada carta. Puedes diseñarlos como quieras.

Si tienes alguna pregunta o sugerencia no dude en ofrecerles a mí.

[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Otros tutoriales de Divi