Come creare un blog di stile medio con Divi

Nel post sul blog Divi di oggi, condivideremo alcuni ottimi suggerimenti su come creare il tuo sito Web di blog nello stesso stile del blog Medium.

Medium è noto per essere una delle piattaforme più utilizzate per i blog. Non solo hanno una grande comunità di blogger che interagiscono regolarmente con il loro pubblico, ma la loro piattaforma di blog offre anche un'esperienza utente molto piacevole. Questo è esattamente ciò che ogni blogger vuole. Vogliono essere sicuri di trasmettere il messaggio in modo chiaro e in un ambiente in cui il lettore si sente a suo agio.

Tuttavia, il blog su Medium ha i suoi limiti. Non ci sono vantaggi di SEO coinvolti, per esempio. Creando il tuo blog, ispirato allo stile del blog Medium, puoi continuare quella sensazione familiare che già hanno con il blog Medium e portarlo sul tuo sito web.

Iniziamo

Iscriviti al nostro canale Youtube

Ti mostreremo le parti più importanti della creazione di un blog in stile Medium e ti mostreremo anche, passo dopo passo, come creare alcune delle parti importanti. Per esempio; come creare un modello di post di blog in stile medio che puoi utilizzare per tutti i tuoi post. Il modello è simile a questo:

Ti mostreremo anche come aggiungere i plug-in Vale la pena leggere e Evidenzia e condividi per renderlo ancora più simile. Il risultato Worth The Read è simile a questo:

E l'Evidenzia e Condividi avrà il seguente effetto:

Crea un menu semplicistico come il blog medio

Una delle cose che puoi notare chiaramente quando visiti il ​​sito web di Medium è la semplicità del loro menu. Non ci sono troppe opzioni disponibili che rendono immediatamente più facile la navigazione per i visitatori. I visitatori possono esplorare i post del blog evidenziati sulla home page e continuare il loro soggiorno da lì.

Elementi del menu

Scegli un logo che corrisponda alla semplicità del resto del tuo sito web e assicurati che sia sottile dandogli una piccola dimensione nel tuo menu. Sicuramente non vuoi che il logo prevalga sul contenuto che stai condividendo sul tuo sito web.

Quindi, non includere troppe pagine nella tua navigazione. Dal momento che il tuo sito web riguarderà tutti i blog, la home page è probabilmente sufficiente. Puoi anche considerare di aggiungere una pagina su se desideri dire ai visitatori qualcosa in più su di te.

Andando avanti, includi un'icona di ricerca in modo che le persone possano facilmente cercare tra i post del tuo blog con poche parole chiave. Riguarda il contenuto che stai producendo e rendendolo facile da trovare.

Per l'esempio sopra, abbiamo utilizzato le seguenti impostazioni per la barra dei menu principale nel personalizzatore del tema:

• Altezza del menu: 54
• Altezza massima del logo: 37
• Dimensione del testo: 18

Usa una tavolozza di colori con contrasto e caratteri semplici

Il blog Medium utilizza tre colori principali in tutta la loro piattaforma che rendono il contenuto facile da leggere. Sebbene due dei colori possano sembrare come se fossero in bianco e nero, sono leggermente più morbidi sugli occhi. Il terzo è un colore grigio chiaro ma leggibile. Apportare le seguenti modifiche alla barra del menu principale nella personalizzazione del tema per modificare i colori e il carattere utilizzati nel menu principale:

• Carattere: Source Sans Pro
• Colore del testo: rgba(0,0,0,.44)
• Colore collegamento attivo: rgba (0,0,0,.44)
• Colore di sfondo: #fbfcfd

Includi icona di ricerca

Inoltre, per includere l'icona di ricerca nel menu principale, vai su Intestazione e navigazione > Elementi intestazione > Mostra icona di ricerca.

Disabilita la barra di navigazione fissa

Un'altra cosa che fa il blog Medium è mantenere la barra di navigazione nella parte superiore della pagina. In questo modo, i visitatori non vengono interrotti inutilmente durante la lettura. Per disabilitare la barra di navigazione fissa sul tuo sito web Divi, vai al tuo pannello WordPress > Divi > Opzioni del tema > Impostazioni generali > Disattiva la barra di navigazione fissa.

Dai uno stile ai moduli del blog della tua home page per categorie

Successivamente, vuoi dare uno stile alla home page del tuo sito Web per categorie. A seconda del blog che stai creando, puoi creare diverse sezioni all'interno della tua home page che siano all'altezza di ciò che i tuoi visitatori amano leggere di più. Raccomandiamo di utilizzare almeno il seguente tipo di categorie: popolare, più recente e suggerito. Puoi assegnare i post del blog a queste categorie creando diverse categorie nella pagina "Categorie" di "Post" nel menu di WordPress e assegnando ogni post a una o più categorie all'interno del post stesso.

Un'altra cosa che vuoi davvero fare è rendere facili da seguire i diversi moduli e sezioni del blog nella tua home page. Per ottenere ciò, puoi utilizzare la griglia del blog standard nel generatore Divi o puoi cercare qualcosa di un po' più avanzato. Di seguito abbiamo elencato tre plugin che puoi considerare di utilizzare.

Plugin per schede articolo Divi

Il plug-in Divi Article Card è un plug-in gratuito che è stato condiviso sul nostro blog durante Divi 100. Lo stile utilizzato in questo plug-in è pulito e ha un bell'effetto al passaggio del mouse. È un effetto semplice ma può creare quel piccolo tocco in più per il tuo blog.

Il plugin è completamente gratuito, basta andare al post e scaricarlo!

Modulo blog personalizzato Divi

Un altro plug-in che ha creato un layout del modulo blog di bell'aspetto è il modulo blog personalizzato Divi. Questo assomiglia ai post del blog Medium più del precedente avendo l'immagine in primo piano posizionata sul lato sinistro.

Il prezzo del plugin è di $ 20.

Divi Blog Extra

L'ultimo plugin che potrebbe aiutarti ad avvicinare il tuo blog all'aspetto del blog Medium è Divi Blog Extras. Questo plugin ha anche molti diversi layout di moduli Blog che possono aiutarti a costruire il tuo blog in stile Medium.

Il plug-in viene venduto a $ 15 per la licenza per sito singolo e $ 30 per la licenza estesa.

Crea un modello di post sul blog

Medium ha un formato di post di blog standard per tutti i post che vengono creati. Il design si concentra sull'essenza del post: il contenuto. Il formato del post del blog utilizzato è in linea con il resto del sito Web: semplicistico. Va al sodo usando la combinazione di contenuto scritto e media che puoi inserire in tutto il post.

Divi offre le stesse possibilità. Puoi rendere il tuo post sul blog semplice o delicato come desideri utilizzando i diversi moduli forniti dal Divi builder. Questo è il layout di esempio che ti mostreremo come creare passo dopo passo:

Impostazioni Divi Post

Inizia aggiungendo un nuovo post, assegnandogli un titolo e attivando il Divi builder. Quindi, assicurati che le impostazioni di Divi Post siano le seguenti:

• Layout di pagina: Larghezza intera
• Navigazione a punti: disattivata
• Nascondi Nav prima di scorrere: predefinito
• Titolo del messaggio: Nascondi

Autore (desktop)

Per creare il layout, passeremo al Visual Builder. Inizia aggiungendo una nuova sezione con due righe. Continua aggiungendo un modulo immagine alla prima colonna e due moduli testo alla seconda colonna. Apri le impostazioni della sezione e aggiungi scegli '#fbfcfd' come colore di sfondo.

Modulo immagine

Apri il modulo Immagine, carica l'immagine nella scheda Contenuto e metti l'Allineamento immagine su "Sinistra" nella scheda Design. Andando avanti, aggiungi "-5%" al margine superiore e "25%" al margine sinistro nella sottocategoria Spaziatura della scheda Progettazione.

Successivamente, aggiungi il seguente codice all'elemento principale nella sottocategoria CSS personalizzato della scheda Avanzate:

-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
width: 75px;
height: 75px;

Primo modulo di testo

Aggiungi il nome dell'autore nella casella dei contenuti all'interno della scheda Contenuto e apporta le seguenti modifiche alla sottocategoria Testo della scheda Design:

• Orientamento del testo: a sinistra
• Carattere del testo: Source Sans Pro
• Dimensione carattere del testo: 18
• Colore del testo: rgba(0,0,0,0,8)
• Altezza riga di testo: 1,7 em

Scorri verso il basso la stessa scheda per aggiungere "-3%" al margine superiore e "-70%" al margine sinistro.

Secondo modulo di testo

Digita lo slogan nel secondo modulo di testo e apporta le seguenti modifiche alla sottocategoria Testo della scheda Progettazione:

• Orientamento del testo: a sinistra
• Carattere del testo: Source Sans Pro
• Dimensione carattere del testo: 14
• Colore del testo: rgba(0,0,0,0.44)
• Altezza riga di testo: 1,7 em

Inoltre, scorri verso il basso la stessa scheda e aggiungi "-5%" al margine superiore e "-70%" al margine sinistro nella sottocategoria Spaziatura.

Visibilità riga

Infine, apri le Impostazioni riga e disabilita la riga su telefoni e tablet nella sottocategoria Visibilità della scheda Avanzate.

Autore (cellulare)

Aggiungi un'altra riga alla stessa sezione con una riga a larghezza intera. Continua clonando il modulo immagine e i moduli testo nella riga precedente e posizionandoli nella riga a larghezza intera. Dovremo apportare alcune modifiche a ciascun modulo per renderli centrati sullo schermo quando qualcuno apre la pagina su cellulare o tablet.

Modulo immagine

Apri il modulo immagine e posiziona l'allineamento immagine su "Centro".

Primo modulo di testo

Apri il primo modulo di testo e modifica l'orientamento del testo in "Centro" nella sottocategoria Testo della scheda Progettazione.

Scorri verso il basso la stessa scheda, elimina il margine sinistro e mantieni il margine superiore.

Secondo modulo di testo

Inoltre, fai la stessa cosa per il secondo modulo di testo. Metti l'Orientamento del testo su "Centro" ed elimina il Margine sinistro nella sottocategoria Spaziatura della scheda Contenuto.

Visibilità riga

Infine, apri le impostazioni della riga e disabilita la riga per i desktop.

Modulo post titolo

Poiché abbiamo disabilitato il titolo del post nelle nostre Impostazioni Divi Post, aggiungeremo un modulo Titolo del post in una riga a larghezza intera all'interno della stessa sezione che abbiamo utilizzato fino ad ora.

Nella sottocategoria Elementi della scheda Contenuto, possiamo scegliere quali elementi vogliamo che vengano visualizzati. Poiché abbiamo già menzionato l'autore, abbiamo disabilitato tutto tranne il titolo.

Per di più; apportare le seguenti modifiche alle sottocategorie Testo e Testo del titolo della scheda Progettazione:

• Orientamento del testo: al centro
• Carattere del titolo: Source Sans Pro
• Stile carattere titolo: grassetto
• Dimensione carattere titolo: 47 px (desktop), 40 (tablet), 35 (telefono)
• Colore del testo del titolo: rgba(0,0,0,0,8)

Immagini a tutta larghezza

La prima immagine a larghezza intera che aggiungeremo è una rappresentazione dell'immagine in primo piano. Aggiungi una sezione a larghezza intera, inserisci un modulo immagine a larghezza intera e carica un'immagine nella scheda Contenuto. E 'così semplice.

Moduli di testo

Andando avanti, creeremo i moduli di testo che vengono utilizzati per il post del blog. Aggiungi una sezione standard con una riga a larghezza intera e inserisci un modulo di testo. In questo esempio, stiamo usando la famiglia di caratteri "Cardo" invece di "Georgia" semplicemente perché "Cardo" è una famiglia di caratteri incorporata.

Inoltre, apri le impostazioni del modulo Testo, digita del testo di esempio nella casella Contenuto e vai alla scheda Design. All'interno della sottocategoria Testo, apporta le seguenti modifiche:

• Orientamento del testo: a sinistra
• Carattere del testo: Cardo
• Dimensione carattere testo: 25 px (desktop), 19 px (tablet), 17 px (telefono)
• Colore del testo: rgba(0,0,0,0,8)
• Altezza riga di testo: 1,8 em

Scorri verso il basso la stessa scheda, aggiungi "800 px" alla larghezza massima nella sottocategoria Dimensionamento e aggiungi "10%" al margine sinistro nella sottocategoria Spaziatura.

Modulo video

L'ultima cosa che può dare un valore aggiunto al tuo post sul blog è l'integrazione di un video. Per fare ciò, devi clonare la sezione precedentemente creata con il modulo di testo e dividere il contenuto totale che hai tra i due moduli di testo. Proprio tra le due sezioni, aggiungeremo un'altra sezione con una riga a larghezza intera. In quella riga a larghezza intera, aggiungeremo un modulo video.

Ecco come dovrebbe apparire la struttura nel backend:

Non abbiamo apportato modifiche al modulo video oltre all'aggiunta dell'URL.

Salva modello

Puoi riutilizzare le diverse sezioni per adattarle al post del blog che stai creando clonandole e modificando il contenuto. Dopo averlo fatto, puoi salvare il modello del post del blog facendo clic su "Salva nella libreria" e assegnandogli un nome.

La prossima volta che desideri utilizzare il modello, fai semplicemente clic su "Carica dalla libreria" e carica il modello.

Vale la pena leggere

Una cosa tipica della creazione di un blog Medium è il numero di minuti necessari per leggere un determinato post del blog. Questo di solito appare proprio all'inizio della pagina e fornisce agli utenti una stima di quanto tempo impiegheranno per terminare la lettura. In un'epoca in cui il tempo è la cosa più preziosa, questo aiuta le persone a decidere se vogliono leggere o meno il post del blog.

Un plug-in WordPress gratuito che ti aiuta ad arrivarci è Worth The Read by Well Done Marketing. Puoi scaricarlo dalla pagina che abbiamo collegato o cercarlo nei plugin. La cosa bella di questo plugin è che puoi scegliere dove vuoi che appaia il tempo di lettura; pagine, post o entrambi. Puoi anche scegliere il posizionamento e il formato.

Dopo aver scaricato il plug-in e averlo attivato, fai clic sull'opzione "Progresso lettura" nel suo menu. Vai avanti e apporta le modifiche necessarie. Mettere un tempo di lettura viene solitamente utilizzato solo per i post, quindi la maggior parte delle persone probabilmente sceglierà solo quell'opzione.

Nella scheda Stile, puoi scegliere lo stile che desideri utilizzare. Assicurati di utilizzare lo stesso carattere del titolo. Puoi anche aggiungere codice CSS personalizzato se desideri apportare modifiche extra.

Evidenzia e condividi

Un'altra caratteristica davvero tipica di Medium è la possibilità di evidenziare qualcosa, condividerlo o commentarlo se ti piace. Dà valore aggiunto al post del blog permettendogli di interagire con le persone che lo stanno leggendo. Abbiamo trovato un plugin che ti aiuta a fare qualcosa di simile; il plug-in Highlight and Share, anch'esso gratuito.

Puoi decidere su quali canali di social media le persone possono condividere andando su Impostazioni > Evidenzia e condividi > Abilitazione dei canali di social media che desideri utilizzare.

Avvolgendo

Dopo aver letto questo post, dovresti essere in grado di iniziare a costruire il tuo blog in stile Medium che contenga alcune delle parti più rilevanti di Medium. Hai molte possibilità per mantenerlo semplice come fa il blog Medium, ma infonderlo comunque con alcuni tocchi personali. Se hai domande o suggerimenti; assicurati di lasciare un commento nella sezione commenti qui sotto in modo che possiamo rimanere in contatto con la nostra fantastica community Divi!

Assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da non perdere mai un grande annuncio, un consiglio utile o un omaggio Divi!

Immagine in primo piano di Julia Tim / shutterstock.com