Cerchi un modo classico ma creativo per visualizzare i post del blog sul tuo sito web? Se è così, adorerai questo omaggio Divi. Abbiamo progettato un classico modello di post di blog ispirato alla macchina da scrivere che si applica automaticamente a tutti i post di blog sul tuo sito web! In questo post, mostreremo anche passo dopo passo come puoi ricreare il design da zero all'interno del Theme Builder.

Arriviamo ad esso!

Anteprima

Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.

Desktop

Mobile

Scarica GRATUITAMENTE il modello di post del blog ispirato alla macchina da scrivere

Per mettere le mani sul modello di post del blog gratuito ispirato alla macchina da scrivere, devi 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. Vai a Divi Theme Builder e aggiungi un nuovo modello

Vai a Divi Theme Builder e aggiungi un nuovo modello

Inizia andando al Divi Theme Builder. Una volta lì, aggiungi un nuovo modello.

Usa il modello su tutti i post

Usa questo nuovo modello su tutti i tuoi post.

• Usa su: tutti i post

Inizia a costruire il corpo del modello

E inizia a costruire il corpo del nuovo modello.

2. Inizia a costruire il corpo del post sul blog

Impostazioni della sezione

Colore di sfondo

Una volta all'interno dell'editor dei modelli, noterai una sezione. Apri quella sezione e cambia il colore di sfondo.

• Colore di sfondo: #fff4d8

Spaziatura

Aggiungi successivamente un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 200 px
• Imbottitura inferiore: 200 px

Frontiera

E completa le impostazioni della sezione aggiungendo un bordo.

• Larghezza bordo: 100 px (desktop), 20 px (tablet e telefono)
• Colore bordo: #ffffff

Aggiungi riga n. 1

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Spaziatura

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e rimuovi tutto il riempimento superiore e inferiore predefinito.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi modulo immagine alla colonna

Carica immagine

Quindi, aggiungi un modulo immagine alla colonna della riga e carica un'illustrazione a tua scelta. L'illustrazione che stiamo usando in questo tutorial può essere trovata nella cartella scaricabile all'inizio di questo tutorial.

Spaziatura

Passa alla scheda di progettazione del modulo e modifica i valori di spaziatura come segue:

• Margine superiore: -150 px
• Margine sinistro: -12vw (desktop), 0px (tablet e telefono)

Aggiungi riga #2

Struttura della colonna

Alla prossima riga. Utilizzare la seguente struttura a colonne:

Aggiungi modulo di testo alla colonna 1

Contenuto dinamico

Aggiungi un modulo di testo alla prima colonna della riga e utilizza il seguente contenuto dinamico:

• Corpo: data di pubblicazione successiva

• Formato data: 08/06/1999 m/g/a

Impostazioni testo

Modificare le impostazioni del testo di conseguenza:

• Carattere del testo: Special Elite
• Peso del carattere del testo: grassetto
• Colore del testo: #000000
• Dimensione del testo: 1.4rem

Clona modulo di testo tre volte

Una volta completate le impostazioni del modulo di testo, puoi clonare l'intero modulo tre volte.

Modifica contenuto dinamico

Modifica il contenuto dinamico dei moduli duplicati come segue:

• Duplicato n. 1: categorie di post
• Duplicato #2: Post Autore
• Duplicato n. 3: numero di commenti ai post
  • Dopo: commenti
  • Link all'area commenti: Sì

Posiziona due moduli di testo nella colonna 2

Continua posizionando gli ultimi due moduli di testo nella seconda colonna della riga,

Cambia il colore del testo del collegamento della categoria e del conteggio dei commenti

Se necessario, modifica anche il colore del testo del collegamento.

• Colore del testo del collegamento: #000000

Modifica l'orientamento del testo dei moduli nella colonna 2

E completa i moduli di testo nella colonna 2 modificando il loro allineamento del testo su diverse dimensioni dello schermo.

• Allineamento del testo: a destra (desktop), a sinistra (tablet e telefono)

Aggiungi riga #3

Struttura della colonna

Alla prossima riga! Utilizzare la seguente struttura a colonne:

Aggiungi modulo di testo alla colonna

Contenuto dinamico

Aggiungi un modulo di testo alla colonna della riga e utilizza il seguente contenuto dinamico:

• Corpo: Post/Titolo archivio

• Prima:

• Dopo:

Impostazioni testo H1

Passa alla scheda di progettazione del modulo e modifica le impostazioni del testo H1 come segue:

• Carattere dell'intestazione: Elite speciale
• Colore del testo dell'intestazione: #000000
• Dimensione del testo dell'intestazione: 3,5 rem (desktop), 2,5 rem (tablet), 2 rem (telefono)
• Altezza della linea di prua: 1,5 em

Spaziatura

Aggiungi anche un margine superiore e inferiore personalizzato.

• Margine superiore: 150 px
• Margine inferiore: 150 px

Aggiungi modulo contenuto post alla colonna

Impostazioni testo

Al modulo successivo, che è il modulo Post Content. Modifica le impostazioni del testo di conseguenza:

• Carattere del testo: Special Elite
• Dimensione del testo: 1.2rem
• Altezza riga di testo: 2,5 em

Impostazioni del testo dell'intestazione

Modifica anche le diverse impostazioni del testo dell'intestazione.

• Carattere dell'intestazione: Elite speciale
• Colore del testo dell'intestazione: #000000
• Titolo 2: Dimensione testo: 2rem (H2), 1.9rem (H3), 1.8rem (H4), 1.7rem (H5), 1.6rem (H6)

ID CSS

E assegna un ID CSS al modulo.

• ID CSS: modulo post-contenuto

Aggiungi modulo codice alla colonna

Aggiungi codice CSS intestazione

Ora, per aggiungere un margine personalizzato alle diverse intestazioni, aggiungeremo il seguente CSS personalizzato a un modulo di codice:

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

Aggiungi sezione #2

Colore di sfondo

Aggiungi un'altra sezione al modello di post, apri le impostazioni della sezione e cambia il colore di sfondo della sezione.

• Colore di sfondo: #fff4d8

Frontiera

Aggiungi anche un bordo.

• Larghezza bordo: 100 px (desktop), 20 px (tablet e telefono)
• Larghezza bordo superiore: 0px
• Colore bordo: #ffffff

Aggiungi nuova riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Aggiungi il modulo dei commenti alla colonna

Impostazioni dei campi

L'unico modulo di cui abbiamo bisogno in questa riga è un modulo Commenti. Modificare le impostazioni dei campi di conseguenza:

• Colore di sfondo dei campi: rgba(0,0,0,0)
• Colore testo campi: #000000
• Imbottitura inferiore dei campi: 50 px
• Carattere campi: Special Elite
• Dimensioni del testo dei campi: 1.2rem

• Larghezza bordo inferiore dei campi: 1px
• Colore bordo inferiore dei campi: #000000

Conteggio commenti Impostazioni testo

Insieme alle impostazioni del testo del conteggio dei commenti.

• Livello di intestazione del conteggio dei commenti: H2
• Carattere conteggio commenti: Special Elite
• Colore del testo del conteggio dei commenti: #000000
• Conteggio commenti Dimensione testo: 2rem

Impostazioni del testo del titolo del modulo

Apportare alcune modifiche anche alle impostazioni del testo del titolo del modulo.

• Titolo del modulo Livello titolo: H3
• Carattere del titolo del modulo: Special Elite
• Colore del testo del titolo del modulo: #000000
• Dimensione del testo del titolo del modulo: 1,5 rem

Impostazioni meta testo

Quindi, modifica le impostazioni del meta testo.

• Meta Font: Special Elite
• Colore meta testo: #000000
• Dimensione del meta testo: 1,5 rem

Impostazioni testo commento

Apporteremo anche alcune modifiche alle impostazioni del testo dei commenti.

• Carattere del commento: Special Elite
• Dimensione del testo del commento: 1.2rem
• Altezza riga di commento: 2,5 em

Impostazioni dei pulsanti

Continua con lo stile del pulsante come segue:

• Usa stili personalizzati per pulsante: Sì
• Dimensione del testo del pulsante: 1.2rem
• Colore del testo del pulsante: #ffffff
• Sfondo del pulsante: #000000
• Larghezza bordo pulsante: 0px
• Raggio bordo pulsante: 0px

• Carattere pulsante: Special Elite

CSS del corpo del commento

E completa le impostazioni del modulo aggiungendo un margine superiore al corpo del commento nella scheda Avanzate.

margin-top: 100px;

3. Salva tutte le modifiche del generatore di temi e visualizza l'anteprima dei risultati

Dopo aver creato il corpo del post del blog personalizzato del tuo modello, puoi salvare tutte le modifiche e visualizzare il risultato sui post del tuo blog!

Anteprima

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

Desktop

Mobile

Pensieri finali

In questo post, abbiamo condiviso un classico modello di post di blog ispirato alla macchina da scrivere che hai potuto scaricare gratuitamente e utilizzare per il tuo prossimo progetto Divi! Abbiamo anche ricreato da zero il design del modello di post. Se hai domande o suggerimenti, non esitare a lasciare un commento nella sezione commenti qui sotto.

Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.