Cómo diseñar un cuadro de autor dinámico para su plantilla de publicación de blog con Divi

Es esencial mencionar al autor de la publicación en las publicaciones de su blog. Ahora, con el Generador de temas de Divi, puede agregar un cuadro de autor dinámico en todo el sitio a sus publicaciones. También puede diseñar el cuadro de autor usando las opciones integradas de Divi, esto puede conducir a un hermoso diseño web. En este tutorial, le mostraremos exactamente cómo diseñar un hermoso cuadro de autor dinámico dentro de su plantilla de publicación. ¡También podrá descargar el archivo JSON de plantilla de publicación 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

Descarga la plantilla de publicación GRATIS

Para tener en sus manos la plantilla de publicación 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 de publicación

Vaya a Divi Theme Builder y agregue una nueva plantilla

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

Usar plantilla en todas las publicaciones

Utilice la nueva plantilla en todas sus publicaciones.

• Usar en: todas las publicaciones

Empezar a construir el cuerpo de la plantilla

Y comience a construir el cuerpo de la plantilla.

2. Crear cuerpo de plantilla de publicación de blog

Configuración de la sección

Color de fondo

Dentro del editor de plantillas, verá una sección. Abra la configuración de la sección y agregue un color de fondo.

• Color de fondo: # 270fff

Imagen de fondo

Sube la imagen de fondo que puedes encontrar en la carpeta comprimida que pudiste descargar al principio de esta publicación.

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila y cambie el ancho máximo en la configuración de tamaño.

• Ancho máximo: 1380px

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

Elementos

El único módulo que necesitamos en esta fila es un módulo de título de publicación. Estamos deshabilitando la imagen destacada de la publicación en la configuración de elementos.

• Mostrar imagen destacada: No

Configuración de texto

Vaya a la pestaña de diseño del módulo y cambie el color del texto en la configuración de texto general.

• Color del texto: claro

Configuración del texto del título

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

• Fuente del título: Work Sans
• Tamaño del texto del título: 7rem (escritorio), 4rem (tableta), 2rem (teléfono)
• Espaciado de letras de título: -2px

Configuración de meta texto

Junto con la configuración de meta texto.

• Fuente Meta: Work Sans
• Tamaño del meta texto: 1rem

Agregar nueva sección

Espaciado

Agregue una nueva sección regular al cuerpo de su plantilla, abra la configuración de la sección y elimine todo el relleno superior predeterminado.

• Relleno superior: 0px

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho máximo: 1380px

Espaciado

Elimine también todo el acolchado superior predeterminado.

• Relleno superior: 0px

Configuración de la columna 1

Espaciado

Luego, abra la configuración de la columna 1 y agregue algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Relleno superior: 200 px (escritorio), 50 px (tableta), 20 px (teléfono)
• Acolchado inferior: 200 px (escritorio), 50 px (tableta), 20 px (teléfono)
• Relleno izquierdo: 100 px (escritorio), 50 px (tableta), 20 px (teléfono)
• Relleno derecho: 100 px (escritorio), 50 px (tableta), 20 px (teléfono)

Sombra de la caja

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

• Fuerza de desenfoque de sombra de caja: 60px
• Color de sombra: rgba (0,0,0,0.09)

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

Configuración de texto

¡Es hora de comenzar a agregar módulos! Coloque el módulo de contenido de la publicación en la columna 1 y cambie la configuración del texto en consecuencia:

• Fuente de texto: Work Sans
• Tamaño del texto: 1rem (escritorio), 0.9rem (tableta y teléfono)
• Altura de la línea de texto: 2,3 em

Configuración del texto del encabezado

Modifique también las diferentes configuraciones del texto del encabezado.

• Fuente de encabezado: Work Sans
• Encabezado 2 Tamaño del texto: 1.6rem (H2), 1.5rem (H3), 1.4rem (H4), 1.3rem (H5), 1.2rem (H6)
• Altura de la línea de rumbo: 1.3em

ID de CSS

Complete la configuración del módulo agregando una ID de CSS.

• ID de CSS: blog-post-content

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

Insertar código CSS de encabezado

Para agregar algo de espacio entre los diferentes elementos de contenido de la publicación, agregaremos un Módulo de código a la columna 1 e insertaremos las siguientes líneas de código CSS:

<style>
#blog-post-content h2, h3, h4, h5, h6 {
margin-top: 50px;
margin-bottom: 50px;
}

#blog-post-content p {
margin-top: 20px;
margin-bottom: 20px;
}
</style>

Agregar módulo de persona a la columna 2

Contenido dinámico

En la segunda columna, el único módulo que necesitamos es un módulo de persona. Seleccionaremos el siguiente contenido dinámico:

• Nombre: Autor de la publicación
• Posición: Autor
• Cuerpo: Autor Bio

Contenido dinámico de imagen

Agregue también la imagen de perfil dinámico del autor al módulo.

• Imagen: Imagen de perfil del autor

Colocar el cursor sobre el color de fondo

Luego, agregue un color de fondo blanco al pasar el mouse.

• Color de fondo: #ffffff

Configuración del texto del título

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

• Nivel de encabezado del título: H3
• Fuente del título: Work Sans
• Tamaño del texto del título: 1.1rem

Configuración del texto del cuerpo

Modifique también la configuración del texto del cuerpo.

• Fuente del cuerpo: Work Sans
• Tamaño del texto del cuerpo: 0.9rem
• Altura de la línea del cuerpo: 2em

Configuración de texto de posición

Luego, cambie la configuración del texto de la fuente de posición.

• Fuente de posición: Work Sans
• Tamaño del texto de posición: 0.9rem

Tamaño predeterminado

Modifique la altura en la configuración de tamaño.

• Altura: 160 px (escritorio), automático (tableta y teléfono)

Tamaño de desplazamiento

Y vuelva a poner la altura en automático al pasar el mouse.

• Altura: auto

Espaciado

A continuación, agregamos algo de espacio alrededor del módulo mediante un relleno personalizado.

• Relleno superior: 50px
• Acolchado inferior: 50px
• Relleno izquierdo: 50px
• Relleno derecho: 50px

Borde predeterminado

Y también usaremos un borde.

• Ancho del borde izquierdo: 0px (escritorio), 4px (tableta y teléfono)
• Color del borde izquierdo: # 270fff

Borde flotante

Modifique el ancho del borde al pasar el mouse.

• Ancho del borde izquierdo: 4px

Sombra de cuadro predeterminada

Luego, agregue una sombra de cuadro.

• Fuerza de desenfoque de sombra de caja: 60px
• Color de sombra: rgba (0,0,0,0) (escritorio), rgba (0,0,0,0.11) (tableta y teléfono)

Sombra de caja flotante

Cambia el color de la sombra al pasar el mouse.

• Color de sombra: rgba (0,0,0,0.11)

Filtros predeterminados

Continuando, cambiaremos la opacidad.

• Opacidad: 41% (escritorio), 100% (tableta y teléfono)

Filtros flotantes

Devuelve la opacidad al 100% al pasar el mouse.

• Opacidad: 100%

CSS del elemento principal

Para agregar el efecto adhesivo que pudo notar en la vista previa de esta publicación, agregaremos algunas líneas de CSS personalizado al elemento principal del módulo.

position: sticky;
position: -webkit-sticky;
top: 50px !important;

Imagen de miembro CSS

Nos aseguramos de que la imagen de perfil del autor esté alineada a la izquierda agregando una sola línea de código CSS a la imagen del miembro del módulo.

text-align: left;

Visibilidad predeterminada

Para ocultar el contenido del módulo en el escritorio, cambiaremos los desbordamientos en la pestaña avanzada.

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Visibilidad de desplazamiento

Haremos que el contenido aparezca al pasar el mouse cambiando los desbordamientos a visibles.

• Desbordamiento horizontal: visible
• Desbordamiento vertical: visible

Agregar nueva sección

Agrega otra sección a tu diseño.

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Abra la configuración de la fila y cambie la configuración de tamaño en consecuencia:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho máximo: 1380px

Agregar módulo de comentarios a la columna

Configuración de campos

El único módulo que necesitamos en esta fila es un módulo de comentarios. Cambie la configuración de los campos de la siguiente manera:

• Color de fondo de los campos: #ffffff
• Relleno superior de campos: 20px
• Relleno de la parte inferior de los campos: 20px
• Fuente Fields: Work Sans
• Tamaño del texto de los campos: 1rem

Configuración del texto del recuento de comentarios

Modifique también la configuración del texto del recuento de comentarios.

• Nivel de encabezado de recuento de comentarios: H2
• Fuente de recuento de comentarios: Work Sans
• Tamaño del texto del recuento de comentarios: 1.5rem

Configuración del texto del título del formulario

Luego, cambie la configuración del texto del título del formulario.

• Título del formulario Nivel de encabezado: H3
• Fuente del título del formulario: Work Sans
• Título del formulario Tamaño del texto: 1.2rem

Configuración de meta texto

Modifique también la configuración del meta texto.

• Fuente Meta: Work Sans
• Tamaño del meta texto: 1rem

Configuración de texto de comentario

También estamos cambiando la configuración del texto de los comentarios.

• Fuente de comentario: Work Sans
• Tamaño del texto del comentario: 1rem
• Altura de la línea de comentarios: 2,3 em

Configuración de botones

Complete la configuración del módulo estilizando el botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 1rem
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 270fff
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px

• Fuente del botón: Work Sans

3. Guarde los cambios del Creador de temas y vea el resultado

Una vez que haya completado la plantilla, asegúrese de guardar todos los cambios, salga de Theme Builder y vea el resultado en sus publicaciones.

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 diseñar una hermosa caja de autor dinámica utilizando las opciones integradas de Divi, la función dinámica y el Generador de temas. Con estas tres cosas combinadas, ahora es más fácil que nunca personalizar la plantilla de publicación de tu blog y acreditar al autor de la publicación de una manera creativa. ¡También pudo 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 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.