Come limitare la lunghezza dell'estratto del tuo modulo blog Divi

Pubblicato: 2022-02-03

I post estratti forniscono al lettore un piccolo teaser sul contenuto. Possono essere generati automaticamente dal contenuto o creati manualmente per ogni post. Indipendentemente da come vengono creati, è importante avere il controllo sulla loro lunghezza. In questo articolo, vedremo come limitare la lunghezza degli estratti del modulo Divi Blog. Vedremo anche come modellarlo in modo che funzioni perfettamente con il design del tuo sito.

Iniziamo.

Anteprima

Per prima cosa, vediamo cosa costruiremo.

Lunghezza dell'estratto limitata sul desktop

Lunghezza dell'estratto limitata sul desktop

Lunghezza limitata dell'estratto sul telefono

Lunghezza limitata dell'estratto sul telefono

Iscriviti al nostro canale Youtube

Perché includere un estratto del post?

Perché includere un estratto del post

Un estratto del post fornisce una o due frasi dal contenuto per aiutare il lettore a capire di cosa tratta il post. Invece di mostrare tutto il contenuto del post del blog, WordPress mostra un piccolo frammento del contenuto. Questo aiuta a controllare le dimensioni del post all'interno del feed, creando un design più pulito e più facile da usare. Dà al tuo layout un aspetto coerente in tutta la pagina.

Perché includere un estratto del post

Questo frammento può essere specificato dall'autore, oppure WordPress può prendere un certo numero di caratteri dal primo paragrafo da visualizzare come estratto. WordPress può utilizzare questo snippet per controllare ciò che viene visualizzato nel feed del blog. I motori di ricerca lo utilizzano per visualizzare una parte del contenuto nei risultati di ricerca.

Perché includere un estratto del post

Per i post nelle pagine dei feed del blog di WordPress, la possibilità di mostrare l'estratto deve essere abilitata nelle Impostazioni di lettura. Possiamo abilitare questa opzione, ma non ci dà il controllo sulla lunghezza dell'estratto.

Perché includere un estratto del post

Il modulo Divi Blog mostra gli estratti dei post del blog per impostazione predefinita. Non è necessario modificare le impostazioni di WordPress. Il modulo fornisce molte opzioni tra cui un campo per specificare la lunghezza dell'estratto del post.

Come limitare la lunghezza dell'estratto del post

Come limitare la lunghezza dell'estratto del post

Limitare la lunghezza dell'estratto del post nel modulo Divi Blog è semplice. Innanzitutto, passa il mouse sopra il modulo e fai clic sull'icona a forma di ingranaggio per aprire le impostazioni del modulo.

Come limitare la lunghezza dell'estratto del post

Nelle impostazioni del contenuto, scorri verso il basso fino a visualizzare Lunghezza del contenuto . Qui abbiamo diverse opzioni per controllare l'estratto del post. Queste sono le impostazioni predefinite. Per limitare la lunghezza dell'estratto, scegli semplicemente di mostrare l'estratto e inserisci il numero di caratteri da mostrare nel campo Lunghezza estratto.

  • Lunghezza contenuto: Mostra estratto
  • Lunghezza estratto: inserire il numero

Diamo un'occhiata più da vicino a cosa fa ogni impostazione.

Lunghezza del contenuto

Lunghezza del contenuto

Lunghezza contenuto ti consente di scegliere tra mostrare un estratto e mostrare l'intero contenuto. Selezionare Mostra estratto per specificare una lunghezza dell'estratto. Questo esempio mostra il contenuto.

  • Lunghezza contenuto: Mostra estratto

Usa gli estratti dei post

Usa gli estratti dei post

Usa estratti di post mostra l'estratto facoltativo specificato dall'autore del post nell'editor di post di WordPress. Se il post non include un estratto creato manualmente, genera automaticamente un estratto dal primo paragrafo.

Lunghezza dell'estratto

Lunghezza dell'estratto

Lunghezza estratto consente di specificare il numero di caratteri da visualizzare per l'estratto. Questa è la seconda impostazione per limitare la lunghezza dell'estratto. Inserisci l'importo che desideri nel campo. Il valore predefinito è 270. Puoi inserire qualsiasi importo desideri visualizzare.

Non esiste un determinato numero di caratteri estratto che sia sempre il migliore da scegliere. Il contenuto è diverso, il pubblico è diverso e il tuo design è diverso. Consiglio di utilizzare un numero che corrisponda al meglio al design della pagina. Puoi anche eseguire alcuni test a/b split per vedere quale lunghezza dell'estratto funziona meglio per il tuo pubblico.

Nascondi l'estratto

Nascondi l'estratto

È anche possibile nascondere completamente l'estratto. Scorri semplicemente verso il basso fino a Elementi e disabilita Mostra estratto .

Come modellare l'estratto del post

Come modellare l'estratto del post

Ora che abbiamo visto come limitare l'estratto del post, vediamo come modellarlo in modo che corrisponda al tuo sito web. Per i miei esempi, ho aggiunto il modulo Blog alla Home page del Software Layout Pack. Questa pagina non include un modulo Blog. Mostrerò come modellarlo in modo che corrisponda alla pagina e selezionare un estratto che funzioni con il design della pagina.

Nota: per risparmiare tempo, normalmente copierei il modulo dalla pagina di destinazione di questo pacchetto di layout. Invece, inizierò da zero e seguirò le code di progettazione dalla Home page e creerò il mio stile.

Aggiungi una nuova sezione, riga e modulo blog

Come modellare l'estratto del post

Innanzitutto, aggiungi una nuova sezione regolare nella sezione Caratteristiche delle squadre. Fare clic sull'icona più blu e selezionare Normale.

Come modellare l'estratto del post

Seleziona una singola colonna Riga .

Come modellare l'estratto del post

Aggiungi un modulo di testo alla riga. Questo creerà un titolo per la sezione del blog.

Come modellare l'estratto del post

Quindi, aggiungi una nuova riga sotto la prima. Questa riga conterrà il nostro modulo Divi Blog.

Come modellare l'estratto del post

Infine, aggiungi un modulo Blog alla seconda riga. Questo modulo appare sopra il modulo Testo, quindi non vedremo il Titolo finché non apporteremo modifiche al modulo Blog.

Ora è il momento di modellarli. Imposteremo il modulo Blog mentre lo stiliamo.

Stile la sezione

Come modellare l'estratto del post

Per prima cosa, definiamo lo stile della Sezione. Apri le opzioni della sezione facendo clic sull'icona a forma di ingranaggio.

Come modellare l'estratto del post

Scorri fino a Sfondo e imposta il colore su #f6f2ea. Chiudi le impostazioni.

  • Sfondo: #f6f2ea

Modella la riga

Come modellare l'estratto del post

Apri la Riga con il modulo Testo . Se il modulo Testo appare dietro il modulo Blog, puoi passare alla vista wireframe per fare clic sulla sua icona a forma di ingranaggio. Vai alla scheda Design e cambia la Larghezza massima a 800px. Chiudi le impostazioni della riga.

  • Larghezza massima: 800 px

Modella il modulo di testo

Come modellare l'estratto del post

Apri il modulo Testo , seleziona Intestazione 2 e inserisci Blog come titolo della sezione.

  • Stile del testo: Titolo 2
  • Testo: Blog

Come modellare l'estratto del post

Vai alla scheda Design e scorri verso il basso fino a Testo intestazione . Seleziona H2 e scegli Archivio, semi grassetto e imposta il colore su # 010101.

  • Intestazione: H2
  • Carattere: Archivio
  • Peso: semigrassetto
  • Colore: #010101

Come modellare l'estratto del post

Imposta la dimensione del carattere del desktop su 50px e la dimensione del carattere del telefono su 20px. Imposta l' altezza della linea su 1,35 em.

  • Dimensione carattere: 50px desktop, 20px telefono
  • Altezza della linea: 1,35 em

Come modellare l'estratto del post

Imposta l' allineamento del modulo su Centro e aggiungi 8px di margine inferiore . Chiudi le impostazioni.

  • Allineamento modulo: centro
  • Margine inferiore: 8px

Stile il modulo blog

Come modellare l'estratto del post

Ora possiamo passare al modulo Blog. Sono tornato alla visualizzazione visiva del desktop. Apri alle impostazioni del modulo.

Impostazioni del contenuto del modulo blog

Nella scheda Contenuto, inserisci 3 per il numero di post .

  • Conteggio post: 3

Scegli di Mostra estratto per la lunghezza del contenuto, seleziona Usa estratti del post e imposta la lunghezza dell'estratto su 300.

In Elementi , abilita Mostra immagine in evidenza, Mostra pulsante Leggi altro e Mostra estratto. Disattiva tutto il resto.

  • Mostra immagine in evidenza: Sì
  • Mostra pulsante Leggi di più: Sì
  • Mostra Autore: n
  • Data di presentazione: n
  • Mostra categorie: n
  • Mostra Conteggio commenti: No
  • Mostra estratto: Sì
  • Mostra impaginazione: No

Impostazioni di progettazione del modulo blog

Testo del titolo

Vai alla scheda Progettazione. Normalmente, personalizzerei l'overlay, ma l'overlay predefinito funziona perfettamente con questo layout. Scorri verso il basso fino a Testo del titolo e seleziona H3. Imposta il carattere su Archivo, Grassetto e il colore su # 010101.

  • Titolo Titolo Livello: H3
  • Carattere: Archivio
  • Peso: grassetto
  • Colore: #010101

Imposta la dimensione del testo del desktop su 30px, la dimensione del testo del telefono su 16px e l' altezza della linea su 1,4em.

  • Dimensione carattere: desktop 30px, telefono 16px
  • 4 em
Carattere del corpo

Per il corpo del testo , scegli Archivo, impostalo su normale, seleziona il nero, imposta la dimensione su 15px e l'altezza della linea del corpo su 1,5em.

  • Carattere: Archivio
  • Peso: regolare
  • Colore: #000000
  • Dimensioni: 15px
  • Altezza della linea: 1,5 em
Leggi di più Testo

Scorri verso il basso fino alle impostazioni per Leggi altro testo . Scegli Archivo, Grassetto, TT, impostalo su nero, dimensione 16px e imposta l'altezza della linea su 2,6em.

  • Carattere: Archivio
  • Peso: grassetto
  • Stile: TT
  • Colore: #000000
  • Dimensioni: 16px
  • Altezza della linea: 2,6 em
Spaziatura

Scorri verso il basso fino a Spaziatura e posiziona 0vw sul margine superiore. Questo porta il contenuto sotto il titolo in modo che ora possiamo vedere Blog sopra il modulo Blog.

  • Margine superiore: 0vw
Frontiera

Quindi, scorri verso il basso fino a Bordo . Imposta gli angoli su 0px, la larghezza su 1px e il Colore su nero.

  • Angoli arrotondati: 0px
  • Larghezza bordo: 1px
  • Colore: #000000
Box Ombra

Infine, scorri fino a Box Shadow e disabilitalo. Salva le tue impostazioni. Hai finito.

  • Box Shadow: Nessuno
Come appare nel layout

Ecco come appare aggiunto al layout. Ora, vediamolo da vicino sia per desktop che per telefono.

Risultati

Lunghezza dell'estratto limitata sul desktop

Lunghezza dell'estratto limitata sul desktop

Lunghezza limitata dell'estratto sul telefono

Lunghezza limitata dell'estratto sul telefono

Pensieri finali

Questo è il nostro sguardo su come limitare la lunghezza dell'estratto del tuo modulo Divi Blog. Limitare la lunghezza dell'estratto può avere un impatto sul design del layout. Fortunatamente, il modulo Blog di Divi ti offre molte opzioni per limitare e controllare la lunghezza del tuo estratto. Anche lo stile dell'estratto è facile con le opzioni di stile del modulo Divi Blog.

Vogliamo sentire da voi. Limiti gli estratti dei post nel modulo del tuo blog Divi? Fatecelo sapere nei commenti.