Come creare un modello di pagina dell'autore con Divi's Theme Builder

Le pagine degli autori erano difficili da personalizzare. Con Divi Theme Builder, questo non è più un problema. Puoi personalizzare non solo le pagine dell'autore, ma anche le pagine delle categorie, le pagine dei risultati di ricerca e altro ancora. In questo post, ti mostreremo come creare un modello di pagina dell'autore dinamico con Divi's Theme Builder.

Quando ricrei questo layout all'interno di Divi Theme Builder, utilizzerai contenuto dinamico in modo che tutte le pagine dell'autore saranno interessate contemporaneamente mantenendo il contenuto unico per l'autore. Tutto quello che devi fare è assicurarti che tutti gli autori abbiano informazioni aggiornate. Se non hanno buone immagini Gravatar, ti suggeriamo di scaricare il plugin WP User Avatar per avere più controllo. Potrai anche scaricare gratuitamente il file JSON del modello!

Andiamo ad esso.

Anteprima

Prima di iniziare a ricreare il modello della pagina dell'autore all'interno del Theme Builder, diamo un'occhiata al risultato su schermi di diverse dimensioni. Durante la creazione del modello, il design apparirà leggermente diverso all'interno dell'editor del modello. Ti suggeriamo di avere due finestre aperte, una con l'editor dei modelli e una con un'anteprima dal vivo.

Desktop

Mobile

Scarica GRATUITAMENTE la pagina dell'autore di benvenuto

Per mettere le mani sul modello di pagina dell'autore gratuito, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

1. Aggiorna utente

Ottimizza le immagini dell'autore

Aggiungi il plug-in per l'avatar dell'utente WP

Quando un autore viene aggiunto al tuo WordPress, il sistema estrae automaticamente un'immagine Gravatar. Alcuni autori non hanno un account Gravatar o l'immagine non corrisponde al tuo sito. L'utilizzo del plugin WP User Avatar ti darà un maggiore controllo.

Informazioni complete sull'autore

Assicurati che tutte le seguenti informazioni sull'autore siano incluse:

• Nome e Cognome
• Nome da visualizzare
• Biografia dell'autore
• Immagine dell'autore

2. Ricrea il layout in Theme Builder

Apri il generatore di temi

Il primo passo per ricreare il modello della pagina dell'autore è aprire il Theme Builder e aggiungere un nuovo modello. Seleziona "Tutte le pagine dell'autore" nella sezione Pagine di archivio e fai clic sul pulsante blu "Crea modello".

Crea corpo personalizzato

Una volta creato il nuovo modello, fai clic su "Aggiungi corpo personalizzato" per accedere all'editor del modello.

Sezione 1 Impostazioni

Spaziatura

È ora di costruire il layout! All'interno dell'editor del modello, noterai una sezione. Apri la sezione e modifica i valori di spaziatura come segue:

• Imbottitura superiore
  • Desktop: 300 px
  • Tablet e telefono: 50px
• Imbottitura inferiore
  • Desktop: 0px

Frontiera

Aggiungi anche un bordo inferiore alla sezione.

• Stili di bordo: bordo inferiore
• Larghezza: 2px
• Colore: Nero #000000

Aggiungi riga 1

Struttura della colonna

Ora aggiungi una riga con la seguente struttura di colonne:

Dimensionamento

Apri le impostazioni della riga e modifica il dimensionamento come segue:

• Larghezza
  • Desktop: 1580 px
  • Tablet e telefono: automatico
• Larghezza massima
  • Desktop: 90%
  • Tablet e telefono: 80%

Spaziatura

Modificare le impostazioni di spaziatura successiva.

• Margine sinistro: automatico
• Margine destro: 79px
• Imbottitura destra: 0px

CSS personalizzato

Ultimo ma non meno importante, allinea tutto il contenuto della colonna utilizzando due righe di codice CSS nell'elemento principale della riga.

• Elemento principale
  • Desktop: display: flessibile; allinea-elementi: centro;

display: flex;
align-items: center;

• • Tablet e telefono: display: blocco;

display: block;

Aggiungi il modulo di testo 1 alla colonna 1

Testo contenuto

È ora di aggiungere moduli, iniziando con un modulo di testo nella colonna 1. Collega il contenuto dinamico corretto.

• Corpo: contenuto dinamico – Autore post
• Prima: <h1>
• Dopo: <h1>
• Formato del nome: nome e cognome

Testo dell'intestazione

Quindi, modella il testo dell'intestazione come segue:

• Livello di intestazione: H1
• Carattere: Corona One
• Peso: grassetto
• Stile: TT
• Colore: Nero #000000
• Taglia
  • Desktop: 90 px
  • Tablet: 60px
  • Telefono: 50px

Spaziatura

Aggiungi anche alcuni valori di spaziatura reattivi.

• Margine inferiore
  • Desktop: -43px
  • Tablet: -33px
  • Telefono: -27px
• Imbottitura superiore: 19px
• Imbottitura inferiore: 0px

Aggiungi il modulo di testo 2 alla colonna 1

Testo contenuto

Al modulo successivo, che è un altro modulo di testo. Aggiungi il contenuto bio dinamico dell'autore.

• Corpo: contenuto dinamico – biografia dell'autore

Testo

Quindi, modella il testo nella scheda Design.

• Carattere: Open Sans
• Peso: Leggero
• Colore: nero#000000
• Taglia
  • Desktop: 16px
  • Tablet: 15px
  • Telefono: 14px
• Spaziatura lettere: 1px

Spaziatura

E completa le impostazioni del modulo aggiungendo un margine superiore.

• Margine superiore: 100 px

Aggiungi modulo immagine alla colonna 2

Contenuto dell'immagine

Passa alla colonna 2 e aggiungi un modulo immagine. Cancella il segnaposto predefinito e collega il contenuto dinamico dell'immagine del profilo dell'autore.

• Immagine: contenuto dinamico – Immagine del profilo dell'autore

Dimensionamento

Quindi, regolare le impostazioni di dimensionamento dell'immagine.

• Larghezza
  • Scrivania: 100%
  • Tablet e telefono: 50%

Spaziatura

Aggiungi anche un margine inferiore reattivo.

• Margine inferiore
  • Desktop e Tablet: -20%
  • Telefono: -30%

Frontiera

Completa le impostazioni del modulo aggiungendo alcuni angoli arrotondati alle impostazioni del bordo. Ciò contribuirà a trasformare il modulo in un cerchio.

• Angolo arrotondato: 50vw tutti e quattro gli angoli
• Stili: tutti e quattro i lati
• Larghezza: 2px
• Colore: Nero #000000

Aggiungi sezione 2

Spaziatura

Ora aggiungi un'altra sezione normale, apri le impostazioni della sezione e modifica i valori di riempimento superiore e inferiore.

• Imbottitura superiore e inferiore: 300 px

Aggiungi riga 2

Struttura della colonna

Aggiungi una riga con una colonna successiva.

Dimensionamento

Apri le impostazioni della riga, vai alla scheda Design e apporta alcune modifiche alle impostazioni di dimensionamento.

• Larghezza: 1580 px
• Larghezza massima
  • Desktop e Tablet: 90%
  • Telefono: 95%
• Allineamento righe: Centro

Aggiungi modulo blog

Contenuto

L'unico modulo di cui abbiamo bisogno in questa sezione/riga è un modulo Blog. Assicurati di abilitare l'opzione "Post per la pagina corrente". Ciò assicurerà che vengano mostrati solo i post dell'autore in questione.

• Post per la pagina corrente: Sì

Elementi

Nella sezione degli elementi, stiamo consentendo ai seguenti elementi di apparire nel nostro design:

• Immagine in evidenza
• Autore
• Categorie
• Estratto
• Impaginazione

Disposizione

Passa alla scheda di progettazione successiva e modifica il layout.

• Layout: Griglia

Testo del titolo

Quindi, modella il testo del titolo di conseguenza:

• Livello di intestazione: H2
• Carattere: Corona One
• Stile: TT
• Colore: Nero #000000
• Taglia
  • Desktop: 26px
  • Tablet: 16px
  • Telefono: 18px
• Spaziatura lettere: 3px
• Altezza della linea: 1,3 m

Corpo del testo

Stiamo modificando anche le impostazioni del testo del corpo.

• Carattere: Open Sans
• Peso: Leggero
• Colore: Nero #000000
• Taglia
  • Desktop: 16px
  • Tablet: 15px
  • Telefono: 14px
• Spaziatura lettere: 1px

Meta testo

Quindi, apporteremo alcune modifiche alle impostazioni del meta testo.

• Carattere: Open Sans
• Stile: TT
• Colore: Nero #000000
• Spaziatura lettere: 2px

Dimensionamento

Continua modificando le impostazioni di dimensionamento del modulo su schermi di diverse dimensioni.

• Larghezza
  • Desktop: automatico
  • Compressa: 90%
  • Telefono: 80%

Spaziatura

Quindi, aggiungi un po 'di imbottitura superiore.

• Imbottitura superiore
  • Desktop: 60 px
  • Tablet e telefono: 70px

Frontiera

Stiamo modificando anche le impostazioni dei bordi del modulo.

• Stili del bordo del layout della griglia: lato sinistro
• Larghezza: 1px
• Colore: Nero #oooooo

CSS personalizzato

E completeremo il design con due righe di codice CSS al titolo e al corpo del modulo!

• Titolo: padding-bottom: 50px;

padding-bottom: 50px;

• Corpo: imbottitura-fondo: 50px;

padding-bottom: 50px;

Anteprima

Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Questo è un involucro!

In questo tutorial, abbiamo creato un modello di pagina dell'autore personalizzato con Divi's Theme Builder. Abbiamo combinato il contenuto dinamico con le opzioni integrate di Divi per creare un design minimo della pagina dell'autore. Ricorda che tutti gli autori devono avere nome e cognome, biografia dell'autore e foto del profilo. Se hai scaricato il file JSON, puoi importarlo nell'area principale di Divi Theme Builder. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto!