Saltar al contenido principal

Cómo personalizar las rejillas con un blog de Divi

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

El módulo de blog de divi 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 tu 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 de blog le permite personalizar el diseño general de su red. Puede asegurarse fácilmente de que todas sus tarjetas tengan el mismo color de fondo, fuente, márgenes, etc. Sin embargo, las opciones de estilo están limitadas al diseño de la cuadrícula como un todo, lo que hace que sea difícil. la aplicación de diseños múltiples o diferentes para las tarjetas dentro de la grilla.

Hoy, voy a mostrarte cómo orientar y aplicar más de un estilo a las tarjetas que componen la cuadrícula de tu blog con CSS personalizado. Te mostraré cómo aplicar un estilo diferente a cada otro mapa, para crear un efecto de tablero de ajedrez. También le mostraré cómo diseñar cada mapa de manera diferente por línea y le mostraré cómo orientar cualquier mapa individual.

Así que estos son ejemplos de 4 sobre cómo personalizar su blog, incluidos algunos efectos de desplazamiento que puede usar. Al final de esto tutorielpodrá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 recuadro.

Una vez que haya creado sus mensajes, cree una página nueva. 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 cambiar la configuración del módulo Blog. En Configuración general, cambie las siguientes configuraciones:

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

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

Guarde los cambios

Cómo entender el diseño "Grid" para el 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 páginas columnas. La siguiente es una ilustración de la cuadrícula del blog con los artículos del blog 12 divididos en tres columnas:

Las tarjetas de ticket de blog se ordenan de arriba hacia abajo en cada una de las columnas. Así que si usted quiere darles un número, hay que tener en cuenta 1 4 en cada longitud de arriba a abajo:

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 554.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Como 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 # 1: diseño de una cuadrícula a cuadros

Para este primer ejemplo, apuntaré a todas las cartas impares del módulo de blog (tarjetas 1 y 3) en la primera columna, dándoles un color de fondo gris oscuro. Para hacerlo, 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 = el ID del módulo de todo el blog

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

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

Ponga todo junto, esto selecciona las tarjetas con números impares en la primera columna del módulo de blog con la ID de la grilla.

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 de módulo del blog (incluido el título, las metas del artículo, los metalaces del artículo y el contenido del artículo) y les asigna el color blanco.

Aquí está el resultado:

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

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

#gridcard .column: artículo de último hijo: nth-child (impar) {background: #333; } #gridcard .Column: artículo de último hijo: nth-child (impar) .entry-título, #gridcard .Column: artículo de último hijo: nth-child (impar) .post-meta, #gridcard .Column: última- artículo secundario: nth-child (impar) un .post-meta, #gridcard .Column: artículo de último hijo: nth-child (impar) .post-contenido de p {color: #ffffff; }

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

Para la segunda columna (o media), apunte a las 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 (incluso) {background: #333; } #gridcard .Column: artículo nth-child (2): nth-child (incluso) .entry-título, #gridcard .Column: artículo nth-child (2): nth-child (incluso) .post-meta # gridcard .Column: nth-child (2) Artículo: nth-child (incluso) .post-meta tiene #gridcard .Column: nth-child (2) Artículo: nth-child (incluso) .post-contenido de 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 # 2: Agregar efectos de desplazamiento con el diseño a cuadros

Una vez que sepa cómo orientar las tarjetas de módulo de blog, puede cambiar creativamente uno de los elementos dentro de la tarjeta.

Para este ejemplo, voy a usar el diseño de tablero de ajedrez y esta vez voy a cambiar las imágenes a una de las cartas de color gris oscuro en blanco y negro al pasar el puntero sobre el mapa. Y, haré las imágenes de una de las tarjetas blancas más brillantes al pasar el cursor sobre el mapa. Para ello, agregue el siguiente CSS en el cuadro CSS personalizado (asegúrese de desactivar o cortar el otro código para que no sea incompatible con el nuevo):

#gridcard .Column: first-child artículo: nth-child (impar) #gridcard .Column: artículo de último hijo: nth-child (impar) #gridcard .Column: nth-child (2) Artículo: nth-child (incluso) {fondo: #333; } #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: primera artículo secundario: nth-child (impar) .post-meta ha #gridcard .Column: artículo primero en el niño: nth-child (impar) .post-p #gridcard contenido .Column: artículo de último hijo: nth-child (impar) .entry-título, #gridcard .Column: artículo de último hijo: nth-child (impar) .post-meta, #gridcard .Column: artículo de último hijo: nth-child (impar) tiene .post-meta , #gridcard .Column: artículo de último hijo: nth-child (impar) .post-contenido .Column p #gridcard: nth-child (2) Artículo: nth-child (incluso) .entry-título, #gridcard. columna: artículo nth-child (2): nth-child (incluso) .post-meta, #gridcard .Column: artículo nth-child (2): nth-child (incluso) .post-meta a, #gridcard .Column : artículo n-child (2): nth-child (even) .post-content p {color: #fff; } #gridcard .Column: nth-child (2) Artículo: nth-child (par): img vuelo estacionario, #gridcard .Column: first-child artículo: nth-child (impar): img vuelo estacionario, #gridcard .Column: última artículo -child: nth-child (impar): hover {-webkit img-filtro: escala de grises (1); filtro: escala de grises (1); } #gridcard .Column: nth-child (2) Artículo: nth-child (impar): img vuelo estacionario, #gridcard .Column: first-child artículo: nth-child (par): img vuelo estacionario, #gridcard .Column: última artículo -child: nth-child (incluso): hover {-webkit img-filtro: brillo (1.5); filtro: brillo (1.5); }

También puede agregar un efecto de inversión a las cartas para que cuando pasen el mouse sobre las cartas blancas, se vuelvan de color gris oscuro, y cuando pasa el mouse sobre las cartas más oscuras, se pongan blancas.

Agregue el siguiente CSS y CSS más arriba:

#gridcard .column article, #gridcard .column article img {-webkit-transition: todos los 0.8; -moz-transition: todos los 0.8; transición: todos los 0.8; } #gridcard .Column: first-child artículo: nth-child (impar): hover, #gridcard .Column: artículo de último hijo: nth-child (impar): hover, #gridcard .Column: nth-child (2) artículo: nth-child (par): hover {background: #fff; } #gridcard .Column: first-child artículo: nth-child (impar): hover .entry-título, #gridcard .Column: first-child artículo: nth-child (impar): flotar .post-meta, #gridcard. columna: artículo primero-niño: nth-child (impar): hover .post-meta tiene #gridcard .Column: primero-niño artículo: nth-child (impar): hover .post-contenido p #gridcard .Column: Artículo last-child: nth-child (impar): hover .entry-título, #gridcard .Column: artículo de último hijo: nth-child (impar): flotar .post-meta, #gridcard .Column: artículo last-child : nth-child (impar): libración .post-meta tiene #gridcard .Column: artículo de último hijo: nth-child (impar): libración .post-p #gridcard contenido .Column: nth-child (2) artículo: nth-child (par): hover .entry-título, .Column #gridcard: nth-child (2) artículo: nth-child (par): se ciernen .post-meta, #gridcard .Column: nth-child ( 2) Artículo: nth-child (par): se ciernen .post-meta tiene #gridcard .Column: nth-child (2) Artículo: nth-child (par): libración .post-contenido de p {color: #333; } #gridcard .Column: first-child artículo: nth-child (par): flotar, #gridcard .Column: artículo de último hijo: nth-child (par): hover, #gridcard .Column: nth-child (2) artículo: nth-child (impar): hover {background: #333; } #gridcard .Column: first-child artículo: nth-child (par): hover .entry-título, #gridcard .Column: artículo primero en el niño: nth-child (par): hover .post-meta, #gridcard. columna: first-child artículo: nth-child (par): libración .post-meta tiene #gridcard .Column: artículo primero en el niño: nth-child (par): libración .post-p #gridcard contenido .Column: Artículo last-child: nth-child (par): hover .entry-título, #gridcard .Column: artículo de último hijo: nth-child (par): se ciernen .post-meta, #gridcard .Column: artículo last-child : nth-child (par): hover .post-meta tiene #gridcard .Column: artículo de último hijo: nth-child (par): libración .post-contenido .Column p #gridcard: nth-child (2) artículo:, pase .entry-título #gridcard .Column:: artículo nth-child (2): nth-child (impar) nth-child (impar): hover .post-meta, #gridcard .Column: nth-child ( 2) Artículo: nth-child (impar): libración .post-meta tiene #gridcard .Column: nth-child (2) Artículo: nth-child (impar): libración .post-contenido de p {color: #fff; }

Ahora ir a ver el efecto en su blog.

Ejemplo # 3: Personalizar mapas por líneas

Para el tercer ejemplo, aplicaré el mismo fondo oscuro y el mismo texto en blanco para las tarjetas en cada otra fila (y no en la columna). Para hacer esto, debe apuntar todas las cartas pares en cada una de las columnas. Vaya al tema "Divi → Opciones" y asegúrese de desactivar o eliminar cualquier código CSS anterior que haya agregado desde el comienzo de este tutorial. A continuación, agregue el siguiente CSS:

#gridcard article: nth-child (par) {background-color: #333; } Artículo #gridcard: nth-child (incluso) .entry-título, el artículo #gridcard: nth-child (incluso) .post-meta, el artículo #gridcard: nth-child (incluso) .post-meta una sección #gridcard : nth-child (even) .post-content p {color: #fff; }

Este es el resultado:

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

Algunos de ustedes querrán elegir una tarjeta específica. Para hacer esto, necesita encontrar la identificación del 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 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 Herramientas de desarrollador que muestra tanto el html como el css de su Página web: encuentre la etiqueta del artículo que envuelve su artículo y anote el ID del artículo asignado. Este es el selector que necesita usar para orientar su tarjeta individual. haga clic derecho y haga clic en inspeccionado para encontrar el ID de 3466 posterior.

Como abajo:

Crea fácilmente tu blog con SiteGround

SiteGround le permite crear su blog de WordPress en unos pocos clics. Nombre de dominio gratis, alojamiento seguro, SSL, transferencia y mucho más ... [Recomendado]

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

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

Ahora el mapa tiene aplicado ese estilo específico.

¡Es todo!

Últimos pensamientos

Estos son solo algunos ejemplos de los muchos estilos diferentes que puede lograr utilizando este tipo de orientación por CSS de las tarjetas de módulo de Blog. Ya no tiene que mantener el mismo estilo para cada tarjeta. Puede diseñarlos como lo desee.

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

Otros tutoriales de Divi

Este artículo contiene los comentarios 12
  1. Hola,
    ¿Cómo puedo optimizar este diseño para móvil (tableta)? No tengo un Schabrettmuster pero diferentes colores para cada publicación de blog, en un orden específico. Por supuesto, esto cambia cuando nos movemos al móvil y los colores ya no están asociados con buenas publicaciones ...
    ¿Alguien tiene una idea aquí?

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

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

    1. Bonsoir,

      Nuestro Blog está traducido automáticamente del francés. 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.

    2. 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:

  4. ¡Hola
    Gracias por el artículo. Tengo una presentación en grilla (Theme Divi) 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 aparece en grande al comienzo de la artículo. ¿Hay alguna manera de darle el mismo tamaño que la miniatura o eliminarlo en la vista de artículo?
    gracias
    Patricio

    1. Bonsoir,

      Lo sentimos, pero nuestro soporte de Divi está limitado a nuestros tutoriales. Por favor, póngase en contacto con Eleganthemes SVP.

  5. Bonjourn, super artículo
    Intento mi suerte aquí, a veces cambiamos de tema durante semanas sin encontrar la respuesta, mientras que el mismo tema es lógico para los demás.

    Así que estoy buscando la solución para poner en marcha una cuadrícula de postes, solo compuesta de visuales pero de diferentes alturas, para ser más explícito, que una imagen en dos tenga el doble de altura que la siguiente.

    Una idea ?

    Julien

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
23 acciones
cuota14
Tweet2
Guardar7
WhatsApp