¡Tu licencia Divi con un -20% de DescuentoOferta aquí

Cómo crear una plantilla de página de autor con Divi

May 19, 2020 | Tutoriales para Divi

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’s Theme Builder.

Cuando vuelva a crear este diseño dentro del Divi Theme Builder, usará 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. Todo lo que deberá 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 WP User Avatar para tener más control. ¡También podrás descargar el archivo JSON de la plantilla gratis!

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 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. Sugerimos que tenga dos ventanas abiertas, una con el editor de plantillas y otra con una vista previa en vivo.

Escritorio

plantilla de página de autor

Móvil

plantilla de página de autor

1. Actualizar usuario

Optimizar imágenes de autor

Agregar complemento de avatar de usuario de WP

Cuando se agrega un autor a su WordPress, el sistema extrae automáticamente una imagen Gravatar. Algunos autores no tienen una cuenta Gravatar o la imagen no coincide con su sitio. El uso del complemento WP User Avatar le dará más control.

plantilla de página de autor

Información completa del autor

Asegúrese de incluir toda la siguiente información del autor:

  • Nombre y apellido
  • Nombre para mostrar
  • Biografía del autor
  • Imagen del autor

plantilla de página de autor

2. Recrea el diseño en Theme Builder

Open Theme Builder

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».

plantilla de página de autor

plantilla de página de autor

Crear cuerpo personalizado

Una vez que se crea la nueva plantilla, haga clic en «Agregar cuerpo personalizado» para ingresar al editor de plantillas.

plantilla de página de autor

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: 300 px
    • Tableta y teléfono: 50px
  • Acolchado inferior
    • Escritorio: 0px

plantilla de página de autor

Frontera

Agregue un borde inferior a la sección también.

  • Estilos de borde: borde inferior
  • Ancho: 2px
  • Color: negro # 000000

plantilla de página de autor

Agregar fila 1

Estructura de columna

Ahora, agregue una fila con la siguiente estructura de columnas:

plantilla de página de autor

Dimensionamiento

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

  • Anchura
    • Escritorio: 1580 px
    • Tableta y teléfono: auto
  • Anchura máxima
    • Escritorio: 90%
    • Tableta y teléfono: 80%

plantilla de página de autor

Espaciado

Modifique la configuración de espaciado a continuación.

  • Margen izquierdo: auto
  • Margen derecho: 79 px
  • Relleno derecho: 0px

plantilla de página de autor

CSS personalizado

Por último, pero no menos importante, alinee todo el contenido de la columna utilizando 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;

plantilla de página de autor

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. Enlace el contenido dinámico correcto.

  • Cuerpo: Contenido dinámico – Publicar autor
  • Antes: <h1>
  • Después: <h1>
  • Formato de nombre: nombre y apellido

plantilla de página de autor

plantilla de página de autor

Encabezado de texto

Luego, diseñe el texto del encabezado de la siguiente manera:

  • Nivel de rumbo: H1
  • Fuente: Krona One
  • Peso: negrita
  • Estilo: TT
  • Color: negro # 000000
  • Talla
    • Escritorio: 90 px
    • Tableta: 60px
    • Teléfono: 50px

plantilla de página de autor

Espaciado

Agregue algunos valores de espaciado receptivo también.

  • Margen inferior
    • Escritorio: -43px
    • Tableta: -33px
    • Teléfono: -27 px
  • Relleno superior: 19px
  • Relleno inferior: 0px

plantilla de página de autor

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 bio dinámico del autor.

  • Cuerpo: Contenido dinámico – Biografía del autor

plantilla de página de autor

Texto

Luego, peina el texto en la pestaña de diseño.

  • Fuente: Open Sans
  • Peso: ligero
  • Color: negro # 000000
  • Talla
    • Escritorio: 16px
    • Tableta: 15px
    • Teléfono: 14px
  • Espaciado de letras: 1px

plantilla de página de autor

Espaciado

Y complete la configuración del módulo agregando un margen superior.

  • Margen superior: 100 px

plantilla de página de autor

Agregar módulo de imagen a la columna 2

Contenido de 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

plantilla de página de autor

plantilla de página de autor

Dimensionamiento

Luego, ajuste la configuración de tamaño de la imagen.

  • Anchura
    • Escritorio: 100%
    • Tableta y teléfono: 50%

plantilla de página de autor

Espaciado

Agregue también un margen inferior sensible.

  • Margen inferior
    • Escritorio y tableta: -20%
    • Teléfono: -30%

plantilla de página de autor

Frontera

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

plantilla de página de autor

Agregar 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.

  • Acolchado superior e inferior: 300 px

plantilla de página de autor

plantilla de página de autor

Agregar fila 2

Estructura de columna

Agregue una fila con una columna a continuación.

plantilla de página de autor

Dimensionamiento

Abra la configuración de la fila, vaya a la pestaña de diseño y realice algunos cambios en la configuración de tamaño.

  • Ancho: 1580 px
  • Anchura máxima
    • Escritorio y tableta: 90%
    • Teléfono: 95%
  • Alineación de filas: centro

plantilla de página de autor

Agregar módulo de blog

Contenido

El único módulo que necesitamos en esta sección / fila es un módulo de blog. Asegúrese 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í

plantilla de página de autor

Elementos

En la sección de elementos, habilitamos los siguientes elementos para que aparezcan en nuestro diseño:

  • Foto principal
  • Autor
  • Categorias
  • Extracto
  • Paginación

plantilla de página de autor

Diseño

Pase a la pestaña de diseño a continuación y cambie el diseño.

  • Diseño: cuadrícula

plantilla de página de autor

Texto del título

Luego, diseñe el texto del título en consecuencia:

  • Nivel de rumbo: H2
  • Fuente: Krona One
  • Estilo: TT
  • Color: negro # 000000
  • Talla
    • Escritorio: 26 px
    • Tableta: 16px
    • Teléfono: 18px
  • Espaciado de letras: 3px
  • Altura de línea: 1.3 m

plantilla de página de autor

Cuerpo de texto

También estamos modificando la configuración del texto del cuerpo.

  • Fuente: Open Sans
  • Peso: ligero
  • Color: negro # 000000
  • Talla
    • Escritorio: 16px
    • Tableta: 15px
    • Teléfono: 14px
  • Espaciado de letras: 1px

plantilla de página de autor

Meta texto

Luego, haremos algunos cambios en la configuración del meta texto.

  • Fuente: Open Sans
  • Estilo: TT
  • Color: negro # 000000
  • Espaciado de letras: 2px

plantilla de página de autor

Dimensionamiento

Continúe modificando la configuración de tamaño del módulo en diferentes tamaños de pantalla.

  • Anchura
    • Escritorio: auto
    • Tableta: 90%
    • Teléfono: 80%

plantilla de página de autor

Espaciado

Luego, agregue un poco de relleno superior.

  • Acolchado superior
    • Escritorio: 60 px
    • Tableta y teléfono: 70 px

plantilla de página de autor

Frontera

También estamos cambiando la configuración de bordes del módulo.

  • Estilos de borde de diseño de cuadrícula: lado izquierdo
  • Ancho: 1px
  • Color: negro #oooooo

plantilla de página de autor

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: fondo acolchado: 50px;
01
padding-bottom: 50px;
  • Cuerpo: fondo acolchado: 50px;
01
padding-bottom: 50px;

plantilla de página 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

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This