homefinance blog
¿Busca una forma clásica pero creativa de mostrar publicaciones de blog en su sitio? Si es así, te gustará este Freebie Div. Diseñamos una plantilla de publicación de blog clásica inspirada en máquinas de escritura, que se aplica automáticamente a todas las publicaciones de blog en su sitio web. A lo largo de esta publicación, también mostraremos paso a paso cómo puede recrear el diseño de cero hasta el edificio de temas. ¡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
Descargue la plantilla de blog posterior a la inspiración del blog de forma gratuita para poner su mano en la plantilla de blog de blog gratuita de blog, 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.
Te has suscripto satisfactoriamente. ¡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 Access The Div Div Theme Builder y agregue una nueva plantilla accediendo a Div Div Theme Builder. Una vez que llegue allí, agregue una nueva plantilla.
Use la plantilla para todas las publicaciones Use esta nueva plantilla para todas sus publicaciones.
Uso activado: todas las publicaciones
Comience a construir el cuerpo de la plantilla y comience a construir el cuerpo de la nueva plantilla.
2. Comience a crear el cuerpo de la publicación en la configuración del blog del color de fondo Una vez alcanzado el editor de plantillas, notará una sección. Abra esa sección y cambie el color de fondo.
Color de fondo: # FFF4D8
Espacio agregue algunos forros personalizados en la parte superior e inferior.
Revestimiento superior: 200 PX
Finamiento inferior: 200 PX
Borde y complete la configuración de la sección agregando un borde.
Ancho óseo: 100 PX (escritorio), 20 px (tableta y teléfono)
Color del borde: #ffffff
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Espacio sin agregar módulos, abra la configuración de la fila y elimine todos los valores predeterminados, desde arriba e abajo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue el módulo de imagen a la columna Cargar la imagen y luego, agregue un módulo de imagen a la columna de fila y cargue una ilustración de su elección. La ilustración que utilizamos en este tutorial se puede encontrar en la carpeta descargable desde el comienzo de este tutorial.
Espaciado Vaya a la pestaña Diseño del módulo y cambie los valores de espaciado de la siguiente manera: Margen superior: -150 PX
Margen izquierdo: -12VW (escritorio), 0 px (tableta y teléfono)
Agregue la fila # 2 La estructura de la columna pasamos la siguiente fila. Use la siguiente estructura de columna:
Agregue un módulo de texto en la columna 1 Contenido dinámico Agregue un módulo de texto a la primera columna de fila y use el siguiente contenido dinámico:
Cuerpo: fecha de publicación de publicación
Formato de fecha: 06/08/1999 m / z / a
Configuración de texto Cambie la configuración de texto en consecuencia:
Texto de fuente: Elite especial
El peso de la fuente de texto: en negrita
Color de texto: # 000000
Tamaño del texto: 1.4rem
Clone El módulo de texto tres veces después de haber completado la configuración del módulo de texto, puede clonar todo el módulo tres veces.
Cambie el contenido dinámico Cambie el contenido dinámico de los módulos duplicados de la siguiente manera:
Duplicado # 1: Categorías de publicaciones
Duplicado no. 2: autor publicado
Duplicado no. 3: Número de comentarios publicados
Después: comentarios
Enlace a la zona de comentarios: sí
Coloque dos módulos de texto en la columna 2 Continúe colocando los dos últimos módulos de texto en la columna de la segunda fila,
Cambie el color del texto de la conexión de categoría y el número de comentarios modificados y el color del texto del enlace, cuando sea necesario.
Color de texto de enlace: # 000000
Cambie la orientación del texto de los módulos en la columna 2 y complete los módulos de texto en la columna 2 cambiando la alineación del texto en diferentes dimensiones de pantalla.
Alineación de texto: derecha (escritorio), izquierda (tableta y teléfono)
Agregue la fila # 3 La estructura de la columna, ¡pasamos la siguiente fila! Use la siguiente estructura de columna:
Agregue un módulo de texto al contenido dinámico Agregue un módulo de texto en la columna de fila y use el siguiente contenido dinámico: Cuerpo: Título de Post / Archive
Antes:
Después:
Configuración de texto H1 Vaya a la pestaña Diseño del módulo y cambie la configuración de texto H1 de la siguiente manera:
Font Antet: élite especial
Text Pre -Text: # 000000
Encabezado de texto de tamaño: 3.5REM (escritorio), 2.5rem (tableta), 2rem (teléfono)
Altura de la línea de dirección: 1.5em
Espacio agregue algunos bordes personalizados desde arriba e abajo.
Margen superior: 150 PX
Margen inferior: 150 PX
Agregue un módulo de contenido para publicar en la configuración del texto de la columna Vaya al siguiente módulo, que es el módulo de contenido posterior. Cambie la configuración de texto en consecuencia:
Texto de fuente: Elite especial
Tamaño del texto: 1.2rem
Altura de la línea de texto: 2.5em
Configuración de texto Muestra y diferentes configuraciones para el texto del encabezado.
Font Antet: élite especial
Text Pre -Text: # 000000
Lecheck 2 Tamaño de texto: 2REM (H2), 1.9REM (H3), 1.8REM (H4), 1.7REM (H5), 1.6REM (H6)
ID CSS y asigne un ID CSS al módulo.
ID de CSS: modo post-contenido
Agregue un módulo de código al código de encabezado CSS de columna ahora, para agregar un cierto margen personalizado a diferentes títulos, agregaremos los siguientes CSS personalizados a un módulo de código:
#Post-Content-Model H2, H3, H4, H5, H6 {
margen-top: 70px;
margen de fondo: 70px;
}
Agregue la sección 2 Color de fondo Agregue otra sección a la plantilla de publicación, abra la configuración de la sección y cambie el color de fondo de la sección.
Color de fondo: # FFF4D8
Borde agregue un borde.
Ancho óseo: 100 PX (escritorio), 20 px (tableta y teléfono)
El ancho de los bordes superiores: 0 pxculi borde: #ffffff
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:
Agregue el módulo de comentarios en los campos de configuración de la columna La única forma en que necesitamos en esta fila es un módulo de comentarios. Cambie la configuración del campo en consecuencia:
Color de fondo de campo: RGBA (0.0,0,0)
Color de texto de campo: # 000000
Bajo revestimiento de campos: 50 px
Fuerte de campos: élite especial
Tamaño de los campos de texto: 1.2rem
Campos el ancho del borde inferior: 1 PX
Campos Color Borde inferior: # 000000
La configuración de texto cuenta los comentarios junto con la configuración de texto para el número de comentarios.
Número de comentarios Nivel de entime: H2
Fuente de la fuente de comentarios: élite especial
Comentarios de conteo de texto en color: # 000000
Número de comentarios Tamaño del texto: 2rem
Título Configuración Formulario de título y realice algunos cambios en el texto del título del formulario.
Título de formulario de formulario Nivel: H3
Formulario de título de fuente: Elite especial
El color del texto del título del formulario: # 000000
Título Tamaño del texto del texto: 1.5rem
Configuración de meta texto Entonces, cambie la configuración de meta texto.
Meta fuente: élite especial
Color meta de texto: # 000000
Tamaño del meta de texto: 1.5rem
Configuración de texto para comentarios Haremos algunos cambios en la configuración del texto de los comentarios.
Comentario de fuentes: élite especial
Size Text Comment: 1.2rem
Altura de la línea de comentarios: 2.5em
Botón Configuración Continuar estilizando el botón de la siguiente manera:
Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 1.2rem
El color del texto del botón: #ffffff
El fondo del botón: # 000000
El ancho del nudo del botón: 0 PX
Botón Chenar Rase: 0 PXButon Font: Special Elite
Comente CSS Corp y complete la configuración del módulo agregando un margen superior al cuerpo avanzado de comentarios de pestañas. margen-top: 100px;
3. Guarde todos los cambios y el resultado de la prevalización del constructor de temas una vez que haya creado el cuerpo personalizado de publicaciones de blog para su plantilla, ¡puede guardar todos los cambios y puede ver el resultado en las publicaciones de blog!
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, compartí una plantilla de escritura clásica de blog posterior a la inspiración que podría descargar de forma gratuita y usar para su próximo proyecto Div. También recreé el diseño de la plantilla posterior a cero. Si tiene alguna pregunta o sugerencia, 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.
