Las páginas de autor solían ser difíciles de personalizar. Con Divi Theme Builder , eso ya no es un problema. Puede personalizar no solo las páginas de autor, sino también las páginas de categoría, las páginas de resultados de búsqueda y más. En esta publicación, le mostraremos cómo crear una plantilla de página de autor dinámica con Divi y su Theme Builder.
Cuando recrees este diseño dentro de Divi Theme Builder, estarás usando contenido dinámico para que todas las páginas del autor se vean afectadas a la vez mientras se mantiene el contenido exclusivo del autor en su lugar. Todo lo que necesita hacer es asegurarse de que todos los autores tengan información actualizada. Si no tienen buenas imágenes de Gravatar , le sugerimos que descargue el complemento de avatar de usuario de WP para tener más control. ¡También podrá descargar el archivo JSON de la plantilla de forma gratuita!
Hagámoslo.
Antes de comenzar a recrear la plantilla de la página del autor dentro del Generador de temas, echemos un vistazo al resultado en diferentes tamaños de pantalla. Al crear la plantilla, el diseño se verá ligeramente diferente dentro del editor de plantillas. Le sugerimos que tenga dos ventanas abiertas, una con el editor de plantillas y otra con una vista previa en vivo.
Escritorio
Móvil
Para poner sus manos en la plantilla de página de autor gratuita, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Actualizar usuario
Agregar complemento de avatar de usuario de WP
Cuando se agrega un autor a su WordPress, el sistema automáticamente extrae una imagen de Gravatar. Algunos autores no tienen una cuenta de Gravatar o la imagen no coincide con su sitio. El uso del complemento de avatar de usuario de WP le dará más control.
Asegúrese de incluir toda la siguiente información del autor:
- Nombre y apellido
- Nombre para mostrar
- Biografía del autor
- Imagen del autor
2. Recrear diseño en Theme Builder
Generador de temas abiertos
El primer paso para recrear la plantilla de la página del autor es abrir Theme Builder y agregar una nueva plantilla. Seleccione «Todas las páginas de autor» en la sección Páginas de archivo y haga clic en el botón azul «Crear plantilla».
Crear cuerpo personalizado
Una vez que se crea la nueva plantilla, haga clic en «Agregar cuerpo personalizado» para ingresar al editor de plantillas.
Configuración de la sección 1
Espaciado
¡Es hora de construir el diseño! Dentro del editor de plantillas, verás una sección. Abra la sección y cambie los valores de espaciado de la siguiente manera:
- Acolchado superior
- Escritorio: 300px
- Tableta y teléfono: 50px
- Acolchado inferior
- Escritorio: 0px
Borde
Agregue un borde inferior a la sección también.
- Estilos de borde: borde inferior
- Ancho: 2px
- Color: Negro #000000
Agregar fila 1
Estructura de la columna
Ahora, agregue una fila con la siguiente estructura de columna:
Dimensionamiento
Abra la configuración de la fila y cambie el tamaño de la siguiente manera:
- Ancho
- Escritorio: 1580px
- Tableta y teléfono: automático
- Anchura máxima
- Escritorio: 90%
- Tableta y teléfono: 80%
Espaciado
Modifique la configuración de espaciado a continuación.
- Margen izquierdo: automático
- Margen derecho: 79px
- Relleno derecho: 0px
CSS personalizado
Por último, pero no menos importante, alinee todo el contenido de la columna usando dos líneas de código CSS en el elemento principal de la fila.
- Elemento principal
- Escritorio: pantalla: flex; alinear elementos: centro;
|
01
02
|
display: flex;align-items: center; |
-
- Tableta y teléfono: pantalla: bloque;
|
01
|
display: block; |
Agregue el módulo de texto 1 a la columna 1
Texto de contenido
Es hora de agregar módulos, comenzando con un módulo de texto en la columna 1. Vincule el contenido dinámico correcto.
- Cuerpo: Contenido dinámico – Autor de la publicación
- Antes: <h1>
- Después: <h1>
- Formato de nombre: nombre y apellido
Texto de encabezado
Luego, diseñe el texto del encabezado de la siguiente manera:
- Nivel de título: H1
- Fuente: Krona One
- Peso: Negrita
- Estilo: TT
- Color: Negro #000000
- Tamaño
- Escritorio: 90px
- Tableta: 60px
- Teléfono: 50px
Espaciado
Agregue también algunos valores de espaciado de respuesta.
- Margen inferior
- Escritorio: -43px
- Tableta: -33px
- Teléfono: -27px
- Relleno superior: 19px
- Relleno inferior: 0px
Agregue el módulo de texto 2 a la columna 1
Texto de contenido
En el siguiente módulo, que es otro módulo de texto. Agregue el contenido biodinámico del autor.
- Cuerpo: Contenido dinámico – Biografía del autor
Texto
Luego, estilice el texto en la pestaña de diseño.
- Fuente: Open Sans
- Peso: Liviano
- Color: Negro#000000
- Tamaño
- Escritorio: 16px
- Tableta: 15px
- Teléfono: 14px
- Espaciado entre letras: 1px
Espaciado
Y complete la configuración del módulo agregando un margen superior.
- Margen superior: 100px
Agregar módulo de imagen a la columna 2
Contenido de la imagen
Pase a la columna 2 y agregue un módulo de imagen. Borre el marcador de posición predeterminado y conecte el contenido dinámico de la imagen de perfil del autor.
- Imagen: contenido dinámico: imagen de perfil del autor
Dimensionamiento
Luego, ajuste la configuración de tamaño de la imagen.
- Ancho
- Escritorio: 100%
- Tableta y Teléfono: 50%
Espaciado
Agregue también un margen inferior receptivo.
- Margen inferior
- Escritorio y Tablet: -20%
- Teléfono: -30%
Borde
Complete la configuración del módulo agregando algunas esquinas redondeadas a la configuración del borde. Esto ayudará a convertir el módulo en un círculo.
- Esquina redondeada: 50vw las cuatro esquinas
- Estilos: Los cuatro lados
- Ancho: 2px
- Color: Negro #000000
Añadir Sección 2
Espaciado
Ahora agregue otra sección regular, abra la configuración de la sección y modifique los valores de relleno superior e inferior.
- Relleno superior e inferior: 300px
Agregar fila 2
Estructura de la columna
Agregue una fila con una columna al lado.
Dimensionamiento
Abra la configuración de fila, vaya a la pestaña de diseño y realice algunos cambios en la configuración de tamaño.
- Ancho: 1580px
- Anchura máxima
- Computadora de escritorio y tableta: 90%
- Teléfono: 95%
- Alineación de filas: Centro
Agregar módulo de blog
Contenido
El único módulo que necesitamos en esta sección/fila es un módulo de blog. Asegúrate de habilitar la opción ‘Publicaciones para la página actual’. Esto asegurará que solo se muestren las publicaciones realizadas por el autor en cuestión.
- Publicaciones para la página actual: Sí
Elementos
En la sección de elementos, estamos habilitando los siguientes elementos para que aparezcan en nuestro diseño:
- Foto principal
- Autor
- Categorías
- Extracto
- Paginación
Disposición
Pase a la pestaña de diseño a continuación y cambie el diseño.
- Diseño: Cuadrícula
Texto del título
Luego, diseñe el texto del título en consecuencia:
- Nivel de título: H2
- Fuente: Krona One
- Estilo: TT
- Color: Negro #000000
- Tamaño
- Escritorio: 26px
- Tableta: 16px
- Teléfono: 18px
- Espaciado entre letras: 3px
- Altura de la línea: 1,3 m
Cuerpo de texto
También estamos modificando la configuración del texto del cuerpo.
- Fuente: Open Sans
- Peso: Liviano
- Color: Negro #000000
- Tamaño
- Escritorio: 16px
- Tableta: 15px
- Teléfono: 14px
- Espaciado entre letras: 1px
metatexto
Luego, haremos algunos cambios en la configuración del metatexto.
- Fuente: Open Sans
- Estilo: TT
- Color: Negro #000000
- Espaciado entre letras: 2px
Dimensionamiento
Continúe modificando la configuración de tamaño del módulo en diferentes tamaños de pantalla.
- Ancho
- Escritorio: automático
- Tableta: 90%
- Teléfono: 80%
Espaciado
Luego, agregue un poco de relleno superior.
- Acolchado superior
- Escritorio: 60px
- Tableta y teléfono: 70px
Borde
También estamos cambiando la configuración del borde del módulo.
- Estilos de borde de diseño de cuadrícula: lado izquierdo
- Ancho: 1px
- Color: Negro #oooooo
CSS personalizado
¡Y completaremos el diseño con dos líneas de código CSS para el título y el cuerpo del módulo!
- Título: relleno inferior: 50px;
|
01
|
padding-bottom: 50px; |
- Cuerpo: acolchado inferior: 50px;
|
01
|
padding-bottom: 50px; |
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
¡Eso es un envoltorio!
En este tutorial, hemos creado una plantilla de página de autor personalizada con Theme Builder de Divi. Hemos combinado contenido dinámico con las opciones integradas de Divi para crear un diseño de página de autor mínimo. Recuerda que todos los autores deben tener nombre y apellido, biografía del autor y foto de perfil. Si ha descargado el archivo JSON, puede importarlo a su área principal de Divi Theme Builder. Si tiene alguna pregunta o sugerencia, ¡no dude en dejar un comentario en la sección de comentarios a continuación!