Il modulo Divi Job Title mostra il titolo del tuo post corrente e, se applicabile, l'immagine del post e i metadati in modo elegante. Ciò ti consente di creare post più unici quando crei i tuoi post utilizzando Divi Builder.
Come aggiungere un modulo Titolo post alla tua pagina
Prima di poter aggiungere un modulo titolo alla tua pagina, devi prima passare a Divi Builder. Una volta che il Tema Divi installato sul tuo sito web, noterai un pulsante Usa Divi Builder sopra l'editor dei post ogni volta che crei una nuova pagina. Fare clic su questo pulsante per attivare Divi Builder e accedere a tutti i moduli Divi Builder. Quindi fare clic sul pulsante Usa Visual Builder per avviare il generatore in modalità visuale. Puoi anche fare clic sul pulsante Usa Visual Builder quando sfogli il tuo sito web in primo piano se hai effettuato l'accesso alla dashboard di WordPress.
Una volta entrato in Visual Builder, puoi fare clic sul pulsante più grigio per aggiungere un nuovo modulo alla tua pagina. I nuovi moduli possono essere aggiunti solo all'interno delle righe. Se stai iniziando una nuova pagina, ricordati di aggiungere prima una riga alla tua pagina.
Individua il modulo del titolo dell'articolo nell'elenco dei moduli e fai clic su di esso per aggiungerlo alla tua pagina. L'elenco dei moduli è ricercabile, il che significa che puoi anche digitare la parola "titolo del post" e quindi fare clic su Invio per trovare e aggiungere automaticamente il modulo del titolo del post! Una volta aggiunto il modulo, sarai accolto dall'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .
Esempio di caso d'uso: formattazione di un modulo del titolo di un post per un post del blog
Per questo esempio, ti mostrerò quanto è facile personalizzare un titolo di pubblicazione per un post sul blog.
La prima cosa che devi fare è andare alla pagina "Modifica articolo" della dashboard di WordPress. Nell'area Impostazioni post Divi in alto a destra, imposta il layout su Larghezza intera e nascondi il titolo dell'articolo.
Utilizzando Visual Builder, aggiungi una sezione regolare con una riga a larghezza intera (1 colonna). Quindi aggiungi il modulo Titolo del post alla riga.
Aggiorna le impostazioni del titolo del messaggio come segue:
Opzioni di contenuto
Visualizza post Categorie: NO Mostra commenti Numero: NO Visualizza immagine in primo piano: SÌ Immagine in primo piano Ubicazione: Titolo / Meta Immagine di sfondo
Opzioni di design
Orientamento del testo: centro Colore del testo: colore chiaro dello sfondo Testo: SÌ Colore dello sfondo del testo: rgba (0,0,0,0.35) Carattere titolo: Roboto (grassetto) Dimensione carattere titolo: 50px Spaziatura caratteri titolo: 2px titolo Altezza riga: 1em Meta Font: Raleway Light Meta Dimensione carattere: 24px Meta Colore carattere: # e0ba67
Salva le impostazioni
È tutto. Ora non devi più accontentarti di un altro titolo di lavoro noioso!
Opzioni di contenuto per il titolo della pubblicazione
Nella scheda dei contenuti troverai tutti gli elementi di contenuto del modulo, come testo, immagini e icone. Tutto ciò che controlla cosa appare nel tuo modulo si troverà sempre in questa scheda.
Mostra titolo
Qui puoi scegliere di visualizzare o meno il titolo dell'articolo.
Mostra Meta
Qui puoi scegliere se visualizzare o meno il Post Meta.
Mostra autore
Qui puoi scegliere se visualizzare o meno il nome dell'autore in Post Meta.
Mostra la data
Qui puoi scegliere se visualizzare o meno la data.
Formato data
Qui puoi impostare il formato della data in Post Meta. L'impostazione predefinita è "M j, Y"
Mostra le categorie di articoli
Qui puoi scegliere se visualizzare o meno le categorie in Post Meta. Nota: questa opzione non funziona con i tipi di post personalizzati.
Visualizza i commenti
Qui puoi scegliere se visualizzare o meno il numero di commenti in Post Meta.
Mostra immagine in primo piano
Qui puoi scegliere se visualizzare o meno l'immagine selezionata.
Posizionamento dell'immagine in primo piano
Qui puoi scegliere dove posizionare l'immagine selezionata.
Colore di sfondo
Definisci un colore di sfondo personalizzato per il tuo modulo o lascia vuoto per utilizzare il colore predefinito.
Etichetta amministrativa
Questo cambierà l'etichetta del modulo nel costruttore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette vengono visualizzate nel blocco del modulo dell'interfaccia di Divi Builder.
Pubblica opzioni di design del titolo
Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa è la scheda che utilizzerai per modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare qualsiasi cosa.
Usa l'effetto Parallax
Se il posizionamento dell'immagine selezionata è impostato su "titolo / Meta Background Image", puoi scegliere se usare o meno l'effetto di parallasse per l'immagine selezionata.
Metodo di parallasse
Qui puoi scegliere quale metodo di parallasse utilizzare per l'immagine selezionata: CSS o True Parallax.
Orientamento del testo
Qui puoi scegliere l'orientamento per il titolo / metatesto.
Colore del testo
Qui puoi scegliere il colore per il titolo Titolo / Meta.
Usa il colore di sfondo del testo
Qui puoi scegliere se usare o meno il colore di sfondo per il titolo / meta-tex.
Colore di sfondo del testo
Se il colore di sfondo è abilitato, scegli qui il colore di sfondo desiderato.
Carattere del titolo
È possibile modificare il carattere del testo del titolo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.
Dimensione del carattere del titolo
Qui puoi regolare la dimensione del testo del titolo. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo o immettere direttamente il valore della dimensione del testo desiderato nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.
Colore del testo del titolo
Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se desideri modificare il colore del testo del titolo, scegli il colore desiderato dal selettore di colori utilizzando questa opzione.
Spaziatura delle lettere del titolo
La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel testo del titolo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione di spaziatura desiderata nel campo di immissione a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.
Altezza della riga del titolo
L'altezza della linea influisce sullo spazio tra ogni riga del testo del titolo.Se desideri aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di input situato a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.
Metas font
Puoi modificare il carattere del tuo meta testo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri forniti da Google Fonts. Per impostazione predefinita, Divi utilizza il carattere Open Sans per tutto il testo sulla tua pagina. Puoi anche personalizzare lo stile del tuo testo utilizzando le opzioni grassetto, corsivo, maiuscolo e sottolineato.
Dimensione del carattere Metas
Qui puoi regolare la dimensione del tuo meta-testo. È possibile trascinare il dispositivo di scorrimento dell'intervallo per aumentare o diminuire la dimensione del testo o immettere direttamente il valore della dimensione del testo desiderato nel campo di immissione a destra del dispositivo di scorrimento. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il suo tipo di unità.
Colore del testo dei dati metas
Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del tuo meta-testo, scegli il colore desiderato dal selettore di colori usando questa opzione.
Spaziatura delle lettere dei dati metas
La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera nel tuo meta-testo, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di input a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.
Altezza della linea metas
L'altezza della riga influisce sullo spazio tra ogni riga nel tuo meta-testo Se vuoi aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata nel campo di immissione situato a destra del cursore. I campi di input supportano diverse unità di misura, il che significa che puoi inserire "px" o "em" a seconda del valore della tua dimensione per cambiare il tipo di unità.
Usa il bordo
Abilitando questa opzione verrà posizionato un bordo attorno al modulo. Questo bordo può essere personalizzato utilizzando i seguenti parametri condizionali.
Colore del bordo
Questa opzione influisce sul colore del bordo. Seleziona un colore personalizzato dal selettore di colori per applicarlo al bordo.
Larghezza del confine
Per impostazione predefinita, i bordi sono larghi 1 pixel. È possibile aumentare questo valore trascinando il dispositivo di scorrimento dell'intervallo o immettendo un valore personalizzato nel campo di immissione a destra del dispositivo di scorrimento. Sono supportate unità di misura personalizzate, il che significa che puoi cambiare l'unità predefinita da "px" a qualcos'altro come em, vh, vw ecc.
Stile del bordo
I bordi supportano otto diversi stili: solido, punteggiato, punteggiato, doppio, scanalatura, cresta, sovrapposizione e inizio. Seleziona lo stile desiderato dal menu a discesa per applicarlo al bordo.
Margine personalizzato
Il margine è lo spazio aggiunto all'esterno del modulo, tra il modulo e l'elemento successivo sopra, sotto o a sinistra ea destra di esso. È possibile aggiungere valori di margine personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.
Imbottitura personalizzata
Il riempimento è lo spazio aggiunto all'interno del modulo, tra il bordo del modulo ei suoi elementi interni. È possibile aggiungere valori di riempimento personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere il margine personalizzato, rimuovere il valore aggiunto dal campo di input. Per impostazione predefinita, questi valori vengono misurati in pixel, ma è possibile immettere unità di misura personalizzate nei campi di input.
Mostra le opzioni di titolo avanzate
Nella scheda Avanzate troverai le opzioni che i web designer più esperti potrebbero trovare utili, come gli attributi CSS e HTML personalizzati. Qui puoi applicare CSS personalizzati a uno qualsiasi dei molti elementi del modulo. Puoi anche applicare classi e ID CSS personalizzati al modulo, che possono essere utilizzati per personalizzare il modulo nel file style.css del tema figlio.
ID CSS
Immettere un ID CSS opzionale da utilizzare per questo modulo. Un ID può essere utilizzato per creare uno stile CSS personalizzato o per collegarsi a particolari sezioni della tua pagina.
Classe CSS
Inserisci le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare stili CSS personalizzati. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tema figlio Divi o nel foglio di stile CSS personalizzato che aggiungi alla tua pagina o sito web. sito web utilizzando le opzioni del tema Divi o le impostazioni della pagina Divi Builder.
CSS personalizzato
Il CSS personalizzato può anche essere applicato al modulo ea qualsiasi parte interna del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere fogli di stile CSS personalizzati direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già inserite nei tag di stile. Quindi inserisci le regole CSS separate da punto e virgola.
visibilità
Questa opzione ti consente di controllare i dispositivi su cui appare il tuo modulo. Puoi scegliere di disattivare singolarmente il tuo modulo su tablet, smartphone o desktop. Ciò è utile se desideri utilizzare mod diverse su dispositivi diversi o se desideri semplificare il design mobile rimuovendo determinati elementi dalla pagina.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]SCARICA IL MODELLI DIVI[/vcex_button][/vc_column][/vc_row]
Altri tutorial di Divi
- siti 5 che utilizzano Divi ristorante a tema
- Come aggiungere testo su un prodotto Divi WooCommerce
- Come cambiare il colore del menu tra le pagine Divi
- Come personalizzare le griglie di un blog con Divi
- Come utilizzare il ruolo di Editor Divi su WordPress
- Come creare un dispositivo di scorrimento Divi a schermo intero
- Come cambiare il colore dei menu tra le pagine di Divi
- Funzionalità che probabilmente non conosci su Divi
- Come usare Divi Builder su WordPress
- Come usare il modulo di scorrimento video Divi
- Come utilizzare il modulo Divi Builder Flip
- Come aggiungere un modulo di testimonianza su Divi Builder
- Come usare il modulo di testo Divi
- Come creare un dispositivo di scorrimento su Divi
- Come modificare un ruolo utente Divi
- Come usare il modulo Divi Social Media
- Come utilizzare il modulo negozio sul tema WordPress Divi
- Come utilizzare il modulo barra laterale Divi
- Come utilizzare il modulo Tabella prezzi Divi
- Come utilizzare il modulo del titolo delle pubblicazioni Divi
- Come aggiungere un modulo video di Divi
- Come utilizzare il modulo di navigazione dell'articolo
- Come usare il modulo di ricerca Divi
- Come utilizzare il modulo portafoglio Divi
- Come usare il modulo persona su Divi Builder
- Come usare il modulo portafoglio con filtro Divi
- Come utilizzare il modulo di scorrimento a larghezza piena
- Come utilizzare il modulo immagine Divi Builder
- Come utilizzare il modulo di navigazione a larghezza intera di Divi Builder
- Come utilizzare il modulo della galleria di immagini
- Come utilizzare il modulo Divi Builder Full-Width Card
- Come utilizzare il modulo Divi Full Width Portfolio
- Come utilizzare il modulo di intestazione a tutta larghezza Divi
- Come utilizzare il modulo contatore Divi
- Come utilizzare il dispositivo di scorrimento degli articoli su Divi Builder
- Come utilizzare il modulo Divi Email Optin