Descargue una plantilla GRATUITA de publicación de blog de barra lateral a dos caras con Divi

Aunque las barras laterales existen desde hace mucho tiempo, todavía se utilizan con frecuencia en la web. Ayudan a mostrar diferentes elementos que están conectados a la publicación, como publicaciones recomendadas y formularios de suscripción de correo electrónico, sin descuidar el enfoque principal, que es el contenido real de la publicación. Ahora, con el Generador de temas de Divi, hay muchas formas de crear la plantilla de publicación de tu blog. En este tutorial, le mostraremos cómo agregar una barra lateral de dos lados a su plantilla de publicación. ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Suscríbete a nuestro canal de Youtube

Descargue la plantilla de publicación de blog GRATIS

Para poner sus manos en la plantilla de publicación de blog gratuita, primero deberá descargarla 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.

Descarga los archivos

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.

DESCARGAR

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!

1. Vaya a Divi Theme Builder y agregue una nueva plantilla

Vaya a Divi Theme Builder y agregue una nueva plantilla

Empiece por ir a su Divi Theme Builder. Una vez allí, agregue una nueva plantilla.

Usar plantilla en todas las publicaciones

Estamos usando esta nueva plantilla en todas las publicaciones.

• Usar en: todas las publicaciones

Empezar a construir el cuerpo de la plantilla

Bueno, entonces, comience a construir el cuerpo de la plantilla.

2. Empiece a crear el cuerpo de la publicación del blog

Agregar nueva sección

Color de fondo

Una vez dentro del Divi Theme Builder, verá una sección. Abra esa sección y cambie el color de fondo.

• Color de fondo: # f4f4f4

Espaciado

Modifique también los valores de espaciado de la sección en diferentes tamaños de pantalla.

• Relleno superior: 50 px (escritorio), 20 px (tableta), 10 px (teléfono)
• Relleno inferior: 50 px (escritorio), 20 px (tableta), 10 px (teléfono)

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño en consecuencia:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 2
• Ancho: 100%
• Ancho máximo: 95%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

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

Columna 2

Color de fondo

Luego, abra la configuración de la columna 2 y cambie el color de fondo a blanco.

• Color de fondo: #ffffff

Sombra de la caja

Agrega también una sombra de cuadro a la columna.

• Fuerza de desenfoque de sombra de caja: 80px
• Fuerza de propagación de la sombra de caja: -21px
• Color de sombra: rgba (0,0,0,0.08)

Agregar módulo de imagen a la columna 2

Contenido dinámico

¡Es hora de comenzar a agregar módulos! En la segunda columna, colocaremos todos los módulos relevantes para la publicación del blog, comenzando con un Módulo de imagen. Utilice el contenido dinámico de la imagen destacada.

• Imagen: Imagen destacada

Dimensionamiento

Luego, pase a la pestaña de diseño del módulo y fuerce el ancho completo en el Módulo de imagen.

• Forzar ancho completo: Sí

Agregar módulo de título de publicación a la columna 2

Elementos

Pasemos al segundo módulo, que es el módulo de título de la publicación. Desactive la imagen destacada en la configuración de elementos.

• Mostrar imagen destacada: No

Configuración del texto del título

Vaya a la pestaña de diseño del módulo y cambie la configuración del texto del título en consecuencia:

• Fuente del título: Oxígeno
• Tamaño del texto del título: 2vw (escritorio), 4vw (tableta), 6vw (teléfono)
• Altura de la línea de título: 1.2em

Configuración de meta texto

A continuación, realice algunos cambios en la configuración del meta texto.

• Fuente Meta: Open Sans
• Color del meta texto: # ffc023
• Tamaño del metatexto: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)

Espaciado

Modifique también los valores de espaciado.

• Margen superior: 100 px
• Margen izquierdo: 4vw
• Margen derecho: 4vw

Título CSS

Y complete la configuración del módulo agregando un margen inferior al elemento CSS del título en la pestaña avanzada.

margin-bottom: 20px;

Agregar módulo de contenido de publicación a la columna 2

Configuración de texto

Pase al siguiente módulo, que es el Módulo de contenido de la publicación que contiene todo el contenido dinámico de la publicación de su blog. Cambie la configuración de texto del módulo en consecuencia:

• Fuente de texto: Open Sans
• Tamaño del texto: 0.9vw (escritorio), 1.8vw (tableta), 3vw (teléfono)
• Altura de la línea de texto: 2.2em

Configuración del texto del encabezado

Luego, realice también algunos cambios en la configuración del texto del encabezado.

• Fuente de encabezado: Oxígeno
• Tamaño de texto H2: 1.5vw (escritorio), 3vw (tableta), 4vw (teléfono)
• Tamaño de texto H3, H4, H5 y H6: 1.3vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)

Espaciado

También estamos usando algunos valores de margen y relleno personalizados.

• Margen izquierdo: 4vw
• Margen derecho: 4vw
• Relleno superior: 50px
• Acolchado inferior: 100px

Clase CSS

Complete la configuración del módulo agregando una clase CSS. En la siguiente parte de este tutorial, usaremos esta clase CSS para agregar algo de espacio a los títulos y párrafos.

• espaciado de contenido

Agregar módulo de código a la columna 2

Insertar código CSS

Como se mencionó en el paso anterior de esta publicación, usaremos CSS personalizado para agregar espacio entre los encabezados y los párrafos. Para ello, usaremos un módulo de código en la columna 2. Inserte las siguientes líneas de código CSS:

<style>

.post-content-spacing h2,
.post-content-spacing h3,
.post-content-spacing h4,
.post-content-spacing h5,
.post-content-spacing h6 {
margin-top: 50px;
margin-bottom: 50px;
}

.post-content-spacing p {
margin-top: 20px;
margin-bottom: 20px;
}

</style>

Agregue el módulo Optin de correo electrónico a la columna 3

Agregar contenido

¡Es hora de comenzar a agregar los elementos de la barra lateral! Puede agregar cualquier módulo que desee. Comenzaremos con un módulo Optin por correo electrónico en la columna 3. Utilice alguna copia de su elección.

Cuenta de correo electrónico

Continúe vinculando una cuenta de correo electrónico al módulo.

Los campos

Luego, deshabilite el campo de apellido en la configuración de los campos.

• Mostrar campo de apellido: No

Color de fondo

Cambie el color de fondo en consecuencia:

• Color de fondo: # ffc023

Configuración de campos

Vaya a la pestaña de diseño del módulo y modifique la configuración de los campos de la siguiente manera:

• Fuente Fields: Open Sans
• Tamaño del texto de los campos: 0.8vw (escritorio), 1.8vw (tableta), 3vw (teléfono)

Configuración del texto del título

Realice también algunos cambios en la configuración del texto del título.

• Fuente del título: Oxígeno
• Peso de la fuente del título: negrita
• Tamaño del texto del título: 1vw (escritorio), 3vw (tableta), 5vw (teléfono)
• Altura de la línea de título: 1.5em

Configuración de botones

Continúe diseñando el botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 0.9vw (escritorio), 1.8vw (tableta), 3vw (teléfono)
• Color del texto del botón: # ffc023
• Color de fondo del botón: # f4f4f4
• Ancho del borde del botón: 0px

• Radio del borde del botón: 0px
• Fuente del botón: Oxígeno

• Acolchado superior del botón: 15px
• Acolchado de la parte inferior del botón: 15px

Sombra de la caja

Y complete la configuración del módulo agregando una sombra de cuadro sutil.

• Fuerza de desenfoque de sombra de caja: 80px
• Fuerza de propagación de la sombra de caja: -21px
• Color de sombra: rgba (0,0,0,0.08)

Agregue el módulo de seguimiento de redes sociales a la columna 3

Agregue las redes sociales de su preferencia

El siguiente módulo que necesitamos en la columna 3 es un módulo de seguimiento de redes sociales. Agregue algunas redes sociales de su elección.

Restablecer estilos de redes sociales individualmente

Continúe restableciendo los estilos de elementos para cada red social individualmente.

Configuración de iconos

Luego, vuelva a la configuración general del módulo y cambie el color del icono.

• Color del icono: # ffc023

Agregar módulo de blog a la columna 1

Elementos

En la columna 1, el único módulo que estamos agregando es un módulo de blog. Desactive el autor en la configuración de elementos.

• Mostrar autor: No

Diseño

Luego, pase a la pestaña de diseño del módulo y cambie el diseño.

• Diseño: cuadrícula

Configuración del texto del título

A continuación, modifique la configuración del texto del título.

• Fuente del título: Oxígeno
• Peso de la fuente del título: negrita
• Tamaño del texto del título: 1vw (escritorio), 3vw (tableta), 5vw (teléfono)
• Altura de la línea de título: 1.5em

Configuración del texto del cuerpo

Realice también algunos cambios en la configuración del texto del cuerpo.

• Fuente del cuerpo: Open Sans
• Tamaño del texto del cuerpo: 0.7vw (escritorio), 1.8vw (tableta), 3vw (teléfono)
• Altura de la línea del cuerpo: 2.2em

Configuración de meta texto

A continuación, diseñe la configuración del meta texto en consecuencia:

• Fuente Meta: Open Sans
• Color del meta texto: # ffc023
• Tamaño del metatexto: 0.8vw (escritorio), 1.8vw (tableta), 3vw (teléfono)

Frontera

Elimine también el borde predeterminado del módulo.

• Ancho del borde del diseño de la cuadrícula: 0px

Sombra de la caja

Y usa una sombra de caja sutil.

• Fuerza de desenfoque de sombra de caja: 80px
• Fuerza de propagación de la sombra de caja: -21px
• Color de sombra: rgba (0,0,0,0.08)

Visibilidad

Ahora, queremos que el Módulo de Blog aparezca en la columna 1 cuando alguien esté viendo la publicación en el escritorio. En tamaños de pantalla más pequeños, sin embargo, queremos que el contenido de la publicación sea lo primero. Es por eso que ocultaremos todo el módulo en la tableta y el teléfono.

Clonar el módulo de blog y colocar el duplicado en la columna 3

Luego, clonaremos el Módulo de Blog y colocaremos el duplicado en la tercera columna.

Cambiar la visibilidad

Queremos que este módulo aparezca en la columna 3 solo en dispositivos más pequeños, por eso ocultaremos todo el módulo en el escritorio.

3. Guarde todos los cambios del generador de temas y obtenga una vista previa del resultado

Una vez que haya completado la plantilla de publicación de blog (¡asegúrese de agregar un Módulo de comentarios también!), ¡Puede guardar todos los cambios del Creador de temas y ver el resultado en su sitio web!

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo agregar una barra lateral de dos lados a la plantilla de publicación de su blog utilizando el Generador de temas de Divi. Más aún, hemos compartido el archivo JSON del diseño de forma gratuita para que pueda tenerlo cerca en caso de que lo necesite para cualquier proyecto futuro. Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.