homefinance blog
La mención del autor de la publicación en las publicaciones del blog es esencial. Ahora, con el creador de temas de Div, puede agregar una caja de autor dinámico a sus publicaciones. También puede estilizar la caja del autor utilizando las opciones construidas del DIV, lo que puede conducir a un hermoso diseño web. En este tutorial, le mostraremos exactamente cómo diseñar una hermosa caja de autor dinámico en su plantilla de publicación. ¡Podrá descargar la plantilla de publicación JSON gratis! 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 publicación de forma gratuita para poner su mano en la plantilla de publicación gratuita, primero deberá descargarla 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.
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 de publicación, acceda al Builder Divic y agregue una nueva plantilla accediendo al Builder Divic. 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 plantilla de publicación del blog del color de fondo en el editor de plantillas, notará una sección. Abra la configuración de la sección y agregue un color de fondo.
Color de fondo: # 270FFF
Imagen de fondo Cargue la imagen de fondo que puede encontrar en la carpeta zip que puede descargar al comienzo de esta publicación.
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:
Dimensión Abra la configuración de la fila y cambie el ancho máximo en la configuración del tamaño.
Ancho máximo: 1380 PX
Agregue la publicación del módulo de título en los elementos de la columna La única forma en que necesitamos en esta fila es un módulo de título posterior. Desactivamos la imagen presentada de la publicación en la configuración de los elementos.
Mostrar la imagen presentada: No
Configuración de texto Vaya a la pestaña Diseño del módulo y cambie el color del texto a la configuración de texto general.
Color de texto: Abierto
Configuración de texto de título Luego cambie la configuración del texto del título.
Título de la fuente: Work Sans
Título Tamaño del texto: 7REM (escritorio), 4REM (tableta), 2REM (teléfono)
Letras de espacio Título: -2pxsets meta texto junto con la configuración de meta texto.
Meta Font: Work Sans
Meta de texto Tamaño: 1Rem
Agregue una nueva sección, agregue una nueva sección habitual al cuerpo de la plantilla, abra la configuración de la sección y elimine todos los rellenos predeterminados de arriba.
SUS Lingo: 0 PX
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:
Dimensión 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 máximo: 1380 PX
Espacio eliminar y todo el revestimiento predeterminado.
SUS Lingo: 0 PX
Configuración de la columna 1 Espacio Luego abra la configuración de la columna 1 y agregue algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revelaje superior: 200 PX (escritorio), 50 px (tableta), 20 px (teléfono)
Bajo forro: 200 PX (escritorio), 50 px (tableta), 20 px (teléfono)
Revelaje izquierdo: 100 PX (escritorio), 50 px (tableta), 20 px (teléfono)
Llenado derecho: 100 PX (escritorio), 50 px (tableta), 20 px (teléfono)
Box Shadow Agregue un tono de caja a la primera columna.
Poder de poco claro de la sombra de la caja: 60 px
Shadow Color: RGBA (0.0,0,09.09)
Agregue un módulo de contenido para publicar en la configuración de texto de la columna 1 ¡Es hora de comenzar a agregar módulos! Coloque el módulo de contenido post en la columna 1 y cambie la configuración de texto en consecuencia:
Texto de fuentes: trabajo sin
Tamaño de texto: 1REM (escritorio), 0.9rem (tableta y teléfono)
La altura de la línea de texto: 2.3em
Configuración El encabezado de texto modifica y diferentes configuraciones del texto del encabezado.
Fuente Antet: Work Sansrubrica 2 Tamaño de texto: 1.6rem (H2), 1.5Rem (H3), 1.4Rem (H4), 1.3REM (H5), 1.2REM (H6)
Altura de la línea de dirección: 1.3em
ID CSS Complete la configuración del módulo agregando una ID de CSS.
ID de CSS: blog-contenido
Agregue un módulo de código en la columna 1 Ingrese el encabezado CSS para agregar espacio entre diferentes elementos de contenido de publicación, agregaremos un módulo de código en la columna 1 e ingresaremos las siguientes líneas de código CSS:
#Blog-post-Account H2, H3, H4, H5, H6 {
margen-top: 50px;
Margen de fondo: 50px;
}
#Blog-post-Continging P {
margen-top: 20px;
margen de fondo: 20px;
}
Agregue el módulo de persona al contenido dinámico de la columna 2 en la segunda columna, el único módulo que necesitamos es un módulo de persona. Seleccionaremos el siguiente contenido dinámico:
Nombre: Publicación del autor
Posición: Autor
Cuerpo: Autor Bio
El contenido dinámico de la imagen agrega la imagen de perfil dinámico del autor al modo.
Imagen: la foto de perfil del autor
Coloque el cursor en el color de fondo y luego, agregue un color de fondo blanco en el mouse.
Color de fondo: #ffffff
Configuración de texto de título Cambiar a la pestaña Diseño del módulo y cambiar la configuración de texto H3 en consecuencia:
Nivel de encabezado del título: H3
Título de la fuente: Work Sans
Título del texto Tamaño: 1.1rem
Configuración de texto de CORP modificada y configuración para el texto del cuerpo.
Font Corp: Work Sans
Tamaño del texto del cuerpo: 0.9m
La altura de la línea del cuerpo: 2em
Posición de la configuración del texto Luego, cambie la configuración del texto de la fuente de posición.
Posición de fuente: sin trabajo
Posición del tamaño del texto: 0.9rem
Tamaño predeterminado Cambiar la altura en la configuración del tamaño.
Altura: 160 PX (escritorio), automático (tableta y teléfono)
Coloque el cursor en el mouse y restaure la altura para comenzar automáticamente.
Deforzando aún más, agregue un espacio alrededor del módulo usando relleno personalizado.
Revestimiento superior: 50 px
Revestimiento inferior: 50 PX
ENNIZACIÓN IZQUIERDA: 50 PX
Revestimiento derecho: 50 PX
Borde predeterminado y usaremos un borde.
Ancho del borde izquierdo: 0 PX (escritorio), 4 PX (tableta y teléfono)
Color del borde izquierdo: # 270fff
Coloque el mouse sobre el borde, cambie el ancho del borde al cursor.
Ancho del borde izquierdo: 4 PX
Sombra de cuadro predeterminada y luego, agregue un tono de caja.
Poder de poco claro de la sombra de la caja: 60 px
Shadow Color: RGBA (0.0,0,0) (escritorio), RGBA (0.0,0,11) (tableta y teléfono)
Sombra de cajas de desplazamiento Cambia el color de la sombra al cursor.
Color de la sombra: RGBA (0.0,0,0.11)
Filtros predeterminados más, cambiaremos la opacidad.
Opacidad: 41% (escritorio), 100% (tableta y teléfono)
Pase con el mouse sobre los filtros devuelva la opacidad al 100% en la salida.
Opacidad: 100%
El elemento CSS principal Para agregar el efecto adhesivo que podría ver al obtener una vista previa de esta publicación, agregaremos algunas líneas CSS personalizadas al elemento principal del módulo. Posición: pegajoso;
Posición: -webkit -sticky;
Arriba: 50px! Importante;
CSS de imagen de membresía asegura que la imagen de perfil del autor esté alineada a la izquierda agregando una sola línea de código CSS a la imagen miembro del módulo. Text-align: izquierda;
Visibilidad predeterminada Para ocultar el contenido del módulo en el escritorio, cambiaremos la superación de la pestaña avanzada.
Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Coloque el cursor en la visibilidad, haremos que el contenido aparezca en el flujo cambiando los flujos a la visible. Horizontal: Visible
Desbordamiento vertical: visible
Agregue una nueva sección Agregue otra sección al diseño.
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:
Dimensión 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: 1
Igualar las alturas de la columna: sí
Ancho máximo: 1380 PX
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 de la siguiente manera:
El color del fondo del campo: #ffffff
Revestimiento de campo: 20 PX
Bajo revestimiento de campos: 20 px
Fuente de hechos: el trabajo sin
Tamaño de los campos de texto: 1rem
Conteo de texto Contando comentarios y configuraciones de texto para el número de comentarios.
Número de comentarios Nivel de entime: H2
COMENTARIO DE FUERTES: El trabajo sans
Número de comentarios Tamaño del texto: 1.5rem
Formulario de configuración de texto de título Entonces, modifique el texto de la configuración del texto del formulario.
Título de formulario de formulario Nivel: H3
Formulario de título de fuente: trabajo sans
Título Formulario Dimensión de texto: 1.2Rem
Configuración de meta texto Modificar y Configuración de meta texto.
Meta Font: Work Sans
Meta de texto Tamaño: 1Rem
Configuración de texto para comentarios Cambie la configuración del texto de los comentarios.
Fuente de comentarios: trabajo sin
TAMAÑO TEXTO COMENTARIO: 1 REM
Altura de la línea de comentarios: 2.3em
Botón Configuración Complete el módulo Configuración Estilizando el botón.
Use estilos personalizados para el botón: Sí
Botón de tamaño de texto: 1 REMOCURGER DEL TEXTO DEL BOTÓN: #FFFFFF
El color del fondo de fondo: # 270FFF
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Botón de fuente: trabajo sin
3. Guarde los cambios del tema del constructor y vea el resultado después de haber completado la plantilla, asegúrese de guardar todos los cambios, salir del constructor de temas y ver el resultado en sus publicaciones.
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 diseñar una hermosa caja de autor dinámico utilizando las opciones incrustadas de la división, la función dinámica y el generador de temas. Con estas tres cosas combinadas, ahora es más fácil para siempre personalizar la plantilla de publicación de su blog y dar la publicación a la publicación de manera creativa. ¡Podrías descargar el archivo JSON gratis! 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.
