homefinance blog
Al crear un sitio web, hay buenas posibilidades de incluir una página de blog y publicaciones de blog. Por supuesto, la parte más importante de una estrategia de blog es la creación de contenido de publicación de blog de alta calidad, pero su parte de diseño juega un papel importante en el éxito de su estrategia cuando crea un sitio web con DIV, puede simplificar cómo las publicaciones de su blog Mostrar en el temas Builder Divin creando una plantilla dinámica posterior al contenido. Hemos compartido constantemente publicaciones en nuestro blog, lo que le ayuda a acelerar el proceso, pero si desea crear una publicación de blog con una pantalla dividida, le gustará esta publicación. ¡Le mostraremos paso a paso cómo hacer esto y podrá descargar el archivo de plantilla 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
Descargue su publicación en el blog de pantalla dividida de forma gratuita para poner su mano en la publicación del blog con la pantalla gratuita, primero debe descargarlas usando 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 de publicación Acceda al 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 la 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 plantilla.
2. Construya el cuerpo de la configuración de la configuración de la plantilla de publicación de blog Una vez que llegue al editor de plantillas, notará una sección. Abra la configuración, pase a la pestaña de diseño y elimine todo el revestimiento predeterminado e inferior.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
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 de la siguiente manera:
Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Igualar las alturas de la columna: sí
Ancho: 100%
Ancho máximo: 100%
Altura mínima: 100VH (escritorio), automática (tableta y teléfono) Altura máxima: 100VH (escritorio), ninguno (tableta y teléfono)
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Abre y coloque la fila de escondite.
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Configuración Columna 1 Fondo de gradiente Luego abra la configuración de la columna 1 y agregue un fondo de gradiente.
Color 1: RGBA (255,255,255.0)
Color 2: # 000000
Tipo de gradiente: lineal
Coloque el gradiente sobre la imagen de fondo: sí
La imagen de fondo usamos la imagen dinámica presentada como una imagen de fondo para la siguiente columna.
Imagen de fondo: imagen presentada
Configuración de la columna 2 Espacio Luego, abriremos la configuración de la columna 2 y agregaremos algunos valores de llenado personalizados a la configuración de espaciado.
Revestimiento superior: 8%
Finamiento inferior: 8%
ENLIZACIÓN IZQUIERDA: 8%
Revelaje derecho: 8%
Operaciones para permitir que las personas pasen por la segunda columna, donde aparecerá el contenido de publicación y el cuadro de comentarios, cambiaremos la superación vertical desde la configuración de visibilidad.
Anulación vertical: desplazamiento (escritorio), visible (tableta y teléfono)
Agregue el módulo de publicación en los elementos de la columna 1 es el momento de agregar módulos, comenzando con una publicación de título en la columna 1. Desactive la opción de 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 y modificar la configuración de texto H1 en consecuencia:
Título del nivel Título: H1
Título de la fuente: Work Sans
Título Fuente de peso: Bold
Color de texto del título: #ffffff
Título Tamaño del texto: 60 PX (escritorio), 45 PX (tableta), 35 PX (teléfono) Cartas de título: -1 PX
Altura de la línea de título: 1.2em
Configuración de meta texto luego cambie la configuración de meta texto.
Meta Font: Work Sans
Estilo de meta fuente: mayúscula
Color de meta texto: #eaea
Distancia de meta letra: 2 PX
Dimensión luego cambie el ancho en diferentes tamaños de pantalla.
Ancho: 81% (escritorio), 100% (tableta y teléfono)
Espaciado Agregue algunos valores de llenado receptivos a continuación.
Revestimiento superior: 8% (solo tableta y teléfono)
Con el revestimiento inferior: 8% (solo tableta y teléfono)
Revelaje izquierdo: 7% (tableta), 8% (teléfono)
Revestimiento derecho: 7% (tableta), 8% (teléfono)
Posición y complete la configuración del módulo cambiando la configuración de posición de la siguiente manera:
Posición: Absoluto (escritorio), predeterminado (tableta y teléfono)
Ubicación: el centro inferior
Brecha vertical: 10%
Agregue un módulo de publicación en la columna 2 Pase a la siguiente columna. Allí, el primer módulo que necesitamos es un módulo de contenido posterior. Este módulo mostrará dinámicamente el contenido de publicación.
El texto de la configuración muestra algunos cambios en la configuración del texto del encabezado del módulo.
Fuente de la tienda: trabajo sin
Título Fuente de peso: semi audac
Encabezado de texto de tamaño:
H2: 40px
H3: 30 PX
H4: 25 PX
H5: 16 PX
H6: 14 PX
Distancia entre las cartas de título: -1 PX (H2, H3 y H4)
Clase CSS y agregue una clase CSS. En el siguiente paso de este tutorial, utilizaremos esta clase CSS para generar un espacio entre títulos y párrafos.
Clase CSS: Blog Post-Concted
Agregue un módulo de código a la columna 2 Agregue el código CSS para el espacio entre párrafos y valores Agregue un módulo de código directamente en el módulo de contenido post y agregue las siguientes líneas de código CSS para generar espacio entre títulos y párrafos:
.Blog-post-Account H1,
.Blog-post-Account H2,
.Blog-post-Account H3,
.Blog-post-Account H4,
.Blog-post-Account H5,
.Blog-post-cuenta H6
{
margen-top: 20px;
margen de fondo: 20px;
}
Agregue el módulo de comentarios a la configuración del campo de la columna 2 Siguiente y el último módulo que necesitamos en la columna 2 para completar este tutorial es un módulo de comentarios. Cambie la configuración del campo del módulo en consecuencia:
El color del fondo del campo: #ffffff
Color de texto de campo: # 000000
Revestimiento de campo: 30 PX
Campos de revestimiento inferiores: 30 px
Forro de campos izquierdos: 30 px
Campos de revestimiento derecho: 30 PX
Fuente de hechos: el trabajo sin
Campos de estilo de fuente: mayúsculas
Campos de tamaño de texto: 15 PX
Espacio de letras de campo: 3 PX
Campos de esquinas redondeadas: 10 PX (todas las esquinas)
Fields Box Shadow Blur Force: 30 PX
Sombra Color Fields: RGBA (0.0,0,0.06)
Comentarios de conteo de texto Entonces, cambie la configuración de texto para obtener el número de comentarios.
COMENTARIO DE FUERTES: El trabajo sans
Comentario Número de peso de fuente: A digo
Configuración de texto Formulario de título Modificar y configuración del texto del título del formulario.
Título de formulario de formulario Nivel: H3
Formulario de título de fuente: trabajo sans
Formulario de peso del título de peso: semi audac
Continuar la configuración del meta texto, realizaremos algunos cambios en la configuración de meta texto.
Meta Font: Work Sans
Peso de meta fuente: semi audac
Color meta de texto: # 000000
Botón de configuración Entonces, estilizaremos el botón en consecuencia: use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 16 PX
El color del texto del botón: #ffffff
El color de fondo del botón: # 000000
El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Distancia entre letras y botones: 2 PX
Botón de fuente: trabajo sin
El estilo de la fuente del botón: mayúscula
Forro para botones: 2%
Forro para botones: 2%
Talto de relleno izquierdo: 5%
Botón de revestimiento derecho: 5%
Agregaremos algunos bordes superiores.
Margen superior: 15%
Comenta CSS Corp y completaremos la configuración del módulo agregando una línea de código CSS al cuerpo de comentarios del módulo en la pestaña avanzada. margen-top: 50px
3. Guarde los cambios del tema del constructor y vea el resultado ahora, después de completar la plantilla de publicación del blog, lo único que queda por hacer es guardar todos los cambios de constructor de temas de div y ver el resultado en nuestras 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
