Mencionar al autor de la publicación en las publicaciones de tu blog es esencial. Ahora, con el Generador de temas de Divi puede agregar un cuadro de autor dinámico de todo el sitio a sus publicaciones. También puede diseñar el cuadro de autor utilizando 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. 

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

cuadro de autor

Móvil

cuadro de autor

1. Vaya a Divi Theme Builder y agregue una nueva plantilla de publicación

Vaya a Divi Theme Builder y agregue una nueva plantilla

Comience yendo al Divi Theme Builder. Una vez allí, agregue una nueva plantilla.

cuadro de autor

Usar plantilla en todas las publicaciones

Use la nueva plantilla en todas sus publicaciones.

  • Usar en: todas las publicaciones

cuadro de autor

Comience a construir el cuerpo de la plantilla

Y comience a construir el cuerpo de la plantilla.

cuadro de autor

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

Configuraciones de sección

Color de fondo

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

  • Color de fondo: # 270fff

cuadro de autor

Imagen de fondo

Cargue la imagen de fondo que puede encontrar en la carpeta comprimida que pudo descargar al principio de esta publicación.

cuadro de autor

Agregar nueva fila

Estructura de columna

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

cuadro de autor

Dimensionamiento

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

  • Ancho Máx .: 1380px

cuadro de autor

Agregar módulo de título de la 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

cuadro de autor

Configuraciones de texto

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

  • Color del texto: claro

cuadro de autor

Configuración del texto del título

Modifique la configuración del texto del título a continuación.

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

cuadro de autor

Configuración de metatexto

Junto con la configuración del meta texto.

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

cuadro de autor

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

cuadro de autor

Agregar nueva fila

Estructura de columna

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

cuadro de autor

Dimensionamiento

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

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho Máx .: 1380px

cuadro de autor

Espaciado

Elimine también todo el relleno superior predeterminado.

  • Relleno superior: 0px

cuadro de autor

Configuración de 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)
  • Relleno 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)

cuadro de autor

Sombra de la caja

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

  • Caja Shadow Blur Fuerza: 60px
  • Color de sombra: rgba (0,0,0,0.09)

cuadro de autor

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

Configuraciones de texto

¡Es hora de comenzar a agregar módulos! Coloque el Módulo de contenido de publicación en la columna 1 y cambie la configuración de 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.3em

cuadro de autor

Configuración de encabezado de texto

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

  • Fuente del 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

cuadro de autor

ID de CSS

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

  • ID de CSS: blog-post-content

cuadro de autor

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:

01
02
03
04
05
06
07
08
09
10
11
<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>

cuadro de autor

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: Publicar Autor
  • Puesto: Autor
  • Cuerpo: autor Bio

cuadro de autor

Contenido dinámico de imagen

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

  • Imagen: Imagen de perfil del autor

cuadro de autor

Pase el color de fondo

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

  • Color de fondo: #ffffff

cuadro de autor

Configuración del texto del título

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

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

cuadro de autor

Configuración de texto del cuerpo

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

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

cuadro de autor

Configuración de texto de posición

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

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

cuadro de autor

Tamaño predeterminado

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

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

cuadro de autor

Tamaño de desplazamiento

Y devuelva la altura a auto en vuelo estacionario.

  • Altura: auto

cuadro de autor

Espaciado

A continuación, estamos agregando algo de espacio alrededor del módulo usando relleno personalizado.

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

cuadro de autor

Borde predeterminado

Y usaremos un borde también.

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

cuadro de autor

Hover Border

Modifique el ancho del borde al pasar el ratón.

  • Ancho del borde izquierdo: 4px

cuadro de autor

Sombra de caja predeterminada

Luego, agregue un cuadro de sombra.

  • Caja Shadow Blur Fuerza: 60px
  • Color de sombra: rgba (0,0,0,0) (Escritorio), rgba (0,0,0,0.11) (Tableta y teléfono)

cuadro de autor

Hover Box Shadow

Cambia el color de la sombra al pasar el cursor.

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

cuadro de autor

Filtros predeterminados

Continuando, cambiaremos la opacidad.

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

cuadro de autor

Filtros de desplazamiento

Recupere la opacidad al 100% al pasar el mouse.

  • Opacidad: 100%

cuadro de autor

Elemento principal CSS

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

01
02
03
position: sticky;
position: -webkit-sticky;
top: 50px !important;

cuadro de autor

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 de miembro del módulo.

01
text-align: left;

cuadro de autor

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

cuadro de autor

Visibilidad de desplazamiento

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

  • Desbordamiento horizontal: visible
  • Desbordamiento vertical: visible

cuadro de autor

Agregar nueva sección

Agregue otra sección a su diseño.

cuadro de autor

Agregar nueva fila

Estructura de columna

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

cuadro de autor

Dimensionamiento

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

  • Usar ancho de canal personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho Máx .: 1380px

cuadro de autor

Agregar módulo de comentarios a la columna

Configuraciones 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: 20 px
  • Relleno inferior de campos: 20px
  • Fuente de campos: trabajo sin
  • Tamaño del texto de los campos: 1rem

cuadro de autor

Configuración de texto de recuento de comentarios

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

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

cuadro de autor

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
  • Tamaño del texto del título del formulario: 1.2rem

cuadro de autor

Configuración de metatexto

Modifique la configuración del metatexto también.

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

cuadro de autor

Configuración de texto de comentario

También estamos cambiando la configuración del texto del comentario.

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

cuadro de autor

Configuraciones de botones

Complete la configuración del módulo aplicando estilo al 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

cuadro de autor

  • Fuente del botón: trabajo sin

cuadro de autor

3. Guardar los cambios del generador de temas y ver el resultado

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

cuadro de autor

cuadro de autor

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!