¡Estamos aquí con otra descarga gratuita de Divi ! Esta vez, le ofrecemos una muestra de 5 estilos de fondo vibrantes diferentes que puede usar para las publicaciones de blog en su sitio web. Puede combinar fácilmente estos estilos de fondo en el mismo sitio web para dar una apariencia diferente a las distintas publicaciones de blog que publique. 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!
Empecemos echando un vistazo a los 5 resultados diferentes y la vista en diferentes tamaños de pantalla.
Descarga los estilos de fondo vibrantes GRATIS
Para poner sus manos en los estilos de fondo vibrantes, primero deberá descargarlos usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Paletas de colores
Para cada uno de los estilos de fondo, puedes 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 #1
- Color n.º 1: n.º 886DFC
- Color n.° 2: n.° 7C56BD
- Color n.° 3: n.° 372C66
Paleta #2
- Color n.º 1: n.º 42bcb2
- Color #2: #9CFEF0
- Color #3: #a8baf7
Paleta #3
- Color #1: #96b2ff
- Color n.° 2: #d999ff
- Color n.° 3: n.° 357ff4
Paleta #4
- Color n.° 1: #B981FF
- Color #2: #24EEFA
- Color #3: #be7bf2
Paleta #5
- Color n.° 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 la página Divi
Antes de cambiar a Visual Builder, realice algunos cambios en el cuadro Configuración de la 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, deberá 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 hagas, aparecerán tres opciones en tu pantalla. Haz clic en el botón azul para empezar a construir desde cero.
Crear diseño de publicación de blog
Añadir Sección #1
Imagen de fondo
¡Comencemos 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.
- Relleno superior: 660px
Añadir Secció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
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Espaciado
Elimine todo el relleno predeterminado en la parte inferior de la siguiente sección.
- Relleno 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 publicación. Después de agregar uno, elija los elementos que desea mostrar.
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 metatexto
La configuración del metatexto también debe modificarse.
- Alineación de metatexto: Centro
- Color del metatexto: Color n.º 1 (Buscar en la paleta)
- Tamaño del metatexto: 18px
- Altura de la metalínea: 3em
Agregar Sección #3
Imagen de fondo
La última sección de esta página contendrá el contenido de la publicación del blog y la 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 la imagen de fondo: espacio
Espaciado
Elimine todo el relleno superior predeterminado de esta sección para deshacerse de todos los espacios en blanco entre esta sección y la anterior.
- Relleno superior: 0px
Añadir Fila #1
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Color de fondo
Agregue un color de fondo ligeramente transparente a la siguiente fila.
- Color de fondo: rgba(255,255,255,0.86)
Espaciado
Elimine el relleno personalizado predeterminado aquí también.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar módulo de texto
Agregar contenido
Continúe agregando un módulo de texto a la fila que ha agregado. 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 encabezados y párrafos.
Configuración de texto
Vaya a la configuración de texto y haga algunos cambios allí.
- Tamaño del texto: 21 px (escritorio), 18 px (tableta), 15 px (teléfono)
- Altura de línea de texto: 2em
Configuración de rumbo
La configuración del texto del encabezado también debe modificarse.
- Fuente del 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 encabezado: 1,5 em
Espaciado
Agregue algunos valores de relleno personalizados a continuación.
- Relleno superior: 80px
- Relleno 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 sutil sombra de cuadro al módulo de texto. Esto aportará algo de profundidad a la plantilla de publicación de blog.
- Fuerza de desenfoque de sombra de cuadro: 80px
- Fuerza de propagación de la sombra del cuadro: -14px
Añadir Fila #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
- Relleno inferior: 0px
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.
Campos
Solo estamos usando la dirección de correo electrónico en este módulo, así que continúe y deshabilite el nombre y el apellido en la configuración de los campos.
Fondo degradado
Continúe agregando un fondo degradado al módulo Email Optin.
- Color 1: Color #2 (Buscar en paleta)
- Color 2: Color #3 (Buscar en paleta)
- Dirección del gradiente: 144 grados
Disposición
Luego, cambie el diseño del módulo.
- Diseño: cuerpo en la parte superior, formulario en la parte inferior
Configuración de texto
Cambie la configuración de texto también.
- 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: 54 px (escritorio), 40 px (tableta), 35 px (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, use diferentes valores de relleno personalizados en la configuración de espaciado del módulo de optimización de correo electrónico.
- Relleno superior: 100px
- Relleno inferior: 100px
- Relleno izquierdo: 300 px (escritorio), 50 px (tableta y teléfono)
- Relleno derecho: 300 px (escritorio), 50 px (tableta y teléfono)
Guarde el 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 puedes 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 contigo algunos estilos de fondo impresionantes y vibrantes que puedes 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éntete libre de usar estos estilos de fondo para las plantillas de publicaciones de blog que diseñes tú mismo. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!