Prima di poter aggiungere un modulo Riepilogo alla tua pagina, devi prima accedere a Divi Builder. Una volta che 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. Facendo clic su questo pulsante, attivi Divi Builder, che ti dà accesso 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 upstream se hai effettuato l'accesso alla dashboard di WordPress.

Una volta entrati 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.

Trova il modulo Riepilogo 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 "Riepilogo" e quindi fare clic su Invio per trovare e aggiungere automaticamente il modulo di testo descrittivo! Una volta aggiunto il modulo, sarai accolto con l'elenco delle opzioni del modulo. Queste opzioni sono suddivise in tre gruppi principali: Contenuto , Design et avanzato .

caso d'uso per elencare i servizi dell'azienda sulla home page

Poiché il modulo Riepilogo combina immagini e testo per mostrare alcune funzionalità, puoi utilizzarlo per aggiungere un elenco dei servizi della tua azienda alla tua home page. Il modulo Blurb ti consente anche di trasformare la tua immagine / icona e titolo in un collegamento alla tua pagina di servizio. Per questo esempio, userò il modulo Blurb per aggiungere quattro servizi in primo piano a una home page.

Per aggiungere tutti e quattro i Blurb alla tua pagina, utilizza il visual builder per aggiungere una sezione standard con una riga di quattro colonne. Quindi aggiungi un modulo Blurb alla prima colonna della tua riga.

Aggiorna le impostazioni di Blurb con quanto segue:

Opzioni di contenuto

Titolo: [inserire il titolo del servizio]
Contenuto: [inserire una breve descrizione del servizio]
URL: [aggiungi un URL alla pagina del servizio]
Usa l'icona: SI
Icona: [seleziona un'icona che illustra il tuo servizio]

Opzioni di design

Icon Color: # 42bb99 (crea il colore che si abbina al design del sito)
Usa l'icona Dimensione carattere: SÌ
Dimensione carattere icona: 68px (regola la dimensione dell'icona)
Orientamento del testo: Centro -
Dimensione carattere della testa: 24px
Dimensione carattere: 18 px
Altezza riga corpo: 1.5em

Ora il tuo primo testo introduttivo è finito.

Ora duplica il modulo Riepilogo che hai appena creato tre volte e trascina ciascuno dei riepiloghi duplicati sulle altre tre colonne. Poiché le impostazioni di progettazione sono state integrate nei moduli duplicati, tutto ciò che devi fare è modificare il file contenuto (intestazione, contenuto, icona, URL, ecc.) e modifica i colori per adattarli a ciascuno dei tuoi servizi.

Opzioni di contenuto di riepilogo

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 sarà sempre in questa scheda.

titolo

Assegna al tuo testo un titolo che apparirà sopra il testo in uno stile di testo in grassetto. L'opzione URL situata sotto il campo Titolo ti consentirà di rendere il tuo titolo un collegamento ipertestuale.

Contenuto

Questo campo è dove puoi inserire il contenuto del corpo del tuo testo. Blurb Text coprirà anche l'intera larghezza della colonna fino a 550 px.

URL

Inserisci un URL web valido in questo campo per trasformare il tuo titolo Blurb in un link. Lasciando vuoto questo campo, il titolo verrà lasciato come elemento statico.

URL di apertura

Qui puoi scegliere se il tuo link si aprirà o meno in una nuova finestra.

Usa l'icona

Quando utilizzi Blurbs, puoi scegliere di utilizzare un'icona o un'immagine con il tuo testo. Se selezioni "Sì" per l'opzione "Usa icona", ti verranno offerte le seguenti opzioni per personalizzare la tua icona. Se non scegli di utilizzare un'icona, ti verrà chiesto di caricare un'immagine.

icona

Se hai scelto "Sì" per l'impostazione "Usa icona", apparirà questa opzione. Questa opzione ti presenta un elenco di icone disponibili che puoi utilizzare con il tuo blurb. Basta fare clic sull'icona che si desidera utilizzare e apparirà nel testo.

Immagine

Se non hai scelto di utilizzare un'icona, apparirà questa impostazione. Inserisci qui un URL di immagine valido o scegli / carica un'immagine tramite la libreria multimediale di WordPress. Le immagini nel modulo Riepilogo appaiono sempre centrate nelle colonne e si estendono per l'intera larghezza della colonna fino a 550 px. Tuttavia, la tua immagine non sarà mai più grande della sua dimensione di caricamento originale. L'altezza dell'immagine di presentazione è determinata dalle proporzioni dell'immagine originale. Si consiglia quindi di posizionare tutte le immagini di presentazione alla stessa altezza se le si affiancano.

Colore di sfondo

Definisci un colore di sfondo personalizzato per il tuo modulo o lascia vuoto per utilizzare il colore predefinito.

Immagine di sfondo

Se impostata, questa immagine verrà utilizzata come sfondo per questo modulo. Per rimuovere un'immagine di sfondo, è sufficiente rimuovere l'URL dal campo Impostazioni. Le immagini di sfondo appariranno sopra i colori di sfondo, il che significa che il colore di sfondo non sarà visibile quando viene applicata un'immagine di sfondo.

Etichetta amministrativa

Questo cambierà l'etichetta del modulo nel generatore per una facile identificazione. Quando si utilizza la visualizzazione WireFrame in Visual Builder, queste etichette appariranno nel blocco del modulo dell'interfaccia di Divi Builder.

Opzioni di progettazione del modulo di riepilogo

Nella scheda Design, troverai tutte le opzioni di stile del modulo, come caratteri, colori, dimensioni e spaziatura. Questa scheda ti consente di modificare l'aspetto del tuo modulo. Ogni modulo Divi ha un lungo elenco di impostazioni di progettazione che puoi utilizzare per modificare praticamente qualsiasi cosa.

Colore dell'icona

Se hai scelto "Sì" per l'impostazione "Usa icona", apparirà questa opzione. Questa opzione ti consente di personalizzare il colore della tua icona. Per impostazione predefinita, le icone sono impostate sul colore principale del tema.

Icona Cerchio

Se hai scelto "Sì" per l'impostazione "Usa icona", apparirà questa opzione. Questa opzione ti consente di posizionare la tua icona in un cerchio colorato. Se selezioni "sì" per questa impostazione, ti verranno offerte ulteriori opzioni per personalizzare il colore e il bordo del tuo cerchio.

Colore del cerchio

Se hai scelto "Sì" per l'impostazione "Icona cerchio", questa opzione apparirà. Qui puoi scegliere un colore da usare per il tuo cerchio. Questo colore è indipendente dal colore dell'icona selezionata in precedenza. La tua icona, nel suo colore, apparirà all'interno di un cerchio con il colore che selezioni qui.

Mostra il bordo del cerchio

Se hai scelto "Sì" per l'impostazione "Icona cerchio", questa opzione apparirà. Questa opzione ti consente di attivare un bordo per il tuo cerchio. Se questa opzione è selezionata, verrà visualizzata un'opzione aggiuntiva per selezionare il colore del bordo.

Colore del bordo del cerchio

Se hai scelto "Sì" per l'impostazione "Mostra bordo cerchio", questa opzione apparirà. Qui puoi regolare il colore del bordo del cerchio.

Posizionamento di immagini / icone

Qui puoi scegliere la posizione della tua immagine/icona. Può apparire sopra il testo oa sinistra del testo. Posizionando l'immagine/icona a sinistra del testo, l'immagine sarà più piccola rispetto a se posizionata in alto.

Usa la dimensione del carattere dell'icona

Se questa opzione è abilitata, puoi inserire una dimensione personalizzata per l'icona visualizzata sopra o due a sinistra del tuo blurb.

Colore del testo

Se il tuo blurb è posizionato su uno sfondo scuro, il colore del testo dovrebbe essere impostato su "Scuro". Al contrario, se il tuo blurb è posizionato su uno sfondo chiaro, il colore del testo dovrebbe essere impostato su "Chiaro".

Orientamento del testo

Questo menu a discesa consente di specificare l'orientamento del testo da allineare a sinistra, centrare o giustificare a destra.

Carattere dell'intestazione

Puoi modificare il carattere dell'intestazione selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri alimentati 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 dell'intestazione

Qui puoi regolare la dimensione del testo dell'intestazione. Puoi trascinare il cursore dell'intervallo per aumentare o diminuire la dimensione del testo, oppure puoi inserire direttamente il valore della dimensione del testo desiderato 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 della tua dimensione per cambiare il tipo di unità.

Colore del testo dell'intestazione

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore della tua intestazione, scegli il colore desiderato dal selettore di colori usando questa opzione.

Spaziatura delle lettere di intestazione

La spaziatura delle lettere influisce sullo spazio tra ogni lettera. Se si desidera aumentare lo spazio tra ogni lettera del testo dell'intestazione, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata 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 della tua dimensione per cambiare il tipo di unità.

Altezza riga di intestazione

L'altezza della riga influisce sullo spazio tra ogni riga del testo dell'intestazione. Se desideri aumentare lo spazio tra ogni riga, usa il cursore dell'intervallo per regolare lo spazio o inserisci la dimensione della spaziatura desiderata in il 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 della tua dimensione per cambiare il tipo di unità.

Carattere del corpo

È possibile modificare il carattere del corpo selezionando il carattere desiderato dal menu a discesa. Divi viene fornito con dozzine di fantastici caratteri alimentati 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 corpo

Qui puoi regolare la dimensione del testo del tuo corpo. Puoi trascinare il cursore dell'intervallo per aumentare o diminuire la dimensione del testo, oppure puoi inserire direttamente il valore della dimensione del testo desiderato 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 della tua dimensione per cambiare il tipo di unità.

Colore del testo del corpo

Per impostazione predefinita, tutti i colori del testo in Divi vengono visualizzati in bianco o grigio scuro. Se vuoi cambiare il colore del tuo corpo del testo, scegli il colore desiderato dal selettore di colori usando questa opzione.

Spaziatura delle lettere del corpo

La spaziatura tra le lettere influisce sullo spazio tra ogni lettera. Se vuoi aumentare lo spazio tra ogni lettera del tuo corpo di 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 della tua dimensione per cambiare il tipo di unità.

Altezza della linea del corpo

L'altezza della riga influisce sullo spazio tra ogni riga del corpo del testo. Se si desidera aumentare lo spazio tra ogni riga, utilizzare il dispositivo di scorrimento dell'intervallo per regolare lo spazio o immettere la dimensione della spaziatura desiderata 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 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 input a destra del dispositivo di scorrimento. Supporta 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, tra cui: solido, punteggiato, punteggiato, doppio, scanalatura, cresta, inserto e inizio. Seleziona lo stile che desideri dal menu a discesa per applicarlo al bordo.

Larghezza massima dell'immagine

L'applicazione di un valore di larghezza massima qui limiterà la larghezza dell'immagine di presentazione. Ciò riguarda solo i blurb che non sono in modalità icona.

Margine personalizzato

Il margine è lo spazio aggiunto all'esterno del modulo, tra il modulo e l'elemento successivo sopra, sotto oa destra ea sinistra di esso. È possibile aggiungere valori di margine personalizzati a uno qualsiasi dei quattro lati del modulo. Per rimuovere un 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

L'imbottitura è 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 un 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.

Modulo di riepilogo opzioni 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

Immettere le classi CSS opzionali da utilizzare per questo modulo. Una classe CSS può essere utilizzata per creare uno stile CSS personalizzato. Puoi aggiungere più classi, separate da uno spazio. Queste classi possono essere utilizzate nel tuo Tema Divi Child o nel CSS personalizzato che aggiungi alla tua pagina o al tuo file 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 elemento interno del modulo. Nella sezione CSS personalizzato, troverai un campo di testo in cui puoi aggiungere CSS direttamente a ciascun elemento. Le voci CSS in queste impostazioni sono già incorporate con i tag di stile. Quindi devi solo inserire regole CSS separate da punto e virgola.

Animazione di immagini / icone

Questo controlla la direzione dell'animazione di caricamento lento.

Testo ALT dall'immagine

Se non hai scelto di utilizzare un'icona, apparirà questa impostazione. Altro testo fornisce tutte le informazioni necessarie se l'immagine non viene caricata, visualizzata correttamente o in qualsiasi altra situazione in cui un utente non può vedere l'immagine. Permette inoltre di leggere e riconoscere l'immagine dai motori di ricerca.

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. Questo è utile se vuoi usare mod differenti su dispositivi differenti o se vuoi semplificare il design mobile eliminando alcuni elementi dalla pagina.

Questo è tutto per questo tutorial. Ci auguriamo di averti mostrato come utilizzare il modulo di riepilogo su Divi.