Vorresti migliorare i post del tuo blog? Divi aggiungendovi una sezione Hero?
Le sezioni Hero a schermo intero hanno un bell'aspetto su qualsiasi pagina web, ma sono particolarmente belle sui post del blog.
Anche se l'immagine in primo piano è a schermo intero, ci sono molte opzioni di design per posizionare il titolo e il meta testo. È facile da fare con il Generatore di temi Divi .
In questo articolo, vedremo diversi modi per aggiungere una sezione Hero a schermo intero al tuo modello di post sul blog. Divi.
Cominciamo.
Panoramica
Ecco un'anteprima di ciò che progetteremo in questo tutorial.
Leggi anche: Divi: come utilizzare il "Gradient Builder" per abbellire le tue immagini
Sezione Hero con il modulo della versione desktop del titolo del post
Sezione Hero con modulo versione mobile Post Title
Layout alternativo della sezione Hero con il modulo della versione desktop Post Title
Scarica DIVI ora!!!
Layout alternativo della sezione Hero con il modulo Post Title mobile
Sezione Hero con metadati Versione desktop
Sezione Hero con versione mobile dei metadati
Scarica DIVI ora!!!
Modelli di post sul blog per la tua sezione Hero a schermo intero
Puoi creare il modello di post del blog in Divi Theme Builder da zero o scarica un modello dal Blog di temi eleganti. Per trovarli, cerca nel blog "modello di post di blog gratuito". Se scarichi un modello, assicurati di decomprimerlo.
Per i nostri esempi, useremo il Modello di post di blog gratuito per il pacchetto di layout per stilista di moda di Divi . Usiamo anche il layout pack gratis Intestazione e piè di pagina Stilista di moda .
Scarica o crea il tuo modello di post sul blog per la tua sezione Hero a schermo intero
Puoi scaricare il tuo modello di post sul blog o crearne uno da zero. Ne caricheremo uno, ma il processo per creare una sezione Hero a schermo intero è lo stesso.
Guarda anche: Divi: come utilizzare maschere e motivi di sfondo per una sezione eroe
Metodo 1: modulo del titolo del post a schermo intero
Questo metodo utilizzerà il file Modulo PostTitolo . È una buona scelta se si desidera visualizzare tutte le informazioni insieme. Una volta ottenuto il modello, seleziona l'icona di modifica per aprirlo.
Il modello che abbiamo caricato ha una sezione con l'immagine in primo piano. Rimuoveremo questa sezione e aggiungeremo a Sezione a tutta larghezza al suo posto.
selezionare Titolo articolo a larghezza intera nell'elenco dei moduli a larghezza intera.
Tutti gli elementi sono selezionati per impostazione predefinita. Lasciali abilitati. Scorri fino a Posizionamento dell'immagine in primo piano e selezionare Titolo sopra.
- Posizionamento dell'immagine in primo piano: sopra il titolo
Scorri fino a Colore di sfondo e imposta il colore su #fff9f2
- Sfondo: #fff9f2
Titolo del testo
Seleziona la scheda Disegno . Per il testo del titolo, mantieni H1 e scegli Playfair Display. Impostalo su Giustificato a sinistra e scegli # 34332e per il colore.
- Titolo:
- Livello di intestazione: H1
- Carattere: Display Playfair
- Allineamento del testo: giustificato a sinistra
- Colore testo: #34332e
Per dimensione del testo , imposta la versione desktop su 65 px, la versione mobile su 42 px e l'altezza della riga su 1,2 em.
- Dimensione del testo del titolo (desktop): 65px (desktop), 42px (telefono)
- Altezza riga del titolo: 1,2 em
Metatesto
Scorri fino a Meta testo. Seleziona Montserrat per il carattere e impostalo su medio, maiuscolo, allineamento a destra per la versione desktop e allineamento a sinistra per la versione mobile. Scegli # 7b7975 per il colore.
- MetaFont:
- Fonte: Montserrat
- Peso: Medio
- Stile: TT
- Metatesto:
- Allineamento: destra (desktop), sinistra (telefono)
- Colore: #7b7975
Definisci il dimensione del font per la versione desktop a 14 px, per la versione mobile a 10 px, la spaziatura delle lettere a 1 px e l'altezza della linea a 1,6 em. Chiudi le impostazioni e salva il modello.
- Metatesto:
- Dimensioni (desktop): 14px
- Dimensioni (telefono): 10px
- Spaziatura lettere: 1px
- Altezza della linea: 1,6 em
Titolo sull'immagine di sfondo
Se decidi di far apparire il titolo sull'immagine in primo piano, utilizza le stesse impostazioni di progettazione e torna alla scheda Contenuti.
selezionare Titolo/Meta immagine di sfondo per Posizionamento dell'immagine in primo piano.
- Posizionamento dell'immagine in primo piano: titolo/meta immagine di sfondo
Scorri fino a sfondo e selezionare Gradiente di sfondo. Imposta il colore sinistro su #fff9f2, il colore destro su rgba(255,255,255,0), la direzione su 90 gradi, la posizione iniziale su 30% e scegli Sì per posizionare il gradiente sopra l'immagine di sfondo. Chiudi e salva le impostazioni.
- Gradiente si ferma:
- 30%: #fff9f2
- 100%: RGB(255,255,255,0)
- Direzione del gradiente: 90 gradi
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
Metodo 2: sezione Hero a schermo intero con metadati
Questo metodo utilizzerà i moduli di testo con contenuto dinamico per le informazioni. Questa è una buona opzione se desideri visualizzare tutti gli elementi in luoghi diversi.
Innanzitutto, scarica il modello ed elimina la prima sezione. Ricreeremo i moduli e le relative impostazioni nella colonna di sinistra, ma li esamineremo in modo da poterli configurare.
Impostazioni della sezione Hero a schermo intero con metadati
Apri le impostazioni del pagina e scorri fino a Immagine di sfondo. Selezionare Gradiente di sfondo e modificare le impostazioni come segue:
- Gradiente si ferma:
- 30%: #fff9f2
- 100%: RGB(255,255,255,0)
- Direzione gradiente: 90 gradi
- Gradiente quadrato sopra l'immagine di sfondo: SÌ
selezionare Immagine di sfondo e scegli l'opzione Usa il contenuto dinamico.
Scegliere Immagine in primo piano nelle opzioni.
Seleziona la scheda Designe scorri fino a dimensionamento. Aggiungere 100vh all'altezza minima. Chiudi le impostazioni della sezione.
- Altezza minima: 100vh
Impostazioni della sezione Hero a schermo intero con metadati
Successivamente, aggiungi una riga a doppia colonna alla sezione.
Aggiungere un Modulo di testo nella colonna di destra.
Per il suo contenuto, selezionare Usa il contenuto dinamico.
Scegliere Titolo post/archivio nell'elenco delle opzioni.
- Contenuto dinamico: titolo del post/archivio
Vai alla scheda Design.
- Intestazione:
- Testo: H1
- Carattere: Display Playfair
- Allineamento del testo: giustificato a sinistra
- Colore testo: #34332e
Per le dimensioni di testi , impostato per la versione desktop su 65 px, per la versione mobile su 42 px e l'altezza della riga su 1,2 em.
- Intestazione:
- Dimensioni del testo: 65px (desktop), 42px (telefono)
- Altezza della linea: 1,2 em
Scorri fino a Spaziatura e inserisci 50% per l'imbottitura superiore. Chiudi Impostazioni.
- Imbottitura: 50% (in alto)
Puoi anche leggere questo articolo su: Come creare una sezione eroe con il modulo di intestazione a larghezza intera di Divi
Sezione Hero con categoria di metadati
Aggiungi una nuova sezione regolare nella sezione Hero.
Apri le sue impostazioni e imposta il file colore sfondo su #fff9f2. Chiudi Impostazioni.
- Colore di sfondo: #fff9f2
Quindi aggiungere un linea di 4 colonne alla nuova sezione.
Eroe a schermo intero con testo della categoria dei metadati
Aggiungere un Modulo di testo nella colonna di sinistra.
Apri le impostazioni del modulo e seleziona Usa il contenuto dinamico per il corpo del testo.
selezionare Categorie passate nella lista
- Contenuto dinamico: categorie di post
Seleziona la scheda Design e scorri verso il basso fino a Testo intestazione. Seleziona H4. Scegli Playfair Display per il carattere e impostalo su medio, maiuscolo, allineamento a destra per la versione desktop e allineamento a sinistra per la versione per telefono. Scegli # 7b7975 per il colore.
- Intestazione:
- Visualizzazione del testo
- Carattere: Display Playfair
- Peso del carattere: medio
- Stile: TT
- Allineamento del testo: centro
- Colore del testo: #7b7975
Imposta la dimensione del carattere per la versione desktop a 14 px, per la versione mobile a 10 px, la spaziatura tra le lettere a 1 px e l'altezza della linea a 1,6 em. Chiudi le impostazioni e salva il modello.
- Titolo 4:
- Dimensioni (desktop): 14px
- Dimensioni (telefono): 10px
- Spaziatura lettere: 1px
- Altezza della linea: 1,6 em
Scorri fino a Spaziatura e aggiungi 0px al margine inferiore. Chiudi Impostazioni.
- Margine (inferiore): 0px
Sezione Hero a schermo intero con metadati Meta Text
Successivamente, copia il modulo Categoria e trascinalo nella colonna successiva. Ciascuno dei moduli Meta ha le stesse impostazioni. Mostreremo come creare il primo modulo e poi copiarlo due volte per creare gli altri moduli.
Auteur
Apri le impostazioni ed elimina il file contenuto dinamico.
Fare clic Usa il contenuto dinamico e scegliere Post autore.
- Contenuto dinamico: Post Autore
Nella scheda Design, Modificare le seguenti impostazioni.
- Titolo 4:
- Fonte: Montserrat
- Peso del carattere: medio
- Stile: TT
- Allineamento del testo (desktop): al centro
- Allineamento del testo (telefono): a sinistra
- Colore: #7b7975
I parametri di dimensione del font includere:
- Dimensioni del testo: 14px (desktop), 10px (telefono)
- Spaziatura lettere: 1px
- Altezza della linea: 1,6 em
La margine inferiore deve avere 0px.
- Margine (inferiore): 0px
Data
copia il modulo Autore e trascinalo nella colonna successiva.
Cancellalo contenuto dinamico corrente, scegli Usa il contenuto dinamico e selezionare Data di pubblicazione successiva. Chiudi Impostazioni.
- Contenuto dinamico: data di pubblicazione successiva
commentaires
Infine, copiare il modulo Post pubblicazione data e trascinalo sull'ultima colonna.
Come con altri moduli, rimuovi il contenuto dinamico e seleziona Usa il contenuto dinamico .
Scegliere Conteggio commenti post dalle tue scelte.
- Contenuti dinamici: numero di commenti sui post
Questa volta aggiungi uno spazio e la parola Commenti nel campo Dopo shavasana, sedersi in silenzio; saluti; . Chiudi il piccolo modale, quindi chiudi le impostazioni. Salva il tuo lavoro.
- Dopo: Commenti
Leggi anche: Divi: come visualizzare il modulo di intestazione a larghezza intera a schermo intero
Risultati
Sezione Hero con il modulo della versione desktop del titolo del post
Sezione Hero con modulo versione mobile Post Title
Layout alternativo della sezione Hero con il modulo della versione desktop Post Title
Layout alternativo della sezione Hero con il modulo Post Title mobile
Sezione Hero con metadati Versione desktop
Sezione Hero con metadati della versione mobile
Scarica DIVI ora!!!
Conclusione
Questo è tutto! Questo è il nostro sguardo su come aggiungere una sezione Hero a schermo intero al modello di post del tuo blog. Divi.
Moduli Divi e Theme Builder offrono diverse opzioni per creare sezioni Hero a schermo intero. Tutti i metodi funzionano molto bene e tutti hanno i loro vantaggi.
Utilizzando questi metodi, puoi aggiungere una sezione Hero a schermo intero a qualsiasi modello di post del blog Divi.
Speriamo che questo tutorial ti ispiri per i tuoi prossimi progetti Divi. Se hai dubbi o suggerimenti, trovaci in la sezione commenti per discuterne.
Puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet.
Non esitate a consultare anche la nostra guida sul Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
