Descargue 5 estilos de fondo vibrantes para sus publicaciones de blog Divi


¡Estamos aquí con otra descarga gratuita de Divi! Esta vez, le damos una muestra de 5 estilos de fondo vibrantes diferentes que puede usar para publicaciones de blog en su sitio web. Puede combinar fácilmente estos estilos de fondo en el mismo sitio web para dar un aspecto diferente a las diversas publicaciones de blog que publica. Además de ofrecerle todos estos estilos de fondo vibrantes de forma gratuita, también lo guiaremos a través de la creación de la plantilla de publicación de blog que puede reutilizar para cualquier publicación de blog que cree y publique en su sitio web.

¡Hagámoslo!

Avance

Comencemos echando un vistazo a los 5 resultados diferentes y la vista en diferentes tamaños de pantalla.

estilos de fondo vibrantes

Descarga The Vibrant Background Styles GRATIS

Para poner sus manos sobre los estilos de fondo vibrantes, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Paletas de colores

Para cada uno de los estilos de fondo, puede encontrar una paleta de colores a continuación. Nos referiremos al número de color a lo largo del tutorial, así que elija el estilo de fondo y la paleta que desea crear y continúe desde allí.

Paleta n. ° 1

estilos de fondo vibrantes

  • Color # 1: # 886DFC
  • Color # 2: # 7C56BD
  • Color # 3: # 372C66

Paleta n. ° 2

estilos de fondo vibrantes

  • Color # 1: # 42bcb2
  • Color # 2: # 9CFEF0
  • Color # 3: # a8baf7

Paleta # 3

estilos de fondo vibrantes

  • Color # 1: # 96b2ff
  • Color # 2: # d999ff
  • Color # 3: # 357ff4

Paleta # 4

estilos de fondo vibrantes

  • Color # 1: # B981FF
  • Color # 2: # 24EEFA
  • Color # 3: # be7bf2

Paleta # 5

estilos de fondo vibrantes

  • Color # 1: # e02b20
  • Color # 2: # f6ff56
  • Color # 3: # db241e

Crear nueva publicación

Agregar detalles y habilitar Divi Builder

¡Vamos a empezar desde el principio! Agregue una nueva página a su sitio web de WordPress, agregue el título de su página, cargue una imagen destacada y habilite Divi Builder.

estilos de fondo vibrantes

Configuración de página Divi

Antes de cambiar a Visual Builder, realice algunos cambios en el cuadro Configuración de página Divi en la parte superior derecha de la página en la que se encuentra. Esto asegurará que esté trabajando completamente con Divi para crear el diseño de la publicación del blog. Si planea reutilizar la plantilla en su sitio web, tendrá que recordar modificar esta configuración cada vez que cree una nueva publicación de blog.

  • Diseño de página: ancho completo
  • Título de la publicación: Ocultar

estilos de fondo vibrantes

Cambiar a Visual Builder

Ahora puede cambiar a Visual Builder.

estilos de fondo vibrantes

Una vez que lo haga, aparecerán tres opciones en su pantalla. Haga clic en el botón azul para comenzar a construir desde cero.

estilos de fondo vibrantes

Crear diseño de publicación de blog

Agregar la sección n. ° 1

Imagen de fondo

¡Empecemos a crear la plantilla! Comience con una sección vacía en la parte superior. Abra la configuración de la sección, vaya a la configuración de fondo y cargue un estilo de fondo de su elección. Puede encontrar las 5 variaciones yendo a la carpeta descargada> Hero.

  • Tamaño de la imagen de fondo: Portada
  • Posición de la imagen de fondo: Centro superior

estilos de fondo vibrantes

Espaciado

Para permitir que la imagen de fondo se muestre por completo, juegue con el relleno superior de la sección.

  • Acolchado superior: 660px

estilos de fondo vibrantes

Agregar sección n. ° 2

Espaciado

Justo debajo de la sección que acaba de agregar, continúe y agregue otra. Abra la configuración, vaya a la configuración de espaciado y elimine todo el relleno personalizado predeterminado.

  • Relleno superior: 0px
  • Acolchado inferior: 0px

estilos de fondo vibrantes

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

estilos de fondo vibrantes

Espaciado

Elimine todo el relleno predeterminado en la parte inferior de la siguiente sección.

  • Acolchado inferior: 0px

estilos de fondo vibrantes

Agregar módulo de título de publicación

Elementos

¡Es hora de comenzar a agregar módulos! En esta fila, solo necesitaremos un módulo de título de la publicación. Una vez que haya agregado uno, elija los elementos que desea que aparezcan.

estilos de fondo vibrantes

Configuración del texto del título

Luego, vaya a la configuración del texto del título y realice algunos cambios.

  • Fuente del título: Abril Fatface
  • Alineación del texto del título: centro
  • Tamaño del texto del título: 73 px (escritorio), 50 px (tableta), 40 px (teléfono)

estilos de fondo vibrantes

Configuración de metatexto

La configuración del meta texto también debe modificarse.

  • Alineación de metatexto: centro
  • Color del meta texto: Color n. ° 1 (Buscar en la paleta)
  • Tamaño del metatexto: 18px
  • Altura de la línea meta: 3em

estilos de fondo vibrantes

Agregar la sección # 3

Imagen de fondo

La última sección de esta página contendrá el contenido de la publicación del blog y el CTA. Comience cargando el estilo de fondo de su elección. Puede encontrar las variaciones yendo a la carpeta descargada> Cuerpo. Una vez que cargue la imagen de fondo, realice algunos cambios en la configuración de fondo.

  • Tamaño de la imagen de fondo: tamaño real
  • Posición de la imagen de fondo: Centro superior
  • Repetición de imagen de fondo: espacio

estilos de fondo vibrantes

Espaciado

Elimine todo el relleno superior predeterminado de esta sección para eliminar todos los espacios en blanco entre esta sección y la anterior.

  • Relleno superior: 0px

estilos de fondo vibrantes

Agregar fila n. ° 1

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

estilos de fondo vibrantes

Color de fondo

Agregue un color de fondo ligeramente transparente a la fila siguiente.

  • Color de fondo: rgba (255,255,255,0.86)

estilos de fondo vibrantes

Espaciado

Elimine aquí también el relleno personalizado predeterminado.

  • Relleno superior: 0px
  • Acolchado inferior: 0px

estilos de fondo vibrantes

Agregar módulo de texto

Agregar contenido

Continúe agregando un módulo de texto a la fila que agregó. Aquí, puede agregar todo el contenido de la publicación de blog que desee y usar los diferentes estilos de texto para obtener el resultado deseado. En la pantalla de impresión a continuación, estamos usando títulos y párrafos.

estilos de fondo vibrantes

Configuración de texto

Vaya a la configuración de texto y realice algunos cambios allí.

  • Tamaño del texto: 21px (escritorio), 18px (tableta), 15px (teléfono)
  • Altura de la línea de texto: 2em

estilos de fondo vibrantes

Configuración de rumbo

La configuración del texto del encabezado también debe modificarse.

  • Fuente de encabezado: Abril Fatface
  • Tamaño del texto del encabezado: 46 px (escritorio), 40 px (tableta), 30 px (teléfono)
  • Altura de la línea de rumbo: 1.5em

estilos de fondo vibrantes

Espaciado

Agregue algunos valores de relleno personalizados a continuación.

  • Relleno superior: 80px
  • Acolchado inferior: 80px
  • Relleno izquierdo: 80 px (escritorio), 40 px (tableta), 30 px (teléfono)
  • Relleno derecho: 80 px (escritorio), 40 px (tableta), 30 px (teléfono)

estilos de fondo vibrantes

Sombra de la caja

Para terminar, agregue una sombra de cuadro sutil al Módulo de texto. Esto aportará algo de profundidad a la plantilla de publicación de blog.

  • Fuerza de desenfoque de sombra de caja: 80px
  • Fuerza de propagación de la sombra de caja: -14px

estilos de fondo vibrantes

Agregar fila n. ° 2

Estructura de la columna

Continúe agregando una nueva fila justo debajo de la anterior usando una columna.

estilos de fondo vibrantes

Espaciado

Elimine también todo el relleno personalizado predeterminado de esta fila.

  • Relleno superior: 0px
  • Acolchado inferior: 0px

estilos de fondo vibrantes

Agregar módulo de opción de correo electrónico

Agregar contenido

Luego, agrega tu CTA. Estamos utilizando un módulo de opción de correo electrónico. Después de agregarlo, modifique el contenido.

estilos de fondo vibrantes

Campos

Solo usamos la dirección de correo electrónico en este módulo, así que continúe e inhabilite el nombre y apellido en la configuración de los campos.

estilos de fondo vibrantes

Fondo degradado

Continúe agregando un fondo degradado al módulo Optin de correo electrónico.

  • Color 1: Color n. ° 2 (Buscar en paleta)
  • Color 2: Color n. ° 3 (Buscar en paleta)
  • Dirección del gradiente: 144 grados

estilos de fondo vibrantes

Diseño

Luego, cambie el diseño del módulo.

  • Disposición: cuerpo en la parte superior, forma en la parte inferior

estilos de fondo vibrantes

Configuración de texto

Cambie también la configuración del texto.

  • Orientación del texto: centro
  • Color del texto: claro

estilos de fondo vibrantes

Configuración del texto del título

A continuación, abra la configuración del texto del título y realice algunos cambios.

  • Fuente del título: Abril Fatface
  • Tamaño del texto del título: 54px (escritorio), 40px (tableta), 35px (teléfono)

estilos de fondo vibrantes

Configuración de botones

Modifique también la apariencia del botón.

  • Ancho del borde del botón: 0px
  • Radio del borde del botón: 0px
  • Estilo de fuente: subrayado
  • Estilo de subrayado: doble

estilos de fondo vibrantes

Espaciado

Por último, utilice diferentes valores de relleno personalizados en la configuración de espaciado del módulo Optin de correo electrónico.

  • Relleno superior: 100 px
  • Acolchado inferior: 100px
  • Relleno izquierdo: 300 px (escritorio), 50 px (tableta y teléfono)
  • Relleno derecho: 300 px (escritorio), 50 px (tableta y teléfono)

estilos de fondo vibrantes

Guardar diseño en la biblioteca Divi para reutilizarlo

Lo único que queda por hacer es guardar el diseño en la biblioteca Divi. ¡De esa manera, también puede reutilizarlo para otras páginas! También puede acceder a las publicaciones de blog como páginas existentes al crear una nueva página.

estilos de fondo vibrantes

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado que hemos creado.

estilos de fondo vibrantes

Pensamientos finales

En esta publicación, hemos compartido contigo algunos estilos de fondo impresionantes y vibrantes que puedes descargar de forma gratuita. Además de eso, también lo guiamos a través de la creación de la plantilla de publicación de blog desde cero. Siéntase libre de usar estos estilos de fondo para las plantillas de publicaciones de blog que diseñe usted mismo. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!