homefinance blog
Aunque las barras laterales han existido durante mucho tiempo, todavía se usan comúnmente en la web. Ayudan a mostrar diferentes elementos conectados a la publicación, como publicaciones recomendadas y formularios de optimización de correo electrónico, sin descuidar el énfasis principal, que es el contenido de publicación real. Ahora, con el creador de temas de Divin allí, hay muchas maneras de crear la plantilla de publicación de su blog. En este tutorial, le mostraremos cómo agregar una barra lateral del lado frontal a su plantilla de publicación. ¡Podrá descargar el archivo JSON de forma gratuita! Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Suscríbase a nuestro canal de YouTube Descargue la plantilla de publicación de blog de forma gratuita para poner su mano en la plantilla de publicación de blog gratuita, primero debe descargarla con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
1. Vaya al Temo Builder Divin y agregue una nueva plantilla Acceda al Builder de temas de la División y agregue una nueva plantilla accediendo al Builder de Temas Div Div. Una vez que llegue allí, agregue una nueva plantilla.
Use la plantilla para todas las publicaciones, usamos esta nueva plantilla para todas las publicaciones.
Uso activado: todas las publicaciones
Comience a construir bien el cuerpo de la plantilla, luego comience a construir el cuerpo de la plantilla.
2. Comience a crear el cuerpo de la publicación en el blog Agregar un nuevo color de fondo Una vez que llegue al constructor de temas, notará una sección. Abra esa sección y cambie el color de fondo.
Color de fondo: # F4F4F4
Extienda y cambie los valores de espaciado de la sección en diferentes tamaños de pantalla.
Revestimiento superior: 50 px (escritorio), 20 px (tableta), 10 px (teléfono)
Bajo forro: 50 PX (escritorio), 20 px (tableta), 10 px (teléfono)
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:
Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño en consecuencia: use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 2
Ancho: 100%
Ancho máximo: 95%
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
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
Box Shadow también agregue una sombra de caja a la columna.
Poder de poco claro de la sombra de la caja: 80 px
Poder de extender la sombra de la caja: -21px
Shadow Color: RGBA (0.0,0,0.08)
Agregue el módulo de imagen a la columna 2 ¡El 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. Use el contenido dinámico de la imagen presentada.
Imagen: imagen presentada
Dimensión Entonces, pase a la pestaña Diseño del módulo y forzue el ancho completo en el módulo de imagen.
Fuerza el ancho completo: si
Agregue el módulo de publicación para publicar en los elementos de la columna 2 al segundo módulo, que es el módulo de post de título. Deshabilite la imagen presentada en la configuración de elementos.
Mostrar la imagen presentada: No
Configuración de texto de título Cambiar a la pestaña Diseño del módulo y modificar la configuración del texto del título según:
Título de la fuente: oxígeno
Título Tamaño del texto: 2VW (escritorio), 4VW (tableta), 6VW (teléfono)
Altura de la línea de título: 1.2em
Configuración de meta texto luego realiza algunos cambios en la configuración de meta texto.
Meta Font: Open Sans
Meta Text Color: # FFC023
Meta Tamaño de texto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Valores de modificación y espaciado de espaciado. Superior Marja: 100 PX
Margen izquierdo: 4VW
Margen derecho: 4VW
Título de CSS y complete la configuración del módulo agregando un margen inferior al elemento CSS del título en la pestaña avanzada. margen de fondo: 20px;
Agregue un módulo de publicación en la configuración de texto de la columna 2 Vaya al siguiente módulo, que es el módulo “Public Content”, que contiene todo el contenido dinámico de las publicaciones de blog. Cambie la configuración de texto del módulo en consecuencia:
Texto de fuente: Abrir sans
Tamaño de texto: 0.9VW (escritorio), 1.8VW (tableta), 3VW (teléfono)
La altura de la línea de texto: 2.2em
Configuración El encabezado de texto luego, realice algunos cambios en la configuración del texto del encabezado.
Fuente del título: 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)
También utilizamos valores de margen y llenado personalizados.
Margen izquierdo: 4VW
Margen derecho: 4VW
Revestimiento superior: 50 px
Finamiento inferior: 100 PX
La clase CSS llena la configuración del módulo agregando una clase CSS. En la siguiente parte de este tutorial, usaremos esta clase CSS para agregar espacio a títulos y párrafos.
Espacio por contenido
Agregue un módulo de código en la columna 2 Ingrese el código CSS como se menciona en el paso anterior de esta publicación, utilizaremos algunos CSS personalizados para agregar espacio entre títulos y párrafos. Para esto, usaremos un módulo de código en la columna 2. Ingrese las siguientes líneas de código CSS:
.Post-Account-Patch H2,
.Post-Account-Patch H3,
.Post-Account-Spacing H4,
.Post-Account-Patch H5,
.Post-cuenta-espacio-espacio H6 {
margen-top: 50px;
Botón de margen: 50px;}
.Post-cuenta-espacio-espacio P {
margen-top: 20px;
margen de fondo: 20px;
}
¡Agregue el módulo 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 de correo electrónico en la columna 3. Use una copia de su elección.
La cuenta de correo electrónico continúa conectando una cuenta de correo electrónico al módulo.
Los campos luego deshabilitan el campo Nombre desde la configuración del campo.
Muestra el campo Nombre: No
El color del papel tapiz cambia el color de fondo en consecuencia:
Color de fondo: # FFC023
Configuración de campo Vaya a la pestaña Diseño del módulo y cambie la configuración de campo de la siguiente manera:
Campos de fuentes: Open Sans
Campos de tamaño de texto: 0.8VW (escritorio), 1.8VW (tableta), 3VW (teléfono)
Configuración de texto de título Haga algunos cambios en la configuración del texto del título.
Título de la fuente: oxígeno
Título Fuente de peso: Bold
Título Tamaño del texto: 1VW (escritorio), 3VW (tableta), 5VW (teléfono)
Altura de la línea de título: 1.5em
Configuración Continúe extinguiendo el botón.
Use estilos personalizados para el botón: Sí
El tamaño de texto del botón: 0.9VW (escritorio), 1.8VW (tableta), 3VW (teléfono)
El color del texto del botón: # FFC023
El color de fondo del botón: # F4F4F4
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: oxígeno
Forro para botones: 15 px
Forro para botones: 15 px
Sombra de cuadro y complete la configuración del módulo agregando un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 80 px
Poder de extender la sombra de la caja: -21px
Shadow Color: RGBA (0.0,0,0.08)
Agregue el módulo de seguimiento de las redes sociales a la columna 3 Agregue las redes sociales a su elección La siguiente forma que necesitamos en la columna 3 es un módulo de seguimiento social. Agregue algunas redes sociales a su elección. Revender individualmente los estilos de redes sociales continúan restableciendo individualmente los estilos de artículo para cada red social.
Icono de configuración Entonces, regrese a la configuración general del módulo y cambie el color del icono.
Icono de color: # FFC023
Agregue el módulo de blog a los elementos de la columna 1 en la columna 1, el único modo que agregamos es un módulo de blog. Deshabilite al autor en la configuración de elementos.
Mostrar al autor: No
Apariencia Entonces, cambie a la pestaña Diseño del módulo y cambie el aspecto.
Apariencia: cuadrícula
Configuración de texto de título Luego cambie la configuración del texto del título.
Título de la fuente: oxígeno
Título Fuente de peso: Bold
Título Tamaño del texto: 1VW (escritorio), 3VW (tableta), 5VW (teléfono)
Altura de la línea de título: 1.5em
Configuración del texto del cuerpo hace y algunos cambios en la configuración del texto del cuerpo.
Font Corp: Open Sans
Tamaño de texto del cuerpo: 0.7VW (escritorio), 1.8VW (tableta), 3VW (teléfono)
La altura de la línea del cuerpo: 2.2em
Configuración de meta texto Entonces, estilice la configuración de meta texto en consecuencia:
Meta Font: Open Sans
Meta Text Color: # FFC023
Meta Tamaño de texto: 0.8VW (escritorio), 1.8VW (tableta), 3VW (teléfono)
Border eliminar y el borde predeterminado del módulo.
Ancho del borde de la cuadrícula de apariencia: 0 PX
Box Shadow y usa un tono de caja sutil.
Poder de poco claro de la sombra de la caja: 80 px
Poder de extender la sombra de la caja: -21px
Shadow Color: RGBA (0.0,0,0.08)
Visibilidad Ahora, queremos que el módulo de blog aparezca cuando esté en la columna 1 cuando alguien ve la publicación en el escritorio. Sin embargo, en las dimensiones de pantalla más pequeñas, queremos que el contenido de publicación sea en primer lugar. 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.
Cambie la visibilidad. Queremos que este módulo aparezca en la columna 3 solo en dispositivos más pequeños, por lo que ocultaremos todo el módulo en el escritorio.
3. Guarde todos los cambios y el resultado de la vista previa del constructor después de que haya completado la plantilla de publicación del blog (¡asegúrese de agregar un módulo de comentarios!), Puede guardar todos los cambios de constructor de temas y puede ver el resultado en su Sitio. Web!
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil
Pensamientos finales En esta publicación, le mostré cómo agregar una barra lateral de dos lados a la publicación del blog usando el constructor de Divin. Además, he separado el archivo JSON del diseño de forma gratuita, por lo que puede mantenerlo cerca, ¡si lo necesita para futuros proyectos! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación. Si está ansioso por obtener más información sobre Divi y obtener más regalos de la Divicidad, asegúrese de suscribirse a nuestro boletín de 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.
