Actualice su página de blog Divi con un fondo diseñado para el diseño de cuadrícula

Crear un diseño de cuadrícula para su blog es una excelente manera de organizar sus publicaciones. Divi lo hace extremadamente fácil con el Módulo Blog. En solo unos segundos, puede implementar un diseño de cuadrícula de blog funcional en su página. E incluso puede utilizar las muchas configuraciones de diseño para personalizar el aspecto de la cuadrícula de su blog de muchas maneras. Pero hoy, estoy llevando las cosas a otro nivel.

En este tutorial, le mostraré cómo puede crear múltiples capas de fondo para enmarcar su cuadrícula de blog de tres columnas con un diseño hermoso y simétrico. Con suerte, puede usar estas técnicas de diseño para crear una página de blog que garantice impresionar.

Empecemos.

Suscríbete a nuestro canal de Youtube

Vista previa del diseño de diseño de cuadrícula

Aquí un adelanto del diseño.

Empezando

Todo lo que necesitas es Divi para este tutorial. Una vez que tenga el tema Divi instalado y activo, cree una nueva página y asígnele un título a la página. Luego implemente Visual Builder. Seleccione «Elegir un diseño prefabricado» y luego cargue el diseño de la página del blog del terapeuta en su página y publíquelo.

Asegúrate de tener al menos 6 publicaciones de blog con contenido e imágenes destacadas. Si no lo hace, las publicaciones del blog no aparecerán en la página.

Ahora está listo para comenzar a editar.

Agregue la primera capa de fondo a la sección

El diseño personalizado se agregará a la segunda sección del diseño que contiene el módulo de blog. Para crear nuestra primera capa de fondo, vamos a diseñar la configuración de la sección de la siguiente manera:

Color de fondo: #5873dd

Relleno personalizado (escritorio): 4vw arriba, 4vw abajo, 7vw izquierda


Relleno personalizado (tableta): 0vw izquierda

El relleno izquierdo personalizado de 7vw básicamente compensa el contenido de la sección (la fila) para una apariencia única. Si desea que todo sea agradable y centrado para su diseño, puede omitirlo.

Agregue la segunda y tercera capa de fondo a la fila

La segunda y tercera capas de fondo se crearán agregando un color de fondo a toda la fila y luego un degradado de fondo a la columna dentro de la fila.

Abra la configuración de la fila y actualice lo siguiente:

Color de fondo: rgba(255,255,255,0.3)

Columna 1 Color de fondo izquierdo: rgba(255,255,255,0.0)


Columna 1 Color de fondo derecho: rgba(255,255,255,0.3)


Dirección de gradiente de columna: 90 grados


Posición de inicio de columna: Posición de inicio de columna: 33.3%


Fin de columna Posición: 0%

Tenga en cuenta que estoy usando un color blanco con un 30% de opacidad para crear un grado constante de colores de superposición blancos que permitan que se vea el fondo de la sección azul. Como cada color se superpone, el usuario ve una versión un 30 % más clara del fondo de la sección azul. De esta manera, si alguna vez desea cambiar el esquema de color del diseño, todo lo que tendrá que hacer es cambiar el color de fondo de la sección.

Establecer la posición de inicio del degradado de la columna en 33,3 % garantiza que el degradado se dividirá entre la primera y la segunda columna de la cuadrícula de mi blog. Pero esto no parecerá correcto inicialmente porque todavía necesitamos darle a nuestra fila un ancho personalizado del 100 %, entre otras cosas.

Ancho personalizado: 100 %

Ancho del canalón: 4


Relleno personalizado: 4 % superior, 4 % inferior

El relleno personalizado expone las capas verticalmente para agregar al diseño general.

Guardar ajustes.

Agregar la cuarta capa de fondo a nuestro módulo de blog

Aquí es donde todo encaja. La cuarta y última capa será un degradado de fondo agregado a nuestro módulo de blog. Luego, con el espaciado exacto agregado, el módulo de blog se alineará perfectamente con nuestras capas de fondo. También agregaré algunos ajustes de estilo a las tarjetas del blog para agregar algunos toques finales.

Vaya a la configuración del módulo de blog y actualice lo siguiente:

Color de fondo del mosaico de cuadrícula: rgba (255,255,255,0.7)

Para agregar el degradado de fondo, puede ir a la configuración de la fila y copiar el degradado de fondo de la columna 1 y luego volver a la configuración del blog y pegarlo usando las opciones del botón derecho.

Luego actualice lo siguiente:

Posición inicial: 66,6%

Margen personalizado: 4 % superior, 4 % inferior

Relleno personalizado: 4 % superior, 4 % inferior, 4 % izquierda, 4 % derecha

Como puede ver, el valor de longitud del 4 % se usa en todas partes para dar el mismo espacio a nuestro diseño. Y hay más en este valor del 4% de lo que parece. Si recuerda, configuramos nuestra fila para que tenga un ancho de canal personalizado de 4. En Divi, si agrega un módulo de blog con un diseño de cuadrícula a una fila con un ancho de canal de 4, las columnas de la cuadrícula de su blog estarán separadas horizontalmente en un 8 %. de margen Entonces, agregar el 4% del relleno izquierdo y derecho al módulo creará el espacio exacto que necesitamos.

En este punto, hemos terminado con el diseño de fondo. Mira lo que tenemos hasta ahora.

Ahora todo lo que tenemos que hacer es agregar algunos toques finales al módulo de blog.

Toques finales

En la pestaña de diseño de la configuración del módulo de blog, actualice lo siguiente:

Color del cuerpo del texto: rgba(0,0,0,0.8)

Color del metatexto: rgba(0,0,0,0.5)


Estilo de fuente de paginación: Subrayado


Color de subrayado de paginación: rgba(166,221,217,0.39)


Color de texto de paginación: #ffffff


Paginación Tamaño del texto: 3vw (escritorio), 40 px (tableta), 30 px (teléfono inteligente)

Si desea darle a su diseño un poco más de textura, puede agregar fondos divisorios a su sección.

Parte superior del divisor: Ver captura de pantalla

Color del divisor: rgba(88,115,221,0.5)


Altura del divisor: 32vw


Repetición horizontal del divisor: 0.3X

Parte inferior del divisor: Ver captura de pantalla

Color del divisor: rgba(88,115,221,0.5)


Altura del divisor: 43vw


Repetición horizontal del divisor: 0.3X

Ahora mira el resultado final…

Diseño de respuesta

Las capas que enmarcan las columnas de la cuadrícula se escalan perfectamente en todos los tamaños de navegadores de escritorio.

Aunque las capas de fondo no se ajustarán a dos columnas en la tableta y una columna en el teléfono inteligente, el resultado sigue siendo muy simétrico y proporciona un diseño sutil de cuadrícula rota que funciona bien.

Así es como se verá en el móvil…

Pensamientos finales

Esta técnica de fondo en capas es realmente una forma de crear la impresión de tener fondos de tres columnas donde en realidad solo hay una columna (ya que el módulo de blog se encuentra en una columna). Seguro que esto es posible hacerlo en CSS personalizado a nivel de módulo de blog, pero pensé que sería más útil dar una solución creativa usando Divi Builder. Y las variaciones del diseño también se pueden usar como telón de fondo de otro contenido.

Traté de explicar el razonamiento detrás de algunos de los estilos usados ​​en este tutorial, pero si tienes preguntas, soy todo oídos. Y, para aquellos de ustedes que esperan mejorar el diseño de la cuadrícula de su blog, esperamos que esta publicación al menos les brinde algunos consejos de diseño para hacer precisamente eso.

Espero escuchar de usted en los comentarios.

¡Salud!