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
- 5 sitios web para su uso restaurante temático Divi
- Cómo añadir texto en un producto Divi WooCommerce
- Cómo cambiar el color del menú entre páginas en Divi
- Características que no conoce sobre Divi
- Cómo crear un control deslizante en Divi
- Cómo editar un rol de usuario en 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:
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
En CSS personalizado, ingrese "gridcard" en el cuadro de texto ID de CSS. Será una forma de personalizar solo este módulo de blog.
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:
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:
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:
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:
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.
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.
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:
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:
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
- 5 sitios web para su uso restaurante temático Divi
- Cómo agregar texto en un producto Divi WooCommerce
- Cómo cambiar el color del menú entre páginas Divi
- Cómo personalizar las cuadrículas de un blog con Divi
- Cómo utilizar la función de editor Divi en WordPress
- Cómo crear un control deslizante Divi a pantalla completa
- Cómo cambiar el color de los menús entre páginas Divi
- Características que probablemente no conozcas sobre Divi
- Cómo usar Divi Builder en WordPress
- Cómo usar el módulo de desplazamiento de video Divi
- Cómo usar el módulo Divi Builder Flip
- Cómo agregar un módulo testimonial en Divi Builder
- Cómo usar el módulo de texto Divi
- Cómo crear un control deslizante en Divi
- Cómo editar un rol de usuario Divi
- Cómo usar el módulo de Divi Social Media
- Cómo usar el módulo de tienda en el tema WordPress Divi
- Cómo usar el módulo de la barra lateral Divi
- Cómo usar el Módulo Divi Price Table
- Cómo usar el módulo de título de las publicaciones de Divi
- Cómo agregar un módulo de video de Divi
- Cómo usar el módulo de navegación del artículo
- Cómo usar el módulo de búsqueda Divi
- Cómo usar el módulo Divi wallet
- Cómo usar el módulo de persona en Divi Builder
- Cómo usar el módulo de billetera con filtro Divi
- Cómo usar el módulo deslizante de ancho completo
- Cómo usar el Módulo de imagen Divi Builder
- Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
- Cómo usar el módulo de la galería de imágenes
- Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
- Cómo utilizar el módulo de cartera de ancho completo de Divi
- Cómo usar el módulo de encabezado de ancho completo Divi
- Cómo usar el módulo Divi Counter
- Cómo usar el control deslizante de artículos en Divi Builder
- Cómo usar el módulo Divi Email Optin
Buenos dias ! ¿Sabes si es posible modificar el número de columnas de este objeto Blog?
Me gustaría que cada tarjeta se muestre en todo su ancho. Gracias !
Hola,
Traté de mostrar las publicaciones del blog en "cuadrícula" con la identificación "gridcard" pero no funciona. Puede ayudarme ?
Bonsoir,
Lo siento por la respuesta tardía.
¿Puede reformular su solicitud, por favor?
Hola,
Realmente soy un principiante pero, gracias a los tutoriales en línea, me las arreglo para construir un buen blog.
De verdad, gracias por este porque tuve que copiar los códigos y todo salió perfectamente, estoy encantado con el resultado.
Gracias de nuevo, que tengas un buen día 🙂
Te lo ruego. Gracias por leernos
Bonsoir,
el blog DIVI, junto al nombre del autor, coloca la preposición "de" (por ejemplo, Stefano). Me gustaría saber si es posible cambiarlo a "de"
Hola,
Sí, es posible cambiar este elemento con Divi.
Hola Thierry
Super tutorial
Me gustaría saber si es posible aumentar el tamaño de la imagen destacada.
Me gustaría aplicar este estilo a mi blog.
Merci
Hola,
Si es posible.
Hola,
¿Cómo puedo optimizar este diseño para dispositivos móviles (tabletas)? No tengo un Schabrettmuster, pero diferentes colores para cada publicación de blog, en un orden específico. Por supuesto, eso cambia cuando cambia a un dispositivo móvil y los colores ya no están asociados con las publicaciones correctas ...
¿Alguien tiene una idea aquí?
Hola,
No desafortunadamente.
Hola,
¡Gracias por este artículo! También me gustaría modificar el "leer más" al final de los artículos.
¿Podría darnos ejemplos de código CSS para cambiar el texto y ponerlo en un botón centrado agradable, por ejemplo?
En vous remerciant.
Sophie
Hola 🙂 Para cambiar el texto del botón "leer más", se hace en Configuración del blog > Estilo > Leer más texto. Puedes modificar la tipografía y el texto del "leer más". Sin embargo, no sé cómo hacer un botón con él. ¡Buena configuración!
Cuándo lo pones en el CSS personalizado, por ejemplo:
#gridcard .Column: first-child art: nth-child (impar) {background: #333; }
da error como el seigue: Se esperaba una FUNCIÓN o IDENT después de dos puntos en la línea 1, col 18
Saludos
Bonsoir,
Nuestro Blog está traducido automáticamente del francés. Por lo tanto, los invito a elegir el idioma francés en el widget de idioma ubicado en la barra superior de nuestro blog y se mostrará el código CSS correcto.
usted escribió un artículo mal escrito, debería ser: artículo del primer hijo: no arte del primer hijo:
El artículo mal escrito debe ser: artículo del primer hijo: no arte del primer hijo:
Hola,
70 otros idiomas.
¡Hola
Gracias por el artículo. Tengo una presentación en cuadrícula (Divi Theme) Tengo miniaturas (fotos) para la presentación de los artículos, por otro lado cuando hago clic para tener acceso al artículo, la imagen se muestra en grande al comienzo del 'artículo. ¿Hay alguna manera de hacerlo del mismo tamaño que la miniatura o eliminarlo de la vista de publicación?
Merci
Patrick
Bonsoir,
Lo sentimos, pero nuestro soporte de Divi está limitado a nuestros tutoriales. Por favor, póngase en contacto con Eleganthemes SVP.
Bonjourn, super artículo
Prueba suerte aquí, a veces dimos vueltas sobre un tema durante semanas sin encontrar la respuesta cuando el mismo tema tiene sentido para otros.
Por lo tanto, estoy buscando la solución para configurar una cuadrícula de publicaciones, solo compuesta de imágenes pero de diferentes alturas, para ser más explícito, que una de cada dos imágenes tiene el doble de altura que la imagen al lado.
Una idea ?
Julien
Hola Julian,
Te recomiendo que te pongas en contacto con el equipo de DIVI. Es más conveniente en este caso.
Gran tutorial! Voy a probar ca este fin de semana para mi sitio.
usted tiene una solución para eliminar los extractos de las rejillas?
Merci à vous
Sofhy