Descargue 5 estilos de fondo vibrantes para sus publicaciones de blog Divi
Publicado: 2018-10-25¡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.
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.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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
- Color # 1: # 886DFC
- Color # 2: # 7C56BD
- Color # 3: # 372C66
Paleta n. ° 2
- Color # 1: # 42bcb2
- Color # 2: # 9CFEF0
- Color # 3: # a8baf7
Paleta # 3
- Color # 1: # 96b2ff
- Color # 2: # d999ff
- Color # 3: # 357ff4
Paleta # 4
- Color # 1: # B981FF
- Color # 2: # 24EEFA
- Color # 3: # be7bf2
Paleta # 5
- 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.
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
Cambiar a Visual Builder
Ahora puede cambiar a Visual Builder.
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.
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
Espaciado
Para permitir que la imagen de fondo se muestre por completo, juegue con el relleno superior de la sección.
- Acolchado superior: 660px
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
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
Espaciado
Elimine todo el relleno predeterminado en la parte inferior de la siguiente sección.
- Acolchado inferior: 0px
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. Después de haber agregado uno, elija los elementos que desea que aparezcan.
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)
Configuración de meta texto
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 meta texto: 18px
- Altura de la línea meta: 3em
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 que elija. 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
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
Agregar fila n. ° 1
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
Color de fondo
Agregue un color de fondo ligeramente transparente a la fila siguiente.
- Color de fondo: rgba (255,255,255,0.86)
Espaciado
Elimine aquí también el relleno personalizado predeterminado.
- Relleno superior: 0px
- Acolchado inferior: 0px
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.
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
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
Espaciado
A continuación, agregue algunos valores de relleno personalizados.
- Acolchado 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)
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
Agregar fila n. ° 2
Estructura de la columna
Continúe agregando una nueva fila justo debajo de la anterior usando una columna.
Espaciado
Elimine también todo el relleno personalizado predeterminado de esta fila.
- Relleno superior: 0px
- Acolchado inferior: 0px
Agregar módulo Optin de correo electrónico
Agregar contenido
Luego, agregue su CTA. Estamos usando un módulo Optin de correo electrónico. Después de agregarlo, modifique el contenido.
Los campos
Solo estamos usando la dirección de correo electrónico en este módulo, así que continúe y desactive el nombre y apellido en la configuración de los campos.
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
Diseño
Luego, cambie el diseño del módulo.
- Disposición: cuerpo en la parte superior, forma en la parte inferior
Configuración de texto
Cambie también la configuración del texto.
- Orientación del texto: centro
- Color del texto: claro
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)
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
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)
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.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado que hemos creado.
Pensamientos finales
En esta publicación, hemos compartido algunos estilos de fondo impresionantes y vibrantes con usted que puede descargar de forma gratuita. Además de eso, también lo hemos guiado 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!